-
{t('login:login-title')}
- {loginType === LoginType.Email ? (
-
- ) : (
- <>
-
}
- text={
-
,
- }}
- />
- }
- />
-
} text={t('login:feature-1')} />
-
} text={t('login:feature-2')} />
-
} text={t('login:feature-3')} />
-
} text={t('login:feature-4')} />
-
} text={t('login:feature-5')} />
-
{t('login:login-cta')}
-
- )}
-
- {loginType === LoginType.Social && (
- <>
-
- {process.env.NEXT_PUBLIC_ENABLE_MAGIC_LINK_LOGIN === 'true' && (
-
- )}
-
- )}
-
- ,
- link1: ,
- }}
- i18nKey="login:privacy-policy"
- />
-
+
);
diff --git a/src/components/Login/ResendEmailSection.tsx b/src/components/Login/ResendEmailSection.tsx
deleted file mode 100644
index 35cba0af6a..0000000000
--- a/src/components/Login/ResendEmailSection.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import useTranslation from 'next-translate/useTranslation';
-
-import Button, { ButtonVariant } from '../dls/Button/Button';
-
-import styles from './login.module.scss';
-
-type ResendEmailSectionProps = {
- onResendButtonClicked: () => void;
- initialRemainingTimeInSeconds?: number;
-};
-
-const ResendEmailSection = ({
- onResendButtonClicked,
- initialRemainingTimeInSeconds = 60,
-}: ResendEmailSectionProps) => {
- const [remainingTimeInSeconds, setRemainingTimeInSeconds] = useState(
- initialRemainingTimeInSeconds,
- );
- const { t } = useTranslation('common');
-
- const disabled = remainingTimeInSeconds > 0;
-
- useEffect(() => {
- const interval = setInterval(() => {
- setRemainingTimeInSeconds((prevRemainingTime) => {
- if (prevRemainingTime > 0) {
- return prevRemainingTime - 1;
- }
- return prevRemainingTime;
- });
- }, 1000);
-
- return () => clearInterval(interval);
- }, []);
-
- return (
-
-
{t('email-verification.check-spam')}
-
-
- );
-};
-
-export default ResendEmailSection;
diff --git a/src/components/Login/ResetPassword/ResetPasswordForm.tsx b/src/components/Login/ResetPassword/ResetPasswordForm.tsx
new file mode 100644
index 0000000000..efef601009
--- /dev/null
+++ b/src/components/Login/ResetPassword/ResetPasswordForm.tsx
@@ -0,0 +1,99 @@
+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 ArrowLeft from '@/icons/west.svg';
+import QueryParam from '@/types/QueryParam';
+import { resetPassword } from '@/utils/auth/authRequests';
+import { logButtonClick, logFormSubmission } from '@/utils/eventLogger';
+import { getLoginNavigationUrl } from '@/utils/navigation';
+
+const ResetPasswordForm: React.FC = () => {
+ const { t } = useTranslation('login');
+ const router = useRouter();
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const toast = useToast();
+ const token = router.query[QueryParam.TOKEN] as string;
+
+ const formFields: FormBuilderFormField[] = getPasswordFields(
+ t,
+ 'new-password-placeholder',
+ 'confirm-new-password-placeholder',
+ );
+
+ const handleSubmit = async (values: { password: string; confirmPassword: string }) => {
+ logFormSubmission('reset_password');
+ try {
+ if (values.password !== values.confirmPassword) {
+ return getFormErrors(t, ErrorType.MISMATCH);
+ }
+
+ setIsSubmitting(true);
+ const { data: response, errors } = await resetPassword(values.password, token);
+
+ if (!response.success) {
+ setIsSubmitting(false);
+ if (errors.token) {
+ toast(t('errors.expiredToken'), { status: ToastStatus.Error });
+ }
+ return getFormErrors(t, ErrorType.API, errors);
+ }
+
+ toast(t('reset-password-success'), { status: ToastStatus.Success });
+ router.push(getLoginNavigationUrl());
+ return undefined;
+ } catch (error) {
+ setIsSubmitting(false);
+ return getFormErrors(t, ErrorType.RESET_PASSWORD);
+ }
+ };
+
+ const handleBack = () => {
+ logButtonClick('reset_password_back');
+ router.push(getLoginNavigationUrl());
+ };
+
+ const renderAction = (props) => (
+
+ );
+
+ return (
+
+
+
+
{t('set-new-password')}
+
+
+
+ );
+};
+
+export default ResetPasswordForm;
diff --git a/src/components/Login/ServiceCard.tsx b/src/components/Login/ServiceCard.tsx
new file mode 100644
index 0000000000..dda0541ba6
--- /dev/null
+++ b/src/components/Login/ServiceCard.tsx
@@ -0,0 +1,109 @@
+import { FC } from 'react';
+
+import Link from 'next/link';
+import Trans from 'next-translate/Trans';
+import useTranslation from 'next-translate/useTranslation';
+
+import Feature from './Feature';
+import styles from './login.module.scss';
+import SocialButtons from './SocialButtons';
+
+import { SubmissionResult } from '@/components/FormBuilder/FormBuilder';
+import EmailLogin, { EmailLoginData } from '@/components/Login/EmailLogin';
+import QuranLogo from '@/icons/logo_main.svg';
+import QRColoredLogo from '@/icons/qr-colored.svg';
+import QRLogo from '@/icons/qr-logo.svg';
+import ArrowLeft from '@/icons/west.svg';
+
+interface Benefit {
+ id: string;
+ label: string;
+}
+
+interface Props {
+ benefits: {
+ quran: Benefit[];
+ reflect: Benefit[];
+ };
+ isEmailLogin?: boolean;
+ onEmailLoginSubmit?: (data: { email: string }) => SubmissionResult
;
+ onOtherOptionsClicked?: () => void;
+ onBackClick?: () => void;
+ redirect?: string;
+}
+
+const ServiceCard: FC = ({
+ benefits,
+ isEmailLogin,
+ onEmailLoginSubmit,
+ onOtherOptionsClicked,
+ onBackClick,
+ redirect,
+}) => {
+ const { t } = useTranslation('login');
+
+ const renderServiceSection = (isQuranReflect: boolean) => (
+
+
+ {isQuranReflect ? (
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {(isQuranReflect ? benefits.reflect : benefits.quran).map(({ id, label }) => (
+
+ ))}
+
+
+ {!isEmailLogin && (
+ <>
+
{t('welcome-title')}
+
+ {t('welcome-description-1')} {t('quran-text')}
+ {t('welcome-description-2')}
+
+ {t('welcome-description-3')}
+
+
+ )}
+ {isEmailLogin ? (
+
+ ) : (
+ <>
+
+ {renderServiceSection(false)}
+
+ {renderServiceSection(true)}
+
+
{t('login-cta')}
+
+
+ ,
+ link1: ,
+ }}
+ />
+
+ {onBackClick && (
+
+ )}
+
+ )}
+
+
+
+
+ {t('forgot-password')}?
+
+
+
+
+
+ );
+};
+
+export default SignUpForm;
diff --git a/src/components/Login/SignUpForm/ConfirmPasswordField.tsx b/src/components/Login/SignUpForm/ConfirmPasswordField.tsx
new file mode 100644
index 0000000000..354cad4b4c
--- /dev/null
+++ b/src/components/Login/SignUpForm/ConfirmPasswordField.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+import PasswordInput from './PasswordInput';
+
+interface Props {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+}
+
+const ConfirmPasswordField: FC = ({ value, onChange, placeholder }) => (
+
+);
+
+export default ConfirmPasswordField;
diff --git a/src/components/Login/SignUpForm/PasswordField.tsx b/src/components/Login/SignUpForm/PasswordField.tsx
new file mode 100644
index 0000000000..8dd69c0226
--- /dev/null
+++ b/src/components/Login/SignUpForm/PasswordField.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+
+import PasswordInput from './PasswordInput';
+import PasswordValidation from './PasswordValidation';
+
+interface Props {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+}
+
+const PasswordField: FC = ({ value = '', onChange, placeholder }) => (
+ <>
+
+
+
+);
+
+export default PasswordField;
diff --git a/src/components/Login/SignUpForm/PasswordFields.tsx b/src/components/Login/SignUpForm/PasswordFields.tsx
new file mode 100644
index 0000000000..0521d0f46f
--- /dev/null
+++ b/src/components/Login/SignUpForm/PasswordFields.tsx
@@ -0,0 +1,71 @@
+import { FC } from 'react';
+
+import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from '../SignUpFormFields/consts';
+
+import ConfirmPasswordField from './ConfirmPasswordField';
+import PasswordField from './PasswordField';
+
+import { FormBuilderFormField } from '@/components/FormBuilder/FormBuilderTypes';
+import { RuleType } from '@/types/FieldRule';
+import { FormFieldType } from '@/types/FormField';
+
+const getPasswordFields = (
+ t: any,
+ passwordPlaceholderKey = 'password-placeholder',
+ confirmPasswordPlaceholderKey = 'confirm-password-placeholder',
+): FormBuilderFormField[] => {
+ const PasswordInput: FC<{
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ }> = ({ value, onChange, placeholder }) => (
+
+ );
+
+ return [
+ {
+ field: 'password',
+ type: FormFieldType.Password,
+ placeholder: t(passwordPlaceholderKey),
+ rules: [
+ {
+ type: RuleType.Required,
+ value: true,
+ errorMessage: t('errors.required', { fieldName: t('common:form.password') }),
+ },
+ {
+ type: RuleType.MinimumLength,
+ value: PASSWORD_MIN_LENGTH,
+ errorMessage: t('errors.min', {
+ fieldName: t('common:form.password'),
+ min: PASSWORD_MIN_LENGTH,
+ }),
+ },
+ {
+ type: RuleType.MaximumLength,
+ value: PASSWORD_MAX_LENGTH,
+ errorMessage: t('errors.max', {
+ fieldName: t('common:form.password'),
+ max: PASSWORD_MAX_LENGTH,
+ }),
+ },
+ ],
+ customRender: PasswordInput,
+ },
+ {
+ field: 'confirmPassword',
+ type: FormFieldType.Password,
+ placeholder: t(confirmPasswordPlaceholderKey),
+ rules: [
+ {
+ type: RuleType.Required,
+ value: true,
+ errorMessage: t('errors.required', { fieldName: t('common:form.confirm-password') }),
+ },
+ ],
+ customRender: ConfirmPasswordField,
+ },
+ ];
+};
+
+export default getPasswordFields;
diff --git a/src/components/Login/SignUpForm/PasswordInput.module.scss b/src/components/Login/SignUpForm/PasswordInput.module.scss
new file mode 100644
index 0000000000..941e5aa862
--- /dev/null
+++ b/src/components/Login/SignUpForm/PasswordInput.module.scss
@@ -0,0 +1,38 @@
+.passwordInputContainer {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ border: 1px solid var(--color-borders-hairline);
+ border-radius: var(--border-radius-rounded);
+ padding-inline: var(--spacing-small);
+ height: calc(2 * var(--spacing-large));
+}
+
+.toggleButton {
+ position: relative;
+ background: none;
+ border: none;
+ padding: 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--color-text-faded);
+ padding-inline: var(--spacing-xxsmall);
+
+ &:hover {
+ color: var(--color-text-default);
+ }
+
+ &:focus {
+ outline: none;
+ color: var(--color-text-default);
+ }
+}
+
+.icon {
+ width: var(--spacing-large);
+ height: var(--spacing-large);
+}
diff --git a/src/components/Login/SignUpForm/PasswordInput.tsx b/src/components/Login/SignUpForm/PasswordInput.tsx
new file mode 100644
index 0000000000..969b4e10de
--- /dev/null
+++ b/src/components/Login/SignUpForm/PasswordInput.tsx
@@ -0,0 +1,37 @@
+import { FC, useState } from 'react';
+
+import styles from './PasswordInput.module.scss';
+
+import HideIcon from '@/icons/hide.svg';
+import ShowIcon from '@/icons/show.svg';
+
+interface Props {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+}
+
+const PasswordInput: FC = ({ value = '', onChange, placeholder }) => {
+ const [showPassword, setShowPassword] = useState(false);
+
+ return (
+
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ />
+
+
+ );
+};
+
+export default PasswordInput;
diff --git a/src/components/Login/SignUpForm/PasswordValidation.module.scss b/src/components/Login/SignUpForm/PasswordValidation.module.scss
new file mode 100644
index 0000000000..26f3e60036
--- /dev/null
+++ b/src/components/Login/SignUpForm/PasswordValidation.module.scss
@@ -0,0 +1,16 @@
+.passwordValidation {
+ 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-medium-px);
+}
+
+.ruleIcon {
+ margin-inline-end: var(--spacing-xxsmall);
+ font-weight: bold;
+}
diff --git a/src/components/Login/SignUpForm/PasswordValidation.tsx b/src/components/Login/SignUpForm/PasswordValidation.tsx
new file mode 100644
index 0000000000..da7126431f
--- /dev/null
+++ b/src/components/Login/SignUpForm/PasswordValidation.tsx
@@ -0,0 +1,75 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+
+import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from '../SignUpFormFields/consts';
+
+import styles from './PasswordValidation.module.scss';
+
+interface PasswordRule {
+ test: (value: string) => boolean;
+ messageKey: string;
+}
+
+interface Props {
+ value: string;
+}
+
+const PasswordValidation: FC = ({ value = '' }) => {
+ const { t } = useTranslation('login');
+
+ const rules: PasswordRule[] = [
+ {
+ test: (password) => password.length >= PASSWORD_MIN_LENGTH,
+ messageKey: 'password-rules.min-length',
+ },
+ {
+ test: (password) => password.length <= PASSWORD_MAX_LENGTH,
+ messageKey: 'password-rules.max-length',
+ },
+ {
+ test: (password) => /[A-Z]/.test(password),
+ messageKey: 'password-rules.uppercase',
+ },
+ {
+ test: (password) => /[a-z]/.test(password),
+ messageKey: 'password-rules.lowercase',
+ },
+ {
+ test: (password) => /\d/.test(password),
+ messageKey: 'password-rules.number',
+ },
+ {
+ test: (password) => /[!@#$%^&*_-]/.test(password),
+ messageKey: 'password-rules.special',
+ },
+ ];
+
+ // Only show validation rules when there's a value
+ if (!value) {
+ return null;
+ }
+
+ return (
+
+ {rules.map((rule) => {
+ const isValid = rule.test(value);
+ return (
+
+ {isValid ? '✓' : '×'}
+ {t(rule.messageKey)}
+
+ );
+ })}
+
+ }
+ className={styles.loginButton}
+ onClick={() => onSocialButtonClick(AuthType.Google)}
+ shape={ButtonShape.Pill}
+ >
+ {t('continue-google')}
+
+ }
+ className={styles.loginButton}
+ onClick={() => onSocialButtonClick(AuthType.Facebook)}
+ shape={ButtonShape.Pill}
+ >
+ {t('continue-facebook')}
+
+ }
+ className={styles.loginButton}
+ onClick={() => onSocialButtonClick(AuthType.Apple)}
+ shape={ButtonShape.Pill}
+ >
+ {t('continue-apple')}
+
+
+
+ );
+};
+
+export default SocialButtons;
diff --git a/src/components/Login/VerificationCode/VerificationCode.module.scss b/src/components/Login/VerificationCode/VerificationCode.module.scss
new file mode 100644
index 0000000000..abf218eed0
--- /dev/null
+++ b/src/components/Login/VerificationCode/VerificationCode.module.scss
@@ -0,0 +1,115 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ max-width: 400px;
+ margin: 0 auto;
+ padding: var(--spacing-medium);
+}
+
+.title {
+ font-size: var(--font-size-xlarge);
+ font-weight: var(--font-weight-bold);
+ margin-bottom: var(--spacing-mega);
+ text-align: center;
+}
+
+.emailContainer {
+ text-align: center;
+ margin-bottom: var(--spacing-large);
+}
+
+.description {
+ font-size: var(--font-size-large);
+ color: var(--color-text-default);
+ margin-bottom: var(--spacing-xsmall);
+}
+
+.email {
+ font-size: var(--font-size-large);
+ font-weight: var(--font-weight-bold);
+ color: var(--color-text-default);
+}
+
+.instruction {
+ font-size: var(--font-size-large);
+ color: var(--color-text-default);
+ text-align: center;
+ margin-bottom: var(--spacing-large);
+}
+
+.inputContainer {
+ margin-bottom: var(--spacing-medium);
+}
+
+.verificationContainer {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--spacing-xsmall);
+ margin-bottom: var(--spacing-medium);
+}
+
+.character {
+ width: 48px;
+ height: 48px;
+ border: 1px solid var(--color-borders-hairline);
+ border-radius: var(--border-radius-default);
+ font-size: var(--font-size-jumbo);
+ font-weight: var(--font-weight-bold);
+ color: var(--color-text-default);
+ background-color: var(--color-background-default);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: text;
+
+ &:focus {
+ outline: none;
+ border-color: var(--color-primary-medium);
+ box-shadow: 0 0 0 1px var(--color-primary-medium);
+ }
+}
+
+.characterInactive {
+ background-color: var(--color-background-elevated);
+}
+
+.characterSelected {
+ border-color: var(--color-primary-medium);
+ box-shadow: 0 0 0 1px var(--color-primary-medium);
+}
+
+.error {
+ color: var(--color-error-medium);
+ font-size: var(--font-size-small);
+ margin-top: var(--spacing-xxsmall);
+ text-align: center;
+}
+
+.spamNote {
+ font-size: var(--font-size-medium);
+ color: var(--color-text-default);
+ text-align: center;
+ margin-bottom: var(--spacing-large);
+}
+
+.actions {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-small);
+ width: 100%;
+}
+
+.resendButton {
+ color: var(--color-text-faded);
+ font-size: var(--font-size-medium);
+
+ &:disabled {
+ opacity: 1;
+ cursor: not-allowed;
+ }
+}
+
+.backButton {
+ margin-top: var(--spacing-xsmall);
+}
diff --git a/src/components/Login/VerificationCode/VerificationCodeBase.tsx b/src/components/Login/VerificationCode/VerificationCodeBase.tsx
new file mode 100644
index 0000000000..95a43d0d89
--- /dev/null
+++ b/src/components/Login/VerificationCode/VerificationCodeBase.tsx
@@ -0,0 +1,138 @@
+import { FC, useEffect, useState } from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+import VerificationInput from 'react-verification-input';
+
+import styles from './VerificationCode.module.scss';
+
+import {
+ VERIFICATION_CODE_LENGTH,
+ RESEND_COOLDOWN_SECONDS,
+} from '@/components/Login/SignUpFormFields/consts';
+import Button, { ButtonType, ButtonVariant } from '@/dls/Button/Button';
+import { useToast } from '@/dls/Toast/Toast';
+import ArrowLeft from '@/icons/west.svg';
+import { logButtonClick, logFormSubmission } from '@/utils/eventLogger';
+
+interface Props {
+ email: string;
+ onBack: () => void;
+ onResendCode: () => Promise;
+ onSubmitCode: (code: string) => Promise;
+ titleTranslationKey?: string;
+ descriptionTranslationKey?: string;
+ errorTranslationKey?: string;
+ formSubmissionKey?: string;
+ resendClickKey?: string;
+}
+
+const VerificationCodeBase: FC = ({
+ email,
+ onBack,
+ onResendCode,
+ onSubmitCode,
+ titleTranslationKey = 'check-email-title',
+ descriptionTranslationKey = 'verification-code-sent-to',
+ errorTranslationKey = 'errors.verification-code-invalid',
+ formSubmissionKey = 'verification_code_submit',
+ resendClickKey = 'verification_code_resend',
+}) => {
+ const { t } = useTranslation('login');
+ const showToast = useToast();
+ const [resendTimer, setResendTimer] = useState(0);
+ const [verificationCode, setVerificationCode] = useState('');
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ let interval;
+ if (resendTimer > 0) {
+ interval = setInterval(() => {
+ setResendTimer((prev) => prev - 1);
+ }, 1000);
+ }
+ return () => clearInterval(interval);
+ }, [resendTimer]);
+
+ const handleSubmit = async (code: string) => {
+ logFormSubmission(formSubmissionKey);
+ setError('');
+
+ try {
+ await onSubmitCode(code);
+ } catch (err) {
+ setError(t(errorTranslationKey));
+ }
+ };
+
+ const handleChange = (code: string) => {
+ setVerificationCode(code);
+ if (code.length === VERIFICATION_CODE_LENGTH) {
+ handleSubmit(code);
+ }
+ };
+
+ const handleResendCode = async () => {
+ logButtonClick(resendClickKey);
+ if (resendTimer > 0) return;
+
+ try {
+ await onResendCode();
+ setResendTimer(RESEND_COOLDOWN_SECONDS);
+ setVerificationCode(''); // Clear the input on resend
+ showToast(t('verification-code-sent'));
+ } catch (err) {
+ showToast(t('errors.verification-resend-failed'));
+ }
+ };
+
+ return (
+
+
{t(titleTranslationKey)}
+
+
{t(descriptionTranslationKey)}
+
{email}
+
+
{t('verification-code-instruction')}
+
+
+
+
{t('verification-code-spam-note')}
+
+
+
+
+
+
+