Merge branch 'main' into reset-password-page-cta

frontend/src/container/ResetPassword/ResetPassword.styles.scss

@@ -142,6 +142,15 @@
 		}
 	}
 
+	.reset-password-back-action {
+		margin-top: var(--spacing-12);
+		width: 100%;
+
+		button {
+			width: 100%;
+		}
+	}
+
 	@media (max-width: 768px) {
 		width: 100%;
 		padding: 0 16px;

frontend/src/container/ResetPassword/TokenError.tsx

@@ -1,7 +1,10 @@
-import { CircleAlert } from '@signozhq/icons';
+import { ArrowLeft, CircleAlert } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
 import APIError from 'types/api/error';
 
 import './ResetPassword.styles.scss';
@@ -59,6 +62,16 @@ function TokenError({ error }: TokenErrorProps): JSX.Element {
 					</Typography.Text>
 				</div>
 				{error && <AuthError error={error} />}
+				<div className="reset-password-back-action">
+					<Button
+						variant="solid"
+						data-testid="back-to-login"
+						prefix={<ArrowLeft size={12} />}
+						onClick={(): void => history.push(ROUTES.LOGIN)}
+					>
+						Back to login
+					</Button>
+				</div>
 			</div>
 		</AuthPageContainer>
 	);

frontend/src/pages/ResetPassword/__tests__/ResetPasswordPage.test.tsx

@@ -2,7 +2,7 @@ import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { createErrorResponse, rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, waitFor, fireEvent } from 'tests/test-utils';
 
 import ResetPassword from '../index';
 
@@ -103,6 +103,7 @@ describe('ResetPassword Page', () => {
 			expect(
 				screen.getByText(/reset password token does not exist/i),
 			).toBeInTheDocument();
+			expect(screen.getByTestId('back-to-login')).toBeInTheDocument();
 		});
 
 		it('shows "token is expired" when token is expired (401) without redirecting to login', async () => {
@@ -137,6 +138,32 @@ describe('ResetPassword Page', () => {
 			// 401 from this endpoint must NOT trigger logout/redirect
 			expect(mockHistoryPush).not.toHaveBeenCalledWith(ROUTES.LOGIN);
 			expect(Logout).not.toHaveBeenCalled();
+			expect(screen.getByTestId('back-to-login')).toBeInTheDocument();
+		});
+
+		it('navigates to login when "Back to login" is clicked on error screen', async () => {
+			server.use(
+				rest.post(
+					VERIFY_TOKEN_ENDPOINT,
+					createErrorResponse(
+						404,
+						'reset_password_token_not_found',
+						'reset password token does not exist',
+					),
+				),
+			);
+
+			window.history.pushState({}, '', '/password-reset?token=invalid-token');
+			render(<ResetPassword />, undefined, {
+				initialRoute: '/password-reset?token=invalid-token',
+			});
+
+			await waitFor(() => {
+				expect(screen.getByTestId('back-to-login')).toBeInTheDocument();
+			});
+
+			fireEvent.click(screen.getByTestId('back-to-login'));
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
 		});
 
 		it('redirects to login when no token is in the URL', async () => {