Merge branch 'main' into forgot-passworrd

frontend/jest.config.ts

@@ -17,6 +17,8 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^@signozhq/icons$':
+			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -52,6 +52,7 @@
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "2.1.1",
+		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
 		"@signozhq/resizable": "0.0.0",

frontend/public/locales/en/titles.json

@@ -1,6 +1,7 @@
 {
 	"SIGN_UP": "SigNoz | Sign Up",
 	"LOGIN": "SigNoz | Login",
+	"FORGOT_PASSWORD": "SigNoz | Forgot Password",
 	"HOME": "SigNoz | Home",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",

frontend/src/AppRoutes/pageComponents.ts

@@ -194,6 +194,10 @@ export const Login = Loadable(
 	() => import(/* webpackChunkName: "Login" */ 'pages/Login'),
 );
 
+export const ForgotPassword = Loadable(
+	() => import(/* webpackChunkName: "ForgotPassword" */ 'pages/ForgotPassword'),
+);
+
 export const UnAuthorized = Loadable(
 	() => import(/* webpackChunkName: "UnAuthorized" */ 'pages/UnAuthorized'),
 );

frontend/src/AppRoutes/routes.ts

@@ -17,6 +17,7 @@ import {
 	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
+	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
 	InstalledIntegrations,
@@ -339,6 +340,13 @@ const routes: AppRoutes[] = [
 		isPrivate: false,
 		key: 'LOGIN',
 	},
+	{
+		path: ROUTES.FORGOT_PASSWORD,
+		exact: true,
+		component: ForgotPassword,
+		isPrivate: false,
+		key: 'FORGOT_PASSWORD',
+	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
 		exact: true,

frontend/src/auto-import-registry.d.ts

@@ -18,6 +18,7 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/resizable';

frontend/src/constants/routes.ts

@@ -1,6 +1,7 @@
 const ROUTES = {
 	SIGN_UP: '/signup',
 	LOGIN: '/login',
+	FORGOT_PASSWORD: '/forgot-password',
 	HOME: '/home',
 	SERVICE_METRICS: '/services/:servicename',
 	SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',

frontend/src/container/ForgotPassword/ForgotPassword.styles.scss

@@ -0,0 +1,93 @@
+.forgot-password-title {
+	font-family: var(--label-large-600-font-family);
+	font-size: var(--label-large-600-font-size);
+	font-weight: var(--label-large-600-font-weight);
+	letter-spacing: var(--label-large-600-letter-spacing);
+	line-height: 1.45;
+	color: var(--l1-foreground);
+	margin: 0;
+}
+
+.forgot-password-description {
+	font-family: var(--paragraph-base-400-font-family);
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	line-height: var(--paragraph-base-400-line-height);
+	letter-spacing: -0.065px;
+	color: var(--l2-foreground);
+	margin: 0;
+	text-align: center;
+	max-width: 317px;
+}
+
+.forgot-password-form {
+	width: 100%;
+
+	// Label styling
+	.forgot-password-label {
+		font-family: Inter, sans-serif;
+		font-size: 13px;
+		font-weight: 600;
+		line-height: 1;
+		letter-spacing: -0.065px;
+		color: var(--l1-foreground);
+		margin-bottom: 12px;
+		display: block;
+
+		.lightMode & {
+			color: var(--text-ink-500);
+		}
+	}
+
+	// Parent container for fields
+	.forgot-password-field {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&.ant-form {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		.ant-form-item {
+			margin-bottom: 0px;
+			width: 100%;
+		}
+	}
+}
+
+.forgot-password-actions {
+	display: flex;
+	gap: 12px;
+	width: 100%;
+
+	> .forgot-password-back-button,
+	> .login-submit-btn {
+		flex: 1 1 0%;
+	}
+}
+
+.forgot-password-back-button {
+	height: 32px;
+	padding: 10px 16px;
+	border-radius: 2px;
+	font-family: Inter, sans-serif;
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	background: var(--l3-background);
+	border: 1px solid var(--l3-border);
+	color: var(--l1-foreground);
+
+	&:hover:not(:disabled) {
+		background: var(--l3-border);
+		border-color: var(--l3-border);
+		opacity: 0.9;
+	}
+}

frontend/src/container/ForgotPassword/SuccessScreen.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@signozhq/button';
+import { ArrowLeft, Mail } from '@signozhq/icons';
+
+interface SuccessScreenProps {
+	onBackToLogin: () => void;
+}
+
+function SuccessScreen({ onBackToLogin }: SuccessScreenProps): JSX.Element {
+	return (
+		<div className="login-form-container">
+			<div className="forgot-password-form">
+				<div className="login-form-header">
+					<div className="login-form-emoji">
+						<Mail size={32} />
+					</div>
+					<h4 className="forgot-password-title">Check your email</h4>
+					<p className="forgot-password-description">
+						We&apos;ve sent a password reset link to your email. Please check your
+						inbox and follow the instructions to reset your password.
+					</p>
+				</div>
+
+				<div className="login-form-actions forgot-password-actions">
+					<Button
+						variant="solid"
+						color="primary"
+						type="button"
+						data-testid="back-to-login"
+						className="login-submit-btn"
+						onClick={onBackToLogin}
+						prefixIcon={<ArrowLeft size={12} />}
+					>
+						Back to login
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default SuccessScreen;

frontend/src/container/ForgotPassword/__tests__/ForgotPassword.test.tsx

@@ -0,0 +1,402 @@
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import {
+	createErrorResponse,
+	handleInternalServerError,
+	rest,
+	server,
+} from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+
+import ForgotPassword, { ForgotPasswordRouteState } from '../index';
+
+// Mock dependencies
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: {
+			search: '',
+		},
+	},
+}));
+
+const mockHistoryPush = history.push as jest.MockedFunction<
+	typeof history.push
+>;
+
+const FORGOT_PASSWORD_ENDPOINT = '*/api/v2/factor_password/forgot';
+
+// Mock data
+const mockSingleOrg: OrgSessionContext[] = [
+	{
+		id: 'org-1',
+		name: 'Test Organization',
+		authNSupport: {
+			password: [{ provider: 'email_password' }],
+			callback: [],
+		},
+	},
+];
+
+const mockMultipleOrgs: OrgSessionContext[] = [
+	{
+		id: 'org-1',
+		name: 'Organization One',
+		authNSupport: {
+			password: [{ provider: 'email_password' }],
+			callback: [],
+		},
+	},
+	{
+		id: 'org-2',
+		name: 'Organization Two',
+		authNSupport: {
+			password: [{ provider: 'email_password' }],
+			callback: [],
+		},
+	},
+];
+
+const TEST_EMAIL = 'jest.test@signoz.io';
+
+const defaultProps: ForgotPasswordRouteState = {
+	email: TEST_EMAIL,
+	orgs: mockSingleOrg,
+};
+
+const multiOrgProps: ForgotPasswordRouteState = {
+	email: TEST_EMAIL,
+	orgs: mockMultipleOrgs,
+};
+
+describe('ForgotPassword Component', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('Initial Render', () => {
+		it('renders forgot password form with all required elements', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			expect(screen.getByText(/forgot your password\?/i)).toBeInTheDocument();
+			expect(
+				screen.getByText(/send a reset link to your inbox/i),
+			).toBeInTheDocument();
+			expect(screen.getByTestId('email')).toBeInTheDocument();
+			expect(screen.getByTestId('forgot-password-submit')).toBeInTheDocument();
+			expect(screen.getByTestId('forgot-password-back')).toBeInTheDocument();
+		});
+
+		it('pre-fills email from props', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			const emailInput = screen.getByTestId('email');
+			expect(emailInput).toHaveValue(TEST_EMAIL);
+		});
+
+		it('disables email input field', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			const emailInput = screen.getByTestId('email');
+			expect(emailInput).toBeDisabled();
+		});
+
+		it('does not show organization dropdown for single org', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			expect(screen.queryByTestId('orgId')).not.toBeInTheDocument();
+			expect(screen.queryByText('Organization Name')).not.toBeInTheDocument();
+		});
+
+		it('enables submit button when email is provided with single org', () => {
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).not.toBeDisabled();
+		});
+	});
+
+	describe('Multiple Organizations', () => {
+		it('shows organization dropdown when multiple orgs exist', () => {
+			render(<ForgotPassword {...multiOrgProps} />);
+
+			expect(screen.getByTestId('orgId')).toBeInTheDocument();
+			expect(screen.getByText('Organization Name')).toBeInTheDocument();
+		});
+
+		it('disables submit button when org is not selected', () => {
+			const propsWithoutOrgId: ForgotPasswordRouteState = {
+				email: TEST_EMAIL,
+				orgs: mockMultipleOrgs,
+			};
+
+			render(<ForgotPassword {...propsWithoutOrgId} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+
+		it('enables submit button after selecting an organization', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<ForgotPassword {...multiOrgProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+
+			// Click on the dropdown to reveal the options
+			await user.click(screen.getByRole('combobox'));
+			await user.click(screen.getByText('Organization One'));
+
+			await waitFor(() => {
+				expect(submitButton).not.toBeDisabled();
+			});
+		});
+
+		it('pre-selects organization when orgId is provided', () => {
+			const propsWithOrgId: ForgotPasswordRouteState = {
+				email: TEST_EMAIL,
+				orgId: 'org-1',
+				orgs: mockMultipleOrgs,
+			};
+
+			render(<ForgotPassword {...propsWithOrgId} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).not.toBeDisabled();
+		});
+	});
+
+	describe('Form Submission - Success', () => {
+		it('successfully submits forgot password request and shows success screen', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByText(/check your email/i)).toBeInTheDocument();
+			expect(
+				screen.getByText(/we've sent a password reset link/i),
+			).toBeInTheDocument();
+		});
+
+		it('shows back to login button on success screen', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByTestId('back-to-login')).toBeInTheDocument();
+		});
+
+		it('redirects to login when clicking back to login on success screen', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByTestId('back-to-login')).toBeInTheDocument();
+
+			const backToLoginButton = screen.getByTestId('back-to-login');
+			await user.click(backToLoginButton);
+
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+		});
+	});
+
+	describe('Form Submission - Error Handling', () => {
+		it('displays error message when forgot password API fails', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(
+					FORGOT_PASSWORD_ENDPOINT,
+					createErrorResponse(400, 'USER_NOT_FOUND', 'User not found'),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByText(/user not found/i)).toBeInTheDocument();
+		});
+
+		it('displays error message when API returns server error', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(rest.post(FORGOT_PASSWORD_ENDPOINT, handleInternalServerError));
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(
+				await screen.findByText(/internal server error occurred/i),
+			).toBeInTheDocument();
+		});
+
+		it('clears error message on new submission attempt', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			let requestCount = 0;
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) => {
+					requestCount += 1;
+					if (requestCount === 1) {
+						return res(
+							ctx.status(400),
+							ctx.json({
+								error: {
+									code: 'USER_NOT_FOUND',
+									message: 'User not found',
+								},
+							}),
+						);
+					}
+					return res(ctx.status(200), ctx.json({ status: 'success' }));
+				}),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			expect(await screen.findByText(/user not found/i)).toBeInTheDocument();
+
+			// Click submit again
+			await user.click(submitButton);
+
+			await waitFor(() => {
+				expect(screen.queryByText(/user not found/i)).not.toBeInTheDocument();
+			});
+			expect(await screen.findByText(/check your email/i)).toBeInTheDocument();
+		});
+	});
+
+	describe('Navigation', () => {
+		it('redirects to login when clicking back button on form', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const backButton = screen.getByTestId('forgot-password-back');
+			await user.click(backButton);
+
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+		});
+	});
+
+	describe('Loading States', () => {
+		it('shows loading state during API call', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.delay(100), ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			// Button should show loading state
+			expect(await screen.findByText(/sending\.\.\./i)).toBeInTheDocument();
+		});
+
+		it('disables submit button during loading', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.post(FORGOT_PASSWORD_ENDPOINT, (_req, res, ctx) =>
+					res(ctx.delay(100), ctx.status(200), ctx.json({ status: 'success' })),
+				),
+			);
+
+			render(<ForgotPassword {...defaultProps} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			await user.click(submitButton);
+
+			await waitFor(() => {
+				expect(submitButton).toBeDisabled();
+			});
+		});
+	});
+
+	describe('Edge Cases', () => {
+		it('handles empty email gracefully', () => {
+			const propsWithEmptyEmail: ForgotPasswordRouteState = {
+				email: '',
+				orgs: mockSingleOrg,
+			};
+
+			render(<ForgotPassword {...propsWithEmptyEmail} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+
+		it('handles whitespace-only email', () => {
+			const propsWithWhitespaceEmail: ForgotPasswordRouteState = {
+				email: '   ',
+				orgs: mockSingleOrg,
+			};
+
+			render(<ForgotPassword {...propsWithWhitespaceEmail} />);
+
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+
+		it('handles empty orgs array by disabling submission', () => {
+			const propsWithNoOrgs: ForgotPasswordRouteState = {
+				email: TEST_EMAIL,
+				orgs: [],
+			};
+
+			render(<ForgotPassword {...propsWithNoOrgs} />);
+
+			// Should not show org dropdown
+			expect(screen.queryByTestId('orgId')).not.toBeInTheDocument();
+			// Submit should be disabled because no orgId can be determined
+			const submitButton = screen.getByTestId('forgot-password-submit');
+			expect(submitButton).toBeDisabled();
+		});
+	});
+});

frontend/src/container/ForgotPassword/index.tsx

@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { Button } from '@signozhq/button';
+import { ArrowLeft, ArrowRight } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form, Select } from 'antd';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { useForgotPassword } from 'api/generated/services/users';
+import { AxiosError } from 'axios';
+import AuthError from 'components/AuthError/AuthError';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+
+import SuccessScreen from './SuccessScreen';
+
+import './ForgotPassword.styles.scss';
+import 'container/Login/Login.styles.scss';
+
+type FormValues = {
+	email: string;
+	orgId: string;
+};
+
+export type ForgotPasswordRouteState = {
+	email: string;
+	orgId?: string;
+	orgs: OrgSessionContext[];
+};
+
+function ForgotPassword({
+	email,
+	orgId,
+	orgs,
+}: ForgotPasswordRouteState): JSX.Element {
+	const [form] = Form.useForm<FormValues>();
+	const {
+		mutate: forgotPasswordMutate,
+		isLoading,
+		isSuccess,
+		error: mutationError,
+	} = useForgotPassword();
+
+	const errorMessage = useMemo(() => {
+		if (!mutationError) {
+			return undefined;
+		}
+
+		try {
+			ErrorResponseHandlerV2(mutationError as AxiosError<ErrorV2Resp>);
+		} catch (apiError) {
+			return apiError as APIError;
+		}
+	}, [mutationError]);
+
+	const initialOrgId = useMemo((): string | undefined => {
+		if (orgId) {
+			return orgId;
+		}
+
+		if (orgs.length === 1) {
+			return orgs[0]?.id;
+		}
+
+		return undefined;
+	}, [orgId, orgs]);
+
+	const watchedEmail = Form.useWatch('email', form);
+	const selectedOrgId = Form.useWatch('orgId', form);
+
+	useEffect(() => {
+		form.setFieldsValue({
+			email,
+			orgId: initialOrgId,
+		});
+	}, [email, form, initialOrgId]);
+
+	const hasMultipleOrgs = orgs.length > 1;
+
+	const isSubmitEnabled = useMemo((): boolean => {
+		if (isLoading) {
+			return false;
+		}
+
+		if (!watchedEmail?.trim()) {
+			return false;
+		}
+
+		// Ensure we have an orgId (either selected from dropdown or the initial one)
+		const currentOrgId = hasMultipleOrgs ? selectedOrgId : initialOrgId;
+		return Boolean(currentOrgId);
+	}, [watchedEmail, selectedOrgId, isLoading, initialOrgId, hasMultipleOrgs]);
+
+	const handleSubmit = useCallback((): void => {
+		const values = form.getFieldsValue();
+
+		// Call the forgot password API
+		forgotPasswordMutate({
+			data: {
+				email: values.email,
+				// since the submit will already be disabled if org is not present, hence we can have empty fallback in case we get here
+				orgId: (hasMultipleOrgs ? values.orgId : initialOrgId) || '',
+				frontendBaseURL: window.location.origin,
+			},
+		});
+	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);
+
+	const handleBackToLogin = useCallback((): void => {
+		history.push(ROUTES.LOGIN);
+	}, []);
+
+	// Success screen
+	if (isSuccess) {
+		return <SuccessScreen onBackToLogin={handleBackToLogin} />;
+	}
+
+	// Form screen
+	return (
+		<div className="login-form-container">
+			<Form
+				form={form}
+				onFinish={handleSubmit}
+				className="forgot-password-form"
+				initialValues={{
+					email,
+					orgId: initialOrgId,
+				}}
+			>
+				<div className="login-form-header">
+					<div className="login-form-emoji">
+						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
+					</div>
+					<h4 className="forgot-password-title">Forgot your password?</h4>
+					<p className="forgot-password-description">
+						Send a reset link to your inbox and get back to monitoring.
+					</p>
+				</div>
+
+				<div className="login-form-card">
+					<div className="forgot-password-field">
+						<label className="forgot-password-label" htmlFor="forgotPasswordEmail">
+							Email address
+						</label>
+						<Form.Item name="email">
+							<Input
+								type="email"
+								id="forgotPasswordEmail"
+								data-testid="email"
+								required
+								disabled
+								className="login-form-input"
+							/>
+						</Form.Item>
+					</div>
+
+					{hasMultipleOrgs && (
+						<div className="forgot-password-field">
+							<label className="forgot-password-label" htmlFor="orgId">
+								Organization Name
+							</label>
+							<Form.Item name="orgId">
+								<Select
+									id="orgId"
+									data-testid="orgId"
+									className="login-form-input login-form-select-no-border"
+									placeholder="Select your organization"
+									options={orgs.map((org) => ({
+										value: org.id,
+										label: org.name || 'default',
+									}))}
+								/>
+							</Form.Item>
+						</div>
+					)}
+				</div>
+
+				{errorMessage && <AuthError error={errorMessage} />}
+
+				<div className="login-form-actions forgot-password-actions">
+					<Button
+						variant="solid"
+						type="button"
+						data-testid="forgot-password-back"
+						className="forgot-password-back-button"
+						onClick={handleBackToLogin}
+						prefixIcon={<ArrowLeft size={12} />}
+					>
+						Back to login
+					</Button>
+
+					<Button
+						disabled={!isSubmitEnabled}
+						loading={isLoading}
+						variant="solid"
+						color="primary"
+						type="submit"
+						data-testid="forgot-password-submit"
+						className="login-submit-btn"
+						suffixIcon={<ArrowRight size={12} />}
+					>
+						{isLoading ? 'Sending...' : 'Send reset link'}
+					</Button>
+				</div>
+			</Form>
+		</div>
+	);
+}
+
+export default ForgotPassword;

frontend/src/container/Login/Login.styles.scss

@@ -407,6 +407,10 @@
 				color: var(--text-neutral-light-200) !important;
 			}
 
+			.ant-select-selection-item {
+				color: var(--text-ink-500) !important;
+			}
+
 			&:hover .ant-select-selector {
 				border-color: var(--bg-vanilla-300) !important;
 			}

frontend/src/container/Login/index.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { Button } from '@signozhq/button';
-import { Form, Input, Select, Tooltip, Typography } from 'antd';
+import { Form, Input, Select, Typography } from 'antd';
 import getVersion from 'api/v1/version/get';
 import get from 'api/v2/sessions/context/get';
 import post from 'api/v2/sessions/email_password/post';
@@ -220,6 +220,20 @@ function Login(): JSX.Element {
 		}
 	};
 
+	const handleForgotPasswordClick = useCallback((): void => {
+		const email = form.getFieldValue('email');
+
+		if (!email || !sessionsContext || !sessionsContext?.orgs?.length) {
+			return;
+		}
+
+		history.push(ROUTES.FORGOT_PASSWORD, {
+			email,
+			orgId: sessionsOrgId,
+			orgs: sessionsContext.orgs,
+		});
+	}, [form, sessionsContext, sessionsOrgId]);
+
 	useEffect(() => {
 		if (callbackAuthError) {
 			setErrorMessage(
@@ -345,11 +359,12 @@ function Login(): JSX.Element {
 						<ParentContainer>
 							<div className="password-label-container">
 								<Label htmlFor="Password">Password</Label>
-								<Tooltip title="Ask your admin to reset your password and send you a new invite link">
-									<Typography.Link className="forgot-password-link">
-										Forgot password?
-									</Typography.Link>
-								</Tooltip>
+								<Typography.Link
+									className="forgot-password-link"
+									onClick={handleForgotPasswordClick}
+								>
+									Forgot password?
+								</Typography.Link>
 							</div>
 							<FormContainer.Item name="password">
 								<Input.Password

frontend/src/container/SideNav/config.ts

@@ -32,6 +32,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.LIST_ALL_ALERT]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_LICENSES]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGIN]: [QueryParams.resourceAttributes],
+	[ROUTES.FORGOT_PASSWORD]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGS]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGS_BASE]: [QueryParams.resourceAttributes],
 	[ROUTES.MY_SETTINGS]: [QueryParams.resourceAttributes],

frontend/src/mocks-server/server.ts

@@ -7,4 +7,6 @@ import { handlers } from './handlers';
 // This configures a request mocking server with the given request handlers.
 export const server = setupServer(...handlers);
 
+export * from './utils';
+
 export { rest };

frontend/src/mocks-server/utils.ts

@@ -0,0 +1,26 @@
+import { MockedRequest, response, ResponseResolver, restContext } from 'msw';
+
+export const createErrorResponse = (
+	status: number,
+	code: string,
+	message: string,
+): ResponseResolver<MockedRequest, typeof restContext> => (
+	_req,
+	res,
+	ctx,
+): ReturnType<typeof response> =>
+	res(
+		ctx.status(status),
+		ctx.json({
+			error: {
+				code,
+				message,
+			},
+		}),
+	);
+
+export const handleInternalServerError = createErrorResponse(
+	500,
+	'INTERNAL_SERVER_ERROR',
+	'Internal server error occurred',
+);

frontend/src/pages/ForgotPassword/__tests__/ForgotPassword.test.tsx

@@ -0,0 +1,46 @@
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { render, waitFor } from 'tests/test-utils';
+
+import ForgotPassword from '../index';
+
+// Mock dependencies
+jest.mock('lib/history', () => ({
+	__esModule: true,
+	default: {
+		push: jest.fn(),
+		location: {
+			search: '',
+		},
+	},
+}));
+
+const mockHistoryPush = history.push as jest.MockedFunction<
+	typeof history.push
+>;
+
+describe('ForgotPassword Page', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('Route State Handling', () => {
+		it('redirects to login when route state is missing', async () => {
+			render(<ForgotPassword />, undefined, {
+				initialRoute: '/forgot-password',
+			});
+
+			await waitFor(() => {
+				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+			});
+		});
+
+		it('returns null when route state is missing', () => {
+			const { container } = render(<ForgotPassword />, undefined, {
+				initialRoute: '/forgot-password',
+			});
+
+			expect(container.firstChild).toBeNull();
+		});
+	});
+});

frontend/src/pages/ForgotPassword/index.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import AuthPageContainer from 'components/AuthPageContainer';
+import ROUTES from 'constants/routes';
+import ForgotPasswordContainer, {
+	ForgotPasswordRouteState,
+} from 'container/ForgotPassword';
+import history from 'lib/history';
+
+import '../Login/Login.styles.scss';
+
+function ForgotPassword(): JSX.Element | null {
+	const location = useLocation<ForgotPasswordRouteState | undefined>();
+	const routeState = location.state;
+
+	useEffect(() => {
+		if (!routeState?.email) {
+			history.push(ROUTES.LOGIN);
+		}
+	}, [routeState]);
+
+	if (!routeState?.email) {
+		return null;
+	}
+
+	return (
+		<AuthPageContainer>
+			<div className="auth-form-card">
+				<ForgotPasswordContainer
+					email={routeState.email}
+					orgId={routeState.orgId}
+					orgs={routeState.orgs}
+				/>
+			</div>
+		</AuthPageContainer>
+	);
+}
+
+export default ForgotPassword;

frontend/src/utils/permission/index.ts

@@ -68,6 +68,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	ALERT_HISTORY: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALERT_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	LOGIN: ['ADMIN', 'EDITOR', 'VIEWER'],
+	FORGOT_PASSWORD: ['ADMIN', 'EDITOR', 'VIEWER'],
 	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR'],
 	PASSWORD_RESET: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_METRICS: ['ADMIN', 'EDITOR', 'VIEWER'],

frontend/yarn.lock

@@ -5038,7 +5038,7 @@
   resolved "https://registry.yarnpkg.com/@signozhq/design-tokens/-/design-tokens-2.1.1.tgz#9c36d433fd264410713cc0c5ebdd75ce0ebecba3"
   integrity sha512-SdziCHg5Lwj+6oY6IRUPplaKZ+kTHjbrlhNj//UoAJ8aQLnRdR2F/miPzfSi4vrYw88LtXxNA9J9iJyacCp37A==
 
-"@signozhq/icons@^0.1.0":
+"@signozhq/icons@0.1.0", "@signozhq/icons@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@signozhq/icons/-/icons-0.1.0.tgz#00dfb430dbac423bfff715876f91a7b8a72509e4"
   integrity sha512-kGWDhCpQkFWaNwyWfy88AIbg902wBbgTFTBAtmo6DkHyLGoqWAf0Jcq8BX+7brFqJF9PnLoSJDj1lvCpUsI/Ig==