Added ability to edit passwords in the vault

Author: CodeDead

src/components/EditPasswordDialog/index.jsx

@@ -0,0 +1,106 @@
+import React, { useContext, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import TextField from '@mui/material/TextField';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import { MainContext } from '../../contexts/MainContextProvider';
+
+const EditPasswordDialog = ({
+  data, open, onSave, onClose,
+}) => {
+  const [state] = useContext(MainContext);
+  const language = state.languages[state.languageIndex];
+
+  const [title, setTitle] = useState(data && data.title ? data.title : '');
+  const [description, setDescription] = useState(data && data.description ? data.description : '');
+  const [url, setUrl] = useState(data && data.url ? data.url : '');
+  const [password, setPassword] = useState(data && data.password ? data.password : '');
+
+  /**
+   * Close the dialog
+   */
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  /**
+   * Create a new vault
+   */
+  const save = () => {
+    if (onSave) {
+      onSave(data.id, title, description, url, password);
+    }
+    handleClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="edit-vault-dialog-title"
+    >
+      <DialogTitle id="edit-vault-dialog-title">
+        {language.editPassword}
+      </DialogTitle>
+      <DialogContent>
+        <TextField
+          sx={{ mt: 2 }}
+          value={title}
+          error={title.length === 0}
+          label={language.title}
+          onChange={(e) => setTitle(e.target.value)}
+          autoComplete="off"
+          variant="outlined"
+          fullWidth
+        />
+        <TextField
+          sx={{ mt: 2 }}
+          value={description}
+          label={language.description}
+          onChange={(e) => setDescription(e.target.value)}
+          autoComplete="off"
+          variant="outlined"
+          fullWidth
+        />
+        <TextField
+          sx={{ mt: 2 }}
+          value={url}
+          label={language.url}
+          onChange={(e) => setUrl(e.target.value)}
+          autoComplete="off"
+          variant="outlined"
+          fullWidth
+        />
+        <TextField
+          sx={{ mt: 2 }}
+          value={password}
+          type="password"
+          error={password.length === 0}
+          label={language.password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="off"
+          variant="outlined"
+          fullWidth
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>
+          {language.cancel}
+        </Button>
+        <Button
+          onClick={save}
+          autoFocus
+          disabled={password.length === 0 || title.length === 0}
+        >
+          {language.save}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default EditPasswordDialog;

src/languages/de_de.json

@@ -96,5 +96,6 @@
   "url": "URL",
   "add": "Hinzufügen",
   "search": "Suche",
-  "noResults": "Keine Ergebnisse"
+  "noResults": "Keine Ergebnisse",
+  "editPassword": "Passwort bearbeiten"
 }

src/languages/en_us.json

@@ -96,5 +96,6 @@
   "url": "URL",
   "add": "Add",
   "search": "Search",
-  "noResults": "No results"
+  "noResults": "No results",
+  "editPassword": "Edit password"
 }

src/languages/fr_fr.json

@@ -96,5 +96,6 @@
   "url": "URL",
   "add": "Ajouter",
   "search": "Rechercher",
-  "noResults": "Aucun résultat"
+  "noResults": "Aucun résultat",
+  "editPassword": "Modifier le mot de passe"
 }

src/languages/jp_jp.json

@@ -96,5 +96,6 @@
   "url": "URL",
   "add": "追加",
   "search": "サーチ",
-  "noResults": "結果がありません"
+  "noResults": "結果がありません",
+  "editPassword": "パスワードを編集する"
 }

src/languages/nl_nl.json

@@ -96,5 +96,6 @@
   "url": "URL",
   "add": "Toevoegen",
   "search": "Zoeken",
-  "noResults": "Geen resultaten"
+  "noResults": "Geen resultaten",
+  "editPassword": "Wachtwoord bewerken"
 }

src/languages/ru_ru.json

@@ -96,5 +96,6 @@
   "url": "URL",
   "add": "Добавить",
   "search": "Поиск",
-  "noResults": "Нет результатов"
+  "noResults": "Нет результатов",
+  "editPassword": "Изменить пароль"
 }

src/languages/zh_cn.json

@@ -96,5 +96,6 @@
   "url": "网址",
   "add": "添加",
   "search": "搜索",
-  "noResults": "无结果"
+  "noResults": "无结果",
+  "editPassword": "编辑密码"
 }

src/routes/Vault/index.jsx

@@ -19,6 +19,7 @@ import CreateVaultDialog from '../../components/CreateVaultDialog';
 import { saveVault, setVault } from '../../reducers/VaultReducer/Actions';
 import VaultCard from '../../components/VaultCard';
 import CreatePasswordDialog from '../../components/CreatePasswordDialog';
+import EditPasswordDialog from '../../components/EditPasswordDialog';
 
 const Vault = () => {
   const [state, d1] = useContext(MainContext);
@@ -31,6 +32,8 @@ const Vault = () => {
   const [search, setSearch] = useState('');
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [createPasswordDialogOpen, setCreatePasswordDialogOpen] = useState(false);
+  const [editPasswordDialogOpen, setEditPasswordDialogOpen] = useState(false);
+  const [editPasswordId, setEditPasswordId] = useState(null);
 
   /**
    * Create a new vault
@@ -84,6 +87,42 @@ const Vault = () => {
     d3(setVault(newVault));
   };
 
+  /**
+   * Open the edit password dialog
+   * @param id The ID of the password that needs to be edited
+   */
+  const openEditPasswordDialog = (id) => {
+    setEditPasswordId(id);
+    setEditPasswordDialogOpen(true);
+  };
+
+  /**
+   * Close the dialog to edit a password
+   */
+  const closeEditPasswordDialog = () => {
+    setEditPasswordId(null);
+    setEditPasswordDialogOpen(false);
+  };
+
+  /**
+   * Edit a password
+   * @param id The ID of the password
+   * @param title The new title
+   * @param description The new description
+   * @param url The new URL
+   * @param password The new password
+   */
+  const editPassword = (id, title, description, url, password) => {
+    const newVault = JSON.parse(JSON.stringify(vault));
+    newVault.filter((e) => e.id === id).forEach((e) => {
+      e.title = title;
+      e.description = description;
+      e.url = url;
+      e.password = password;
+    });
+    d3(setVault(newVault));
+  };
+
   useEffect(() => {
     d1(setPageIndex(4));
   }, []);
@@ -116,14 +155,16 @@ const Vault = () => {
             editLabel={language.edit}
             deleteLabel={language.delete}
             onClick={openPassword}
-            onEdit={() => {}}
+            onEdit={openEditPasswordDialog}
             onDelete={deletePassword}
           />
         </Grid>
       ));
     }
   }
 
+  const toEdit = vault && vault.length > 0 ? vault.filter((p) => p.id === editPasswordId)[0] : null;
+
   return (
     <Container>
       <Grid container spacing={2}>
@@ -212,6 +253,14 @@ const Vault = () => {
         onClose={() => setCreatePasswordDialogOpen(false)}
         onCreate={addPassword}
       />
+      {editPasswordDialogOpen && toEdit ? (
+        <EditPasswordDialog
+          open={editPasswordDialogOpen}
+          onClose={closeEditPasswordDialog}
+          onSave={editPassword}
+          data={toEdit}
+        />
+      ) : null}
     </Container>
   );
 };