Wallet: create forgot password page (#1367)

* create forgot password page

* navigate back

* add rust work

* pr update

nym-wallet/src/pages/auth/pages/confirm-mnemonic.tsx

@@ -16,7 +16,7 @@ export const ConfirmMnemonic = () => {
   }, [localMnemonic]);
 
   return (
-    <Stack spacing={2}>
+    <Stack spacing={2} sx={{ minWidth: '50%' }}>
       <Subtitle subtitle="Enter the mnemonic you wish to create a password for" />
       <MnemonicInput mnemonic={localMnemonic} onUpdateMnemonic={(mnc) => setLocalMnemonic(mnc)} error={error} />
       <Button

nym-wallet/src/pages/auth/pages/existing-account.tsx

@@ -22,7 +22,7 @@ export const ExistingAccount = () => {
           <Button color="inherit" onClick={() => navigate('/')}>
             Back
           </Button>
-          <Button color="info" onClick={() => navigate('/sign-in-mnemonic')}>
+          <Button color="info" onClick={() => navigate('/forgot-password')}>
             Forgot password?
           </Button>
         </Box>

nym-wallet/src/pages/auth/pages/forgot-password.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Stack, Typography } from '@mui/material';
+import { useSnackbar } from 'notistack';
+import { archiveWalletFile } from 'src/requests';
+import { Console } from 'src/utils/console';
+import { Subtitle } from '../components';
+
+export const ForgotPassword = () => {
+  const navigate = useNavigate();
+  const { enqueueSnackbar } = useSnackbar();
+  return (
+    <>
+      <Subtitle subtitle="Create a new password or sign in with mnemonic" />
+      <Stack spacing={2} sx={{ width: 300 }}>
+        <Button
+          variant="contained"
+          size="large"
+          onClick={async () => {
+            try {
+              await archiveWalletFile();
+            } catch (e) {
+              Console.error(e);
+              enqueueSnackbar('Failed to archive your existing wallet file', { variant: 'error' });
+            }
+            navigate('/confirm-mnemonic');
+          }}
+          fullWidth
+        >
+          Create a new password
+        </Button>
+        <Typography sx={{ textAlign: 'center', fontWeight: 600 }}>or</Typography>
+        <Button size="large" variant="contained" fullWidth onClick={() => navigate('/sign-in-mnemonic')}>
+          Sign in with mnemonic
+        </Button>
+        <Button color="inherit" onClick={() => navigate(-1)}>
+          Back
+        </Button>
+      </Stack>
+    </>
+  );
+};

nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx

@@ -18,7 +18,7 @@ export const SignInMnemonic = () => {
     setPasswordExists(hasPassword);
   };
 
-  const handlePageChange = (page: string) => {
+  const handlePageChange = (page: any) => {
     setError(undefined);
     navigate(page);
   };
@@ -31,14 +31,19 @@ export const SignInMnemonic = () => {
     <Stack spacing={2} alignItems="center" minWidth="50%">
       <Subtitle subtitle="Enter a mnemonic to sign in" />
       <FormControl fullWidth>
-        <form onSubmit={() => logIn({ type: 'mnemonic', value: mnemonic })}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            logIn({ type: 'mnemonic', value: mnemonic });
+          }}
+        >
           <Stack spacing={2}>
             <MnemonicInput mnemonic={mnemonic} onUpdateMnemonic={(mnc) => setMnemonic(mnc)} error={error} />
             <Button variant="contained" size="large" fullWidth type="submit">
               Sign in with mnemonic
             </Button>
             <Box display="flex" justifyContent={passwordExists ? 'center' : 'space-between'}>
-              <Button color="inherit" onClick={() => handlePageChange('/existing-account')}>
+              <Button color="inherit" onClick={() => handlePageChange(-1)}>
                 Back
               </Button>
               {!passwordExists && (

nym-wallet/src/pages/auth/pages/signin-password.tsx

@@ -14,7 +14,12 @@ export const SignInPassword = () => {
     <Stack spacing={2} alignItems="center" minWidth="50%">
       <Subtitle subtitle="Enter a password to sign in" />
       <FormControl fullWidth>
-        <form onSubmit={() => logIn({ type: 'password', value: password })}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            logIn({ type: 'password', value: password });
+          }}
+        >
           <Stack spacing={2}>
             <PasswordInput
               label="Enter password"
@@ -47,11 +52,11 @@ export const SignInPassword = () => {
                 color="info"
                 onClick={() => {
                   setError(undefined);
-                  navigate('/sign-in-mnemonic');
+                  navigate('/forgot-password');
                 }}
                 size="small"
               >
-                Forgotten password?
+                Forgot password?
               </Button>
             </Box>
           </Stack>

nym-wallet/src/requests/account.ts

@@ -38,5 +38,7 @@ export const removeAccount = async ({ password, accountName }: { password: strin
 
 export const listAccounts = async () => invokeWrapper<AccountEntry[]>('list_accounts');
 
+export const archiveWalletFile = async () => invokeWrapper<void>('archive_wallet_file');
+
 export const showMnemonicForAccount = async ({ password, accountName }: { password: string; accountName: string }) =>
   invokeWrapper<string>('show_mnemonic_for_account_in_password', { password, accountId: accountName });

nym-wallet/src/routes/auth.tsx

@@ -13,6 +13,7 @@ import {
   ConnectPassword,
 } from 'src/pages/auth/pages';
 import { ConfirmMnemonic } from 'src/pages/auth/pages/confirm-mnemonic';
+import { ForgotPassword } from 'src/pages/auth/pages/forgot-password';
 import { AuthTheme } from 'src/theme';
 
 export const AuthRoutes = () => (
@@ -29,6 +30,7 @@ export const AuthRoutes = () => (
           <Route path="/sign-in-password" element={<SignInPassword />} />
           <Route path="/confirm-mnemonic" element={<ConfirmMnemonic />} />
           <Route path="/connect-password" element={<ConnectPassword />} />
+          <Route path="/forgot-password" element={<ForgotPassword />} />
         </Routes>
       </AuthLayout>
     </AuthTheme>