fixes for register form (#188)

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -80,31 +80,7 @@ export const ForgotPasswordForm = () => {
       <div>
         <h4>{t('Forgot password?')}</h4>
         <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
-        <Show when={submitError()}>
-          <div class={styles.authInfo}>
-            <ul>
-              <li class={styles.warn}>{submitError()}</li>
-            </ul>
-          </div>
-        </Show>
-        <Show when={isUserNotFount()}>
-          <div class={styles.authSubtitle}>
-            {/*TODO: text*/}
-            {t("We can't find you, check email or")}{' '}
-            <a
-              href="#"
-              onClick={(event) => {
-                event.preventDefault()
-                changeSearchParam('mode', 'register')
-              }}
-            >
-              {t('register')}
-            </a>
-          </div>
-        </Show>
-        <Show when={validationErrors().email}>
-          <div class={styles.validationError}>{validationErrors().email}</div>
-        </Show>
+
         <div
           class={clsx('pretty-form__item', {
             'pretty-form__item--error': validationErrors().email
@@ -123,6 +99,34 @@ export const ForgotPasswordForm = () => {
           <label for="email">{t('Email')}</label>
         </div>
 
+        <Show when={submitError()}>
+          <div class={styles.authInfo}>
+            <ul>
+              <li class={styles.warn}>{submitError()}</li>
+            </ul>
+          </div>
+        </Show>
+
+        <Show when={isUserNotFount()}>
+          <div class={styles.authSubtitle}>
+            {/*TODO: text*/}
+            {t("We can't find you, check email or")}{' '}
+            <a
+              href="#"
+              onClick={(event) => {
+                event.preventDefault()
+                changeSearchParam('mode', 'register')
+              }}
+            >
+              {t('register')}
+            </a>
+          </div>
+        </Show>
+
+        <Show when={validationErrors().email}>
+          <div class={styles.validationError}>{validationErrors().email}</div>
+        </Show>
+
         <div>
           <button class={clsx('button', styles.submitButton)} disabled={isSubmitting()} type="submit">
             {isSubmitting() ? '...' : t('Restore password')}

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -13,6 +13,7 @@ import { register } from '../../../stores/auth'
 import { useLocalize } from '../../../context/localize'
 import { validateEmail } from '../../../utils/validateEmail'
 import { AuthModalHeader } from './AuthModalHeader'
+import { Icon } from '../../_shared/Icon'
 
 type FormFields = {
   fullName: string
@@ -31,13 +32,13 @@ export const RegisterForm = () => {
   const [fullName, setFullName] = createSignal('')
   const [password, setPassword] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const [showPassword, setShowPassword] = createSignal(false)
   const [isSuccess, setIsSuccess] = createSignal(false)
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
 
   const authFormRef: { current: HTMLFormElement } = { current: null }
 
   const handleEmailInput = (newEmail: string) => {
-    setValidationErrors(({ email: _notNeeded, ...rest }) => rest)
     setEmail(newEmail)
   }
 
@@ -65,23 +66,25 @@ export const RegisterForm = () => {
   }
 
   const handlePasswordInput = (newPassword: string) => {
-    const passwordError = isValidPassword(newPassword)
-    if (passwordError) {
-      setValidationErrors((errors) => ({ ...errors, password: passwordError }))
-    } else {
-      setValidationErrors(({ password: _notNeeded, ...rest }) => rest)
-    }
     setPassword(newPassword)
   }
 
   const handleNameInput = (newPasswordCopy: string) => {
-    setValidationErrors(({ fullName: _notNeeded, ...rest }) => rest)
     setFullName(newPasswordCopy)
   }
 
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
 
+    const passwordError = isValidPassword(password())
+    if (passwordError) {
+      setValidationErrors((errors) => ({ ...errors, password: passwordError }))
+    } else {
+      setValidationErrors(({ password: _notNeeded, ...rest }) => rest)
+    }
+    setValidationErrors(({ email: _notNeeded, ...rest }) => rest)
+    setValidationErrors(({ fullName: _notNeeded, ...rest }) => rest)
+
     setSubmitError('')
 
     const newValidationErrors: ValidationErrors = {}
@@ -211,11 +214,18 @@ export const RegisterForm = () => {
                 id="password"
                 name="password"
                 autocomplete="current-password"
-                type="password"
+                type={showPassword() ? 'text' : 'password'}
                 placeholder={t('Password')}
                 onInput={(event) => handlePasswordInput(event.currentTarget.value)}
               />
               <label for="password">{t('Password')}</label>
+              <button
+                type="button"
+                class={styles.passwordToggle}
+                onClick={() => setShowPassword(!showPassword())}
+              >
+                <Icon class={styles.passwordToggleIcon} name={showPassword() ? 'eye-off' : 'eye'} />
+              </button>
             </div>
             <Show when={validationErrors().password}>
               <div class={clsx(styles.registerPassword, styles.validationError)}>