Enter key will now be registered in multiple dialogs, added informational text to vault page

Author: CodeDead

src/components/CreatePasswordDialog/index.jsx

@@ -39,6 +39,16 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
     handleClose();
   };
 
+  /**
+   * Handle the key up event
+   * @param e The event argument
+   */
+  const handleKeyUp = (e) => {
+    if (e.key === 'Enter' && password.length > 0 && title.length > 0) {
+      create();
+    }
+  };
+
   return (
     <Dialog
       open={open}
@@ -55,6 +65,7 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
           error={title.length === 0}
           label={language.title}
           onChange={(e) => setTitle(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth
@@ -64,6 +75,7 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
           value={description}
           label={language.description}
           onChange={(e) => setDescription(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth
@@ -73,6 +85,7 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
           value={url}
           label={language.url}
           onChange={(e) => setUrl(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth
@@ -84,6 +97,7 @@ const CreatePasswordDialog = ({ open, onCreate, onClose }) => {
           error={password.length === 0}
           label={language.password}
           onChange={(e) => setPassword(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth

src/components/EditPasswordDialog/index.jsx

@@ -37,6 +37,16 @@ const EditPasswordDialog = ({
     handleClose();
   };
 
+  /**
+   * Handle the key up event
+   * @param e The event argument
+   */
+  const handleKeyUp = (e) => {
+    if (e.key === 'Enter' && password.length > 0 && title.length > 0) {
+      save();
+    }
+  };
+
   return (
     <Dialog
       open={open}
@@ -53,6 +63,7 @@ const EditPasswordDialog = ({
           error={title.length === 0}
           label={language.title}
           onChange={(e) => setTitle(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth
@@ -62,6 +73,7 @@ const EditPasswordDialog = ({
           value={description}
           label={language.description}
           onChange={(e) => setDescription(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth
@@ -71,6 +83,7 @@ const EditPasswordDialog = ({
           value={url}
           label={language.url}
           onChange={(e) => setUrl(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth
@@ -82,6 +95,7 @@ const EditPasswordDialog = ({
           error={password.length === 0}
           label={language.password}
           onChange={(e) => setPassword(e.target.value)}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth

src/components/EncryptionKeyDialog/index.jsx

@@ -17,10 +17,10 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
    * Close the dialog
    */
   const handleClose = () => {
+    setKey('');
     if (onClose) {
       onClose();
     }
-    setKey('');
   };
 
   /**
@@ -36,6 +36,24 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
     handleClose();
   };
 
+  /**
+   * Change the key value
+   * @param e The event argument
+   */
+  const handleChange = (e) => {
+    setKey(e.target.value);
+  };
+
+  /**
+   * Handle the key up event
+   * @param e The event argument
+   */
+  const handleKeyUp = (e) => {
+    if (e.key === 'Enter') {
+      accept();
+    }
+  };
+
   return (
     <Dialog
       open={open}
@@ -52,7 +70,8 @@ const EncryptionKeyDialog = ({ open, onAccept, onClose }) => {
           type="password"
           error={key.length === 0}
           label={language.decryptionKey}
-          onChange={(e) => setKey(e.target.value)}
+          onChange={handleChange}
+          onKeyUp={handleKeyUp}
           autoComplete="off"
           variant="outlined"
           fullWidth

src/languages/de_de.json

@@ -97,5 +97,6 @@
   "search": "Suche",
   "editPassword": "Passwort bearbeiten",
   "close": "Schließen",
-  "copy": "Kopieren"
+  "copy": "Kopieren",
+  "createOrOpenVault": "Erstellen oder öffnen Sie einen Tresor"
 }

src/languages/en_us.json

@@ -97,5 +97,6 @@
   "search": "Search",
   "editPassword": "Edit password",
   "close": "Close",
-  "copy": "Copy"
+  "copy": "Copy",
+  "createOrOpenVault": "Create or open a vault"
 }

src/languages/fr_fr.json

@@ -97,5 +97,6 @@
   "search": "Rechercher",
   "editPassword": "Modifier le mot de passe",
   "close": "Fermer",
-  "copy": "Copier"
+  "copy": "Copier",
+  "createOrOpenVault": "Créer ou ouvrir un coffre-fort"
 }

src/languages/jp_jp.json

@@ -97,5 +97,6 @@
   "search": "サーチ",
   "editPassword": "パスワードを編集する",
   "close": "閉じる",
-  "copy": "コピー"
+  "copy": "コピー",
+  "createOrOpenVault": "金庫を作成または開く"
 }

src/languages/nl_nl.json

@@ -97,5 +97,6 @@
   "search": "Zoeken",
   "editPassword": "Wachtwoord bewerken",
   "close": "Sluiten",
-  "copy": "Kopiëren"
+  "copy": "Kopiëren",
+  "createOrOpenVault": "Maak een nieuwe kluis of open een bestaande kluis"
 }

src/languages/ru_ru.json

@@ -97,5 +97,6 @@
   "search": "Поиск",
   "editPassword": "Изменить пароль",
   "close": "Закрыть",
-  "copy": "Копировать"
+  "copy": "Копировать",
+  "createOrOpenVault": "Создать или открыть сейф"
 }

src/languages/zh_cn.json

@@ -97,5 +97,6 @@
   "search": "搜索",
   "editPassword": "编辑密码",
   "close": "关闭",
-  "copy": "复制"
+  "copy": "复制",
+  "createOrOpenVault": "创建或打开保险库"
 }