QF-2017 QDC unified registration cleanup

[AhmedCodeGuy]

Summary

Closes: QF-2017 QF-2466 QF-2469 QF-2446 QF-2444 QF-2442 QF-2440 QF-2027 QF-2026 QF-2004

• rebuild unified registration
• fix infinite browser console warnings
• fix Figtree font

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Test plan

This PR has been tested for responsiveness, different locales en and ar, different themes light, dark, and sepia and different browsers chrome, and safari.

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have commented on my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

Screenshots example for the main page

Before	After

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
quran-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 11, 2025 9:47pm

[Copilot]

Pull Request Overview

This PR unifies and cleans up the registration flow, replaces ad-hoc back buttons and forms, and fixes font preloading and console warnings.

• Rebuilt the complete signup component into a single unified flow with custom form fields and verification handling
• Introduced a reusable BackButton and PrivacyPolicyText, and refactored LoginContainer and ForgotPasswordForm accordingly
• Extended FormBuilder to support custom error styling and skip native validation, and corrected Figtree font preload type

Reviewed Changes

Copilot reviewed 63 out of 63 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/components/Login/LoginContainer.tsx	Simplified layout, added BackButton & PrivacyPolicyText, removed nested containers
src/components/Login/ForgotPassword/ForgotPasswordForm.tsx	Replaced inline Button with BackButton, added custom Input render, removed redirect on success
src/components/Login/CompleteSignupForm.tsx	New unified complete signup flow with inline verification and custom form fields
src/components/Login/CompleteSignupFormFields/index.ts	Helper for translating and overriding signup form fields, including simplified email regex
src/components/Login/BackButton.tsx	New reusable BackButton component
src/components/FormBuilder/FormBuilder.tsx	Added errorClassName support, shouldSkipValidation prop, and centralized error rendering
src/components/Fonts/FontPreLoader.tsx	Corrected font type for Figtree preload

Comments suppressed due to low confidence (3)

src/components/Login/CompleteSignupForm.tsx:1

• [nitpick] This component exceeds recommended size and complexity. Consider splitting it into smaller subcomponents (e.g., form sections, verification sections) to improve readability and testability.

/* eslint-disable max-lines */

src/components/Login/ForgotPassword/ForgotPasswordForm.tsx:50

• The removal of router.push(getLoginNavigationUrl()) prevents navigation back to the login screen after success; consider re-adding a redirect or alternative flow to complete the user journey.

setIsSubmitting(false);

src/components/Login/LoginContainer.tsx:133

• The conditional full vs inner container logic was removed, which may break intended page styling for verification vs regular views. Verify and restore dynamic container classes if needed.

return <div className={authStyles.outerContainer}>{renderContent()}</div>;

[osamasayed]

bugbot run

[osamasayed]

🔄 Cleaner Approach: Composition Over Configuration

The variant approach adds complexity to the base Input component. Here's a cleaner solution using composition by creating AuthInput:

// Simple dedicated component
<AuthInput {...props} htmlType="email" />

AuthInput implementation:

import React from 'react';

import classNames from 'classnames';

import Input, { InputSize } from '../Input';

import styles from './AuthInput.module.scss';

interface AuthInputProps {
  id: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  htmlType?: 'text' | 'email' | 'password';
  name?: string;
  autoComplete?: string;
  className?: string;
}

/**
 * Specialized input component for authentication forms.
 * Provides consistent styling and behavior across all auth forms.
 * @param {AuthInputProps} props - The component props
 * @returns {React.FC<AuthInputProps>} - The AuthInput component
 */
const AuthInput: React.FC<AuthInputProps> = ({
  id,
  value,
  onChange,
  placeholder,
  disabled = false,
  htmlType = 'text',
  name,
  autoComplete,
  className,
}) => {
  return (
    <Input
      id={id}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      disabled={disabled}
      htmlType={htmlType}
      name={name}
      size={InputSize.Large}
      fixedWidth={false}
      shouldFlipOnRTL
      containerClassName={classNames(styles.authContainer, className, {
        [styles.disabled]: disabled,
      })}
      inputClassName={classNames(styles.authInput, {
        [styles.hasValue]: value,
      })}
      {...(autoComplete && { autoComplete })}
    />
  );
};

export default AuthInput;

AuthInput.module.scss:

/* Auth-specific container overrides */
.authContainer {
    height: var(--spacing-xxlarge-px);
    border-radius: var(--border-radius-medium-px);
    border: 1px solid var(--color-border-gray-lighter);
    padding-inline: 0;
    width: 100%;
    background-color: var(--color-background-default);
    transition: border-color 0.2s ease;

    &:hover,
    &:focus-within {
        border-color: var(--color-success-medium);
    }

    &.disabled {
        cursor: not-allowed;
        background-color: var(--color-border-gray-faded);
        border-color: var(--color-border-gray-lighter);

        &:hover,
        &:focus-within {
            border-color: var(--color-border-gray-lighter);
        }
    }
}

/* Auth-specific input overrides */
.authInput {
    height: var(--spacing-xxlarge-px);
    padding-inline: calc(var(--spacing-xsmall-px) * 2);
    border: none;
    margin: 0;

    &::placeholder {
        color: var(--color-border-gray-light);
    }

    &:hover,
    &:focus,
    &.hasValue {
        border: none; /* Let container handle the border */
    }

    &:disabled {
        cursor: not-allowed;
        color: var(--color-border-gray-dark);
        background-color: var(--color-border-gray-faded);
    }
}

Input.tsx:

interface Props {
  // ... existing props
  inputClassName?: string;  // ← New prop added
  // ... rest of props
}
...
<input
  className={classNames(styles.input, inputClassName, {  // ← Added inputClassName here
    [styles.error]: type === InputType.Error,
    [styles.success]: type === InputType.Success,
    [styles.warning]: type === InputType.Warning,
    [styles.rtlInput]: shouldFlipOnRTL,
    [styles.disabled]: disabled,
  })}
  // ... rest of input props
/>

Now AuthInput can be used inside the auth-specific forms.

🎯 Benefits

• Single Responsibility: Input stays generic, AuthInput handles auth styling
• DRY: Reuses Input infrastructure without duplication
• Maintainable: Auth changes only touch AuthInput
• Cleaner: No complex conditionals or variant logic

Same functionality, much cleaner architecture! 🚀

---