Merge remote-tracking branch 'soapbox/develop' into ts

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/account.tsx

@@ -9,7 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative_timestamp';
-import { Avatar, HStack, Icon, IconButton, Text } from './ui';
+import { Avatar, Emoji, HStack, Icon, IconButton, Text } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
@@ -60,6 +60,7 @@ interface IAccount {
   withDate?: boolean,
   withRelationship?: boolean,
   showEdit?: boolean,
+  emoji?: string,
 }
 
 const Account = ({
@@ -80,6 +81,7 @@ const Account = ({
   withDate = false,
   withRelationship = true,
   showEdit = false,
+  emoji,
 }: IAccount) => {
   const overflowRef = React.useRef<HTMLDivElement>(null);
   const actionRef = React.useRef<HTMLDivElement>(null);
@@ -160,7 +162,7 @@ const Account = ({
         <HStack alignItems='center' space={3} grow>
           <ProfilePopper
             condition={showProfileHoverCard}
-            wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
+            wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
           >
             <LinkEl
               to={`/@${account.acct}`}
@@ -168,6 +170,12 @@ const Account = ({
               onClick={(event: React.MouseEvent) => event.stopPropagation()}
             >
               <Avatar src={account.avatar} size={avatarSize} />
+              {emoji && (
+                <Emoji
+                  className='w-5 h-5 absolute -bottom-1.5 -right-1.5'
+                  emoji={emoji}
+                />
+              )}
             </LinkEl>
           </ProfilePopper>
 

app/soapbox/components/hover_ref_wrapper.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { debounce } from 'lodash';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
@@ -15,10 +16,11 @@ const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
 interface IHoverRefWrapper {
   accountId: string,
   inline: boolean,
+  className?: string,
 }
 
 /** Makes a profile hover card appear when the wrapped element is hovered. */
-export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, inline = false }) => {
+export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, children, inline = false, className }) => {
   const dispatch = useDispatch();
   const ref = useRef<HTMLDivElement>(null);
   const Elem: keyof JSX.IntrinsicElements = inline ? 'span' : 'div';
@@ -42,7 +44,7 @@ export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, childre
   return (
     <Elem
       ref={ref}
-      className='hover-ref-wrapper'
+      className={classNames('hover-ref-wrapper', className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}

app/soapbox/components/ui/tabs/tabs.tsx

@@ -101,7 +101,7 @@ const AnimatedTab: React.FC<IAnimatedTab> = ({ index, ...props }) => {
 };
 
 /** Structure to represent a tab. */
-type Item = {
+export type Item = {
   /** Tab text. */
   text: React.ReactNode,
   /** Tab tooltip text. */

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/ui/components/reactions_modal.tsx

@@ -3,12 +3,13 @@ import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
-import FilterBar from 'soapbox/components/filter_bar';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { Modal, Spinner } from 'soapbox/components/ui';
+import { Emoji, Modal, Spinner, Tabs } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import type { Item } from 'soapbox/components/ui/tabs/tabs';
+
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
   all: { id: 'reactions.all', defaultMessage: 'All' },
@@ -24,14 +25,14 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const [reaction, setReaction] = useState(initialReaction);
-  const reactions = useAppSelector<Array<{
+  const reactions = useAppSelector<ImmutableList<{
     accounts: Array<string>,
     count: number,
     name: string,
   }>>((state) => {
     const favourites = state.user_lists.getIn(['favourited_by', statusId]);
     const reactions = state.user_lists.getIn(['reactions', statusId]);
-    return favourites && reactions && ImmutableList(favourites ? [{ accounts: favourites, count: favourites.size, name: '👍' }] : []).concat(reactions || []);
+    return favourites && reactions && ImmutableList(favourites.size ? [{ accounts: favourites, count: favourites.size, name: '👍' }] : []).concat(reactions || []);
   });
 
   const fetchData = () => {
@@ -44,7 +45,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
   };
 
   const renderFilterBar = () => {
-    const items = [
+    const items: Array<Item> = [
       {
         text: intl.formatMessage(messages.all),
         action: () => setReaction(''),
@@ -54,13 +55,16 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
 
     reactions.forEach(reaction => items.push(
       {
-        text: `${reaction.name} ${reaction.count}`,
+        text: <div className='flex items-center gap-1'>
+          <Emoji className='w-4 h-4' emoji={reaction.name} />
+          {reaction.count}
+        </div>,
         action: () => setReaction(reaction.name),
         name: reaction.name,
       },
     ));
 
-    return <FilterBar className='reaction__filter-bar' items={items} active={reaction || 'all'} />;
+    return <Tabs items={items} activeItem={reaction || 'all'} />;
   };
 
   useEffect(() => {
@@ -69,7 +73,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
 
   const accounts = reactions && (reaction
     ? reactions.find(({ name }) => name === reaction)?.accounts.map(account => ({ id: account, reaction: reaction }))
-    : reactions.map(({ accounts, name }) => accounts.map(account => ({ id: account, reaction: name }))).flat());
+    : reactions.map(({ accounts, name }) => accounts.map(account => ({ id: account, reaction: name }))).flatten()) as Array<{ id: string, reaction: string }>;
 
   let body;
 
@@ -79,14 +83,15 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
     const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />;
 
     body = (<>
-      {reactions.length > 0 && renderFilterBar()}
+      {reactions.size > 0 && renderFilterBar()}
       <ScrollableList
         scrollKey='reactions'
         emptyMessage={emptyMessage}
+        className='mt-4'
         itemClassName='pb-3'
       >
         {accounts.map((account) =>
-          <AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} /* reaction={account.reaction} */ />,
+          <AccountContainer key={`${account.id}-${account.reaction}`} id={account.id} emoji={account.reaction} />,
         )}
       </ScrollableList>
     </>);

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

@@ -12,6 +12,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';
+
 import type { AxiosError } from 'axios';
 
 const messages = defineMessages({
@@ -43,12 +45,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(username, password)))
       .then(({ access_token }: any) => dispatch(verifyCredentials(access_token)))
@@ -119,11 +121,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