Remove password strength requirements (#582)

* Remove password strength requirements * Use a <form> for importing too * Remove unnecessary Skip button * Fix validation on login * Remove password requirements from the restore-password flow
penumbra-zone · Feb 21, 2024 · 63b56e3 · 63b56e3
1 parent c7fbd03
commit 63b56e3
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 66 deletions.
diff --git a/apps/extension/src/routes/page/onboarding/import.tsx b/apps/extension/src/routes/page/onboarding/import.tsx
@@ -14,11 +14,17 @@ import { importSelector } from '../../../state/seed-phrase/import';
 import { usePageNav } from '../../../utils/navigate';
 import { PagePath } from '../paths';
 import { ImportForm } from '../../../shared';
+import { FormEvent, MouseEvent } from 'react';
 
 export const ImportSeedPhrase = () => {
   const navigate = usePageNav();
   const { phrase, phraseIsValid } = useStore(importSelector);
 
+  const handleSubmit = (event: MouseEvent | FormEvent) => {
+    event.preventDefault();
+    navigate(PagePath.SET_PASSWORD);
+  };
+
   return (
     <FadeTransition>
       <BackIcon className='float-left mb-4' onClick={() => navigate(-1)} />
@@ -29,20 +35,22 @@ export const ImportSeedPhrase = () => {
             Feel free to paste it into the first box and the rest will fill
           </CardDescription>
         </CardHeader>
-        <CardContent className='mt-6 grid gap-4'>
-          <ImportForm />
-          <Button
-            className='mt-4'
-            variant='gradient'
-            disabled={!phrase.every(w => w.length > 0) || !phraseIsValid()}
-            onClick={() => navigate(PagePath.SET_PASSWORD)}
-          >
-            {!phrase.length || !phrase.every(w => w.length > 0)
-              ? 'Fill in passphrase'
-              : !phraseIsValid()
-                ? 'Phrase is invalid'
-                : 'Import'}
-          </Button>
+        <CardContent>
+          <form className='mt-6 grid gap-4' onSubmit={handleSubmit}>
+            <ImportForm />
+            <Button
+              className='mt-4'
+              variant='gradient'
+              disabled={!phrase.every(w => w.length > 0) || !phraseIsValid()}
+              onClick={handleSubmit}
+            >
+              {!phrase.length || !phrase.every(w => w.length > 0)
+                ? 'Fill in passphrase'
+                : !phraseIsValid()
+                  ? 'Phrase is invalid'
+                  : 'Import'}
+            </Button>
+          </form>
         </CardContent>
       </Card>
     </FadeTransition>

diff --git a/apps/extension/src/routes/page/onboarding/set-password.tsx b/apps/extension/src/routes/page/onboarding/set-password.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { FormEvent, MouseEvent, useState } from 'react';
 import {
   BackIcon,
   Button,
@@ -20,6 +20,15 @@ export const SetPassword = () => {
   const [password, setPassword] = useState('');
   const [confirmation, setConfirmation] = useState('');
 
+  const handleSubmit = (event: FormEvent | MouseEvent) => {
+    event.preventDefault();
+
+    void (async () => {
+      await finalOnboardingSave(password);
+      navigate(PagePath.ONBOARDING_SUCCESS);
+    })();
+  };
+
   return (
     <FadeTransition>
       <BackIcon className='float-left mb-4' onClick={() => navigate(-1)} />
@@ -31,44 +40,34 @@ export const SetPassword = () => {
             wallet.
           </CardDescription>
         </CardHeader>
-        <CardContent className='mt-6 grid gap-4'>
-          <PasswordInput
-            passwordValue={password}
-            label='New password'
-            onChange={({ target: { value } }) => setPassword(value)}
-            validations={[
-              {
-                type: 'warn',
-                issue: 'password too short',
-                checkFn: (txt: string) => Boolean(txt.length) && txt.length < 8,
-              },
-            ]}
-          />
-          <PasswordInput
-            passwordValue={confirmation}
-            label='Confirm password'
-            onChange={({ target: { value } }) => setConfirmation(value)}
-            validations={[
-              {
-                type: 'warn',
-                issue: "passwords don't match",
-                checkFn: (txt: string) => Boolean(txt.length) && password !== txt,
-              },
-            ]}
-          />
-          <Button
-            variant='gradient'
-            className='mt-2'
-            disabled={password.length < 8 || password !== confirmation}
-            onClick={() => {
-              void (async function () {
-                await finalOnboardingSave(password);
-                navigate(PagePath.ONBOARDING_SUCCESS);
-              })();
-            }}
-          >
-            Next
-          </Button>
+        <CardContent>
+          <form className='mt-6 grid gap-4' onSubmit={handleSubmit}>
+            <PasswordInput
+              passwordValue={password}
+              label='New password'
+              onChange={({ target: { value } }) => setPassword(value)}
+            />
+            <PasswordInput
+              passwordValue={confirmation}
+              label='Confirm password'
+              onChange={({ target: { value } }) => setConfirmation(value)}
+              validations={[
+                {
+                  type: 'warn',
+                  issue: "passwords don't match",
+                  checkFn: (txt: string) => password !== txt,
+                },
+              ]}
+            />
+            <Button
+              variant='gradient'
+              className='mt-2'
+              disabled={password !== confirmation}
+              onClick={handleSubmit}
+            >
+              Next
+            </Button>
+          </form>
         </CardContent>
       </Card>
     </FadeTransition>

diff --git a/apps/extension/src/routes/page/restore-password/set-password.tsx b/apps/extension/src/routes/page/restore-password/set-password.tsx
@@ -36,13 +36,6 @@ export const SetPassword = () => {
             passwordValue={password}
             label='New password'
             onChange={({ target: { value } }) => setPassword(value)}
-            validations={[
-              {
-                type: 'warn',
-                issue: 'password too short',
-                checkFn: (txt: string) => Boolean(txt.length) && txt.length < 8,
-              },
-            ]}
           />
           <PasswordInput
             passwordValue={confirmation}
@@ -52,14 +45,14 @@ export const SetPassword = () => {
               {
                 type: 'warn',
                 issue: "passwords don't match",
-                checkFn: (txt: string) => Boolean(txt.length) && password !== txt,
+                checkFn: (txt: string) => password !== txt,
               },
             ]}
           />
           <Button
             variant='gradient'
             className='mt-2'
-            disabled={password.length < 8 || password !== confirmation}
+            disabled={password !== confirmation}
             onClick={() => {
               void (async function () {
                 await finalOnboardingSave(password);

diff --git a/apps/extension/src/routes/popup/login.tsx b/apps/extension/src/routes/popup/login.tsx
@@ -51,11 +51,11 @@ export const Login = () => {
               {
                 type: 'error',
                 issue: 'wrong password',
-                checkFn: (txt: string) => Boolean(txt) && enteredIncorrect,
+                checkFn: () => enteredIncorrect,
               },
             ]}
           />
-          <Button size='lg' variant='gradient' disabled={!input || enteredIncorrect} type='submit'>
+          <Button size='lg' variant='gradient' disabled={enteredIncorrect} type='submit'>
             Unlock
           </Button>
         </form>

diff --git a/apps/extension/src/shared/components/password-input.tsx b/apps/extension/src/shared/components/password-input.tsx
@@ -8,7 +8,7 @@ import { useValidationResult } from '../../hooks/validation-result';
 interface PasswordInputProps {
   passwordValue: string;
   label: string | ReactElement;
-  validations: Validation[];
+  validations?: Validation[];
   onChange: InputProps['onChange'];
 }
 

diff --git a/apps/extension/src/state/wallets.ts b/apps/extension/src/state/wallets.ts
@@ -30,7 +30,7 @@ export const createWalletsSlice =
         const fullViewingKey = getFullViewingKey(spendKey);
 
         const passwordKey = get().password.key;
-        if (!passwordKey) throw new Error('Password Key not in storage');
+        if (passwordKey === undefined) throw new Error('Password Key not in storage');
 
         const key = await Key.fromJson(passwordKey);
         const encryptedSeedPhrase = await key.seal(seedPhraseStr);