Building blocks for a password vault

Author: CodeDead

package.json

@@ -15,7 +15,7 @@
     "@testing-library/user-event": "^14.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.5",
+    "react-router-dom": "^6.5.0",
     "react-scripts": "^5.0.1",
     "react-virtualized": "^9.22.3",
     "web-vitals": "^3.1.0"

src/components/App/index.jsx

@@ -30,6 +30,7 @@ const Generate = lazy(() => import('../../routes/Generate'));
 const About = lazy(() => import('../../routes/About'));
 const Settings = lazy(() => import('../../routes/Settings'));
 const Advisor = lazy(() => import('../../routes/Advisor'));
+const Vault = lazy(() => import('../../routes/Vault'));
 const NotFound = lazy(() => import('../../routes/NotFound'));
 
 const App = () => {
@@ -127,6 +128,8 @@ const App = () => {
                 <Route exact path="/advanced" element={<Advanced />} />
                 <Route exact path="/generate" element={<Generate />} />
                 <Route exact path="/advisor" element={<Advisor />} />
+                {/* eslint-disable-next-line no-underscore-dangle */}
+                {window.__TAURI__ ? (<Route exact path="/vault" element={<Vault />} />) : null}
                 <Route exact path="/settings" element={<Settings />} />
                 <Route exact path="/about" element={<About />} />
                 <Route path="*" element={<NotFound />} />

src/components/ClippedDrawer/index.jsx

@@ -15,6 +15,7 @@ import LightbulbIcon from '@mui/icons-material/Lightbulb';
 import InfoIcon from '@mui/icons-material/Info';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import FolderIcon from '@mui/icons-material/Folder';
 import { useNavigate } from 'react-router-dom';
 import { MainContext } from '../../contexts/MainContextProvider';
 import { openWebSite } from '../../reducers/MainReducer/Actions';
@@ -148,12 +149,36 @@ const ClippedDrawer = () => {
               {textVisible ? <ListItemText primary={language.advisor} /> : null}
             </ListItemButton>
           </ListItem>
+          {/* eslint-disable-next-line no-underscore-dangle */}
+          {window.__TAURI__ ? (
+            <ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
+              <ListItemButton
+                selected={pageIndex === 4}
+                onClick={() => navigate('/vault')}
+                sx={{
+                  minHeight: 48,
+                  justifyContent: textVisible ? 'initial' : 'center',
+                  px: 2.5,
+                }}
+              >
+                <ListItemIcon
+                  sx={{
+                    minWidth: textVisible ? null : 0,
+                    mr: textVisible ? null : 'auto',
+                  }}
+                >
+                  <FolderIcon />
+                </ListItemIcon>
+                {textVisible ? <ListItemText primary={language.vault} /> : null}
+              </ListItemButton>
+            </ListItem>
+          ) : null}
         </List>
         <Divider />
         <List>
           <ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
             <ListItemButton
-              selected={pageIndex === 4}
+              selected={pageIndex === 5}
               onClick={() => navigate('/settings')}
               sx={{
                 minHeight: 48,
@@ -197,7 +222,7 @@ const ClippedDrawer = () => {
           </ListItem>
           <ListItem disablePadding sx={{ display: textVisible ? 'block' : null }}>
             <ListItemButton
-              selected={pageIndex === 5}
+              selected={pageIndex === 6}
               onClick={() => navigate('/about')}
               sx={{
                 minHeight: 48,

src/components/CreateVaultDialog/index.jsx

@@ -0,0 +1,72 @@
+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 CreateVaultDialog = ({ open, onCreate, onClose }) => {
+  const [state] = useContext(MainContext);
+  const language = state.languages[state.languageIndex];
+
+  const [key, setKey] = useState('');
+
+  /**
+   * Close the dialog
+   */
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    setKey('');
+  };
+
+  /**
+   * Create a new vault
+   */
+  const create = () => {
+    if (onCreate) {
+      onCreate(key);
+    }
+    handleClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="create-vault-dialog-title"
+    >
+      <DialogTitle id="create-vault-dialog-title">
+        {language.createVault}
+      </DialogTitle>
+      <DialogContent>
+        <TextField
+          sx={{ mt: 2 }}
+          value={key}
+          error={key.length === 0}
+          label={language.decryptionKey}
+          onChange={(e) => setKey(e.target.value)}
+          autoComplete="off"
+          variant="outlined"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>
+          {language.cancel}
+        </Button>
+        <Button
+          onClick={create}
+          autoFocus
+          disabled={key.length === 0}
+        >
+          {language.ok}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CreateVaultDialog;

src/contexts/VaultContextProvider/index.jsx

@@ -0,0 +1,21 @@
+import React, { createContext, useReducer } from 'react';
+import VaultReducer from '../../reducers/PasswordReducer';
+
+const initState = {
+  vault: null,
+};
+
+export const VaultContext = createContext(initState);
+
+const VaultContextProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(VaultReducer, initState);
+
+  return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <VaultContext.Provider value={[state, dispatch]}>
+      {children}
+    </VaultContext.Provider>
+  );
+};
+
+export default VaultContextProvider;

src/index.jsx

@@ -9,13 +9,16 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import MainContextProvider from './contexts/MainContextProvider';
 import PasswordContextProvider from './contexts/PasswordContextProvider';
+import VaultContextProvider from './contexts/VaultContextProvider';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <MainContextProvider>
       <PasswordContextProvider>
-        <App />
+        <VaultContextProvider>
+          <App />
+        </VaultContextProvider>
       </PasswordContextProvider>
     </MainContextProvider>
   </React.StrictMode>,

src/languages/de_de.json

@@ -81,5 +81,11 @@
   "downloadApp": "Laden Sie die Desktop-Anwendung herunter",
   "languageSelector": "Sprachauswahl im Menü",
   "fixedMenu": "Festes Menü",
-  "runningLatestVersion": "Sie verwenden die neueste Version von Advanced PassGen!"
+  "runningLatestVersion": "Sie verwenden die neueste Version von Advanced PassGen!",
+  "vault": "Tresor",
+  "open": "Öffnen",
+  "new": "Neu",
+  "save": "Speichern",
+  "createVault": "Tresor erstellen",
+  "decryptionKey": "Entschlüsselungsschlüssel"
 }

src/languages/en_us.json

@@ -81,5 +81,11 @@
   "downloadApp": "Download the desktop application",
   "languageSelector": "Language selector in the top bar",
   "fixedMenu": "Fixed menu",
-  "runningLatestVersion": "You are using the latest version!"
+  "runningLatestVersion": "You are using the latest version!",
+  "vault": "Vault",
+  "open": "Open",
+  "new": "New",
+  "save": "Save",
+  "createVault": "Create vault",
+  "decryptionKey": "Decryption key"
 }

src/languages/fr_fr.json

@@ -81,5 +81,11 @@
   "downloadApp": "Télécharger l'application desktop",
   "languageSelector": "Sélecteur de langue dans la barre du haut",
   "fixedMenu": "Menu fixe",
-  "runningLatestVersion": "Vous utilisez la dernière version!"
+  "runningLatestVersion": "Vous utilisez la dernière version!",
+  "vault": "Coffre-fort",
+  "open": "Ouvrir",
+  "new": "Nouveau",
+  "save": "Enregistrer",
+  "createVault": "Créer un coffre-fort",
+  "decryptionKey": "Clé de déchiffrement"
 }

src/languages/jp_jp.json

@@ -81,5 +81,11 @@
   "downloadApp": "デスクトップ アプリケーションをダウンロードする",
   "languageSelector": "トップバーの言語セレクター",
   "fixedMenu": "固定メニュー",
-  "runningLatestVersion": "最新バージョンを実行しています。"
+  "runningLatestVersion": "最新バージョンを実行しています。",
+  "vault": "金庫",
+  "open": "開く",
+  "new": "新しい",
+  "save": "セーブ",
+  "createVault": "金庫を作成する",
+  "decryptionKey": "復号キー"
 }