fix(auth): fix and improve edit password form

jwplayer · Aug 4, 2021 · 9d862c0 · 9d862c0
1 parent 89644bc
commit 9d862c0
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 59 deletions.
diff --git a/src/components/EditPasswordForm/EditPasswordForm.module.scss b/src/components/EditPasswordForm/EditPasswordForm.module.scss
@@ -15,6 +15,8 @@
 .button {
   margin-bottom: 8px;
 }
-.link {
+
+.link,
+.textField {
   margin-bottom: 24px;
 }
diff --git a/src/components/EditPasswordForm/EditPasswordForm.tsx b/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -18,13 +18,14 @@ import styles from './EditPasswordForm.module.scss';
 type Props = {
   onSubmit: React.FormEventHandler<HTMLFormElement>;
   onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   error?: string;
   errors: FormErrors<EditPasswordFormData>;
   value: EditPasswordFormData;
   submitting: boolean;
 };
 
-const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors, submitting }: Props) => {
+const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, onBlur, value, errors, submitting }: Props) => {
   const { t } = useTranslation('account');
   const [viewPassword, toggleViewPassword] = useToggle();
 
@@ -33,12 +34,19 @@ const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors,
       <h2 className={styles.title}>{t('reset.password_reset')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
+        className={styles.textField}
         value={value.password}
         onChange={onChange}
-        label={t('reset.password')}
+        onBlur={onBlur}
+        label={t('reset.new_password')}
         placeholder={t('reset.password')}
         error={!!errors.password || !!errors.form}
-        helperText={errors.password}
+        helperText={(
+          <React.Fragment>
+            <PasswordStrength password={value.password} />
+            {t('reset.password_helper_text')}
+          </React.Fragment>
+        )}
         name="password"
         type={viewPassword ? 'text' : 'password'}
         rightControl={
@@ -48,7 +56,6 @@ const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors,
         }
         required
       />
-      <PasswordStrength password={value.password} />
       <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.confirm')} />
       {submitting && <LoadingOverlay transparentBackground inline />}
     </form>

diff --git a/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -12,13 +12,13 @@ exports[`<EditPasswordForm> renders and matches snapshot 1`] = `
       reset.password_reset
     </h2>
     <div
-      class="textField rightControl"
+      class="textField rightControl textField"
     >
       <label
         class="label"
         for="text-field_1235_password"
       >
-        reset.password
+        reset.new_password
       </label>
       <div
         class="container"
@@ -57,24 +57,11 @@ exports[`<EditPasswordForm> renders and matches snapshot 1`] = `
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="passwordStrength"
-      data-strength="0"
-    >
       <div
-        class="passwordStrengthBar"
+        class="helperText"
       >
-        <div
-          class="passwordStrengthFill"
-        />
+        reset.password_helper_text
       </div>
-       
-      <span
-        class="label"
-      >
-        registration.password_strength.invalid
-      </span>
     </div>
     <button
       aria-disabled="false"

diff --git a/src/components/PasswordStrength/PasswordStrength.tsx b/src/components/PasswordStrength/PasswordStrength.tsx
@@ -44,6 +44,8 @@ const PasswordStrength: React.FC<Props> = ({ password }: Props) => {
     t('registration.password_strength.very_strong'),
   ];
 
+  if (!strength) return null;
+
   return (
     <div className={styles.passwordStrength} data-strength={strength}>
       <div className={styles.passwordStrengthBar}>

diff --git a/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -83,24 +83,6 @@ exports[`<RegistrationForm> renders and matches snapshot 1`] = `
       <div
         class="helperText"
       >
-        <div
-          class="passwordStrength"
-          data-strength="0"
-        >
-          <div
-            class="passwordStrengthBar"
-          >
-            <div
-              class="passwordStrengthFill"
-            />
-          </div>
-           
-          <span
-            class="label"
-          >
-            registration.password_strength.invalid
-          </span>
-        </div>
         registration.password_helper_text
       </div>
     </div>

diff --git a/src/containers/AccountModal/forms/EditPassword.tsx b/src/containers/AccountModal/forms/EditPassword.tsx
@@ -17,9 +17,13 @@ const ResetPassword: React.FC = () => {
   const emailParam = useQueryParam('email');
 
   const passwordSubmitHandler: UseFormOnSubmitHandler<EditPasswordFormData> = async (formData, { setErrors, setSubmitting, setValue }) => {
-    try {
-      if (!resetPasswordTokenParam || !emailParam) throw new Error('invalid reset link');
+    if (!emailParam || !resetPasswordTokenParam) {
+      setErrors({ form: t('reset.invalid_link') });
+
+      return setSubmitting(false);
+    }
 
+    try {
       await changePassword(emailParam, formData.password, resetPasswordTokenParam);
       history.push(addQueryParam(history, 'u', 'login'));
     } catch (error: unknown) {
@@ -28,8 +32,6 @@ const ResetPassword: React.FC = () => {
           setErrors({ password: t('reset.invalid_password') });
         } else if (error.message.includes('resetPasswordToken is not valid')) {
           setErrors({ password: t('reset.invalid_token') });
-        } else if (error.message.includes('invalid reset link')) {
-          setErrors({ password: t('reset.invalid_link') });
         }
 
         setValue('password', '');
@@ -42,20 +44,22 @@ const ResetPassword: React.FC = () => {
     { password: '' },
     passwordSubmitHandler,
     object().shape({
-      password: string().required(t('login.field_required')),
+      password: string()
+        .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password'))
+        .required(t('login.field_required')),
     }),
+    true,
   );
 
   return (
-    <React.Fragment>
-      <EditPasswordForm
-        value={passwordForm.values}
-        submitting={passwordForm.submitting}
-        onChange={passwordForm.handleChange}
-        errors={passwordForm.errors}
-        onSubmit={passwordForm.handleSubmit}
-      />
-    </React.Fragment>
+    <EditPasswordForm
+      value={passwordForm.values}
+      submitting={passwordForm.submitting}
+      onChange={passwordForm.handleChange}
+      onBlur={passwordForm.handleBlur}
+      errors={passwordForm.errors}
+      onSubmit={passwordForm.handleSubmit}
+    />
   );
 };
 

diff --git a/src/containers/AccountModal/forms/ResetPassword.tsx b/src/containers/AccountModal/forms/ResetPassword.tsx
@@ -20,7 +20,7 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
   const { t } = useTranslation('account');
   const history = useHistory();
   const user = AccountStore.useState((state) => state.user);
-  const [resetPasswordSubmtting, setResetPasswordSubmitting] = useState<boolean>(false);
+  const [resetPasswordSubmitting, setResetPasswordSubmitting] = useState<boolean>(false);
 
   const cancelClickHandler = () => {
     history.push(removeQueryParam(history, 'u'));
@@ -31,7 +31,7 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
   };
 
   const resetPasswordClickHandler = async () => {
-    const resetUrl = `${window.location.origin}/u/my-account?u=edit-password`;
+    const resetUrl = `${window.location.origin}/?u=edit-password`;
 
     try {
       if (!user?.email) throw new Error('invalid param email');
@@ -51,7 +51,7 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
   };
 
   const emailSubmitHandler: UseFormOnSubmitHandler<ForgotPasswordFormData> = async (formData, { setErrors, setSubmitting }) => {
-    const resetUrl = `${window.location.origin}/u/my-account?u=edit-password`;
+    const resetUrl = `${window.location.origin}/?u=edit-password`;
 
     try {
       await resetPassword(formData.email, resetUrl);
@@ -72,12 +72,13 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
     object().shape({
       email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
     }),
+    true,
   );
 
   return (
     <React.Fragment>
       {type === 'reset' && (
-        <ResetPasswordForm submitting={resetPasswordSubmtting} onCancel={cancelClickHandler} onReset={resetPasswordClickHandler} />
+        <ResetPasswordForm submitting={resetPasswordSubmitting} onCancel={cancelClickHandler} onReset={resetPasswordClickHandler} />
       )}
       {type === 'forgot' && (
         <ForgotPasswordForm
@@ -89,7 +90,7 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
         />
       )}
       {type === 'confirmation' && <ConfirmationForm email={emailForm.values.email} onBackToLogin={backToLoginClickHandler} />}
-      {(emailForm.submitting || resetPasswordSubmtting) && <LoadingOverlay transparentBackground inline />}
+      {(emailForm.submitting || resetPasswordSubmitting) && <LoadingOverlay transparentBackground inline />}
     </React.Fragment>
   );
 };

diff --git a/src/i18n/locales/en_US/account.json b/src/i18n/locales/en_US/account.json
@@ -135,9 +135,11 @@
     "invalid_token": "Invalid link",
     "link_sent": "Password link sent",
     "link_sent_text": "Please check your inbox at {{email}}",
+    "new_password": "New password",
     "no": "No, thanks",
     "not_sure": "Not sure that was the right email address?",
     "password": "Password",
+    "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_reset": "Password reset",
     "reset_password": "Edit Password",
     "text": "If you want to edit your password, click 'YES, Reset' to receive password reset instruction on your mail",

diff --git a/src/i18n/locales/nl_NL/account.json b/src/i18n/locales/nl_NL/account.json
@@ -131,9 +131,11 @@
     "invalid_token": "",
     "link_sent": "",
     "link_sent_text": "",
+    "new_password": "",
     "no": "",
     "not_sure": "",
     "password": "",
+    "password_helper_text": "",
     "password_reset": "",
     "reset_password": "",
     "text": "",