Skip to content

Commit 02f1323

Browse files
CodeDeadCodeDead
committed
Placed FAB's in a more appropriate position, can generate cards for the vault content and building blocks for some of the user actions have been added
1 parent 66a823d commit 02f1323

File tree

11 files changed

+262
-55
lines changed

11 files changed

+262
-55
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"react-router-dom": "^6.5.0",
1919
"react-scripts": "^5.0.1",
2020
"react-virtualized": "^9.22.3",
21+
"uuid": "^9.0.0",
2122
"web-vitals": "^3.1.0"
2223
},
2324
"scripts": {
@@ -49,7 +50,7 @@
4950
"devDependencies": {
5051
"@tauri-apps/cli": "^1.2.2",
5152
"cross-env": "^7.0.3",
52-
"eslint": "^8.29.0",
53+
"eslint": "^8.30.0",
5354
"eslint-config-airbnb": "^19.0.4",
5455
"eslint-plugin-import": "^2.26.0",
5556
"eslint-plugin-jsx-a11y": "^6.6.1",

‎src/components/VaultCard/index.jsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import Card from '@mui/material/Card';
3+
import CardContent from '@mui/material/CardContent';
4+
import CardActions from '@mui/material/CardActions';
5+
import Button from '@mui/material/Button';
6+
import Typography from '@mui/material/Typography';
7+
8+
const VaultCard = ({
9+
id, title, description, url, openLabel, editLabel,
10+
deleteLabel, onClick, onEdit, onDelete,
11+
}) => {
12+
/**
13+
* Open the URL
14+
*/
15+
const open = () => {
16+
onClick(url);
17+
};
18+
19+
/**
20+
* Edit the password
21+
*/
22+
const edit = () => {
23+
onEdit(id);
24+
};
25+
26+
/**
27+
* Delete the password from the vault
28+
*/
29+
const del = () => {
30+
onDelete(id);
31+
};
32+
33+
return (
34+
<Card>
35+
<CardContent>
36+
<Typography variant="h5" component="div">
37+
{title}
38+
</Typography>
39+
<Typography variant="body2">
40+
{description}
41+
</Typography>
42+
</CardContent>
43+
<CardActions>
44+
{url && onClick ? (
45+
<Button
46+
size="small"
47+
onClick={open}
48+
>
49+
{openLabel}
50+
</Button>
51+
) : null}
52+
{onEdit ? (
53+
<Button
54+
size="small"
55+
onClick={edit}
56+
>
57+
{editLabel}
58+
</Button>
59+
) : null}
60+
{onDelete ? (
61+
<Button
62+
size="small"
63+
onClick={del}
64+
>
65+
{deleteLabel}
66+
</Button>
67+
) : null}
68+
</CardActions>
69+
</Card>
70+
);
71+
};
72+
73+
export default VaultCard;

‎src/languages/de_de.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "Neu",
8888
"save": "Speichern",
8989
"createVault": "Tresor erstellen",
90-
"decryptionKey": "Entschlüsselungsschlüssel"
90+
"decryptionKey": "Entschlüsselungsschlüssel",
91+
"edit": "Bearbeiten",
92+
"delete": "Löschen"
9193
}

‎src/languages/en_us.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "New",
8888
"save": "Save",
8989
"createVault": "Create vault",
90-
"decryptionKey": "Decryption key"
90+
"decryptionKey": "Decryption key",
91+
"edit": "Edit",
92+
"delete": "Delete"
9193
}

‎src/languages/fr_fr.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "Nouveau",
8888
"save": "Enregistrer",
8989
"createVault": "Créer un coffre-fort",
90-
"decryptionKey": "Clé de déchiffrement"
90+
"decryptionKey": "Clé de déchiffrement",
91+
"edit": "Modifier",
92+
"delete": "Supprimer"
9193
}

‎src/languages/jp_jp.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "新しい",
8888
"save": "セーブ",
8989
"createVault": "金庫を作成する",
90-
"decryptionKey": "復号キー"
90+
"decryptionKey": "復号キー",
91+
"edit": "編集",
92+
"delete": "削除"
9193
}

‎src/languages/nl_nl.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "Nieuw",
8888
"save": "Opslaan",
8989
"createVault": "Kluis aanmaken",
90-
"decryptionKey": "Decryptie sleutel"
90+
"decryptionKey": "Decryptie sleutel",
91+
"edit": "Bewerken",
92+
"delete": "Verwijderen"
9193
}

‎src/languages/ru_ru.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "Новый",
8888
"save": "Сохранить",
8989
"createVault": "Создать сейф",
90-
"decryptionKey": "Ключ расшифровки"
90+
"decryptionKey": "Ключ расшифровки",
91+
"edit": "Редактировать",
92+
"delete": "Удалить"
9193
}

‎src/languages/zh_cn.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,7 @@
8787
"new": "新建",
8888
"save": "保存",
8989
"createVault": "创建保险库",
90-
"decryptionKey": "解密密钥"
90+
"decryptionKey": "解密密钥",
91+
"edit": "编辑",
92+
"delete": "删除"
9193
}

‎src/routes/Vault/index.jsx‎

Lines changed: 86 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,20 @@ import FileOpenIcon from '@mui/icons-material/FileOpen';
88
import NoteAddIcon from '@mui/icons-material/NoteAdd';
99
import SaveIcon from '@mui/icons-material/Save';
1010
import { MainContext } from '../../contexts/MainContextProvider';
11-
import { setPageIndex } from '../../reducers/MainReducer/Actions';
11+
import { openWebSite, setPageIndex } from '../../reducers/MainReducer/Actions';
1212
import { VaultContext } from '../../contexts/VaultContextProvider';
1313
import CreateVaultDialog from '../../components/CreateVaultDialog';
14+
import { setVault } from '../../reducers/VaultReducer/Actions';
15+
import VaultCard from '../../components/VaultCard';
1416

1517
const Vault = () => {
1618
const [state, d1] = useContext(MainContext);
17-
const [vaultState] = useContext(VaultContext);
19+
const [vaultState, d3] = useContext(VaultContext);
1820

1921
const language = state.languages[state.languageIndex];
2022
const { vault } = vaultState;
2123

24+
const [phrase, setPhrase] = useState('');
2225
const [createDialogOpen, setCreateDialogOpen] = useState(false);
2326

2427
/**
@@ -29,13 +32,54 @@ const Vault = () => {
2932
if (!key || key.length === 0) {
3033
return;
3134
}
32-
console.log(key);
35+
setPhrase(key);
36+
d3(setVault([]));
37+
};
38+
39+
/**
40+
* Open a password URL
41+
* @param url The URL that needs to be opened
42+
*/
43+
const openPassword = (url) => {
44+
openWebSite(url);
45+
};
46+
47+
/**
48+
* Delete a password from the vault
49+
* @param id The ID of the password
50+
*/
51+
const deletePassword = (id) => {
52+
const newVault = JSON.parse(JSON.stringify(vault)).filter((p) => p.id !== id);
53+
d3(setVault(newVault));
3354
};
3455

3556
useEffect(() => {
3657
d1(setPageIndex(4));
3758
}, []);
3859

60+
const gridItems = vault && vault.length > 0 ? vault.map((item) => (
61+
<Grid
62+
key={item.id}
63+
item
64+
xs={12}
65+
md={4}
66+
lg={3}
67+
>
68+
<VaultCard
69+
id={item.id}
70+
title={item.title}
71+
description={item.description}
72+
url={item.url}
73+
openLabel={language.open}
74+
editLabel={language.edit}
75+
deleteLabel={language.delete}
76+
onClick={openPassword}
77+
onEdit={() => {}}
78+
onDelete={deletePassword}
79+
/>
80+
</Grid>
81+
)) : null;
82+
3983
return (
4084
<Container>
4185
<Grid container spacing={2}>
@@ -44,47 +88,46 @@ const Vault = () => {
4488
{language.vault}
4589
</Typography>
4690
</Grid>
47-
<Grid item xs={12} md={12} lg={12}>
48-
<Box sx={{ '& > :not(style)': { m: 1 } }}>
49-
<Fab
50-
color="primary"
51-
aria-label={language.open}
52-
sx={{
53-
position: 'absolute',
54-
bottom: 16,
55-
right: 16,
56-
}}
57-
>
58-
<FileOpenIcon />
59-
</Fab>
60-
<Fab
61-
color="primary"
62-
aria-label={language.new}
63-
sx={{
64-
position: 'absolute',
65-
bottom: 16,
66-
right: 84,
67-
}}
68-
onClick={() => setCreateDialogOpen(true)}
69-
>
70-
<NoteAddIcon />
71-
</Fab>
72-
{vault ? (
73-
<Fab
74-
color="primary"
75-
aria-label={language.save}
76-
sx={{
77-
position: 'absolute',
78-
bottom: 16,
79-
right: 152,
80-
}}
81-
>
82-
<SaveIcon />
83-
</Fab>
84-
) : null}
85-
</Box>
86-
</Grid>
91+
{gridItems}
8792
</Grid>
93+
<Box sx={{ '& > :not(style)': { m: 1 } }}>
94+
<Fab
95+
color="primary"
96+
aria-label={language.open}
97+
sx={{
98+
position: 'absolute',
99+
bottom: 16,
100+
right: 16,
101+
}}
102+
>
103+
<FileOpenIcon />
104+
</Fab>
105+
<Fab
106+
color="primary"
107+
aria-label={language.new}
108+
sx={{
109+
position: 'absolute',
110+
bottom: 16,
111+
right: 84,
112+
}}
113+
onClick={() => setCreateDialogOpen(true)}
114+
>
115+
<NoteAddIcon />
116+
</Fab>
117+
{vault ? (
118+
<Fab
119+
color="primary"
120+
aria-label={language.save}
121+
sx={{
122+
position: 'absolute',
123+
bottom: 16,
124+
right: 152,
125+
}}
126+
>
127+
<SaveIcon />
128+
</Fab>
129+
) : null}
130+
</Box>
88131
<CreateVaultDialog
89132
open={createDialogOpen}
90133
onClose={() => setCreateDialogOpen(false)}

0 commit comments

Comments
 (0)