Require double key entry when creating a vault

package.json

@@ -7,7 +7,7 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.2",
+    "@mui/material": "^5.11.3",
     "@shopify/react-web-worker": "^5.0.6",
     "@tauri-apps/api": "^1.2.0",
     "@testing-library/jest-dom": "^5.16.5",

src/components/EncryptionKeyDialog/index.jsx

@@ -5,19 +5,24 @@ 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 Grid from '@mui/material/Grid';
 import { MainContext } from '../../contexts/MainContextProvider';
 
-const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
+const EncryptionKeyDialog = ({
+  open, onAccept, onClose, verify,
+}) => {
   const [state] = useContext(MainContext);
   const language = state.languages[state.languageIndex];
 
   const [key, setKey] = useState('');
+  const [key2, setKey2] = useState('');
 
   /**
    * Close the dialog
    */
   const handleClose = () => {
     setKey('');
+    setKey2('');
     if (onClose) {
       onClose();
     }
@@ -30,6 +35,9 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
     if (key.length === 0) {
       return;
     }
+    if (verify && key !== key2) {
+      return;
+    }
     if (onAccept) {
       onAccept(key);
     }
@@ -44,6 +52,14 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
     setKey(e.target.value);
   };
 
+  /**
+   * Change the verification key value
+   * @param e The event argument
+   */
+  const handleVerifyChange = (e) => {
+    setKey2(e.target.value);
+  };
+
   /**
    * Handle the key up event
    * @param e The event argument
@@ -64,18 +80,36 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
         {language.decryptionKey}
       </DialogTitle>
       <DialogContent>
-        <TextField
-          sx={{ mt: 2 }}
-          value={key}
-          type="password"
-          error={key.length === 0}
-          label={language.decryptionKey}
-          onChange={handleChange}
-          onKeyUp={handleKeyUp}
-          autoComplete="off"
-          variant="outlined"
-          fullWidth
-        />
+        <Grid container spacing={2} sx={{ mt: 2 }}>
+          <Grid item xs={12} md={12} lg={12}>
+            <TextField
+              value={key}
+              type="password"
+              error={key.length === 0 || (verify && key !== key2)}
+              label={language.decryptionKey}
+              onChange={handleChange}
+              onKeyUp={handleKeyUp}
+              autoComplete="off"
+              variant="outlined"
+              fullWidth
+            />
+          </Grid>
+          {verify ? (
+            <Grid item xs={12} md={12} lg={12}>
+              <TextField
+                value={key2}
+                type="password"
+                error={key2.length === 0 || (verify && key !== key2)}
+                label={language.decryptionKey}
+                onChange={handleVerifyChange}
+                onKeyUp={handleKeyUp}
+                autoComplete="off"
+                variant="outlined"
+                fullWidth
+              />
+            </Grid>
+          ) : null}
+        </Grid>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>
@@ -84,7 +118,7 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
         <Button
           onClick={accept}
           autoFocus
-          disabled={key.length === 0}
+          disabled={key.length === 0 || (verify && key !== key2)}
         >
           {language.ok}
         </Button>

src/routes/Vault/index.jsx

@@ -414,6 +414,7 @@ const Vault = () => {
       </Box>
       <EncryptionKeyDialog
         open={keyDialogOpen}
+        verify={keyAction === 'create'}
         onClose={closeEncryptionKeyDialog}
         onAccept={acceptKey}
       />

yarn.lock

@@ -2295,10 +2295,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^5.11.2":
-  version: 5.11.2
-  resolution: "@mui/core-downloads-tracker@npm:5.11.2"
-  checksum: 1f2c45ef37b13829fa2331811548cdd3f3cb94e384513db8820533570c8ef4569e5f835f8757a48d783553f44af3f4ed2f93d402891e27718fcc58e16129a874
+"@mui/core-downloads-tracker@npm:^5.11.3":
+  version: 5.11.3
+  resolution: "@mui/core-downloads-tracker@npm:5.11.3"
+  checksum: 0bc6ad3e2bc9170cf2fc1de749c12c1255ccf6fe17b9df047fa6a69d3a1965413a891b01dfef2939f0af7273693479b08ebd85ef3cc2e7c5e5750eced6ae15d7
   languageName: node
   linkType: hard
 
@@ -2318,13 +2318,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^5.11.2":
-  version: 5.11.2
-  resolution: "@mui/material@npm:5.11.2"
+"@mui/material@npm:^5.11.3":
+  version: 5.11.3
+  resolution: "@mui/material@npm:5.11.3"
   dependencies:
     "@babel/runtime": ^7.20.7
     "@mui/base": 5.0.0-alpha.112
-    "@mui/core-downloads-tracker": ^5.11.2
+    "@mui/core-downloads-tracker": ^5.11.3
     "@mui/system": ^5.11.2
     "@mui/types": ^7.2.3
     "@mui/utils": ^5.11.2
@@ -2347,7 +2347,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 4f2baa4b4d8f7842b081e9e919172020f7055e33c24af36c5a458eac1a76ff3e896651fdf21daa523a68ac0bfb3670864c1b4dec9fae6d8fadf2b602f14f95ea
+  checksum: aa96078c51367315b9452a4a4fc7fe16aba3338bf5a8455f9c35d9f290d7d50c47e0af85124f0dbbbfd86c99b02d82039f0b923e98d93f7a04d409ba0ac41beb
   languageName: node
   linkType: hard
 
@@ -3870,7 +3870,7 @@ __metadata:
     "@emotion/styled": ^11.10.5
     "@fontsource/roboto": ^4.5.8
     "@mui/icons-material": ^5.11.0
-    "@mui/material": ^5.11.2
+    "@mui/material": ^5.11.3
     "@shopify/react-web-worker": ^5.0.6
     "@tauri-apps/api": ^1.2.0
     "@tauri-apps/cli": ^1.2.2