diff --git a/resources/js/admin/mobile/LoginPage.tsx b/resources/js/admin/mobile/LoginPage.tsx index 6cc2bb8..96cb6c8 100644 --- a/resources/js/admin/mobile/LoginPage.tsx +++ b/resources/js/admin/mobile/LoginPage.tsx @@ -68,6 +68,8 @@ export default function MobileLoginPage() { const searchParams = React.useMemo(() => new URLSearchParams(location.search), [location.search]); const rawReturnTo = searchParams.get('return_to'); + const oauthError = searchParams.get('error'); + const oauthDescription = searchParams.get('error_description'); const computeDefaultAfterLogin = React.useCallback( (abilityList?: string[]) => { @@ -78,11 +80,31 @@ export default function MobileLoginPage() { ); const fallbackTarget = computeDefaultAfterLogin(); - const { finalTarget } = React.useMemo( + const { finalTarget, encodedFinal } = React.useMemo( () => resolveReturnTarget(rawReturnTo, fallbackTarget), [rawReturnTo, fallbackTarget], ); + const oauthMessage = React.useMemo(() => { + if (!oauthError) { + return null; + } + + const fallback = oauthDescription ?? oauthError; + + return t(`login.oauth_errors.${oauthError}`, { defaultValue: fallback }); + }, [oauthDescription, oauthError, t]); + + const googleHref = React.useMemo(() => { + if (!encodedFinal) { + return '/event-admin/auth/google'; + } + + const params = new URLSearchParams({ return_to: encodedFinal }); + + return `/event-admin/auth/google?${params.toString()}`; + }, [encodedFinal]); + React.useEffect(() => { if (status === 'authenticated') { navigate(finalTarget, { replace: true }); @@ -92,6 +114,7 @@ export default function MobileLoginPage() { const [login, setLogin] = React.useState(''); const [password, setPassword] = React.useState(''); const [error, setError] = React.useState(null); + const [isRedirectingToGoogle, setIsRedirectingToGoogle] = React.useState(false); const [installBannerDismissed, setInstallBannerDismissedState] = React.useState(() => getInstallBannerDismissed()); const installBanner = shouldShowInstallBanner( { @@ -138,6 +161,15 @@ export default function MobileLoginPage() { }); }; + const handleGoogleLogin = React.useCallback(() => { + if (typeof window === 'undefined') { + return; + } + + setIsRedirectingToGoogle(true); + window.location.assign(googleHref); + }, [googleHref]); + return (
+ {oauthMessage ? ( + + + {t('login.oauth_error_title', 'Login aktuell nicht moeglich')} + + + {oauthMessage} + + + ) : null} + +
@@ -283,3 +354,14 @@ export default function MobileLoginPage() {
); } + +function GoogleIcon({ size = 18 }: { size?: number }) { + return ( + + + + ); +} diff --git a/resources/js/admin/mobile/__tests__/LoginPage.test.tsx b/resources/js/admin/mobile/__tests__/LoginPage.test.tsx new file mode 100644 index 0000000..63bec47 --- /dev/null +++ b/resources/js/admin/mobile/__tests__/LoginPage.test.tsx @@ -0,0 +1,123 @@ +import React from 'react'; +import { describe, expect, it, vi } from 'vitest'; +import { render, screen } from '@testing-library/react'; + +let locationSearch = '?return_to=encoded-value'; + +const navigateMock = vi.fn(); + +vi.mock('react-router-dom', () => ({ + useNavigate: () => navigateMock, + useLocation: () => ({ search: locationSearch }), +})); + +vi.mock('react-i18next', () => ({ + useTranslation: () => ({ + t: (key: string, fallback?: string | Record) => { + if (typeof fallback === 'string') { + return fallback; + } + if (fallback && typeof fallback === 'object' && typeof fallback.defaultValue === 'string') { + return fallback.defaultValue; + } + return key; + }, + }), +})); + +vi.mock('@tanstack/react-query', () => ({ + useMutation: () => ({ mutate: vi.fn(), isPending: false }), +})); + +vi.mock('../../auth/context', () => ({ + useAuth: () => ({ status: 'unauthenticated', applyToken: vi.fn(), abilities: [] }), +})); + +vi.mock('../../lib/returnTo', () => ({ + resolveReturnTarget: () => ({ finalTarget: '/event-admin/mobile/dashboard', encodedFinal: 'encoded-value' }), +})); + +vi.mock('../hooks/useInstallPrompt', () => ({ + useInstallPrompt: () => ({ + isInstalled: false, + isStandalone: false, + canInstall: false, + isIos: false, + promptInstall: vi.fn(), + }), +})); + +vi.mock('../lib/installBanner', () => ({ + getInstallBannerDismissed: () => false, + setInstallBannerDismissed: vi.fn(), + shouldShowInstallBanner: () => ({ shouldShow: false }), +})); + +vi.mock('../components/MobileInstallBanner', () => ({ + MobileInstallBanner: () => null, +})); + +vi.mock('@tamagui/stacks', () => ({ + YStack: ({ children }: { children: React.ReactNode }) =>
{children}
, + XStack: ({ children }: { children: React.ReactNode }) =>
{children}
, +})); + +vi.mock('@tamagui/text', () => ({ + SizableText: ({ children }: { children: React.ReactNode }) => {children}, +})); + +vi.mock('@tamagui/button', () => ({ + Button: ({ children, onPress, onClick, ...rest }: { children: React.ReactNode; onPress?: () => void; onClick?: () => void }) => ( + + ), +})); + +vi.mock('../components/Primitives', () => ({ + MobileCard: ({ children }: { children: React.ReactNode }) =>
{children}
, +})); + +vi.mock('../components/FormControls', () => ({ + MobileField: ({ children }: { children: React.ReactNode }) =>
{children}
, + MobileInput: (props: React.InputHTMLAttributes) => , +})); + +vi.mock('../theme', () => ({ + ADMIN_GRADIENTS: { loginBackground: 'linear-gradient(0deg, #000, #111)' }, + useAdminTheme: () => ({ + text: '#111827', + muted: '#6b7280', + primary: '#ff5a5f', + dangerBg: '#fee2e2', + dangerText: '#991b1b', + border: '#e5e7eb', + surface: '#ffffff', + }), +})); + +vi.mock('lucide-react', () => ({ + Loader2: () => loader, +})); + +import MobileLoginPage from '../LoginPage'; + +describe('MobileLoginPage', () => { + it('renders Google login button', () => { + locationSearch = '?return_to=encoded-value'; + + render(); + + const googleButton = screen.getByText('Mit Google anmelden'); + expect(googleButton).toBeInTheDocument(); + }); + + it('shows oauth error details when present', () => { + locationSearch = '?error=google_failed&error_description=Login%20failed'; + + render(); + + expect(screen.getByText('Login aktuell nicht moeglich')).toBeInTheDocument(); + expect(screen.getByText('Login failed')).toBeInTheDocument(); + }); +});