422 lines
15 KiB
TypeScript
422 lines
15 KiB
TypeScript
import React from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import {
|
|
ADMIN_DEFAULT_AFTER_LOGIN_PATH,
|
|
ADMIN_EVENTS_PATH,
|
|
ADMIN_PUBLIC_FORGOT_PASSWORD_PATH,
|
|
ADMIN_PUBLIC_HELP_PATH,
|
|
} from '../constants';
|
|
import { useAuth } from '../auth/context';
|
|
import { resolveReturnTarget } from '../lib/returnTo';
|
|
import { useInstallPrompt } from './hooks/useInstallPrompt';
|
|
import { getInstallBannerDismissed, setInstallBannerDismissed, shouldShowInstallBanner } from './lib/installBanner';
|
|
import { MobileInstallBanner } from './components/MobileInstallBanner';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { MobileCard } from './components/Primitives';
|
|
import { MobileField, MobileInput } from './components/FormControls';
|
|
import { ADMIN_GRADIENTS, useAdminTheme } from './theme';
|
|
|
|
type LoginResponse = {
|
|
token: string;
|
|
token_type: string;
|
|
abilities: string[];
|
|
};
|
|
|
|
async function performLogin(payload: { login: string; password: string; return_to?: string | null }): Promise<LoginResponse> {
|
|
const response = await fetch('/api/v1/tenant-auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Accept: 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
...payload,
|
|
remember: true,
|
|
}),
|
|
});
|
|
|
|
if (response.status === 422) {
|
|
const data = await response.json();
|
|
const errors = data.errors ?? {};
|
|
const flattened = Object.values(errors).flat();
|
|
throw new Error(flattened.join(' ') || 'Validation failed');
|
|
}
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Login failed.');
|
|
}
|
|
|
|
return (await response.json()) as LoginResponse;
|
|
}
|
|
|
|
export default function MobileLoginPage() {
|
|
const { status, applyToken, abilities } = useAuth();
|
|
const { t } = useTranslation('auth');
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const installPrompt = useInstallPrompt();
|
|
const { text, muted, primary, dangerBg, dangerText, border, surface } = useAdminTheme();
|
|
const safeAreaStyle: React.CSSProperties = {
|
|
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
|
|
paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
|
|
};
|
|
|
|
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[]) => {
|
|
const source = abilityList ?? abilities;
|
|
return source.includes('tenant-admin') ? ADMIN_DEFAULT_AFTER_LOGIN_PATH : ADMIN_EVENTS_PATH;
|
|
},
|
|
[abilities],
|
|
);
|
|
|
|
const fallbackTarget = computeDefaultAfterLogin();
|
|
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]);
|
|
|
|
const facebookHref = React.useMemo(() => {
|
|
if (!encodedFinal) {
|
|
return '/event-admin/auth/facebook';
|
|
}
|
|
|
|
const params = new URLSearchParams({ return_to: encodedFinal });
|
|
|
|
return `/event-admin/auth/facebook?${params.toString()}`;
|
|
}, [encodedFinal]);
|
|
|
|
React.useEffect(() => {
|
|
if (status === 'authenticated') {
|
|
navigate(finalTarget, { replace: true });
|
|
}
|
|
}, [finalTarget, navigate, status]);
|
|
|
|
const [login, setLogin] = React.useState('');
|
|
const [password, setPassword] = React.useState('');
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = React.useState(false);
|
|
const [isRedirectingToFacebook, setIsRedirectingToFacebook] = React.useState(false);
|
|
const [installBannerDismissed, setInstallBannerDismissedState] = React.useState(() => getInstallBannerDismissed());
|
|
const installBanner = shouldShowInstallBanner(
|
|
{
|
|
isInstalled: installPrompt.isInstalled,
|
|
isStandalone: installPrompt.isStandalone,
|
|
canInstall: installPrompt.canInstall,
|
|
isIos: installPrompt.isIos,
|
|
},
|
|
installBannerDismissed,
|
|
);
|
|
|
|
const mutation = useMutation({
|
|
mutationKey: ['tenantAdminLoginMobile'],
|
|
mutationFn: performLogin,
|
|
onError: (err: unknown) => {
|
|
const message = err instanceof Error ? err.message : String(err);
|
|
setError(message);
|
|
},
|
|
onSuccess: async (data) => {
|
|
setError(null);
|
|
await applyToken(data.token, data.abilities ?? []);
|
|
const postLoginFallback = computeDefaultAfterLogin(data.abilities ?? []);
|
|
const { finalTarget: successTarget } = resolveReturnTarget(rawReturnTo, postLoginFallback);
|
|
navigate(successTarget, { replace: true });
|
|
},
|
|
});
|
|
|
|
const isSubmitting =
|
|
(mutation as { isPending?: boolean; isLoading?: boolean }).isPending ??
|
|
(mutation as { isPending?: boolean; isLoading?: boolean }).isLoading ??
|
|
false;
|
|
const isFormValid = login.trim().length > 0 && password.length > 0;
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setError(null);
|
|
if (!isFormValid) {
|
|
return;
|
|
}
|
|
mutation.mutate({
|
|
login,
|
|
password,
|
|
return_to: rawReturnTo,
|
|
});
|
|
};
|
|
|
|
const handleGoogleLogin = React.useCallback(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
setIsRedirectingToGoogle(true);
|
|
window.location.assign(googleHref);
|
|
}, [googleHref]);
|
|
|
|
const handleFacebookLogin = React.useCallback(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
setIsRedirectingToFacebook(true);
|
|
window.location.assign(facebookHref);
|
|
}, [facebookHref]);
|
|
|
|
return (
|
|
<YStack
|
|
minHeight="100vh"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
paddingHorizontal="$4"
|
|
paddingVertical="$5"
|
|
style={{ ...safeAreaStyle, background: ADMIN_GRADIENTS.loginBackground }}
|
|
>
|
|
<YStack width="100%" maxWidth={520} space="$4">
|
|
<MobileCard backgroundColor="rgba(15, 23, 42, 0.6)" borderColor="rgba(255,255,255,0.12)">
|
|
<YStack alignItems="center" space="$3">
|
|
<XStack
|
|
width={56}
|
|
height={56}
|
|
borderRadius={16}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
backgroundColor="rgba(255,255,255,0.12)"
|
|
borderWidth={1}
|
|
borderColor="rgba(255,255,255,0.15)"
|
|
>
|
|
<img src="/logo-transparent-md.png" alt={t('auth.logoAlt', 'Fotospiel')} width={40} height={40} />
|
|
</XStack>
|
|
<YStack alignItems="center" space="$1">
|
|
<Text fontSize="$xl" fontWeight="800" color="white" textAlign="center">
|
|
{t('login.panel_title', 'Fotospiel.App Event Login')}
|
|
</Text>
|
|
<Text fontSize="$sm" color="rgba(255,255,255,0.7)" textAlign="center">
|
|
{t('login.panel_copy', 'Melde dich an, um Events zu planen, Fotos zu moderieren und Fotoaufgaben anzulegen.')}
|
|
</Text>
|
|
</YStack>
|
|
</YStack>
|
|
</MobileCard>
|
|
|
|
<MobileCard backgroundColor={surface} borderColor={border}>
|
|
<form onSubmit={handleSubmit}>
|
|
<YStack space="$3">
|
|
{oauthMessage ? (
|
|
<YStack
|
|
borderRadius={12}
|
|
padding="$2.5"
|
|
borderWidth={1}
|
|
borderColor={dangerText}
|
|
backgroundColor={dangerBg}
|
|
>
|
|
<Text fontSize="$sm" fontWeight="800" color={dangerText}>
|
|
{t('login.oauth_error_title', 'Login aktuell nicht moeglich')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={dangerText}>
|
|
{oauthMessage}
|
|
</Text>
|
|
</YStack>
|
|
) : null}
|
|
<MobileField
|
|
label={t('login.email', 'E-Mail-Adresse')}
|
|
hint={t('login.email_hint', 'Dein Benutzername ist deine E-Mail-Adresse.')}
|
|
>
|
|
<MobileInput
|
|
id="login-mobile"
|
|
type="email"
|
|
autoComplete="username"
|
|
value={login}
|
|
onChange={(e) => setLogin(e.target.value)}
|
|
placeholder={t('login.email_placeholder', 'name@example.com')}
|
|
required
|
|
/>
|
|
</MobileField>
|
|
|
|
<MobileField label={t('login.password', 'Passwort')}>
|
|
<MobileInput
|
|
id="password-mobile"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder={t('login.password_placeholder', '••••••••')}
|
|
required
|
|
/>
|
|
</MobileField>
|
|
|
|
<Button
|
|
type="button"
|
|
onPress={() => navigate(ADMIN_PUBLIC_FORGOT_PASSWORD_PATH)}
|
|
backgroundColor="transparent"
|
|
borderColor="transparent"
|
|
color={muted}
|
|
height={32}
|
|
alignSelf="flex-start"
|
|
paddingHorizontal={0}
|
|
>
|
|
{t('login.forgot.link', 'Forgot your password?')}
|
|
</Button>
|
|
|
|
{error ? (
|
|
<YStack
|
|
borderRadius={12}
|
|
padding="$2.5"
|
|
borderWidth={1}
|
|
borderColor={dangerText}
|
|
backgroundColor={dangerBg}
|
|
>
|
|
<Text fontSize="$sm" color={dangerText}>
|
|
{error}
|
|
</Text>
|
|
</YStack>
|
|
) : null}
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting || !isFormValid}
|
|
height={52}
|
|
borderRadius={16}
|
|
backgroundColor={primary}
|
|
borderColor="transparent"
|
|
color="white"
|
|
fontWeight="800"
|
|
pressStyle={{ opacity: 0.9 }}
|
|
style={{ boxShadow: '0 12px 24px rgba(255, 90, 95, 0.25)' }}
|
|
>
|
|
<XStack alignItems="center" space="$2">
|
|
<Loader2 size={16} className={isSubmitting ? 'animate-spin' : ''} />
|
|
<Text fontSize="$sm" color="white" fontWeight="800">
|
|
{isSubmitting ? t('login.loading', 'Anmeldung …') : t('login.submit', 'Anmelden')}
|
|
</Text>
|
|
</XStack>
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
onPress={handleGoogleLogin}
|
|
disabled={isRedirectingToGoogle || isSubmitting}
|
|
height={52}
|
|
borderRadius={16}
|
|
backgroundColor={surface}
|
|
borderColor={border}
|
|
borderWidth={1}
|
|
color={text}
|
|
>
|
|
<XStack alignItems="center" space="$2">
|
|
{isRedirectingToGoogle ? (
|
|
<Loader2 size={16} className="animate-spin" />
|
|
) : (
|
|
<GoogleIcon size={18} />
|
|
)}
|
|
<Text fontSize="$sm" color={text} fontWeight="700">
|
|
{t('login.google_cta', 'Mit Google anmelden')}
|
|
</Text>
|
|
</XStack>
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
onPress={handleFacebookLogin}
|
|
disabled={isRedirectingToFacebook || isSubmitting}
|
|
height={52}
|
|
borderRadius={16}
|
|
backgroundColor={surface}
|
|
borderColor={border}
|
|
borderWidth={1}
|
|
color={text}
|
|
>
|
|
<XStack alignItems="center" space="$2">
|
|
{isRedirectingToFacebook ? (
|
|
<Loader2 size={16} className="animate-spin" />
|
|
) : (
|
|
<FacebookIcon size={18} />
|
|
)}
|
|
<Text fontSize="$sm" color={text} fontWeight="700">
|
|
{t('login.facebook_cta', 'Mit Facebook anmelden')}
|
|
</Text>
|
|
</XStack>
|
|
</Button>
|
|
</YStack>
|
|
</form>
|
|
</MobileCard>
|
|
|
|
<MobileInstallBanner
|
|
state={installBanner}
|
|
density="compact"
|
|
onInstall={installPrompt.canInstall ? () => void installPrompt.promptInstall() : undefined}
|
|
onDismiss={() => {
|
|
setInstallBannerDismissed(true);
|
|
setInstallBannerDismissedState(true);
|
|
}}
|
|
/>
|
|
|
|
<YStack alignItems="center" space="$2">
|
|
<Text fontSize="$xs" color={muted} textAlign="center">
|
|
{t('login.support', 'Fragen? Schreib uns an support@fotospiel.de oder antworte direkt auf deine Einladung.')}
|
|
</Text>
|
|
<Button
|
|
onPress={() => navigate(ADMIN_PUBLIC_HELP_PATH)}
|
|
backgroundColor="transparent"
|
|
borderColor="rgba(255,255,255,0.5)"
|
|
borderWidth={1}
|
|
color="white"
|
|
height={40}
|
|
borderRadius={12}
|
|
>
|
|
{t('login.faq', 'Hilfe & FAQ')}
|
|
</Button>
|
|
</YStack>
|
|
</YStack>
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
function GoogleIcon({ size = 18 }: { size?: number }) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden>
|
|
<path
|
|
fill="#EA4335"
|
|
d="M12 11.999v4.8h6.7c-.3 1.7-2 4.9-6.7 4.9-4 0-7.4-3.3-7.4-7.4S8 6 12 6c2.3 0 3.9 1 4.8 1.9l3.3-3.2C18.1 2.6 15.3 1 12 1 5.9 1 1 5.9 1 12s4.9 11 11 11c6.3 0 10.5-4.4 10.5-10.6 0-.7-.1-1.2-.2-1.8H12z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function FacebookIcon({ size = 18 }: { size?: number }) {
|
|
return (
|
|
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden>
|
|
<path
|
|
fill="#1877F2"
|
|
d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.312 0 2.686.236 2.686.236v2.96h-1.513c-1.49 0-1.954.93-1.954 1.887v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|