Merge pull request #1936 from oasisprotocol/lw/checkbox-focus

Add validation message to required checkbox in ChoosePasswordFields

.changelog/1936.trivial.md

@@ -0,0 +1 @@
+Add validation message to required checkbox in ChoosePasswordFields

src/app/components/AddEscrowForm/index.tsx

@@ -81,7 +81,7 @@ export const AddEscrowForm = memo((props: Props) => {
               'This validator is ranked in the top 20 by stake. Please consider delegating to a smaller validator to increase network security and decentralization.',
             )}
           </Text>
-          <Text size={isMobile ? 'small' : 'medium'} weight="bold">
+          <Text weight="bold">
             <CheckBox
               label={t('account.addEscrow.confirmDelegatingToTop.acknowledge', 'Delegate anyway')}
               checked={!showNotice}

src/app/components/PasswordField/index.tsx

@@ -20,6 +20,7 @@ interface Props<TFormValue> {
   suggestions?: Array<{ label: string; value: any }>
   validate?: (password: string, form: TFormValue) => string | undefined
   error?: string | false
+  /** @deprecated Use `validate` */
   required?: boolean
   showTip: string
   hideTip: string

src/app/components/Persist/ChoosePasswordFields.tsx

@@ -62,6 +62,9 @@ export function ChoosePasswordFields() {
 
           <FormField
             name="profileStorageUndependableAcknowledge"
+            validate={(value: boolean) =>
+              value ? undefined : t('persist.createProfile.requiredField', 'This field is required')
+            }
             contentProps={{
               border: false,
               pad: 'none',
@@ -70,7 +73,6 @@ export function ChoosePasswordFields() {
           >
             <CheckBox
               name="profileStorageUndependableAcknowledge"
-              required
               label={
                 <Paragraph size="small" fill>
                   {t(

src/app/components/Persist/ChoosePasswordInputFields.tsx

@@ -32,7 +32,6 @@ export function ChoosePasswordInputFields({
         validate={value =>
           value ? undefined : t('persist.loginToProfile.enterPasswordHere', 'Enter your password')
         }
-        required
         showTip={t('persist.loginToProfile.showPassword', 'Show password')}
         hideTip={t('persist.loginToProfile.hidePassword', 'Hide password')}
         width="medium"

src/app/components/Toolbar/Features/Account/__tests__/__snapshots__/Account.test.tsx.snap

@@ -253,7 +253,7 @@ exports[`<Account  /> should match snapshot 1`] = `
 
 .c3:hover input:not([disabled]) + div,
 .c3:hover input:not([disabled]) + span {
-  border-color: #000000;
+  border-color: #00A9FF;
 }
 
 .c6 {

src/app/components/Toolbar/Features/Profile/UpdatePassword.tsx

@@ -61,7 +61,10 @@ export const UpdatePassword = () => {
     <Form<FormValue>
       onSubmit={onSubmit}
       {...preventSavingInputsToUserData}
-      onChange={nextValue => setValue(nextValue)}
+      onChange={nextValue => {
+        dispatch(persistActions.resetWrongPassword())
+        setValue(nextValue)
+      }}
       value={value}
     >
       <label htmlFor="currentPassword">{t('toolbar.profile.password.title', 'Set a new password')}</label>
@@ -73,7 +76,6 @@ export const UpdatePassword = () => {
           value ? undefined : t('toolbar.profile.password.enterCurrent', 'Enter your current password')
         }
         error={enteredWrongPassword ? t('persist.loginToProfile.wrongPassword', 'Wrong password') : false}
-        required
         showTip={t('persist.loginToProfile.showPassword', 'Show password')}
         hideTip={t('persist.loginToProfile.hidePassword', 'Hide password')}
         width="medium"

src/app/components/Toolbar/Features/Profile/__tests__/__snapshots__/index.test.tsx.snap

@@ -639,7 +639,6 @@ exports[`<Profile  /> should render unavailable state 1`] = `
                   id="currentPassword"
                   name="currentPassword"
                   placeholder="Current password"
-                  required=""
                   spellcheck="false"
                   type="password"
                   value=""
@@ -690,7 +689,6 @@ exports[`<Profile  /> should render unavailable state 1`] = `
                   id="password1"
                   name="password1"
                   placeholder="New password"
-                  required=""
                   spellcheck="false"
                   type="password"
                   value=""

src/app/pages/CreateWalletPage/__tests__/__snapshots__/index.test.tsx.snap

@@ -542,7 +542,7 @@ exports[`<CreateWalletPage  /> should match snapshot 1`] = `
 
 .c22:hover input:not([disabled]) + div,
 .c22:hover input:not([disabled]) + span {
-  border-color: #000000;
+  border-color: #00A9FF;
 }
 
 .c25 {

src/locales/en/translation.json

@@ -402,6 +402,7 @@
     "createProfile": {
       "passwordMismatch": "Entered password does not match",
       "repeatPassword": "Confirm your password",
+      "requiredField": "This field is required",
       "startPersisting": "Store your private keys locally and protect them with a password by creating a profile.",
       "startPersistingToggle": "Create a profile",
       "undependableAcknowledge": "I understand this password and profile do not substitute my mnemonic.",

src/styles/theme/ThemeProvider.tsx

@@ -285,6 +285,11 @@ const grommetCustomTheme: ThemeType = {
     border: {
       color: 'text',
     },
+    hover: {
+      border: {
+        color: 'focus',
+      },
+    },
     gap: '1.5ex',
     extend: css`
       font-size: 14px;