Merge pull request #117 from Videodock/feat/sprint-bug-fixes

Feat/sprint bug fixes

src/components/Checkbox/Checkbox.tsx

@@ -33,7 +33,7 @@ const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, val
       ) : null}
       <div className={styles.row}>
         <input name={name} type="checkbox" id={id} value={value} onChange={onChange} checked={checked} aria-required={required} disabled={disabled} />
-        <label htmlFor={id}>{label}</label>
+        <label htmlFor={id}>{required ? '* ' : ''}{label}</label>
       </div>
       {helperText ? <div className={styles.helperText}>{helperText}</div> : null}
     </div>

src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`<Checkbox> renders and matches snapshot 1`] = `
       <label
         for="check-box_1235_name"
       >
+        
         label
       </label>
     </div>

src/components/EditPasswordForm/EditPasswordForm.module.scss

@@ -15,6 +15,8 @@
 .button {
   margin-bottom: 8px;
 }
-.link {
+
+.link,
+.textField {
   margin-bottom: 24px;
 }

src/components/EditPasswordForm/EditPasswordForm.test.tsx

@@ -6,7 +6,7 @@ import EditPasswordForm from './EditPasswordForm';
 describe('<EditPasswordForm>', () => {
   test('renders and matches snapshot', () => {
     const { container } = render(
-      <EditPasswordForm submitting={false} onSubmit={jest.fn()} onChange={jest.fn()} value={{ password: '' }} errors={{}} />,
+      <EditPasswordForm submitting={false} onSubmit={jest.fn()} onChange={jest.fn()} onBlur={jest.fn()} value={{ password: '' }} errors={{}} />,
     );
 
     expect(container).toMatchSnapshot();

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>

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,21 +57,11 @@ exports[`<EditPasswordForm> renders and matches snapshot 1`] = `
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="passwordStrength"
-    >
       <div
-        class="passwordStrengthBar"
+        class="helperText"
       >
-        <div
-          class="passwordStrengthFill"
-          data-strength="0"
-        />
+        reset.password_helper_text
       </div>
-      <span>
-        registration.password_strength
-      </span>
     </div>
     <button
       aria-disabled="false"

src/components/LoginForm/LoginForm.module.scss

@@ -10,3 +10,8 @@
 .link {
   margin-bottom: 24px;
 }
+
+.bottom {
+  margin-top: 24px;
+  text-align: center;
+}

src/components/LoginForm/LoginForm.tsx

@@ -24,9 +24,10 @@ type Props = {
   errors: FormErrors<LoginFormData>;
   values: LoginFormData;
   submitting: boolean;
+  siteName?: string;
 };
 
-const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting }: Props) => {
+const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting, siteName }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
   const { t } = useTranslation('account');
   const history = useHistory();
@@ -67,6 +68,9 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
         {t('login.forgot_password')}
       </Link>
       <Button type="submit" label={t('login.sign_in')} variant="contained" color="primary" size="large" disabled={submitting} fullWidth />
+      <p className={styles.bottom}>
+        {t('login.not_registered', { siteName })} <Link to={addQueryParam(history, 'u', 'create-account')}>{t('login.sign_up')}</Link>
+      </p>
     </form>
   );
 };

src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap

@@ -96,6 +96,18 @@ exports[`<LoginForm> renders and matches snapshot 1`] = `
         login.sign_in
       </span>
     </button>
+    <p
+      class="bottom"
+    >
+      login.not_registered
+       
+      <a
+        class="link"
+        href="/?u=create-account"
+      >
+        login.sign_up
+      </a>
+    </p>
   </form>
 </div>
 `;

src/components/PasswordStrength/PasswordStrength.module.scss

@@ -1,17 +1,38 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
 
+@mixin strength($strength, $width, $color) {
+  &[data-strength="#{$strength}"] {
+    .passwordStrengthFill {
+      width: $width;
+      background: $color;
+    }
+
+    .label {
+      color: $color;
+    }
+  }
+}
+
 .passwordStrength {
+  @include strength(1, 25%, orangered);
+  @include strength(2, 50%, orange);
+  @include strength(3, 75%, yellowgreen);
+  @include strength(4, 100%, green);
+
   position: relative;
-  margin: variables.$base-spacing 0;
+  display: flex;
+  align-items: center;
+  height: 16px;
+  margin: 8px 0;
   font-size: 14px;
 }
 
 .passwordStrengthBar {
   position: relative;
   width: 170px;
   height: 6px;
-  margin: variables.$base-spacing 0;
+  margin-right: 8px;
 
   background: #ddd;
   border-radius: 5px;
@@ -20,28 +41,13 @@
 .passwordStrengthFill {
   position: absolute;
   width: 0;
-  height: inherit;
+  height: 100%;
   background: transparent;
   border-radius: inherit;
   transition: width 0.5s ease-in-out, background 0.25s;
 }
 
-.passwordStrengthFill[data-strength='1'] {
-  width: 25%;
-  background: orangered;
-}
-
-.passwordStrengthFill[data-strength='2'] {
-  width: 50%;
-  background: orange;
-}
-
-.passwordStrengthFill[data-strength='3'] {
-  width: 75%;
-  background: yellowgreen;
-}
-
-.passwordStrengthFill[data-strength='4'] {
-  width: 100%;
-  background: green;
+.label {
+  font-weight: theme.$body-font-weight-bold;
+  font-size: 14px;
 }

src/components/PasswordStrength/PasswordStrength.tsx

@@ -7,32 +7,51 @@ type Props = {
   password: string;
 };
 
+const PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[0-9]).{8,}$/;
+
 const PasswordStrength: React.FC<Props> = ({ password }: Props) => {
   const { t } = useTranslation('account');
+
   const passwordStrength = (password: string) => {
     let strength = 0;
 
-    if (password.match(/[a-z]+/)) {
+    if (!password.match(PASSWORD_REGEX)) return strength;
+
+    if (password.match(/[A-Z]+/)) {
       strength += 1;
     }
-    if (password.match(/[A-Z]+/)) {
+
+    if (password.match(/(\d.*\d)/)) {
       strength += 1;
     }
-    if (password.match(/[0-9|!@#$%^&*()_+-=]+/)) {
+
+    if (password.match(/[!,@#$%^&*?_~]/)) {
       strength += 1;
     }
-    if (password.length >= 6) {
+
+    if (password.match(/([!,@#$%^&*?_~].*[!,@#$%^&*?_~])/)) {
       strength += 1;
     }
 
     return strength;
   };
+  const strength = passwordStrength(password);
+  const labels = [
+    t('registration.password_strength.invalid'),
+    t('registration.password_strength.weak'),
+    t('registration.password_strength.fair'),
+    t('registration.password_strength.strong'),
+    t('registration.password_strength.very_strong'),
+  ];
+
+  if (!strength) return null;
+
   return (
-    <div className={styles.passwordStrength}>
+    <div className={styles.passwordStrength} data-strength={strength}>
       <div className={styles.passwordStrengthBar}>
-        <div className={styles.passwordStrengthFill} data-strength={passwordStrength(password)}></div>
-      </div>
-      <span>{t('registration.password_strength')}</span>
+        <div className={styles.passwordStrengthFill} />
+      </div>{' '}
+      <span className={styles.label}>{labels[strength]}</span>
     </div>
   );
 };

src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap

@@ -4,17 +4,20 @@ exports[`<PasswordStrength> renders and matches snapshot 1`] = `
 <div>
   <div
     class="passwordStrength"
+    data-strength="2"
   >
     <div
       class="passwordStrengthBar"
     >
       <div
         class="passwordStrengthFill"
-        data-strength="4"
       />
     </div>
-    <span>
-      registration.password_strength
+     
+    <span
+      class="label"
+    >
+      registration.password_strength.fair
     </span>
   </div>
 </div>

src/components/RegistrationForm/RegistrationForm.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+
+import { render } from '../../testUtils';
 
 import RegistrationForm from './RegistrationForm';
 
@@ -9,12 +10,14 @@ describe('<RegistrationForm>', () => {
       <RegistrationForm
         onSubmit={jest.fn()}
         onChange={jest.fn()}
+        onBlur={jest.fn()}
         values={{ email: '', password: '' }}
         errors={{}}
         submitting={false}
         consentErrors={[]}
         consentValues={{}}
         loading={false}
+        canSubmit={true}
         onConsentChange={jest.fn()}
       />,
     );