{tCommon('register')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {tCommon('firstName')}
-{tCommon('lastName')}
-{tCommon('emailAddress')}
-{tCommon('password')}
-{tCommon('confirmPassword')}
-
- {t('alreadyhaveAnAccount')}{' '}
-
- {tCommon('login')}
-
-
-
- );
-}
diff --git a/src/screens/BlockUser/BlockUser.tsx b/src/screens/BlockUser/BlockUser.tsx
index eaa18199598..8345e163d55 100644
--- a/src/screens/BlockUser/BlockUser.tsx
+++ b/src/screens/BlockUser/BlockUser.tsx
@@ -66,7 +66,7 @@ import type {
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBan, faUserPlus } from '@fortawesome/free-solid-svg-icons';
-import PageHeader from 'shared-components/Navbar/Navbar';
+import PageHeader from 'shared-components/Navbar/PageHeader';
const BlockUser = (): JSX.Element => {
// Translation hooks for internationalization
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index b4d326b94d2..e28012564c5 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -1,343 +1,92 @@
-/**
- * @file LoginPage.tsx
- * @description This file contains the implementation of the Login and Registration page for the Talawa Admin application.
- * It includes functionality for user authentication, password validation, reCAPTCHA verification, and organization selection.
- * The page supports both admin and user roles and provides localization support.
- *
- * @module LoginPage
- *
- * @requires react
- * @requires react-router-dom
- * @requires react-bootstrap
- * @requires react-google-recaptcha
- * @requires @apollo/client
- * @requires @mui/icons-material
- * @requires @mui/material
- * @requires react-toastify
- * @requires i18next
- * @requires utils/errorHandler
- * @requires utils/useLocalstorage
- * @requires utils/useSession
- * @requires utils/i18n
- * @requires GraphQl/Mutations/mutations
- * @requires GraphQl/Queries/Queries
- * @requires components/ChangeLanguageDropdown/ChangeLanguageDropDown
- * @requires components/LoginPortalToggle/LoginPortalToggle
- * @requires assets/svgs/palisadoes.svg
- * @requires assets/svgs/talawa.svg
- *
- * @component
- * @description The `loginPage` component renders a login and registration interface with the following features:
- * - Login and registration forms with validation.
- * - Password strength checks and visibility toggles.
- * - reCAPTCHA integration for bot prevention.
- * - Organization selection using an autocomplete dropdown.
- * - Social media links and community branding.
- * - Role-based navigation for admin and user.
- *
- * @returns {JSX.Element} The rendered login and registration page.
- *
- * @example
- * ```tsx
- * import LoginPage from './LoginPage';
- *
- * const App = () => {
- * return
- {data?.community ? (
-
- 
-
- {data.community.name}
- - ) : ( - -{t('fromPalisadoes')}
- - )} -{socialIconsList}
-
-
-
-
-
-
-
- {/* REGISTER FORM */}
-
-
-
-
+
+
+
+
+
+
+ {/* Branding Block */}
+ {communityData ? (
+
+ 
+
+ );
+};
+
+export default AuthBranding;
diff --git a/src/shared-components/LoginForm/LoginForm.spec.tsx b/src/shared-components/LoginForm/LoginForm.spec.tsx
new file mode 100644
index 00000000000..2c712bb97cb
--- /dev/null
+++ b/src/shared-components/LoginForm/LoginForm.spec.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import LoginForm from './LoginForm';
+
+const mockOnSubmit = vi.fn();
+
+afterEach(() => {
+ vi.clearAllMocks();
+});
+
+const renderComponent = (props = {}) => {
+ return render(
+ {communityData.name}
+ + ) : ( + +{t('fromPalisadoes')}
+ + )} + + {/* Social Media Icons */} +{renderSocialLinks()}
+
+
+
+ );
+};
+
+export default LoginForm;
diff --git a/src/shared-components/Navbar/Navbar.spec.tsx b/src/shared-components/Navbar/PageHeader.spec.tsx
similarity index 98%
rename from src/shared-components/Navbar/Navbar.spec.tsx
rename to src/shared-components/Navbar/PageHeader.spec.tsx
index 563f15d76cf..d7e99c4be64 100644
--- a/src/shared-components/Navbar/Navbar.spec.tsx
+++ b/src/shared-components/Navbar/PageHeader.spec.tsx
@@ -6,7 +6,7 @@ afterEach(() => {
vi.restoreAllMocks();
vi.clearAllMocks();
});
-import PageHeader from './Navbar';
+import PageHeader from './PageHeader';
describe('PageHeader Component', () => {
it('renders title when provided', () => {
diff --git a/src/shared-components/Navbar/Navbar.tsx b/src/shared-components/Navbar/PageHeader.tsx
similarity index 89%
rename from src/shared-components/Navbar/Navbar.tsx
rename to src/shared-components/Navbar/PageHeader.tsx
index 195c814a11c..9fbce380cfe 100644
--- a/src/shared-components/Navbar/Navbar.tsx
+++ b/src/shared-components/Navbar/PageHeader.tsx
@@ -62,25 +62,7 @@ import React from 'react';
import styles from 'style/app-fixed.module.css';
import SearchBar from 'shared-components/SearchBar/SearchBar';
import SortingButton from 'subComponents/SortingButton';
-
-interface InterfacePageHeaderProps {
- title?: string;
- search?: {
- placeholder: string;
- onSearch: (value: string) => void;
- inputTestId?: string;
- buttonTestId?: string;
- };
- sorting?: Array<{
- title: string;
- options: { label: string; value: string | number }[];
- selected: string | number;
- onChange: (value: string | number) => void;
- testIdPrefix: string;
- }>;
- showEventTypeFilter?: boolean;
- actions?: React.ReactNode;
-}
+import { InterfacePageHeaderProps } from 'types/Navbar/interface';
export default function PageHeader({
title,
diff --git a/src/shared-components/OrganizationSelector/OrganizationSelector.spec.tsx b/src/shared-components/OrganizationSelector/OrganizationSelector.spec.tsx
new file mode 100644
index 00000000000..7fa7675aad1
--- /dev/null
+++ b/src/shared-components/OrganizationSelector/OrganizationSelector.spec.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import OrganizationSelector from './OrganizationSelector';
+
+describe('OrganizationSelector Component', () => {
+ const mockOnChange = vi.fn();
+ const mockOrganizations = [
+ { label: 'Org 1', id: '1' },
+ { label: 'Org 2', id: '2' },
+ ];
+
+ afterEach(() => {
+ vi.clearAllMocks();
+ });
+
+ const renderComponent = (props = {}) => {
+ return render(
+
+
+ );
+};
+
+export default OrganizationSelector;
diff --git a/src/shared-components/PasswordField/PasswordField.spec.tsx b/src/shared-components/PasswordField/PasswordField.spec.tsx
new file mode 100644
index 00000000000..720be41d6fc
--- /dev/null
+++ b/src/shared-components/PasswordField/PasswordField.spec.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import PasswordField from './PasswordField';
+
+describe('PasswordField Component', () => {
+ const mockOnChange = vi.fn();
+
+ afterEach(() => {
+ vi.clearAllMocks();
+ });
+
+ const defaultProps = {
+ label: 'Password',
+ value: '',
+ onChange: mockOnChange,
+ };
+
+ it('should render password field', () => {
+ render(
+ {
+ onChange(newValue?.id ?? '');
+ }}
+ options={organizations}
+ disabled={disabled}
+ getOptionLabel={(option) => option.label}
+ isOptionEqualToValue={(option, value) => option.id === value.id}
+ renderInput={(params) => (
+
+ {t('selectOrg')}
+ {required && *}
+
+ }
+ required={required}
+ />
+ )}
+ />
+
+
+ {label}
+
+ );
+};
+
+export default PasswordField;
diff --git a/src/shared-components/PasswordValidator/PasswordValidator.spec.tsx b/src/shared-components/PasswordValidator/PasswordValidator.spec.tsx
new file mode 100644
index 00000000000..7920f813882
--- /dev/null
+++ b/src/shared-components/PasswordValidator/PasswordValidator.spec.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import i18nForTest from 'utils/i18nForTest';
+import PasswordValidator from './PasswordValidator';
+
+describe('PasswordValidator Component', () => {
+ const defaultProps = {
+ password: '',
+ isInputFocused: false,
+ validation: {
+ lowercaseChar: true,
+ uppercaseChar: true,
+ numericValue: true,
+ specialChar: true,
+ },
+ };
+
+ const renderComponent = (props = {}) => {
+ return render(
+
+ onChange(e.target.value)}
+ disabled={disabled}
+ onFocus={onFocus}
+ onBlur={onBlur}
+ autoComplete={autoComplete}
+ data-testid={testId}
+ />
+
+
+
+ {isInputFocused ? (
+ password.length < 6 ? (
+
+ );
+};
+
+export default PasswordValidator;
diff --git a/src/shared-components/PasswordValidator/ValidationItem.spec.tsx b/src/shared-components/PasswordValidator/ValidationItem.spec.tsx
new file mode 100644
index 00000000000..1eb8fcc5dfa
--- /dev/null
+++ b/src/shared-components/PasswordValidator/ValidationItem.spec.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ValidationItem from './ValidationItem';
+
+describe('ValidationItem Component', () => {
+ it('should render with failed validation (danger styling and Clear icon)', () => {
+ render(
+
+ ) : (
+
+
+
+
+
+
+
+ )}
+
+ {isInputFocused && (
+ <>
+
+ {isValid ?