Merge branch 'password-requirements' into 'develop'

Password Requirements

See merge request soapbox-pub/soapbox-fe!1517

app/soapbox/components/__tests__/validation-checkmark.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { render, screen } from '../../jest/test-helpers';
+import ValidationCheckmark from '../validation-checkmark';
+
+describe('<ValidationCheckmark />', () => {
+  it('renders text', () => {
+    const text = 'some validation';
+    render(<ValidationCheckmark text={text} isValid />);
+
+    expect(screen.getByTestId('validation-checkmark')).toHaveTextContent(text);
+  });
+
+  it('uses a green check when valid', () => {
+    const text = 'some validation';
+    render(<ValidationCheckmark text={text} isValid />);
+
+    expect(screen.getByTestId('svg-icon-loader')).toHaveClass('text-success-500');
+    expect(screen.getByTestId('svg-icon-loader')).not.toHaveClass('text-gray-400');
+  });
+
+  it('uses a gray check when valid', () => {
+    const text = 'some validation';
+    render(<ValidationCheckmark text={text} isValid={false} />);
+
+    expect(screen.getByTestId('svg-icon-loader')).toHaveClass('text-gray-400');
+    expect(screen.getByTestId('svg-icon-loader')).not.toHaveClass('text-success-500');
+  });
+});

app/soapbox/components/validation-checkmark.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { HStack, Icon, Text } from 'soapbox/components/ui';
+
+interface IValidationCheckmark {
+  isValid: boolean
+  text: string
+}
+
+const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
+  return (
+    <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
+      <Icon
+        src={isValid ? require('@tabler/icons/icons/check.svg') : require('@tabler/icons/icons/point.svg')}
+        className={classNames({
+          'w-4 h-4': true,
+          'text-gray-400 fill-gray-400': !isValid,
+          'text-success-500': isValid,
+        })}
+      />
+
+      <Text theme='muted' size='sm'>{text}</Text>
+    </HStack>
+  );
+};
+
+export default ValidationCheckmark;

app/soapbox/features/auth_login/components/password_reset_confirm.tsx

@@ -4,7 +4,8 @@ import { Redirect } from 'react-router-dom';
 
 import { resetPasswordConfirm } from 'soapbox/actions/security';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import PasswordIndicator from 'soapbox/features/verification/components/password-indicator';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 
 const token = new URLSearchParams(window.location.search).get('reset_password_token');
 
@@ -22,9 +23,11 @@ const Statuses = {
 const PasswordResetConfirm = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const { passwordRequirements } = useFeatures();
 
   const [password, setPassword] = React.useState('');
   const [status, setStatus] = React.useState(Statuses.IDLE);
+  const [hasValidPassword, setHasValidPassword] = React.useState<boolean>(passwordRequirements ? false : true);
 
   const isLoading = status === Statuses.LOADING;
 
@@ -71,10 +74,14 @@ const PasswordResetConfirm = () => {
               onChange={onChange}
               required
             />
+
+            {passwordRequirements && (
+              <PasswordIndicator password={password} onChange={setHasValidPassword} />
+            )}
           </FormGroup>
 
           <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
+            <Button type='submit' theme='primary' disabled={isLoading || !hasValidPassword}>
               <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
             </Button>
           </FormActions>

app/soapbox/features/edit_password/index.tsx

@@ -4,7 +4,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import { changePassword } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
 import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
+
+import PasswordIndicator from '../verification/components/password-indicator';
 
 const messages = defineMessages({
   updatePasswordSuccess: { id: 'security.update_password.success', defaultMessage: 'Password successfully updated.' },
@@ -22,9 +24,11 @@ const initialState = { currentPassword: '', newPassword: '', newPasswordConfirma
 const EditPassword = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const { passwordRequirements } = useFeatures();
 
   const [state, setState] = React.useState(initialState);
   const [isLoading, setLoading] = React.useState(false);
+  const [hasValidPassword, setHasValidPassword] = React.useState<boolean>(passwordRequirements ? false : true);
 
   const { currentPassword, newPassword, newPasswordConfirmation } = state;
 
@@ -75,6 +79,10 @@ const EditPassword = () => {
                 onChange={handleInputChange}
                 value={newPassword}
               />
+
+              {passwordRequirements && (
+                <PasswordIndicator password={newPassword} onChange={setHasValidPassword} />
+              )}
             </FormGroup>
 
             <FormGroup labelText={intl.formatMessage(messages.confirmationFieldLabel)}>
@@ -91,7 +99,7 @@ const EditPassword = () => {
                 {intl.formatMessage(messages.cancel)}
               </Button>
 
-              <Button type='submit' theme='primary' disabled={isLoading}>
+              <Button type='submit' theme='primary' disabled={isLoading || !hasValidPassword}>
                 {intl.formatMessage(messages.submit)}
               </Button>
             </FormActions>

app/soapbox/features/verification/__tests__/registration.test.tsx

@@ -64,4 +64,21 @@ describe('<Registration />', () => {
       expect(screen.getByTestId('toast')).toHaveTextContent(/failed to register your account/i);
     });
   });
+
+  describe('validations', () => {
+    it('should undisable button with valid password', async() => {
+      render(<Registration />);
+
+      expect(screen.getByTestId('button')).toBeDisabled();
+      fireEvent.change(screen.getByTestId('password-input'), { target: { value: 'Password' } });
+      expect(screen.getByTestId('button')).not.toBeDisabled();
+    });
+
+    it('should disable button with invalid password', async() => {
+      render(<Registration />);
+
+      fireEvent.change(screen.getByTestId('password-input'), { target: { value: 'Passwor' } });
+      expect(screen.getByTestId('button')).toBeDisabled();
+    });
+  });
 });

app/soapbox/features/verification/components/password-indicator.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Stack } from 'soapbox/components/ui';
+import ValidationCheckmark from 'soapbox/components/validation-checkmark';
+
+const messages = defineMessages({
+  minimumCharacters: {
+    id: 'registration.validation.minimum_characters',
+    defaultMessage: '8 characters',
+  },
+  capitalLetter: {
+    id: 'registration.validation.capital_letter',
+    defaultMessage: '1 capital letter',
+  },
+  lowercaseLetter: {
+    id: 'registration.validation.lowercase_letter',
+    defaultMessage: '1 lowercase letter',
+  },
+});
+
+const hasUppercaseCharacter = (string: string) => {
+  for (let i = 0; i < string.length; i++) {
+    if (string.charAt(i) === string.charAt(i).toUpperCase() && string.charAt(i).match(/[a-z]/i)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const hasLowercaseCharacter = (string: string) => {
+  return string.toUpperCase() !== string;
+};
+
+interface IPasswordIndicator {
+  onChange(isValid: boolean): void
+  password: string
+}
+
+const PasswordIndicator = ({ onChange, password }: IPasswordIndicator) => {
+  const intl = useIntl();
+
+  const meetsLengthRequirements = useMemo(() => password.length >= 8, [password]);
+  const meetsCapitalLetterRequirements = useMemo(() => hasUppercaseCharacter(password), [password]);
+  const meetsLowercaseLetterRequirements = useMemo(() => hasLowercaseCharacter(password), [password]);
+  const hasValidPassword = meetsLengthRequirements && meetsCapitalLetterRequirements && meetsLowercaseLetterRequirements;
+
+  useEffect(() => {
+    onChange(hasValidPassword);
+  }, [hasValidPassword]);
+
+  return (
+    <Stack className='mt-2' space={1}>
+      <ValidationCheckmark
+        isValid={meetsLengthRequirements}
+        text={intl.formatMessage(messages.minimumCharacters)}
+      />
+
+      <ValidationCheckmark
+        isValid={meetsCapitalLetterRequirements}
+        text={intl.formatMessage(messages.capitalLetter)}
+      />
+
+      <ValidationCheckmark
+        isValid={meetsLowercaseLetterRequirements}
+        text={intl.formatMessage(messages.lowercaseLetter)}
+      />
+    </Stack>
+  );
+};
+
+export default PasswordIndicator;

app/soapbox/features/verification/registration.tsx

@@ -13,6 +13,8 @@ import { Button, Form, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { getRedirectUrl } from 'soapbox/utils/redirect';
 
+import PasswordIndicator from './components/password-indicator';
+
 const messages = defineMessages({
   success: {
     id: 'registrations.success',
@@ -42,12 +44,12 @@ const Registration = () => {
 
   const [state, setState] = React.useState(initialState);
   const [shouldRedirect, setShouldRedirect] = React.useState<boolean>(false);
+  const [hasValidPassword, setHasValidPassword] = React.useState<boolean>(false);
   const { username, password } = state;
 
   const handleSubmit = React.useCallback((event) => {
     event.preventDefault();
 
-    // TODO: handle validation errors from Pepe
     dispatch(createAccount(username, password))
       .then(() => dispatch(logIn(intl, username, password)))
       .then(({ access_token }: any) => dispatch(verifyCredentials(access_token)))
@@ -118,11 +120,21 @@ const Registration = () => {
               value={password}
               onChange={handleInputChange}
               required
+              data-testid='password-input'
             />
+
+            <PasswordIndicator password={password} onChange={setHasValidPassword} />
           </FormGroup>
 
           <div className='text-center'>
-            <Button block theme='primary' type='submit' disabled={isLoading}>Register</Button>
+            <Button
+              block
+              theme='primary'
+              type='submit'
+              disabled={isLoading || !hasValidPassword}
+            >
+              Register
+            </Button>
           </div>
         </Form>
       </div>

app/soapbox/locales/en.json

@@ -833,6 +833,9 @@
   "registration.sign_up": "Sign up",
   "registration.tos": "Terms of Service",
   "registration.username_unavailable": "Username is already taken.",
+  "registration.validation.minimum_characters": "8 characters",
+  "registration.validation.capital_letter": "1 capital letter",
+  "registration.validation.lowercase_letter": "1 lowercase letter",
   "relative_time.days": "{number}d",
   "relative_time.hours": "{number}h",
   "relative_time.just_now": "now",

app/soapbox/utils/features.ts

@@ -380,6 +380,14 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     paginatedContext: v.software === TRUTHSOCIAL,
 
+    /**
+     * Require minimum password requirements.
+     * - 8 characters
+     * - 1 uppercase
+     * - 1 lowercase
+     */
+    passwordRequirements: v.software === TRUTHSOCIAL,
+
     /**
      * Displays a form to follow a user when logged out.
      * @see POST /main/ostatus