github/OpenHands
1
1
Fork 0
mirror of https://github.com/All-Hands-AI/OpenHands.git synced 2026-01-09 14:57:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): convert AuthModal to dedicated /login page (#12143) (#12181)

Browse Source 
Co-authored-by: hieptl <hieptl.developer@gmail.com>
Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
This commit is contained in:
Abhay Mishra
2026-01-07 22:16:24 +05:30
committed by GitHub
parent 15836c4d4b
commit 6086c0b09d
20 changed files with 1441 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
enterprise/server/routes/auth.py
View File

@@ -193,7 +193,7 @@ async def keycloak_callback(
)
# Redirect to home page with query parameter indicating the issue
home_url = f'{request.base_url}?duplicated_email=true'
home_url = f'{request.base_url}/login?duplicated_email=true'
return RedirectResponse(home_url, status_code=302)
except Exception as e:
# Log error but allow signup to proceed (fail open)
@@ -210,9 +210,7 @@ async def keycloak_callback(
from server.routes.email import verify_email
await verify_email(request=request, user_id=user_id, is_auth_flow=True)
redirect_url = (
f'{request.base_url}?email_verification_required=true&user_id={user_id}'
)
redirect_url = f'{request.base_url}login?email_verification_required=true&user_id={user_id}'
response = RedirectResponse(redirect_url, status_code=302)
return response

2
enterprise/server/routes/email.py
View File

@@ -166,7 +166,7 @@ async def verify_email(request: Request, user_id: str, is_auth_flow: bool = Fals
keycloak_admin = get_keycloak_admin()
scheme = 'http' if request.url.hostname == 'localhost' else 'https'
if is_auth_flow:
redirect_uri = f'{scheme}://{request.url.netloc}?email_verified=true'
redirect_uri = f'{scheme}://{request.url.netloc}/login?email_verified=true'
else:
redirect_uri = f'{scheme}://{request.url.netloc}/api/email/verified'
logger.info(f'Redirect URI: {redirect_uri}')

3
enterprise/tests/unit/server/routes/test_email_routes.py
View File

@@ -84,7 +84,8 @@ async def test_verify_email_with_auth_flow(mock_request):
call_args = mock_keycloak_admin.a_send_verify_email.call_args
assert call_args.kwargs['user_id'] == user_id
assert (
call_args.kwargs['redirect_uri'] == 'http://localhost:8000?email_verified=true'
call_args.kwargs['redirect_uri']
== 'http://localhost:8000/login?email_verified=true'
)
assert 'client_id' in call_args.kwargs

182
frontend/__tests__/components/features/auth/login-content.test.tsx Normal file
View File

@@ -0,0 +1,182 @@
import { render, screen } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import { MemoryRouter } from "react-router";
import { LoginContent } from "#/components/features/auth/login-content";
vi.mock("#/hooks/use-auth-url", () => ({
useAuthUrl: (config: {
identityProvider: string;
appMode: string | null;
authUrl?: string;
}) => {
const urls: Record<string, string> = {
gitlab: "https://gitlab.com/oauth/authorize",
bitbucket: "https://bitbucket.org/site/oauth2/authorize",
};
if (config.appMode === "saas") {
return urls[config.identityProvider] || null;
}
return null;
},
}));
vi.mock("#/hooks/use-tracking", () => ({
useTracking: () => ({
trackLoginButtonClick: vi.fn(),
}),
}));
describe("LoginContent", () => {
beforeEach(() => {
vi.stubGlobal("location", { href: "" });
});
afterEach(() => {
vi.unstubAllGlobals();
vi.restoreAllMocks();
});
it("should render login content with heading", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
providersConfigured={["github", "gitlab", "bitbucket"]}
/>
</MemoryRouter>,
);
expect(screen.getByTestId("login-content")).toBeInTheDocument();
expect(screen.getByText("AUTH$LETS_GET_STARTED")).toBeInTheDocument();
});
it("should display all configured provider buttons", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
authUrl="https://auth.example.com"
providersConfigured={["github", "gitlab", "bitbucket"]}
/>
</MemoryRouter>,
);
expect(
screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "GITLAB$CONNECT_TO_GITLAB" }),
).toBeInTheDocument();
const bitbucketButton = screen.getByRole("button", {
name: /BITBUCKET\$CONNECT_TO_BITBUCKET/i,
});
expect(bitbucketButton).toBeInTheDocument();
});
it("should only display configured providers", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
providersConfigured={["github"]}
/>
</MemoryRouter>,
);
expect(
screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" }),
).toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "GITLAB$CONNECT_TO_GITLAB" }),
).not.toBeInTheDocument();
});
it("should display message when no providers are configured", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
providersConfigured={[]}
/>
</MemoryRouter>,
);
expect(
screen.getByText("AUTH$NO_PROVIDERS_CONFIGURED"),
).toBeInTheDocument();
});
it("should redirect to GitHub auth URL when GitHub button is clicked", async () => {
const user = userEvent.setup();
const mockUrl = "https://github.com/login/oauth/authorize";
render(
<MemoryRouter>
<LoginContent
githubAuthUrl={mockUrl}
appMode="saas"
providersConfigured={["github"]}
/>
</MemoryRouter>,
);
const githubButton = screen.getByRole("button", {
name: "GITHUB$CONNECT_TO_GITHUB",
});
await user.click(githubButton);
expect(window.location.href).toBe(mockUrl);
});
it("should display email verified message when emailVerified is true", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
providersConfigured={["github"]}
emailVerified
/>
</MemoryRouter>,
);
expect(
screen.getByText("AUTH$EMAIL_VERIFIED_PLEASE_LOGIN"),
).toBeInTheDocument();
});
it("should display duplicate email error when hasDuplicatedEmail is true", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
providersConfigured={["github"]}
hasDuplicatedEmail
/>
</MemoryRouter>,
);
expect(screen.getByText("AUTH$DUPLICATE_EMAIL_ERROR")).toBeInTheDocument();
});
it("should display Terms and Privacy notice", () => {
render(
<MemoryRouter>
<LoginContent
githubAuthUrl="https://github.com/oauth/authorize"
appMode="saas"
providersConfigured={["github"]}
/>
</MemoryRouter>,
);
expect(screen.getByTestId("terms-and-privacy-notice")).toBeInTheDocument();
});
});

41
frontend/__tests__/conversation-websocket-handler.test.tsx
View File

@@ -305,11 +305,13 @@ describe("Conversation WebSocket Handler", () => {
});
it("should set error message store on WebSocket connection errors", async () => {
// Set up MSW to simulate connection error
// Simulate a connect-then-fail sequence (the MSW server auto-connects by default).
// This should surface an error message because the app has previously connected.
mswServer.use(
wsLink.addEventListener("connection", ({ client }) => {
// Simulate connection error by closing immediately
client.close(1006, "Connection failed");
setTimeout(() => {
client.close(1006, "Connection failed");
}, 50);
}),
);
@@ -324,14 +326,13 @@ describe("Conversation WebSocket Handler", () => {
// Initially should show "none"
expect(screen.getByTestId("error-message")).toHaveTextContent("none");
// Wait for connection error and error message to be set
// Wait for disconnect
await waitFor(() => {
expect(screen.getByTestId("connection-state")).toHaveTextContent(
"CLOSED",
);
});
// Should set error message on connection failure
await waitFor(() => {
expect(screen.getByTestId("error-message")).not.toHaveTextContent(
"none",
@@ -388,17 +389,15 @@ describe("Conversation WebSocket Handler", () => {
it("should clear error message store when connection is restored", async () => {
let connectionAttempt = 0;
// Set up MSW to fail first connection, then succeed on retry
// Fail once (after connect), then allow reconnection to stay open.
mswServer.use(
wsLink.addEventListener("connection", ({ client, server }) => {
wsLink.addEventListener("connection", ({ client }) => {
connectionAttempt += 1;
if (connectionAttempt === 1) {
// First attempt fails
client.close(1006, "Initial connection failed");
} else {
// Second attempt succeeds
server.connect();
setTimeout(() => {
client.close(1006, "Initial connection failed");
}, 50);
}
}),
);
@@ -414,7 +413,7 @@ describe("Conversation WebSocket Handler", () => {
// Initially should show "none"
expect(screen.getByTestId("error-message")).toHaveTextContent("none");
// Wait for first connection failure and error message
// Wait for first failure
await waitFor(() => {
expect(screen.getByTestId("connection-state")).toHaveTextContent(
"CLOSED",
@@ -427,12 +426,16 @@ describe("Conversation WebSocket Handler", () => {
);
});
// Simulate reconnection attempt (this would normally be triggered by the WebSocket context)
// For now, we'll just verify the pattern - when connection is restored, error should clear
// This test will fail until the WebSocket handler implements the clear logic
// Note: This test demonstrates the expected behavior but may need adjustment
// based on how the actual reconnection logic is implemented
// Wait for reconnect to happen and verify error clears on successful connection
await waitFor(
() => {
expect(screen.getByTestId("connection-state")).toHaveTextContent(
"OPEN",
);
expect(screen.getByTestId("error-message")).toHaveTextContent("none");
},
{ timeout: 5000 },
);
});
it("should not create duplicate events when WebSocket reconnects with resend_all=true", async () => {

69
frontend/__tests__/routes/_oh.test.tsx
View File

@@ -14,7 +14,44 @@ import SettingsService from "#/api/settings-service/settings-service.api";
import * as ToastHandlers from "#/utils/custom-toast-handlers";
describe("frontend/routes/_oh", () => {
const RouteStub = createRoutesStub([{ Component: MainApp, path: "/" }]);
const { DEFAULT_FEATURE_FLAGS, useIsAuthedMock, useConfigMock } = vi.hoisted(
() => {
const defaultFeatureFlags = {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
};
return {
DEFAULT_FEATURE_FLAGS: defaultFeatureFlags,
useIsAuthedMock: vi.fn().mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
}),
useConfigMock: vi.fn().mockReturnValue({
data: { APP_MODE: "oss", FEATURE_FLAGS: defaultFeatureFlags },
isLoading: false,
}),
};
},
);
vi.mock("#/hooks/query/use-is-authed", () => ({
useIsAuthed: () => useIsAuthedMock(),
}));
vi.mock("#/hooks/query/use-config", () => ({
useConfig: () => useConfigMock(),
}));
const RouteStub = createRoutesStub([
{ Component: MainApp, path: "/" },
{ Component: () => <div data-testid="login-page" />, path: "/login" },
]);
const { userIsAuthenticatedMock, settingsAreUpToDateMock } = vi.hoisted(
() => ({
@@ -40,6 +77,17 @@ describe("frontend/routes/_oh", () => {
});
it("should render", async () => {
useIsAuthedMock.mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
});
useConfigMock.mockReturnValue({
data: { APP_MODE: "oss", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
renderWithProviders(<RouteStub />);
await screen.findByTestId("root-layout");
});
@@ -53,6 +101,17 @@ describe("frontend/routes/_oh", () => {
it("should not render the AI config modal if the settings are up-to-date", async () => {
settingsAreUpToDateMock.mockReturnValue(true);
useIsAuthedMock.mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
});
useConfigMock.mockReturnValue({
data: { APP_MODE: "oss", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
renderWithProviders(<RouteStub />);
await waitFor(() => {
@@ -120,6 +179,10 @@ describe("frontend/routes/_oh", () => {
ENABLE_LINEAR: false,
},
});
useConfigMock.mockReturnValue({
data: { APP_MODE: "saas", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
renderWithProviders(<RouteStub />);
@@ -204,6 +267,10 @@ describe("frontend/routes/_oh", () => {
ENABLE_LINEAR: false,
},
});
useConfigMock.mockReturnValue({
data: { APP_MODE: "saas", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
getSettingsSpy.mockRejectedValue(createAxiosNotFoundErrorObject());

203
frontend/__tests__/routes/home-screen.test.tsx
View File

@@ -1,5 +1,5 @@
import { render, screen, waitFor, within } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import userEvent from "@testing-library/user-event";
import { createRoutesStub } from "react-router";
@@ -9,9 +9,47 @@ import { GitRepository } from "#/types/git";
import SettingsService from "#/api/settings-service/settings-service.api";
import GitService from "#/api/git-service/git-service.api";
import OptionService from "#/api/option-service/option-service.api";
import AuthService from "#/api/auth-service/auth-service.api";
import MainApp from "#/routes/root-layout";
import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
const { DEFAULT_FEATURE_FLAGS, useIsAuthedMock, useConfigMock } = vi.hoisted(
() => {
const defaultFeatureFlags = {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
};
return {
DEFAULT_FEATURE_FLAGS: defaultFeatureFlags,
useIsAuthedMock: vi.fn().mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
}),
useConfigMock: vi.fn().mockReturnValue({
data: {
APP_MODE: "oss",
FEATURE_FLAGS: defaultFeatureFlags,
},
isLoading: false,
}),
};
},
);
vi.mock("#/hooks/query/use-is-authed", () => ({
useIsAuthed: () => useIsAuthedMock(),
}));
vi.mock("#/hooks/query/use-config", () => ({
useConfig: () => useConfigMock(),
}));
const RouterStub = createRoutesStub([
{
Component: MainApp,
@@ -31,6 +69,10 @@ const RouterStub = createRoutesStub([
},
],
},
{
Component: () => <div data-testid="login-page" />,
path: "/login",
},
]);
const selectRepository = async (repoName: string) => {
@@ -90,19 +132,55 @@ const MOCK_RESPOSITORIES: GitRepository[] = [
describe("HomeScreen", () => {
beforeEach(() => {
const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
getSettingsSpy.mockResolvedValue({
vi.clearAllMocks();
useIsAuthedMock.mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
});
useConfigMock.mockReturnValue({
data: { APP_MODE: "oss", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
// Mock config to avoid SaaS redirect logic
vi.spyOn(OptionService, "getConfig").mockResolvedValue({
APP_MODE: "oss",
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
PROVIDERS_CONFIGURED: ["github"],
AUTH_URL: "https://auth.example.com",
FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS,
} as Awaited<ReturnType<typeof OptionService.getConfig>>);
vi.spyOn(AuthService, "authenticate").mockResolvedValue(true);
vi.spyOn(SettingsService, "getSettings").mockResolvedValue({
...MOCK_DEFAULT_USER_SETTINGS,
provider_tokens_set: {
github: "fake-token",
gitlab: "fake-token",
},
});
vi.stubGlobal("localStorage", {
getItem: vi.fn(() => null),
setItem: vi.fn(),
removeItem: vi.fn(),
clear: vi.fn(),
});
});
it("should render", () => {
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
it("should render", async () => {
renderHomeScreen();
screen.getByTestId("home-screen");
await screen.findByTestId("home-screen");
});
it("should render the repository connector and suggested tasks sections", async () => {
@@ -353,13 +431,49 @@ describe("HomeScreen", () => {
});
describe("Settings 404", () => {
beforeEach(() => {
vi.resetAllMocks();
});
const getConfigSpy = vi.spyOn(OptionService, "getConfig");
const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
beforeEach(() => {
vi.resetAllMocks();
useIsAuthedMock.mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
});
useConfigMock.mockReturnValue({
data: { APP_MODE: "oss", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
getConfigSpy.mockResolvedValue({
APP_MODE: "oss",
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
PROVIDERS_CONFIGURED: ["github"],
AUTH_URL: "https://auth.example.com",
FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS,
} as Awaited<ReturnType<typeof OptionService.getConfig>>);
vi.spyOn(AuthService, "authenticate").mockResolvedValue(true);
getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
vi.stubGlobal("localStorage", {
getItem: vi.fn(() => null),
setItem: vi.fn(),
removeItem: vi.fn(),
clear: vi.fn(),
});
});
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
it("should open the settings modal if GET /settings fails with a 404", async () => {
const error = createAxiosNotFoundErrorObject();
getSettingsSpy.mockRejectedValue(error);
@@ -395,16 +509,15 @@ describe("Settings 404", () => {
});
it("should not open the settings modal if GET /settings fails but is SaaS mode", async () => {
useConfigMock.mockReturnValue({
data: { APP_MODE: "saas", FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS },
isLoading: false,
});
// @ts-expect-error - we only need APP_MODE for this test
getConfigSpy.mockResolvedValue({
APP_MODE: "saas",
FEATURE_FLAGS: {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
},
FEATURE_FLAGS: DEFAULT_FEATURE_FLAGS,
});
const error = createAxiosNotFoundErrorObject();
getSettingsSpy.mockRejectedValue(error);
@@ -419,23 +532,59 @@ describe("Setup Payment modal", () => {
const getConfigSpy = vi.spyOn(OptionService, "getConfig");
const getSettingsSpy = vi.spyOn(SettingsService, "getSettings");
it("should only render if SaaS mode and is new user", async () => {
// @ts-expect-error - we only need the APP_MODE for this test
beforeEach(() => {
vi.clearAllMocks();
useIsAuthedMock.mockReturnValue({
data: true,
isLoading: false,
isFetching: false,
isError: false,
});
useConfigMock.mockReturnValue({
data: {
APP_MODE: "saas",
FEATURE_FLAGS: { ...DEFAULT_FEATURE_FLAGS, ENABLE_BILLING: true },
},
isLoading: false,
});
getConfigSpy.mockResolvedValue({
APP_MODE: "saas",
FEATURE_FLAGS: {
ENABLE_BILLING: true,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
},
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
PROVIDERS_CONFIGURED: ["github"],
AUTH_URL: "https://auth.example.com",
FEATURE_FLAGS: { ...DEFAULT_FEATURE_FLAGS, ENABLE_BILLING: true },
} as Awaited<ReturnType<typeof OptionService.getConfig>>);
vi.spyOn(AuthService, "authenticate").mockResolvedValue(true);
getSettingsSpy.mockResolvedValue(MOCK_DEFAULT_USER_SETTINGS);
vi.stubGlobal("localStorage", {
getItem: vi.fn(() => null),
setItem: vi.fn(),
removeItem: vi.fn(),
clear: vi.fn(),
});
});
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
it("should only render if SaaS mode and is new user", async () => {
getSettingsSpy.mockResolvedValue({
...MOCK_DEFAULT_USER_SETTINGS,
is_new_user: true,
});
const error = createAxiosNotFoundErrorObject();
getSettingsSpy.mockRejectedValue(error);
renderHomeScreen();
await screen.findByTestId("root-layout");
const setupPaymentModal = await screen.findByTestId(
"proceed-to-stripe-button",
);

429
frontend/__tests__/routes/login.test.tsx Normal file
View File

@@ -0,0 +1,429 @@
import { render, screen, waitFor } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createRoutesStub } from "react-router";
import LoginPage from "#/routes/login";
import OptionService from "#/api/option-service/option-service.api";
import AuthService from "#/api/auth-service/auth-service.api";
const { useEmailVerificationMock } = vi.hoisted(() => ({
useEmailVerificationMock: vi.fn(() => ({
emailVerified: false,
hasDuplicatedEmail: false,
emailVerificationModalOpen: false,
setEmailVerificationModalOpen: vi.fn(),
})),
}));
vi.mock("#/hooks/use-github-auth-url", () => ({
useGitHubAuthUrl: () => "https://github.com/login/oauth/authorize",
}));
vi.mock("#/hooks/use-email-verification", () => ({
useEmailVerification: () => useEmailVerificationMock(),
}));
const { useAuthUrlMock } = vi.hoisted(() => ({
useAuthUrlMock: vi.fn(
(config: { identityProvider: string; appMode: string | null }) => {
const urls: Record<string, string> = {
gitlab: "https://gitlab.com/oauth/authorize",
bitbucket: "https://bitbucket.org/site/oauth2/authorize",
};
if (config.appMode === "saas") {
return (
urls[config.identityProvider] || "https://gitlab.com/oauth/authorize"
);
}
return null;
},
),
}));
vi.mock("#/hooks/use-auth-url", () => ({
useAuthUrl: (config: { identityProvider: string; appMode: string | null }) =>
useAuthUrlMock(config),
}));
vi.mock("#/hooks/use-tracking", () => ({
useTracking: () => ({
trackLoginButtonClick: vi.fn(),
}),
}));
const RouterStub = createRoutesStub([
{
Component: LoginPage,
path: "/login",
},
]);
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
});
function Wrapper({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}
return Wrapper;
};
describe("LoginPage", () => {
beforeEach(() => {
vi.clearAllMocks();
vi.stubGlobal("location", { href: "" });
vi.spyOn(OptionService, "getConfig").mockResolvedValue({
APP_MODE: "saas",
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
PROVIDERS_CONFIGURED: ["github", "gitlab", "bitbucket"],
AUTH_URL: "https://auth.example.com",
FEATURE_FLAGS: {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
},
});
vi.spyOn(AuthService, "authenticate").mockRejectedValue({
response: { status: 401 },
isAxiosError: true,
});
});
afterEach(() => {
vi.restoreAllMocks();
vi.unstubAllGlobals();
});
describe("Rendering", () => {
it("should render login page with heading", async () => {
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
});
expect(screen.getByText("AUTH$LETS_GET_STARTED")).toBeInTheDocument();
});
it("should display all configured provider buttons", async () => {
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(screen.getByTestId("login-content")).toBeInTheDocument();
});
await waitFor(() => {
expect(
screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "GITLAB$CONNECT_TO_GITLAB" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", {
name: /BITBUCKET\$CONNECT_TO_BITBUCKET/i,
}),
).toBeInTheDocument();
});
});
it("should only display configured providers", async () => {
vi.spyOn(OptionService, "getConfig").mockResolvedValue({
APP_MODE: "saas",
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
PROVIDERS_CONFIGURED: ["github"],
AUTH_URL: "https://auth.example.com",
FEATURE_FLAGS: {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
},
});
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" }),
).toBeInTheDocument();
});
expect(
screen.queryByRole("button", { name: "GITLAB$CONNECT_TO_GITLAB" }),
).not.toBeInTheDocument();
expect(
screen.queryByRole("button", {
name: "BITBUCKET$CONNECT_TO_BITBUCKET",
}),
).not.toBeInTheDocument();
});
it("should display message when no providers are configured", async () => {
vi.spyOn(OptionService, "getConfig").mockResolvedValue({
APP_MODE: "saas",
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
PROVIDERS_CONFIGURED: [],
AUTH_URL: "https://auth.example.com",
FEATURE_FLAGS: {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
},
});
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByText("AUTH$NO_PROVIDERS_CONFIGURED"),
).toBeInTheDocument();
});
});
});
describe("OAuth Flow", () => {
it("should redirect to GitHub auth URL when GitHub button is clicked", async () => {
const user = userEvent.setup();
const mockUrl = "https://github.com/login/oauth/authorize";
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByRole("button", { name: "GITHUB$CONNECT_TO_GITHUB" }),
).toBeInTheDocument();
});
const githubButton = screen.getByRole("button", {
name: "GITHUB$CONNECT_TO_GITHUB",
});
await user.click(githubButton);
expect(window.location.href).toBe(mockUrl);
});
it("should redirect to GitLab auth URL when GitLab button is clicked", async () => {
const user = userEvent.setup();
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByRole("button", { name: "GITLAB$CONNECT_TO_GITLAB" }),
).toBeInTheDocument();
});
const gitlabButton = screen.getByRole("button", {
name: "GITLAB$CONNECT_TO_GITLAB",
});
await user.click(gitlabButton);
expect(window.location.href).toBe("https://gitlab.com/oauth/authorize");
});
it("should redirect to Bitbucket auth URL when Bitbucket button is clicked", async () => {
const user = userEvent.setup();
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(screen.getByTestId("login-content")).toBeInTheDocument();
});
await waitFor(() => {
expect(
screen.getByRole("button", {
name: /BITBUCKET\$CONNECT_TO_BITBUCKET/i,
}),
).toBeInTheDocument();
});
const bitbucketButton = screen.getByRole("button", {
name: /BITBUCKET\$CONNECT_TO_BITBUCKET/i,
});
await user.click(bitbucketButton);
expect(window.location.href).toBe(
"https://bitbucket.org/site/oauth2/authorize",
);
});
});
describe("Redirects", () => {
it("should redirect authenticated users to home", async () => {
vi.spyOn(AuthService, "authenticate").mockResolvedValue(true);
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(
() => {
expect(screen.queryByTestId("login-page")).not.toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should redirect authenticated users to returnTo destination", async () => {
vi.spyOn(AuthService, "authenticate").mockResolvedValue(true);
render(<RouterStub initialEntries={["/login?returnTo=/settings"]} />, {
wrapper: createWrapper(),
});
await waitFor(
() => {
expect(screen.queryByTestId("login-page")).not.toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should redirect OSS mode users to home", async () => {
vi.spyOn(OptionService, "getConfig").mockResolvedValue({
APP_MODE: "oss",
GITHUB_CLIENT_ID: "test-client-id",
POSTHOG_CLIENT_KEY: "test-posthog-key",
FEATURE_FLAGS: {
ENABLE_BILLING: false,
HIDE_LLM_SETTINGS: false,
ENABLE_JIRA: false,
ENABLE_JIRA_DC: false,
ENABLE_LINEAR: false,
},
});
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(
() => {
expect(screen.queryByTestId("login-page")).not.toBeInTheDocument();
},
{ timeout: 2000 },
);
});
});
describe("Email Verification", () => {
it("should display email verified message when emailVerified is true", async () => {
useEmailVerificationMock.mockReturnValue({
emailVerified: true,
hasDuplicatedEmail: false,
emailVerificationModalOpen: false,
setEmailVerificationModalOpen: vi.fn(),
});
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByText("AUTH$EMAIL_VERIFIED_PLEASE_LOGIN"),
).toBeInTheDocument();
});
});
it("should display duplicate email error when hasDuplicatedEmail is true", async () => {
useEmailVerificationMock.mockReturnValue({
emailVerified: false,
hasDuplicatedEmail: true,
emailVerificationModalOpen: false,
setEmailVerificationModalOpen: vi.fn(),
});
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByText("AUTH$DUPLICATE_EMAIL_ERROR"),
).toBeInTheDocument();
});
});
});
describe("Loading States", () => {
it("should show loading spinner while checking auth", async () => {
vi.spyOn(AuthService, "authenticate").mockImplementation(
() => new Promise(() => {}),
);
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
const spinner = document.querySelector(".animate-spin");
expect(spinner).toBeInTheDocument();
});
});
it("should show loading spinner while loading config", async () => {
vi.spyOn(OptionService, "getConfig").mockImplementation(
() => new Promise(() => {}),
);
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
const spinner = document.querySelector(".animate-spin");
expect(spinner).toBeInTheDocument();
});
});
});
describe("Terms and Privacy", () => {
it("should display Terms and Privacy notice", async () => {
render(<RouterStub initialEntries={["/login"]} />, {
wrapper: createWrapper(),
});
await waitFor(() => {
expect(
screen.getByTestId("terms-and-privacy-notice"),
).toBeInTheDocument();
});
});
});
});

365
frontend/__tests__/routes/root-layout.test.tsx
View File

@@ -1,13 +1,13 @@
import { render, screen, waitFor } from "@testing-library/react";
import { it, describe, expect, vi, beforeEach, afterEach } from "vitest";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createRoutesStub } from "react-router";
import { createRoutesStub, useSearchParams } from "react-router";
import MainApp from "#/routes/root-layout";
import OptionService from "#/api/option-service/option-service.api";
import AuthService from "#/api/auth-service/auth-service.api";
import SettingsService from "#/api/settings-service/settings-service.api";
import { MOCK_DEFAULT_USER_SETTINGS } from "#/mocks/handlers";
// Mock other hooks that are not the focus of these tests
vi.mock("#/hooks/use-github-auth-url", () => ({
useGitHubAuthUrl: () => "https://github.com/oauth/authorize",
}));
@@ -42,38 +42,101 @@ vi.mock("#/utils/custom-toast-handlers", () => ({
displaySuccessToast: vi.fn(),
}));
function LoginStub() {
const [searchParams] = useSearchParams();
const emailVerificationRequired =
searchParams.get("email_verification_required") === "true";
const emailVerified = searchParams.get("email_verified") === "true";
const emailVerificationText = "AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY";
return (
<div data-testid="login-page">
<div data-testid="login-content">
{emailVerified && <div data-testid="email-verified-message" />}
{emailVerificationRequired && (
<div data-testid="email-verification-modal">
{emailVerificationText}
</div>
)}
</div>
</div>
);
}
const RouterStub = createRoutesStub([
{
Component: MainApp,
path: "/",
children: [
{
Component: () => <div data-testid="outlet-content">Content</div>,
Component: () => <div data-testid="outlet-content" />,
path: "/",
},
],
},
{
Component: LoginStub,
path: "/login",
},
]);
const RouterStubWithLogin = createRoutesStub([
{
Component: MainApp,
path: "/",
children: [
{
Component: () => <div data-testid="outlet-content" />,
path: "/",
},
{
Component: () => <div data-testid="settings-page" />,
path: "/settings",
},
],
},
{
Component: () => <div data-testid="login-page" />,
path: "/login",
},
]);
const createWrapper = () => {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
const renderMainApp = (initialEntries: string[] = ["/"]) =>
render(<RouterStub initialEntries={initialEntries} />, {
wrapper: ({ children }) => (
<QueryClientProvider
client={
new QueryClient({
defaultOptions: { queries: { retry: false } },
})
}
>
{children}
</QueryClientProvider>
),
});
return ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
const renderWithLoginStub = (
RouterStubComponent: ReturnType<typeof createRoutesStub>,
initialEntries: string[] = ["/"],
) =>
render(<RouterStubComponent initialEntries={initialEntries} />, {
wrapper: ({ children }) => (
<QueryClientProvider
client={
new QueryClient({
defaultOptions: { queries: { retry: false } },
})
}
>
{children}
</QueryClientProvider>
),
});
describe("MainApp - Email Verification Flow", () => {
describe("MainApp", () => {
beforeEach(() => {
vi.clearAllMocks();
// Default mocks for services
vi.spyOn(OptionService, "getConfig").mockResolvedValue({
APP_MODE: "saas",
GITHUB_CLIENT_ID: "test-client-id",
@@ -91,28 +154,10 @@ describe("MainApp - Email Verification Flow", () => {
vi.spyOn(AuthService, "authenticate").mockResolvedValue(true);
vi.spyOn(SettingsService, "getSettings").mockResolvedValue({
language: "en",
user_consents_to_analytics: true,
llm_model: "",
llm_base_url: "",
agent: "",
llm_api_key: null,
llm_api_key_set: false,
search_api_key_set: false,
confirmation_mode: false,
security_analyzer: null,
remote_runtime_resource_factor: null,
provider_tokens_set: {},
enable_default_condenser: false,
condenser_max_size: null,
enable_sound_notifications: false,
enable_proactive_conversation_starters: false,
enable_solvability_analysis: false,
max_budget_per_task: null,
});
vi.spyOn(SettingsService, "getSettings").mockResolvedValue(
MOCK_DEFAULT_USER_SETTINGS,
);
// Mock localStorage
vi.stubGlobal("localStorage", {
getItem: vi.fn(() => null),
setItem: vi.fn(),
@@ -126,117 +171,145 @@ describe("MainApp - Email Verification Flow", () => {
vi.unstubAllGlobals();
});
it("should display EmailVerificationModal when email_verification_required=true is in query params", async () => {
// Arrange & Act
render(
<RouterStub initialEntries={["/?email_verification_required=true"]} />,
{ wrapper: createWrapper() },
);
describe("Email Verification", () => {
it("should redirect to login when email_verification_required=true is in query params", async () => {
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
// Assert
await waitFor(() => {
expect(
screen.getByText("AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY"),
).toBeInTheDocument();
});
});
renderMainApp(["/?email_verification_required=true"]);
it("should set emailVerified state and pass to AuthModal when email_verified=true is in query params", async () => {
// Arrange
// Mock a 401 error to simulate unauthenticated user
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
// Act
render(<RouterStub initialEntries={["/?email_verified=true"]} />, {
wrapper: createWrapper(),
});
// Assert - Wait for AuthModal to render (since user is not authenticated)
await waitFor(() => {
expect(
screen.getByText("AUTH$EMAIL_VERIFIED_PLEASE_LOGIN"),
).toBeInTheDocument();
});
});
it("should handle both email_verification_required and email_verified params together", async () => {
// Arrange & Act
render(
<RouterStub
initialEntries={[
"/?email_verification_required=true&email_verified=true",
]}
/>,
{ wrapper: createWrapper() },
);
// Assert - EmailVerificationModal should take precedence
await waitFor(() => {
expect(
screen.getByText("AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY"),
).toBeInTheDocument();
});
});
it("should remove query parameters from URL after processing", async () => {
// Arrange & Act
const { container } = render(
<RouterStub initialEntries={["/?email_verification_required=true"]} />,
{ wrapper: createWrapper() },
);
// Assert - Wait for the modal to appear (which indicates processing happened)
await waitFor(() => {
expect(
screen.getByText("AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY"),
).toBeInTheDocument();
});
// Verify that the query parameter was processed by checking the modal appeared
// The hook removes the parameter from the URL, so we verify the behavior indirectly
expect(container).toBeInTheDocument();
});
it("should not display EmailVerificationModal when email_verification_required is not in query params", async () => {
// Arrange - No query params set
// Act
render(<RouterStub />, { wrapper: createWrapper() });
// Assert
await waitFor(() => {
expect(
screen.queryByText("AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY"),
).not.toBeInTheDocument();
});
});
it("should not display email verified message when email_verified is not in query params", async () => {
// Arrange
// Mock a 401 error to simulate unauthenticated user
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
// Act
render(<RouterStub />, { wrapper: createWrapper() });
// Assert - AuthModal should render but without email verified message
await waitFor(() => {
const authModal = screen.queryByText(
"AUTH$SIGN_IN_WITH_IDENTITY_PROVIDER",
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should redirect to login when email_verified=true is in query params", async () => {
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
renderMainApp(["/?email_verified=true"]);
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should redirect to login when email_verification_required and email_verified params are in query params together", async () => {
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
renderMainApp(["/?email_verification_required=true&email_verified=true"]);
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should redirect to login when email_verification_required=true is in query params", async () => {
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
renderMainApp(["/?email_verification_required=true"]);
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should not display EmailVerificationModal when email_verification_required is not in query params", async () => {
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
renderMainApp(["/"]);
// User will be redirected to login, but modal should not show without query param
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
expect(
screen.queryByTestId("email-verification-modal"),
).not.toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should not display email verified message when email_verified is not in query params", async () => {
const axiosError = {
response: { status: 401 },
isAxiosError: true,
};
vi.spyOn(AuthService, "authenticate").mockRejectedValue(axiosError);
renderMainApp(["/login"]);
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
expect(
screen.queryByTestId("email-verified-message"),
).not.toBeInTheDocument();
},
{ timeout: 2000 },
);
});
});
describe("Unauthenticated redirect", () => {
beforeEach(() => {
vi.spyOn(AuthService, "authenticate").mockRejectedValue({
response: { status: 401 },
isAxiosError: true,
});
});
it("should redirect unauthenticated SaaS users to /login", async () => {
renderWithLoginStub(RouterStubWithLogin, ["/"]);
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
},
{ timeout: 2000 },
);
});
it("should redirect to /login with returnTo parameter when on a specific page", async () => {
renderWithLoginStub(RouterStubWithLogin, ["/settings"]);
await waitFor(
() => {
expect(screen.getByTestId("login-page")).toBeInTheDocument();
},
{ timeout: 2000 },
);
if (authModal) {
expect(
screen.queryByText("AUTH$EMAIL_VERIFIED_PLEASE_LOGIN"),
).not.toBeInTheDocument();
}
});
});
});

7
frontend/src/assets/branding/openhands-logo-white.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="1365" height="1365" viewBox="0 -24 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M71.7542 16.863V2.97414C71.7542 1.82355 72.6872 0.890503 73.8378 0.890503C74.9884 0.890503 75.9214 1.82355 75.9214 2.97414V16.863C75.9214 18.0136 74.9884 18.9466 73.8378 18.9466C72.6872 18.9466 71.7542 18.0136 71.7542 16.863Z" fill="white"/>
<path d="M82.5272 18.9329L89.4716 6.90477C90.0469 5.90832 91.3215 5.5668 92.3179 6.1421C93.3144 6.7174 93.6559 7.99197 93.0806 8.98841L86.1362 21.0165C85.5609 22.0129 84.2863 22.3545 83.2899 21.7792C82.2934 21.2039 81.9519 19.9293 82.5272 18.9329Z" fill="white"/>
<path d="M65.1481 18.9329L58.2037 6.90477C57.6284 5.90832 56.3538 5.5668 55.3574 6.1421C54.3609 6.7174 54.0194 7.99197 54.5947 8.98841L61.5391 21.0165C62.1144 22.0129 63.389 22.3545 64.3854 21.7792C65.3819 21.2039 65.7234 19.9293 65.1481 18.9329Z" fill="white"/>
<path d="M140.606 62.0292C140.606 58.409 141.583 47.6748 141.89 44.1323C142.097 41.7374 141.809 40.4247 141.424 39.7542C141.141 39.2626 140.699 38.915 139.634 38.8436C138.865 38.7921 138.027 39.0114 137.401 39.5761C136.814 40.1052 136.159 41.1682 136.159 43.3176L136.155 43.4388L135.198 59.758C135.164 60.3451 134.883 60.8911 134.424 61.2599C133.966 61.6284 133.374 61.7859 132.793 61.6941L122.764 60.1068L111.948 58.6703C110.949 58.5376 110.188 57.7084 110.142 56.7016L109.561 44.1323C109.535 43.621 109.51 43.1141 109.484 42.6146C109.241 37.9294 109.022 33.7805 109.022 32.4282C109.022 28.3859 108.338 26.6806 107.74 25.9634C107.263 25.3915 106.577 25.1402 105.11 25.1402C104.583 25.1402 104.212 25.2481 103.933 25.4111C103.659 25.5714 103.346 25.8587 103.049 26.4208C102.41 27.6257 101.945 29.891 102.118 33.8479C102.342 38.9804 102.692 42.8146 103.035 46.2718C103.377 49.7231 103.718 52.8561 103.908 56.4971C104.204 62.1966 104.178 66.1256 103.945 68.7924C103.828 70.124 103.656 71.1996 103.423 72.0501C103.202 72.8558 102.871 73.6757 102.296 74.2887C101.6 75.0303 100.608 75.3844 99.577 75.136C98.7592 74.9389 98.1847 74.4215 97.8706 74.0916C97.2141 73.4017 96.7501 72.5106 96.568 72.0512C95.5097 69.3812 92.2352 63.1808 87.8023 59.6811C86.5089 58.6599 85.5666 58.3652 84.9736 58.3204C84.4148 58.2783 84.0094 58.4436 83.6909 58.6967C83.34 58.9756 83.0781 59.3811 82.9479 59.7643C82.9019 59.8999 82.8823 59.9968 82.8741 60.0584C84.0759 62.0865 88.8421 69.5222 91.0896 77.069C92.7648 82.6941 96.8038 88.4259 99.8194 90.8809C102.74 93.258 107.988 94.7313 113.9 95.0218C119.756 95.3095 125.788 94.4121 130.033 92.5092C138.233 88.8334 139.903 80.7382 140.651 77.2292C141.232 74.5057 141.243 71.5987 141.087 68.9009C141.01 67.5551 140.894 66.2969 140.793 65.1373C140.695 64.0105 140.606 62.9215 140.606 62.0292ZM120.986 27.0953C120.986 25.8314 120.648 24.7049 120.089 23.9514C119.583 23.27 118.84 22.7987 117.646 22.7984C116.668 22.7982 116.011 22.9187 115.546 23.1167C115.13 23.2943 114.781 23.5699 114.463 24.0831C113.73 25.2671 113.192 27.6455 113.189 32.384L113.721 43.9088C113.91 47.5661 114.106 51.4922 114.235 54.7707L120.986 55.6666V27.0953ZM125.153 56.2652L131.172 57.218L131.992 43.267V32.5083C131.992 31.031 131.39 30.1275 130.678 29.5489C129.884 28.9039 128.957 28.6731 128.519 28.6731C127.722 28.6731 126.899 28.797 126.306 29.2179C125.849 29.5421 125.153 30.3087 125.153 32.5083V56.2652ZM136.159 35.4278C137.406 34.8069 138.74 34.6083 139.912 34.6868C142.037 34.8292 143.91 35.718 145.037 37.6779C146.06 39.4592 146.273 41.8136 146.041 44.4927C145.72 48.1949 144.772 58.6457 144.772 62.0292C144.772 62.708 144.843 63.6116 144.944 64.7758C145.042 65.907 145.165 67.2389 145.247 68.6606C145.411 71.4987 145.422 74.8383 144.727 78.0987C144.002 81.4953 142.041 91.6918 131.738 96.3108C126.731 98.5551 120.002 99.4936 113.696 99.1838C107.445 98.8767 101.128 97.3189 97.1887 94.1122C93.4809 91.0937 88.9938 84.6307 87.0962 78.2589C84.9529 71.0619 80.3109 63.9646 79.1527 61.9533C78.4706 60.7689 78.684 59.3628 79.0019 58.4258C79.3607 57.3688 80.0554 56.2631 81.0993 55.4337C82.1758 54.5784 83.6043 54.0377 85.2876 54.1647C86.9369 54.2893 88.6462 55.0393 90.3834 56.4107C94.8541 59.9401 98.1342 65.5082 99.7424 68.9231C99.759 68.7664 99.779 68.6024 99.7941 68.4298C100.003 66.0435 100.039 62.3344 99.7467 56.7132C99.5635 53.1942 99.2356 50.1809 98.8888 46.6828C98.5425 43.1904 98.184 39.2713 97.955 34.0302C97.7722 29.8481 98.2012 26.6722 99.3672 24.471C99.9716 23.3302 100.79 22.4223 101.83 21.814C102.866 21.2087 103.995 20.974 105.11 20.974C106.759 20.974 108.813 21.2062 110.448 22.7678C110.593 22.4576 110.75 22.1652 110.921 21.8899C111.676 20.6698 112.681 19.8084 113.912 19.2835C115.095 18.7791 116.378 18.6309 117.646 18.6311C120.195 18.6315 122.164 19.7567 123.434 21.4683C124.256 22.576 124.75 23.8775 124.985 25.1982C126.338 24.5876 127.691 24.5068 128.519 24.5068C129.933 24.5068 131.784 25.0791 133.305 26.3154C134.908 27.6179 136.159 29.6733 136.159 32.5083V35.4278Z" fill="white"/>
<path d="M7.15661 62.0292C7.15661 58.409 6.17994 47.6748 5.87291 44.1323C5.6654 41.7374 5.95357 40.4247 6.33875 39.7542C6.62116 39.2626 7.06336 38.915 8.12834 38.8436C8.89759 38.7921 9.73544 39.0114 10.3616 39.5761C10.9484 40.1052 11.6032 41.1682 11.6032 43.3176L11.6074 43.4388L12.5644 59.758C12.5988 60.3451 12.8798 60.8911 13.338 61.2599C13.7961 61.6284 14.3887 61.7859 14.9695 61.6941L24.9988 60.1068L35.8143 58.6703C36.8135 58.5376 37.5741 57.7084 37.6208 56.7016L38.2015 44.1323C38.2279 43.621 38.2525 43.1141 38.2784 42.6146C38.5218 37.9294 38.7401 33.7805 38.7401 32.4282C38.7401 28.3859 39.4246 26.6806 40.0227 25.9634C40.4996 25.3915 41.185 25.1402 42.6523 25.1402C43.1794 25.1402 43.5505 25.2481 43.8295 25.4111C44.1038 25.5714 44.416 25.8587 44.7138 26.4208C45.3521 27.6257 45.8173 29.891 45.6444 33.8479C45.4201 38.9804 45.0703 42.8146 44.7275 46.2718C44.3853 49.7231 44.0443 52.8561 43.8548 56.4971C43.5582 62.1966 43.5847 66.1256 43.8179 68.7924C43.9344 70.124 44.1069 71.1996 44.3396 72.0501C44.5601 72.8558 44.891 73.6757 45.4663 74.2887C46.1625 75.0303 47.1546 75.3844 48.1855 75.136C49.0033 74.9389 49.5778 74.4215 49.8918 74.0916C50.5484 73.4017 51.0123 72.5106 51.1945 72.0512C52.2527 69.3812 55.5272 63.1808 59.9601 59.6811C61.2536 58.6599 62.1958 58.3652 62.7889 58.3204C63.3476 58.2783 63.753 58.4436 64.0715 58.6967C64.4225 58.9756 64.6844 59.3811 64.8146 59.7643C64.8606 59.8999 64.8801 59.9968 64.8883 60.0584C63.6866 62.0865 58.9204 69.5222 56.6729 77.069C54.9977 82.6941 50.9586 88.4259 47.9431 90.8809C45.0229 93.258 39.7747 94.7313 33.8624 95.0218C28.0068 95.3095 21.9748 94.4121 17.7297 92.5092C9.52988 88.8334 7.85961 80.7382 7.11129 77.2292C6.53054 74.5057 6.5195 71.5987 6.67496 68.9009C6.75251 67.5551 6.86809 66.2969 6.96901 65.1373C7.06707 64.0105 7.1566 62.9215 7.15661 62.0292ZM26.7768 27.0953C26.7768 25.8314 27.1147 24.7049 27.6737 23.9514C28.1792 23.27 28.9221 22.7987 30.1167 22.7984C31.0942 22.7982 31.7518 22.9187 32.2162 23.1167C32.6326 23.2943 32.9817 23.5699 33.2996 24.0831C34.0328 25.2671 34.5705 27.6455 34.5738 32.384L34.0416 43.9088C33.8524 47.5661 33.6565 51.4922 33.5273 54.7707L26.7768 55.6666V27.0953ZM22.6095 56.2652L16.5904 57.218L15.7705 43.267V32.5083C15.7705 31.031 16.3726 30.1275 17.0847 29.5489C17.8785 28.9039 18.8058 28.6731 19.2432 28.6731C20.0404 28.6731 20.8634 28.797 21.4565 29.2179C21.9131 29.5421 22.6095 30.3087 22.6095 32.5083V56.2652ZM11.6032 35.4278C10.3568 34.8069 9.02265 34.6083 7.8501 34.6868C5.72541 34.8292 3.85197 35.718 2.72584 37.6779C1.70247 39.4592 1.48924 41.8136 1.72143 44.4927C2.0423 48.1949 2.99038 58.6457 2.99038 62.0292C2.99037 62.708 2.91991 63.6116 2.81859 64.7758C2.72014 65.907 2.59699 67.2389 2.51505 68.6606C2.3515 71.4987 2.34041 74.8383 3.0357 78.0987C3.76005 81.4953 5.72154 91.6918 16.0245 96.3108C21.0311 98.5551 27.7601 99.4936 34.0669 99.1838C40.3172 98.8767 46.6346 97.3189 50.5737 94.1122C54.2816 91.0937 58.7686 84.6307 60.6662 78.2589C62.8095 71.0619 67.4515 63.9646 68.6098 61.9533C69.2919 60.7689 69.0785 59.3628 68.7605 58.4258C68.4018 57.3688 67.707 56.2631 66.6632 55.4337C65.5867 54.5784 64.1582 54.0377 62.4748 54.1647C60.8256 54.2893 59.1162 55.0393 57.379 56.4107C52.9083 59.9401 49.6283 65.5082 48.02 68.9231C48.0034 68.7664 47.9835 68.6024 47.9684 68.4298C47.7597 66.0435 47.7232 62.3344 48.0158 56.7132C48.1989 53.1942 48.5269 50.1809 48.8737 46.6828C49.22 43.1904 49.5784 39.2713 49.8075 34.0302C49.9903 29.8481 49.5612 26.6722 48.3952 24.471C47.7909 23.3302 46.9729 22.4223 45.9321 21.814C44.8964 21.2087 43.7676 20.974 42.6523 20.974C41.0038 20.974 38.9497 21.2062 37.3141 22.7678C37.1698 22.4576 37.0124 22.1652 36.8419 21.8899C36.0863 20.6698 35.0817 19.8084 33.8508 19.2835C32.6679 18.7791 31.3849 18.6309 30.1167 18.6311C27.5677 18.6315 25.5986 19.7567 24.3285 21.4683C23.5066 22.576 23.0121 23.8775 22.7771 25.1982C21.4247 24.5876 20.0718 24.5068 19.2432 24.5068C17.8298 24.5068 15.9788 25.0791 14.4573 26.3154C12.8542 27.6179 11.6032 29.6733 11.6032 32.5083V35.4278Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

161
frontend/src/components/features/auth/login-content.tsx Normal file
View File

@@ -0,0 +1,161 @@
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import OpenHandsLogoWhite from "#/assets/branding/openhands-logo-white.svg?react";
import GitHubLogo from "#/assets/branding/github-logo.svg?react";
import GitLabLogo from "#/assets/branding/gitlab-logo.svg?react";
import BitbucketLogo from "#/assets/branding/bitbucket-logo.svg?react";
import { useAuthUrl } from "#/hooks/use-auth-url";
import { GetConfigResponse } from "#/api/option-service/option.types";
import { Provider } from "#/types/settings";
import { useTracking } from "#/hooks/use-tracking";
import { TermsAndPrivacyNotice } from "#/components/shared/terms-and-privacy-notice";
export interface LoginContentProps {
githubAuthUrl: string | null;
appMode?: GetConfigResponse["APP_MODE"] | null;
authUrl?: GetConfigResponse["AUTH_URL"];
providersConfigured?: Provider[];
emailVerified?: boolean;
hasDuplicatedEmail?: boolean;
}
export function LoginContent({
githubAuthUrl,
appMode,
authUrl,
providersConfigured,
emailVerified = false,
hasDuplicatedEmail = false,
}: LoginContentProps) {
const { t } = useTranslation();
const { trackLoginButtonClick } = useTracking();
const gitlabAuthUrl = useAuthUrl({
appMode: appMode || null,
identityProvider: "gitlab",
authUrl,
});
const bitbucketAuthUrl = useAuthUrl({
appMode: appMode || null,
identityProvider: "bitbucket",
authUrl,
});
const handleGitHubAuth = () => {
if (githubAuthUrl) {
trackLoginButtonClick({ provider: "github" });
window.location.href = githubAuthUrl;
}
};
const handleGitLabAuth = () => {
if (gitlabAuthUrl) {
trackLoginButtonClick({ provider: "gitlab" });
window.location.href = gitlabAuthUrl;
}
};
const handleBitbucketAuth = () => {
if (bitbucketAuthUrl) {
trackLoginButtonClick({ provider: "bitbucket" });
window.location.href = bitbucketAuthUrl;
}
};
const showGithub =
providersConfigured &&
providersConfigured.length > 0 &&
providersConfigured.includes("github");
const showGitlab =
providersConfigured &&
providersConfigured.length > 0 &&
providersConfigured.includes("gitlab");
const showBitbucket =
providersConfigured &&
providersConfigured.length > 0 &&
providersConfigured.includes("bitbucket");
const noProvidersConfigured =
!providersConfigured || providersConfigured.length === 0;
const buttonBaseClasses =
"w-[301.5px] h-10 rounded p-2 flex items-center justify-center cursor-pointer transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed";
const buttonLabelClasses = "text-sm font-medium leading-5 px-1";
return (
<div
className="flex flex-col items-center w-full gap-12.5"
data-testid="login-content"
>
<div>
<OpenHandsLogoWhite width={106} height={72} />
</div>
<h1 className="text-[39px] leading-5 font-medium text-white text-center">
{t(I18nKey.AUTH$LETS_GET_STARTED)}
</h1>
{emailVerified && (
<p className="text-sm text-muted-foreground text-center">
{t(I18nKey.AUTH$EMAIL_VERIFIED_PLEASE_LOGIN)}
</p>
)}
{hasDuplicatedEmail && (
<p className="text-sm text-danger text-center">
{t(I18nKey.AUTH$DUPLICATE_EMAIL_ERROR)}
</p>
)}
<div className="flex flex-col items-center gap-3">
{noProvidersConfigured ? (
<div className="text-center p-4 text-muted-foreground">
{t(I18nKey.AUTH$NO_PROVIDERS_CONFIGURED)}
</div>
) : (
<>
{showGithub && (
<button
type="button"
onClick={handleGitHubAuth}
className={`${buttonBaseClasses} bg-[#9E28B0] text-white`}
>
<GitHubLogo width={14} height={14} className="shrink-0" />
<span className={buttonLabelClasses}>
{t(I18nKey.GITHUB$CONNECT_TO_GITHUB)}
</span>
</button>
)}
{showGitlab && (
<button
type="button"
onClick={handleGitLabAuth}
className={`${buttonBaseClasses} bg-[#FC6B0E] text-white`}
>
<GitLabLogo width={14} height={14} className="shrink-0" />
<span className={buttonLabelClasses}>
{t(I18nKey.GITLAB$CONNECT_TO_GITLAB)}
</span>
</button>
)}
{showBitbucket && (
<button
type="button"
onClick={handleBitbucketAuth}
className={`${buttonBaseClasses} bg-[#2684FF] text-white`}
>
<BitbucketLogo width={14} height={14} className="shrink-0" />
<span className={buttonLabelClasses}>
{t(I18nKey.BITBUCKET$CONNECT_TO_BITBUCKET)}
</span>
</button>
)}
</>
)}
</div>
<TermsAndPrivacyNotice className="max-w-[320px] text-[#A3A3A3]" />
</div>
);
}

2
frontend/src/components/features/sidebar/user-actions.tsx
View File

@@ -60,7 +60,7 @@ export function UserActions({ onLogout, user, isLoading }: UserActionsProps) {
showMenu && "opacity-100 pointer-events-auto",
// Invisible hover bridge: extends hover zone to create a "safe corridor"
// for diagonal mouse movement to the menu (only active when menu is visible)
"group-hover:before:absolute group-hover:before:bottom-0 group-hover:before:right-0 group-hover:before:w-[200px] group-hover:before:h-[300px]",
"group-hover:before:content-[''] group-hover:before:block group-hover:before:absolute group-hover:before:inset-[-320px] group-hover:before:z-9998",
)}
>
<AccountSettingsContextMenu

8
frontend/src/components/shared/terms-and-privacy-notice.tsx
View File

@@ -1,18 +1,22 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import { cn } from "#/utils/utils";
interface TermsAndPrivacyNoticeProps {
className?: string;
}
export function TermsAndPrivacyNotice({
className = "mt-4 text-xs text-center text-muted-foreground",
className,
}: TermsAndPrivacyNoticeProps) {
const { t } = useTranslation();
return (
<p className={className} data-testid="terms-and-privacy-notice">
<p
className={cn("text-xs text-center text-muted-foreground", className)}
data-testid="terms-and-privacy-notice"
>
{t(I18nKey.AUTH$BY_SIGNING_UP_YOU_AGREE_TO_OUR)}{" "}
<a
href="https://www.all-hands.dev/tos"

32
frontend/src/hooks/use-auth-callback.ts
View File

@@ -24,7 +24,7 @@ export const useAuthCallback = () => {
return;
}
// Only set login method if authentication was successful
// Only process callback if authentication was successful
if (!isAuthed) {
return;
}
@@ -32,15 +32,37 @@ export const useAuthCallback = () => {
// Check if we have a login_method query parameter
const searchParams = new URLSearchParams(location.search);
const loginMethod = searchParams.get("login_method");
const returnTo = searchParams.get("returnTo");
// Set the login method if it's valid
if (Object.values(LoginMethod).includes(loginMethod as LoginMethod)) {
setLoginMethod(loginMethod as LoginMethod);
// Clean up the URL by removing the login_method parameter
// Clean up the URL by removing auth-related parameters
searchParams.delete("login_method");
const newUrl = `${location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
navigate(newUrl, { replace: true });
searchParams.delete("returnTo");
// Determine where to navigate after authentication
let destination = "/";
if (returnTo && returnTo !== "/login") {
destination = returnTo;
} else if (location.pathname !== "/login" && location.pathname !== "/") {
destination = location.pathname;
}
const remainingParams = searchParams.toString();
const finalUrl = remainingParams
? `${destination}?${remainingParams}`
: destination;
navigate(finalUrl, { replace: true });
}
}, [isAuthed, isAuthLoading, location.search, config?.APP_MODE]);
}, [
isAuthed,
isAuthLoading,
location.search,
location.pathname,
config?.APP_MODE,
navigate,
]);
};

1
frontend/src/i18n/declaration.ts
View File

@@ -757,6 +757,7 @@ export enum I18nKey {
AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY = "AUTH$PLEASE_CHECK_EMAIL_TO_VERIFY",
AUTH$EMAIL_VERIFIED_PLEASE_LOGIN = "AUTH$EMAIL_VERIFIED_PLEASE_LOGIN",
AUTH$DUPLICATE_EMAIL_ERROR = "AUTH$DUPLICATE_EMAIL_ERROR",
AUTH$LETS_GET_STARTED = "AUTH$LETS_GET_STARTED",
COMMON$TERMS_OF_SERVICE = "COMMON$TERMS_OF_SERVICE",
COMMON$AND = "COMMON$AND",
COMMON$PRIVACY_POLICY = "COMMON$PRIVACY_POLICY",

16
frontend/src/i18n/translation.json
View File

@@ -12111,6 +12111,22 @@
"de": "Für diese E-Mail-Adresse existiert bereits ein Konto.",
"uk": "Обліковий запис з цією електронною адресою вже існує."
},
"AUTH$LETS_GET_STARTED": {
"en": "Let's get started",
"ja": "始めましょう",
"zh-CN": "让我们开始吧",
"zh-TW": "讓我們開始吧",
"ko-KR": "시작해 봅시다",
"no": "La oss komme i gang",
"it": "Iniziamo",
"pt": "Vamos começar",
"es": "Empecemos",
"ar": "لنبدأ",
"fr": "Commençons",
"tr": "Başlayalım",
"de": "Lass uns anfangen",
"uk": "Почнімо"
},
"COMMON$TERMS_OF_SERVICE": {
"en": "Terms of Service",
"ja": "利用規約",

1
frontend/src/routes.ts
View File

@@ -6,6 +6,7 @@ import {
} from "@react-router/dev/routes";
export default [
route("login", "routes/login.tsx"),
layout("routes/root-layout.tsx", [
index("routes/home.tsx"),
route("accept-tos", "routes/accept-tos.tsx"),

82
frontend/src/routes/login.tsx Normal file
View File

@@ -0,0 +1,82 @@
import React from "react";
import { useNavigate, useSearchParams } from "react-router";
import { useIsAuthed } from "#/hooks/query/use-is-authed";
import { useConfig } from "#/hooks/query/use-config";
import { useGitHubAuthUrl } from "#/hooks/use-github-auth-url";
import { useEmailVerification } from "#/hooks/use-email-verification";
import { LoginContent } from "#/components/features/auth/login-content";
import { EmailVerificationModal } from "#/components/features/waitlist/email-verification-modal";
export default function LoginPage() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const returnTo = searchParams.get("returnTo") || "/";
const config = useConfig();
const { data: isAuthed, isLoading: isAuthLoading } = useIsAuthed();
const {
emailVerified,
hasDuplicatedEmail,
emailVerificationModalOpen,
setEmailVerificationModalOpen,
} = useEmailVerification();
const gitHubAuthUrl = useGitHubAuthUrl({
appMode: config.data?.APP_MODE || null,
gitHubClientId: config.data?.GITHUB_CLIENT_ID || null,
authUrl: config.data?.AUTH_URL,
});
// Redirect OSS mode users to home
React.useEffect(() => {
if (!config.isLoading && config.data?.APP_MODE === "oss") {
navigate("/", { replace: true });
}
}, [config.isLoading, config.data?.APP_MODE, navigate]);
// Redirect authenticated users away from login page
React.useEffect(() => {
if (!isAuthLoading && isAuthed) {
navigate(returnTo, { replace: true });
}
}, [isAuthed, isAuthLoading, navigate, returnTo]);
if (isAuthLoading || config.isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-base">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white" />
</div>
);
}
// Don't render login content if user is authenticated or in OSS mode
if (isAuthed || config.data?.APP_MODE === "oss") {
return null;
}
return (
<>
<main
className="min-h-screen flex items-center justify-center bg-base p-4"
data-testid="login-page"
>
<LoginContent
githubAuthUrl={gitHubAuthUrl}
appMode={config.data?.APP_MODE}
authUrl={config.data?.AUTH_URL}
providersConfigured={config.data?.PROVIDERS_CONFIGURED}
emailVerified={emailVerified}
hasDuplicatedEmail={hasDuplicatedEmail}
/>
</main>
{emailVerificationModalOpen && (
<EmailVerificationModal
onClose={() => {
setEmailVerificationModalOpen(false);
}}
/>
)}
</>
);
}

75
frontend/src/routes/root-layout.tsx
View File

@@ -9,13 +9,10 @@ import {
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";
import i18n from "#/i18n";
import { useGitHubAuthUrl } from "#/hooks/use-github-auth-url";
import { useIsAuthed } from "#/hooks/query/use-is-authed";
import { useConfig } from "#/hooks/query/use-config";
import { Sidebar } from "#/components/features/sidebar/sidebar";
import { AuthModal } from "#/components/features/waitlist/auth-modal";
import { ReauthModal } from "#/components/features/waitlist/reauth-modal";
import { EmailVerificationModal } from "#/components/features/waitlist/email-verification-modal";
import { AnalyticsConsentFormModal } from "#/components/features/analytics/analytics-consent-form-modal";
import { useSettings } from "#/hooks/query/use-settings";
import { useMigrateUserConsent } from "#/hooks/use-migrate-user-consent";
@@ -27,11 +24,11 @@ import { useAutoLogin } from "#/hooks/use-auto-login";
import { useAuthCallback } from "#/hooks/use-auth-callback";
import { useReoTracking } from "#/hooks/use-reo-tracking";
import { useSyncPostHogConsent } from "#/hooks/use-sync-posthog-consent";
import { useEmailVerification } from "#/hooks/use-email-verification";
import { LOCAL_STORAGE_KEYS } from "#/utils/local-storage";
import { EmailVerificationGuard } from "#/components/features/guards/email-verification-guard";
import { MaintenanceBanner } from "#/components/features/maintenance/maintenance-banner";
import { cn, isMobileDevice } from "#/utils/utils";
import { LoadingSpinner } from "#/components/shared/loading-spinner";
import { useAppTitle } from "#/hooks/use-app-title";
export function ErrorBoundary() {
@@ -81,27 +78,11 @@ export default function MainApp() {
const {
data: isAuthed,
isFetching: isFetchingAuth,
isLoading: isAuthLoading,
isError: isAuthError,
} = useIsAuthed();
// Always call the hook, but we'll only use the result when not on TOS page
const gitHubAuthUrl = useGitHubAuthUrl({
appMode: config.data?.APP_MODE || null,
gitHubClientId: config.data?.GITHUB_CLIENT_ID || null,
authUrl: config.data?.AUTH_URL,
});
// When on TOS page, we don't use the GitHub auth URL
const effectiveGitHubAuthUrl = isOnTosPage ? null : gitHubAuthUrl;
const [consentFormIsOpen, setConsentFormIsOpen] = React.useState(false);
const {
emailVerificationModalOpen,
setEmailVerificationModalOpen,
emailVerified,
hasDuplicatedEmail,
userId,
} = useEmailVerification();
// Auto-login if login method is stored in local storage
useAutoLogin();
@@ -200,13 +181,33 @@ export default function MainApp() {
setLoginMethodExists(checkLoginMethodExists());
}, [isAuthed, checkLoginMethodExists]);
const renderAuthModal =
!isAuthed &&
!isAuthError &&
!isFetchingAuth &&
!isOnTosPage &&
config.data?.APP_MODE === "saas" &&
!loginMethodExists; // Don't show auth modal if login method exists in local storage
const shouldRedirectToLogin =
config.isLoading ||
isAuthLoading ||
isFetchingAuth ||
(!isAuthed &&
!isAuthError &&
!isOnTosPage &&
config.data?.APP_MODE === "saas" &&
!loginMethodExists);
React.useEffect(() => {
if (shouldRedirectToLogin) {
const returnTo = pathname !== "/" ? pathname : "";
const loginUrl = returnTo
? `/login?returnTo=${encodeURIComponent(returnTo)}`
: "/login";
navigate(loginUrl, { replace: true });
}
}, [shouldRedirectToLogin, pathname, navigate]);
if (shouldRedirectToLogin) {
return (
<div className="min-h-screen flex items-center justify-center bg-base">
<LoadingSpinner size="large" />
</div>
);
}
const renderReAuthModal =
!isAuthed &&
@@ -242,25 +243,7 @@ export default function MainApp() {
</div>
</div>
{renderAuthModal && (
<AuthModal
githubAuthUrl={effectiveGitHubAuthUrl}
appMode={config.data?.APP_MODE}
providersConfigured={config.data?.PROVIDERS_CONFIGURED}
authUrl={config.data?.AUTH_URL}
emailVerified={emailVerified}
hasDuplicatedEmail={hasDuplicatedEmail}
/>
)}
{renderReAuthModal && <ReauthModal />}
{emailVerificationModalOpen && (
<EmailVerificationModal
onClose={() => {
setEmailVerificationModalOpen(false);
}}
userId={userId}
/>
)}
{config.data?.APP_MODE === "oss" && consentFormIsOpen && (
<AnalyticsConsentFormModal
onClose={() => {

23
frontend/tests/avatar-menu.spec.ts
View File

@@ -10,39 +10,34 @@ test("avatar context menu stays open when moving cursor diagonally to menu", asy
page,
browserName,
}) => {
// Skip on WebKit - Playwright's mouse.move() doesn't reliably trigger CSS hover states
// WebKit: Playwright hover/mouse simulation is flaky for CSS hover-only menus.
test.skip(browserName === "webkit", "Playwright hover simulation unreliable");
await page.goto("/");
// Get the user avatar button
const aiConfigModal = page.getByTestId("ai-config-modal");
if (await aiConfigModal.isVisible().catch(() => false)) {
// In OSS mock mode, missing settings can open the AI-config modal; its backdrop
// intercepts pointer events and prevents hover interactions.
await page.getByTestId("save-settings-button").click();
await expect(aiConfigModal).toBeHidden();
}
const userAvatar = page.getByTestId("user-avatar");
await expect(userAvatar).toBeVisible();
// Get avatar bounding box first
const avatarBox = await userAvatar.boundingBox();
if (!avatarBox) {
throw new Error("Could not get bounding box for avatar");
}
// Use mouse.move to hover (not .hover() which may trigger click)
const avatarCenterX = avatarBox.x + avatarBox.width / 2;
const avatarCenterY = avatarBox.y + avatarBox.height / 2;
await page.mouse.move(avatarCenterX, avatarCenterY);
// The context menu should appear via CSS group-hover
const contextMenu = page.getByTestId("account-settings-context-menu");
await expect(contextMenu).toBeVisible();
// Move UP from the LEFT side of the avatar - simulating diagonal movement
// toward the menu (which is to the right). This exits the hover zone.
const leftX = avatarBox.x + 2;
const aboveY = avatarBox.y - 50;
await page.mouse.move(leftX, aboveY);
// The menu uses opacity-0/opacity-100 for visibility via CSS.
// Use toHaveCSS which auto-retries, avoiding flaky waitForTimeout.
// The menu should remain visible (opacity 1) to allow diagonal access to it.
const menuWrapper = contextMenu.locator("..");
await expect(menuWrapper).toHaveCSS("opacity", "1");
});