Phase 3 - Add Sign Up Page and Enhance Authentication Flow

- Implement SignUpPage and SignUpForm components
- Update Icon component with Google and Apple icons
- Modify SignInForm to support email login and social sign-in
- Update AppRouter to include sign-up route
- Enhance auth translations with sign-up related text
- Refactor SignOutPage to handle sign-out errors

Author: jkestering-modus

frontend/src/common/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@ import { IonText } from '@ionic/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import {
-  faBookmark,
+  faBookmark as faSolidBookmark,
   faBuilding,
   faCalendar,
   faCircleInfo,
@@ -27,7 +27,9 @@ import {
   faFileLines as faSolidFileLines,
   faUpload,
   faComment,
-  faUserCircle
+  faUserCircle,
+  faGlobe as faGoogle,
+  faA as faApple
 } from '@fortawesome/free-solid-svg-icons';
 import {
   faFileLines as faRegularFileLines,
@@ -70,7 +72,9 @@ export type IconName =
   | 'userCircle'
   | 'users'
   | 'userGear'
-  | 'xmark';
+  | 'xmark'
+  | 'google'
+  | 'apple';
 
 /**
  * Properties for the `Icon` component.
@@ -90,7 +94,7 @@ export interface IconProps
  */
 const solidIcons: Record<IconName, IconProp> = {
   arrowUpFromBracket: faArrowUpFromBracket,
-  bookmark: faBookmark,
+  bookmark: faSolidBookmark,
   building: faBuilding,
   calendar: faCalendar,
   circleInfo: faCircleInfo,
@@ -114,6 +118,8 @@ const solidIcons: Record<IconName, IconProp> = {
   userGear: faUserGear,
   users: faUsers,
   xmark: faXmark,
+  google: faGoogle,
+  apple: faApple,
 };
 
 /**

frontend/src/common/components/Router/AppRouter.tsx

@@ -5,6 +5,7 @@ import { Redirect, Route } from 'react-router';
 import PrivateOutlet from './PrivateOutlet';
 import TabNavigation from './TabNavigation';
 import SignInPage from 'pages/Auth/SignIn/SignInPage';
+import SignUpPage from 'pages/Auth/SignUp/SignUpPage';
 import SignOutPage from 'pages/Auth/SignOut/SignOutPage';
 
 /**
@@ -29,6 +30,7 @@ const AppRouter = (): JSX.Element => {
           )}
         />
         <Route exact path="/auth/signin" render={() => <SignInPage />} />
+        <Route exact path="/auth/signup" render={() => <SignUpPage />} />
         <Route exact path="/auth/signout" render={() => <SignOutPage />} />
         <Route exact path="/">
           <Redirect to="/tabs" />

frontend/src/common/utils/i18n/resources/en/auth.json

@@ -9,10 +9,32 @@
     "part4": " or ",
     "part5": "You may use any value as the password."
   },
+  "info-email": {
+    "part1": "Enter your email address associated with your account.",
+    "part2": "For testing, you can create a new account by clicking on the Sign Up link below."
+  },
   "label": {
     "password": "Password",
     "remember-me": "Remember me",
-    "username": "Username"
+    "username": "Username",
+    "email": "Email Address",
+    "first-name": "First Name",
+    "last-name": "Last Name",
+    "confirm-password": "Confirm Password",
+    "verification-code": "Verification Code"
   },
-  "signin": "Sign In"
+  "signin": "Sign In",
+  "signup": "Sign Up",
+  "signout": "Sign Out",
+  "no-account": "Don't have an account?",
+  "already-have-account": "Already have an account?",
+  "or-signin-with": "Or sign in with",
+  "submit": "Submit",
+  "confirm": "Confirm",
+  "resend-code": "Resend Code",
+  "email-verification": {
+    "title": "Email Verification",
+    "message": "We've sent a verification code to your email. Please enter it below to verify your account.",
+    "success": "Email verified successfully!"
+  }
 }

frontend/src/pages/Auth/SignIn/components/SignInForm.tsx

@@ -5,6 +5,9 @@ import {
   IonPopover,
   useIonRouter,
   useIonViewDidEnter,
+  IonText,
+  IonRow,
+  IonCol,
 } from '@ionic/react';
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
@@ -17,13 +20,15 @@ import { BaseComponentProps } from 'common/components/types';
 import { RememberMe } from 'common/models/auth';
 import storage from 'common/utils/storage';
 import { StorageKey } from 'common/utils/constants';
-import { useSignIn } from '../api/useSignIn';
+import { useSignIn } from 'common/hooks/useAuth';
 import { useProgress } from 'common/hooks/useProgress';
 import Input from 'common/components/Input/Input';
 import ErrorCard from 'common/components/Card/ErrorCard';
 import Icon from 'common/components/Icon/Icon';
 import HeaderRow from 'common/components/Text/HeaderRow';
 import CheckboxInput from 'common/components/Input/CheckboxInput';
+import { useSocialSignIn } from 'common/hooks/useAuth';
+import { getAuthErrorMessage } from 'common/utils/auth-errors';
 
 /**
  * Properties for the `SignInForm` component.
@@ -32,11 +37,11 @@ interface SignInFormProps extends BaseComponentProps {}
 
 /**
  * Sign in form values.
- * @param {string} username - A username.
+ * @param {string} email - User's email.
  * @param {string} password - A password.
  */
 interface SignInFormValues {
-  username: string;
+  email: string;
   password: string;
   rememberMe: boolean;
 }
@@ -51,14 +56,17 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
   const [error, setError] = useState<string>('');
   const { setIsActive: setShowProgress } = useProgress();
   const router = useIonRouter();
-  const { mutate: signIn } = useSignIn();
+  const { signIn, isLoading } = useSignIn();
+  const { signInWithGoogle, signInWithApple } = useSocialSignIn();
   const { t } = useTranslation();
 
   /**
    * Sign in form validation schema.
    */
   const validationSchema = object<SignInFormValues>({
-    username: string().required(t('validation.required')),
+    email: string()
+      .email(t('validation.email'))
+      .required(t('validation.required')),
     password: string().required(t('validation.required')),
     rememberMe: boolean().default(false),
   });
@@ -70,6 +78,34 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
     focusInput.current?.setFocus();
   });
 
+  // Handle sign in with Google
+  const handleGoogleSignIn = async () => {
+    try {
+      setError('');
+      setShowProgress(true);
+      await signInWithGoogle();
+      router.push('/tabs', 'forward', 'replace');
+    } catch (err) {
+      setError(getAuthErrorMessage(err));
+    } finally {
+      setShowProgress(false);
+    }
+  };
+
+  // Handle sign in with Apple
+  const handleAppleSignIn = async () => {
+    try {
+      setError('');
+      setShowProgress(true);
+      await signInWithApple();
+      router.push('/tabs', 'forward', 'replace');
+    } catch (err) {
+      setError(getAuthErrorMessage(err));
+    } finally {
+      setShowProgress(false);
+    }
+  };
+
   return (
     <div className={classNames('ls-signin-form', className)} data-testid={testid}>
       {error && (
@@ -83,32 +119,31 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
       <Formik<SignInFormValues>
         enableReinitialize={true}
         initialValues={{
-          username: rememberMe?.username ?? '',
+          email: rememberMe?.username ?? '',
           password: '',
           rememberMe: !!rememberMe,
         }}
-        onSubmit={(values, { setSubmitting }) => {
-          setError('');
-          setShowProgress(true);
-          signIn(values.username, {
-            onSuccess: () => {
-              if (values.rememberMe) {
-                storage.setJsonItem<RememberMe>(StorageKey.RememberMe, {
-                  username: values.username,
-                });
-              } else {
-                storage.removeItem(StorageKey.RememberMe);
-              }
-              router.push('/tabs', 'forward', 'replace');
-            },
-            onError: (err: Error) => {
-              setError(err.message);
-            },
-            onSettled: () => {
-              setShowProgress(false);
-              setSubmitting(false);
-            },
-          });
+        onSubmit={async (values, { setSubmitting }) => {
+          try {
+            setError('');
+            setShowProgress(true);
+            await signIn(values.email, values.password);
+            
+            if (values.rememberMe) {
+              storage.setJsonItem<RememberMe>(StorageKey.RememberMe, {
+                username: values.email,
+              });
+            } else {
+              storage.removeItem(StorageKey.RememberMe);
+            }
+            
+            router.push('/tabs', 'forward', 'replace');
+          } catch (err) {
+            setError(getAuthErrorMessage(err));
+          } finally {
+            setShowProgress(false);
+            setSubmitting(false);
+          }
         }}
         validationSchema={validationSchema}
       >
@@ -120,22 +155,23 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
             </HeaderRow>
 
             <Input
-              name="username"
-              label={t('label.username', { ns: 'auth' })}
+              name="email"
+              label={t('label.email', { ns: 'auth' })}
               labelPlacement="stacked"
-              maxlength={30}
-              autocomplete="off"
+              maxlength={50}
+              autocomplete="email"
               className="ls-signin-form__input"
               ref={focusInput}
-              data-testid={`${testid}-field-username`}
+              data-testid={`${testid}-field-email`}
+              type="email"
             />
             <Input
               type="password"
               name="password"
               label={t('label.password', { ns: 'auth' })}
               labelPlacement="stacked"
               maxlength={30}
-              autocomplete="off"
+              autocomplete="current-password"
               className="ls-signin-form__input"
               data-testid={`${testid}-field-password`}
             >
@@ -155,33 +191,70 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
               color="primary"
               className="ls-signin-form__button"
               expand="block"
-              disabled={isSubmitting || !dirty}
+              disabled={isSubmitting || !dirty || isLoading}
               data-testid={`${testid}-button-submit`}
             >
               {t('signin', { ns: 'auth' })}
             </IonButton>
 
+            <IonRow className="ion-text-center ion-padding">
+              <IonCol>
+                <IonText color="medium">
+                  {t('or-signin-with', { ns: 'auth' })}
+                </IonText>
+              </IonCol>
+            </IonRow>
+
+            <IonRow>
+              <IonCol>
+                <IonButton
+                  expand="block"
+                  fill="outline"
+                  color="medium"
+                  onClick={handleGoogleSignIn}
+                  disabled={isLoading}
+                  data-testid={`${testid}-button-google`}
+                >
+                  <Icon icon="google" slot="start" />
+                  Google
+                </IonButton>
+              </IonCol>
+              <IonCol>
+                <IonButton
+                  expand="block"
+                  fill="outline"
+                  color="dark"
+                  onClick={handleAppleSignIn}
+                  disabled={isLoading}
+                  data-testid={`${testid}-button-apple`}
+                >
+                  <Icon icon="apple" slot="start" />
+                  Apple
+                </IonButton>
+              </IonCol>
+            </IonRow>
+            
+            <IonRow className="ion-text-center ion-padding-top">
+              <IonCol>
+                <IonText color="medium">
+                  {t('no-account', { ns: 'auth' })}{' '}
+                  <a href="/auth/signup">{t('signup', { ns: 'auth' })}</a>
+                </IonText>
+              </IonCol>
+            </IonRow>
+
             <IonPopover
               trigger="signinInfo"
               triggerAction="hover"
               className="ls-signin-form-popover"
             >
               <IonContent className="ion-padding">
                 <p>
-                  {t('info-username.part1', { ns: 'auth' })}
-                  <a
-                    href="https://jsonplaceholder.typicode.com/users"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {t('info-username.part2', { ns: 'auth' })}
-                  </a>
-                  . {t('info-username.part3', { ns: 'auth' })}{' '}
-                  <span className="inline-code">Bret</span>{' '}
-                  {t('info-username.part4', { ns: 'auth' })}{' '}
-                  <span className="inline-code">Samantha</span>.
+                  {t('info-email.part1', { ns: 'auth' })}
+                </p>
+                <p>
+                  {t('info-email.part2', { ns: 'auth' })}
                 </p>
-                <p>{t('info-username.part5', { ns: 'auth' })}</p>
               </IonContent>
             </IonPopover>
           </Form>