Updates

locales/en/login.json

@@ -10,7 +10,9 @@
   "first-name-placeholder": "First Name",
   "last-name-placeholder": "Last Name",
   "username-placeholder": "Username",
-  "confirm-password-placeholder": "Confirm Password",
+  "confirm-password-placeholder": "Confirm password",
+  "confirm-new-password-placeholder": "Confirm new password",
+  "confirm": "Confirm",
   "error": {
     "email-required": "Email is missing!",
     "invalid-email": "Invalid Email Format!",
@@ -56,6 +58,7 @@
   "forgot-password-title": "Forgot password?",
   "forgot-password-description": "Enter your email address and we'll send you instructions to reset your password.",
   "reset-password": "Reset Password",
+  "set-new-password": "Set a new password",
   "back-to-login": "Back to Login",
   "forgot-password-success": "Password reset email sent! Please check your inbox.",
   "password-reset-success": "Password reset successfully!",
@@ -68,6 +71,7 @@
   "login-title": "Login to Quran.com",
   "other-options": "Other Login Options",
   "password-placeholder": "Password",
+  "new-password-placeholder": "New password",
   "privacy-policy": "Protecting your privacy is our priority – By signing up, you consent to our <link>Privacy Policy</link> and <link1>Terms and conditions</link1>.",
   "quran-title": "Quran.com",
   "sign-in": "Sign in",
@@ -101,5 +105,6 @@
   "verification-code-spam-note": "Didn't receive an email? Check your spam folder",
   "verification-code-resend": "Resend email",
   "verification-code-resend-countdown": "Resend verification email in {{seconds}} sec...",
-  "verification-code-sent": "Verification code sent!"
+  "verification-code-sent": "Verification code sent!",
+  "reset-password-success": "Password reset successfully!"
 }

src/components/Login/AuthTabs.tsx

@@ -46,7 +46,7 @@ const AuthTabs: FC<Props> = ({ activeTab, onTabChange, redirect, onSignUpSuccess
             items={items}
             selected={activeTab}
             onSelect={onTabChange}
-            size={SwitchSize.Small}
+            size={SwitchSize.Normal}
           />
         </div>
         {activeTab === AuthTab.SignIn ? (

src/components/Login/CompleteSignupForm.tsx

@@ -2,11 +2,11 @@ import useTranslation from 'next-translate/useTranslation';
 import { useSWRConfig } from 'swr';
 
 import buildFormBuilderFormField from '../FormBuilder/buildFormBuilderFormField';
-import FormBuilder from '../FormBuilder/FormBuilder';
 
 import styles from './CompleteSignupForm.module.scss';
 import EmailVerificationForm from './EmailVerificationForm';
 
+import FormBuilder from '@/components/FormBuilder/FormBuilder';
 import { completeSignup } from '@/utils/auth/api';
 import { makeUserProfileUrl } from '@/utils/auth/apiPaths';
 import { logFormSubmission } from '@/utils/eventLogger';

src/components/Login/CompleteSignupForm/index.tsx

@@ -3,12 +3,8 @@ import { useState } from 'react';
 import useTranslation from 'next-translate/useTranslation';
 import { useSWRConfig } from 'swr';
 
-import buildFormBuilderFormField from '../../FormBuilder/buildFormBuilderFormField';
-import FormBuilder from '../../FormBuilder/FormBuilder';
-import styles from '../CompleteSignupForm.module.scss';
-
-import EmailVerificationSection from './EmailVerificationSection';
-
+import buildFormBuilderFormField from '@/components/FormBuilder/buildFormBuilderFormField';
+import FormBuilder from '@/components/FormBuilder/FormBuilder';
 import { makeUserProfileUrl } from '@/utils/auth/apiPaths';
 import { signUp } from '@/utils/auth/authRequests';
 import { logFormSubmission } from '@/utils/eventLogger';

src/components/Login/ForgotPassword/ForgotPasswordForm.tsx

@@ -58,28 +58,26 @@ const ForgotPasswordForm: React.FC = () => {
       type={ButtonType.Success}
       className={styles.submitButton}
     >
-      {t('reset-password')}
+      {t('confirm')}
     </Button>
   );
 
   return (
     <div className={styles.outerContainer}>
       <div className={styles.authContainer}>
         <AuthHeader />
-        <div className={styles.authContent}>
-          <h1 className={styles.authTitle}>{t('forgot-password-title')}</h1>
-          <p className={styles.description}>{t('forgot-password-description')}</p>
-          <div className={styles.formContainer}>
-            <FormBuilder
-              formFields={formFields}
-              onSubmit={handleSubmit}
-              renderAction={renderAction}
-              isSubmitting={isSubmitting}
-            />
-            <Button variant={ButtonVariant.Compact} onClick={handleBack} isDisabled={isSubmitting}>
-              <ArrowLeft /> {t('back')}
-            </Button>
-          </div>
+        <h1 className={styles.authTitle}>{t('forgot-password-title')}</h1>
+        <p className={styles.description}>{t('forgot-password-description')}</p>
+        <div className={styles.formContainer}>
+          <FormBuilder
+            formFields={formFields}
+            onSubmit={handleSubmit}
+            renderAction={renderAction}
+            isSubmitting={isSubmitting}
+          />
+          <Button variant={ButtonVariant.Compact} onClick={handleBack} isDisabled={isSubmitting}>
+            <ArrowLeft /> {t('back')}
+          </Button>
         </div>
       </div>
     </div>

src/components/Login/ResetPassword/ResetPasswordForm.tsx

@@ -3,14 +3,16 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import useTranslation from 'next-translate/useTranslation';
 
+import AuthHeader from '../AuthHeader';
+import styles from '../login.module.scss';
 import getFormErrors, { ErrorType } from '../SignUpForm/errors';
 import getPasswordFields from '../SignUpForm/PasswordFields';
 
 import Button, { ButtonShape, ButtonType, ButtonVariant } from '@/components/dls/Button/Button';
 import FormBuilder from '@/components/FormBuilder/FormBuilder';
 import { FormBuilderFormField } from '@/components/FormBuilder/FormBuilderTypes';
 import { useToast, ToastStatus } from '@/dls/Toast/Toast';
-import authStyles from '@/styles/auth/auth.module.scss';
+import ArrowLeft from '@/icons/west.svg';
 import QueryParam from '@/types/QueryParam';
 import { resetPassword } from '@/utils/auth/authRequests';
 import { logButtonClick, logFormSubmission } from '@/utils/eventLogger';
@@ -23,7 +25,11 @@ const ResetPasswordForm: React.FC = () => {
   const toast = useToast();
   const token = router.query[QueryParam.TOKEN] as string;
 
-  const formFields: FormBuilderFormField[] = getPasswordFields(t);
+  const formFields: FormBuilderFormField[] = getPasswordFields(
+    t,
+    'new-password-placeholder',
+    'confirm-new-password-placeholder',
+  );
 
   const handleSubmit = async (values: { password: string; confirmPassword: string }) => {
     logFormSubmission('reset_password');
@@ -63,31 +69,26 @@ const ResetPasswordForm: React.FC = () => {
       block
       shape={ButtonShape.Pill}
       type={ButtonType.Success}
-      className={authStyles.submitButton}
+      className={styles.submitButton}
     >
-      {t('reset-password')}
+      {t('confirm')}
     </Button>
   );
 
   return (
-    <div className={authStyles.outerContainer}>
-      <div className={authStyles.innerContainer}>
-        <h1 className={authStyles.title}>{t('reset-password')}</h1>
-        <div className={authStyles.formContainer}>
+    <div className={styles.outerContainer}>
+      <div className={styles.authContainer}>
+        <AuthHeader />
+        <h1 className={styles.authTitle}>{t('set-new-password')}</h1>
+        <div className={styles.formContainer}>
           <FormBuilder
             formFields={formFields}
             onSubmit={handleSubmit}
             renderAction={renderAction}
             isSubmitting={isSubmitting}
           />
-          <Button
-            variant={ButtonVariant.Outlined}
-            shape={ButtonShape.Pill}
-            className={authStyles.backButton}
-            onClick={handleBack}
-            isDisabled={isSubmitting}
-          >
-            {t('back-to-login')}
+          <Button variant={ButtonVariant.Compact} onClick={handleBack} isDisabled={isSubmitting}>
+            <ArrowLeft /> {t('back')}
           </Button>
         </div>
       </div>

src/components/Login/SignInForm.tsx

@@ -3,14 +3,13 @@ import { FC, useState } from 'react';
 import { useRouter } from 'next/router';
 import useTranslation from 'next-translate/useTranslation';
 
-import { FormBuilderFormField } from '../FormBuilder/FormBuilderTypes';
-
 import styles from './login.module.scss';
 import SignInPasswordField from './SignInForm/SignInPasswordField';
 import getFormErrors, { ErrorType } from './SignUpForm/errors';
 import { getEmailField } from './SignUpFormFields/credentialFields';
 
 import FormBuilder from '@/components/FormBuilder/FormBuilder';
+import { FormBuilderFormField } from '@/components/FormBuilder/FormBuilderTypes';
 import Button, { ButtonShape, ButtonType } from '@/dls/Button/Button';
 import Link, { LinkVariant } from '@/dls/Link/Link';
 import { RuleType } from '@/types/FieldRule';

src/components/Login/SignUpForm/PasswordFields.tsx

@@ -9,7 +9,11 @@ import { FormBuilderFormField } from '@/components/FormBuilder/FormBuilderTypes'
 import { RuleType } from '@/types/FieldRule';
 import { FormFieldType } from '@/types/FormField';
 
-const getPasswordFields = (t: any): FormBuilderFormField[] => {
+const getPasswordFields = (
+  t: any,
+  passwordPlaceholderKey = 'password-placeholder',
+  confirmPasswordPlaceholderKey = 'confirm-password-placeholder',
+): FormBuilderFormField[] => {
   const PasswordInput: FC<{
     value: string;
     onChange: (value: string) => void;
@@ -22,7 +26,7 @@ const getPasswordFields = (t: any): FormBuilderFormField[] => {
     {
       field: 'password',
       type: FormFieldType.Password,
-      placeholder: t('password-placeholder'),
+      placeholder: t(passwordPlaceholderKey),
       rules: [
         {
           type: RuleType.Required,
@@ -51,7 +55,7 @@ const getPasswordFields = (t: any): FormBuilderFormField[] => {
     {
       field: 'confirmPassword',
       type: FormFieldType.Password,
-      placeholder: t('confirm-password-placeholder'),
+      placeholder: t(confirmPasswordPlaceholderKey),
       rules: [
         {
           type: RuleType.Required,

src/components/Login/SignUpForm/PasswordValidation.module.scss

@@ -1,13 +1,13 @@
 .passwordValidation {
-    margin-top: 8px;
+    margin-top: var(--spacing-medium2-px);
 }
 
 .validationRule {
     display: flex;
     align-items: center;
     margin-block: var(--spacing-xxsmall);
     color: var(--color-text-gray);
-    font-size: var(--font-size-xsmall-px);
+    font-size: var(--font-size-medium-px);
 }
 
 .ruleIcon {

src/components/Login/VerificationCode/VerificationCodeForm.tsx

@@ -3,11 +3,10 @@ import { FC } from 'react';
 
 import { useRouter } from 'next/router';
 
-import AuthHeader from '../AuthHeader';
-import styles from '../login.module.scss';
-
 import VerificationCodeBase from './VerificationCodeBase';
 
+import AuthHeader from '@/components/Login/AuthHeader';
+import styles from '@/components/Login/login.module.scss';
 import SignUpRequest from '@/types/auth/SignUpRequest';
 import { signUp } from '@/utils/auth/authRequests';
 import { logFormSubmission } from '@/utils/eventLogger';
@@ -41,14 +40,12 @@ const VerificationCodeForm: FC<Props> = ({ email, onBack, onResendCode, signUpDa
   return (
     <div className={styles.authContainer}>
       <AuthHeader />
-      <div className={styles.authContent}>
-        <VerificationCodeBase
-          email={email}
-          onBack={onBack}
-          onResendCode={onResendCode}
-          onSubmitCode={handleSubmitCode}
-        />
-      </div>
+      <VerificationCodeBase
+        email={email}
+        onBack={onBack}
+        onResendCode={onResendCode}
+        onSubmitCode={handleSubmitCode}
+      />
     </div>
   );
 };

src/components/Login/login.module.scss

@@ -11,7 +11,7 @@ $container-width: 370px;
   padding: var(--spacing-mega);
   flex-direction: column;
   background-color: var(--color-background-default);
-  width: 400px;
+  max-width: 400px;
   margin-inline: auto;
 }
 
@@ -38,7 +38,6 @@ $container-width: 370px;
   margin-block-end: var(--spacing-xlarge);
   color: var(--color-text-default);
   max-width: 400px;
-  line-height: 1.5;
 }
 
 .inlineText {
@@ -96,7 +95,6 @@ $container-width: 370px;
 
 .benefitText {
   margin: 0;
-  line-height: 1.5;
 }
 
 .authButtons {
@@ -204,7 +202,6 @@ $container-width: 370px;
   width: 100%;
   display: flex;
   flex-direction: column;
-  background: var(--color-background-elevated);
   overflow: hidden;
   max-width: 400px;
   margin: 0 auto;
@@ -220,6 +217,9 @@ $container-width: 370px;
   svg {
     height: 32px;
     width: auto;
+    @include breakpoints.smallerThanTablet {
+      height: 20px;
+    }
   }
 }
 
@@ -231,6 +231,9 @@ $container-width: 370px;
   svg {
     height: 29px;
     width: auto;
+    @include breakpoints.smallerThanTablet {
+      height: 20px;
+    }
   }
 }
 
@@ -253,14 +256,14 @@ $container-width: 370px;
   margin: 0;
   text-align: center;
   color: var(--color-text-default);
+  margin-block: var(--spacing-large);
 }
 
 .description {
   text-align: center;
   color: var(--color-text-default);
-  margin-bottom: var(--spacing-large);
+  margin-block: var(--spacing-large);
   font-size: var(--font-size-large);
-  line-height: 1.5;
 }
 
 .formContainer {
@@ -276,21 +279,6 @@ $container-width: 370px;
     width: 95%;
   }
 
-  .form-field {
-    margin-bottom: var(--spacing-medium);
-  }
-
-  .input-container {
-    border: 1px solid var(--color-borders-hairline);
-    border-radius: var(--border-radius-default);
-    background: var(--color-background-default);
-    transition: border-color 0.2s ease;
-
-    &:focus-within {
-      border-color: var(--color-success-medium);
-    }
-  }
-
   input {
     border: none;
     width: 100%;
@@ -426,7 +414,6 @@ $container-width: 370px;
   margin-block-start: var(--spacing-large);
   border: 1px solid var(--color-text-default);
   border-radius: var(--border-radius-rounded);
-  background: var(--color-background-elevated);
   padding: 0;
 }