Small improvements to Sign Up page

GuidoBR · GuidoBR · commit f4a5df989cc1 · 2025-05-06T15:18:23.000-04:00
diff --git a/frontend/src/common/utils/i18n/resources/en/auth.json b/frontend/src/common/utils/i18n/resources/en/auth.json
@@ -62,6 +62,10 @@
     "success": "Email verified successfully!",
     "code-resent": "A new verification code has been sent to your email."
   },
+  "registration": {
+    "success": "Registration successful!",
+    "verify-email": "Please verify your email to activate your account."
+  },
   "oauth": {
     "processing": "Processing your login...",
     "redirecting": "Redirecting...",
@@ -80,5 +84,6 @@
     "uppercase": "Must contain at least one uppercase letter",
     "number": "Must contain at least one number",
     "special-char": "Must contain at least one special character"
-  }
+  },
+  "please-fill-details": "Please fill in your personal details"
 }
diff --git a/frontend/src/common/utils/i18n/resources/es/auth.json b/frontend/src/common/utils/i18n/resources/es/auth.json
@@ -16,5 +16,10 @@
   },
   "signin": "Iniciar sesión",
   "signin.title": "Iniciar sesión",
-  "signin.subtitle": "Iniciar sesión para acceder a MEDReport AI"
+  "signin.subtitle": "Iniciar sesión para acceder a MEDReport AI",
+  "registration": {
+    "success": "¡Registro exitoso!",
+    "verify-email": "Por favor verifica tu correo electrónico para activar tu cuenta."
+  },
+  "please-fill-details": "Por favor complete sus datos personales"
 }
diff --git a/frontend/src/common/utils/i18n/resources/fr/auth.json b/frontend/src/common/utils/i18n/resources/fr/auth.json
@@ -16,5 +16,10 @@
   },
   "signin": "Se connecter",
   "signin.title": "Se connecter",
-  "signin.subtitle": "Connectez-vous pour accéder à MEDReport AI"
+  "signin.subtitle": "Connectez-vous pour accéder à MEDReport AI",
+  "registration": {
+    "success": "Inscription réussie !",
+    "verify-email": "Veuillez vérifier votre e-mail pour activer votre compte."
+  },
+  "please-fill-details": "Veuillez remplir vos coordonnées personnelles"
 }
diff --git a/frontend/src/pages/Auth/SignUp/components/SignUpForm.scss b/frontend/src/pages/Auth/SignUp/components/SignUpForm.scss
@@ -94,4 +94,37 @@
       }
     }
   }
+
+  &__success {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 2rem 1.5rem;
+    background-color: #f8fff8;
+    border: 1px solid var(--ion-color-success);
+    border-radius: 8px;
+    margin: 1rem 0;
+
+    &-icon {
+      font-size: 4rem;
+      margin-bottom: 1rem;
+    }
+
+    h3 {
+      font-size: 1.4rem;
+      font-weight: 600;
+      margin: 0 0 0.75rem;
+      color: var(--ion-color-success);
+    }
+
+    p {
+      font-size: 1rem;
+      margin: 0;
+      color: #666;
+      line-height: 1.5;
+      max-width: 320px;
+    }
+  }
 }
diff --git a/frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx b/frontend/src/pages/Auth/SignUp/components/SignUpForm.tsx
@@ -41,6 +41,27 @@ interface SignUpFormValues {
   confirmPassword: string;
 }
 
+/**
+ * Registration success message component
+ */
+const RegistrationSuccess = ({ email }: { email: string }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="ls-signup-form__success">
+      <IonIcon icon={checkmarkCircle} color="success" className="ls-signup-form__success-icon" />
+      <h3>{t('registration.success', { ns: 'auth' })}</h3>
+      <p>
+        {t('registration.verify-email', {
+          ns: 'auth',
+          email,
+          defaultValue: 'Please verify your email to activate your account.',
+        })}
+      </p>
+    </div>
+  );
+};
+
 /**
  * Password guidelines component
  */
@@ -89,6 +110,8 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
   const focusInput = useRef<HTMLIonInputElement>(null);
   const [error, setError] = useState<AuthError | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [registrationSuccess, setRegistrationSuccess] = useState(false);
+  const [registeredEmail, setRegisteredEmail] = useState('');
   const { setIsActive: setShowProgress } = useProgress();
   const router = useIonRouter();
   const { signUp, isLoading: isSignUpLoading } = useSignUp();
@@ -124,6 +147,13 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
     focusInput.current?.setFocus();
   });
 
+  // Redirect to verification page after showing success message
+  const handleRedirectAfterSuccess = () => {
+    setTimeout(() => {
+      router.push('/auth/verify', 'forward', 'replace');
+    }, 3000); // Show success message for 3 seconds before redirecting
+  };
+
   return (
     <div className={classNames('ls-signup-form', className)} data-testid={testid}>
       <AuthErrorDisplay
@@ -139,133 +169,139 @@ const SignUpForm = ({ className, testid = 'form-signup' }: SignUpFormProps): JSX
         testid={`${testid}-loading`}
       />
 
-      <Formik<SignUpFormValues>
-        initialValues={{
-          email: '',
-          firstName: '',
-          lastName: '',
-          password: '',
-          confirmPassword: '',
-        }}
-        onSubmit={async (values, { setSubmitting }) => {
-          try {
-            setError(null);
-            setIsLoading(true);
-            setShowProgress(true);
-            await signUp(values.email, values.password, values.firstName, values.lastName);
+      {registrationSuccess ? (
+        <RegistrationSuccess email={registeredEmail} />
+      ) : (
+        <Formik<SignUpFormValues>
+          initialValues={{
+            email: '',
+            firstName: '',
+            lastName: '',
+            password: '',
+            confirmPassword: '',
+          }}
+          onSubmit={async (values, { setSubmitting }) => {
+            try {
+              setError(null);
+              setIsLoading(true);
+              setShowProgress(true);
+              await signUp(values.email, values.password, values.firstName, values.lastName);
 
-            // Store the email in sessionStorage for the verification page
-            sessionStorage.setItem('verification_email', values.email);
+              // Store the email in sessionStorage for the verification page
+              sessionStorage.setItem('verification_email', values.email);
 
-            // Show success briefly before redirecting
-            setIsLoading(false);
+              // Show success message
+              setIsLoading(false);
+              setRegisteredEmail(values.email);
+              setRegistrationSuccess(true);
 
-            // Navigate to verification page
-            router.push('/auth/verify', 'forward', 'replace');
-          } catch (err) {
-            setError(formatAuthError(err));
-          } finally {
-            setShowProgress(false);
-            setSubmitting(false);
-            setIsLoading(false);
-          }
-        }}
-        validationSchema={validationSchema}
-      >
-        {({ dirty, isSubmitting, isValid }) => (
-          <Form data-testid={`${testid}-form`}>
-            <div className="ls-signup-form__content">
-              <h2 className="ls-signup-form__title">{t('signup', { ns: 'auth' })}</h2>
-              <p className="ls-signup-form__subtitle">
-                {t('please-fill-details', {
-                  ns: 'auth',
-                  defaultValue: 'Please fill in your personal details',
-                })}
-              </p>
+              // Redirect after showing success message
+              handleRedirectAfterSuccess();
+            } catch (err) {
+              setError(formatAuthError(err));
+            } finally {
+              setShowProgress(false);
+              setSubmitting(false);
+              setIsLoading(false);
+            }
+          }}
+          validationSchema={validationSchema}
+        >
+          {({ dirty, isSubmitting, isValid }) => (
+            <Form data-testid={`${testid}-form`}>
+              <div className="ls-signup-form__content">
+                <h2 className="ls-signup-form__title">{t('signup', { ns: 'auth' })}</h2>
+                <p className="ls-signup-form__subtitle">
+                  {t('please-fill-details', {
+                    ns: 'auth',
+                    defaultValue: 'Please fill in your personal details',
+                  })}
+                </p>
 
-              <Input
-                name="firstName"
-                label={t('label.first-name', { ns: 'auth' })}
-                labelPlacement="stacked"
-                maxlength={50}
-                autocomplete="given-name"
-                className="ls-signup-form__input"
-                data-testid={`${testid}-field-first-name`}
-              />
+                <Input
+                  name="firstName"
+                  label={t('label.first-name', { ns: 'auth' })}
+                  labelPlacement="stacked"
+                  maxlength={50}
+                  autocomplete="given-name"
+                  className="ls-signup-form__input"
+                  data-testid={`${testid}-field-first-name`}
+                />
 
-              <Input
-                name="lastName"
-                label={t('label.last-name', { ns: 'auth' })}
-                labelPlacement="stacked"
-                maxlength={50}
-                autocomplete="family-name"
-                className="ls-signup-form__input"
-                data-testid={`${testid}-field-last-name`}
-              />
+                <Input
+                  name="lastName"
+                  label={t('label.last-name', { ns: 'auth' })}
+                  labelPlacement="stacked"
+                  maxlength={50}
+                  autocomplete="family-name"
+                  className="ls-signup-form__input"
+                  data-testid={`${testid}-field-last-name`}
+                />
 
-              <Input
-                name="email"
-                label={t('label.email', { ns: 'auth' })}
-                labelPlacement="stacked"
-                maxlength={50}
-                autocomplete="email"
-                className="ls-signup-form__input"
-                ref={focusInput}
-                data-testid={`${testid}-field-email`}
-                type="email"
-              />
+                <Input
+                  name="email"
+                  label={t('label.email', { ns: 'auth' })}
+                  labelPlacement="stacked"
+                  maxlength={50}
+                  autocomplete="email"
+                  className="ls-signup-form__input"
+                  ref={focusInput}
+                  data-testid={`${testid}-field-email`}
+                  type="email"
+                />
 
-              <Input
-                type="password"
-                name="password"
-                label={t('label.password', { ns: 'auth' })}
-                labelPlacement="stacked"
-                maxlength={30}
-                autocomplete="new-password"
-                className="ls-signup-form__input"
-                data-testid={`${testid}-field-password`}
-              >
-                <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
-              </Input>
+                <Input
+                  type="password"
+                  name="password"
+                  label={t('label.password', { ns: 'auth' })}
+                  labelPlacement="stacked"
+                  maxlength={30}
+                  autocomplete="new-password"
+                  className="ls-signup-form__input"
+                  data-testid={`${testid}-field-password`}
+                >
+                  <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
+                </Input>
 
-              <Input
-                type="password"
-                name="confirmPassword"
-                label={t('label.confirm-password', { ns: 'auth' })}
-                labelPlacement="stacked"
-                maxlength={30}
-                autocomplete="new-password"
-                className="ls-signup-form__input"
-                data-testid={`${testid}-field-confirm-password`}
-              >
-                <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
-              </Input>
+                <Input
+                  type="password"
+                  name="confirmPassword"
+                  label={t('label.confirm-password', { ns: 'auth' })}
+                  labelPlacement="stacked"
+                  maxlength={30}
+                  autocomplete="new-password"
+                  className="ls-signup-form__input"
+                  data-testid={`${testid}-field-confirm-password`}
+                >
+                  <IonInputPasswordToggle slot="end"></IonInputPasswordToggle>
+                </Input>
 
-              <PasswordGuidelines />
+                <PasswordGuidelines />
 
-              <IonButton
-                type="submit"
-                color="primary"
-                className="ls-signup-form__button"
-                expand="block"
-                disabled={isSubmitting || !isValid || !dirty || isSignUpLoading || isLoading}
-                data-testid={`${testid}-button-submit`}
-              >
-                {t('signup.button', { ns: 'auth' })}
-              </IonButton>
+                <IonButton
+                  type="submit"
+                  color="primary"
+                  className="ls-signup-form__button"
+                  expand="block"
+                  disabled={isSubmitting || !isValid || !dirty || isSignUpLoading || isLoading}
+                  data-testid={`${testid}-button-submit`}
+                >
+                  {t('signup.button', { ns: 'auth' })}
+                </IonButton>
 
-              <IonRow className="ion-text-center ion-padding-top">
-                <IonCol>
-                  <IonText color="medium">
-                    {t('already-have-account', { ns: 'auth' })}{' '}
-                    <a href="/auth/signin">{t('signin', { ns: 'auth' })}</a>
-                  </IonText>
-                </IonCol>
-              </IonRow>
-            </div>
-          </Form>
-        )}
-      </Formik>
+                <IonRow className="ion-text-center ion-padding-top">
+                  <IonCol>
+                    <IonText color="medium">
+                      {t('already-have-account', { ns: 'auth' })}{' '}
+                      <a href="/auth/signin">{t('signin', { ns: 'auth' })}</a>
+                    </IonText>
+                  </IonCol>
+                </IonRow>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      )}
     </div>
   );
 };
