Add event-admin password reset flow

resources/js/admin/mobile/ForgotPasswordPage.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Mail } from 'lucide-react';
+import { useMutation } from '@tanstack/react-query';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { ADMIN_LOGIN_PATH } from '../constants';
+import { MobileCard } from './components/Primitives';
+import { MobileField, MobileInput } from './components/FormControls';
+import { ADMIN_GRADIENTS, useAdminTheme } from './theme';
+
+type ResetResponse = {
+  status: string;
+};
+
+async function requestPasswordReset(email: string): Promise<ResetResponse> {
+  const response = await fetch('/api/v1/tenant-auth/forgot-password', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    body: JSON.stringify({ email }),
+  });
+
+  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('Request failed.');
+  }
+
+  return (await response.json()) as ResetResponse;
+}
+
+export default function ForgotPasswordPage() {
+  const { t } = useTranslation('auth');
+  const navigate = useNavigate();
+  const { text, muted, border, surface, accentSoft, primary, dangerBg, dangerText } = useAdminTheme();
+  const [email, setEmail] = React.useState('');
+  const [status, setStatus] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const safeAreaStyle: React.CSSProperties = {
+    paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
+    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
+  };
+
+  const mutation = useMutation({
+    mutationKey: ['tenantAdminForgotPassword'],
+    mutationFn: requestPasswordReset,
+    onSuccess: (data) => {
+      setError(null);
+      setStatus(data.status ?? t('login.forgot.success', 'If your account exists, we will send a reset link.'));
+    },
+    onError: (err: unknown) => {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+    },
+  });
+
+  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 space="$2">
+            <XStack alignItems="center" space="$2">
+              <XStack
+                width={42}
+                height={42}
+                borderRadius={12}
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor="rgba(255,255,255,0.12)"
+                borderWidth={1}
+                borderColor="rgba(255,255,255,0.15)"
+              >
+                <Mail size={18} color="white" />
+              </XStack>
+              <Text fontSize="$lg" fontWeight="800" color="white">
+                {t('login.forgot.title', 'Forgot your password?')}
+              </Text>
+            </XStack>
+            <Text fontSize="$sm" color="rgba(255,255,255,0.7)">
+              {t('login.forgot.copy', 'Enter your email address and we will send you a reset link.')}
+            </Text>
+          </YStack>
+        </MobileCard>
+
+        <MobileCard backgroundColor={surface} borderColor={border}>
+          <YStack space="$3">
+            <MobileField label={t('login.email', 'Email address')}>
+              <MobileInput
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder={t('login.email_placeholder', 'name@example.com')}
+                autoComplete="email"
+                required
+              />
+            </MobileField>
+
+            {status ? (
+              <YStack borderRadius={12} padding="$2.5" borderWidth={1} borderColor={border} backgroundColor={accentSoft}>
+                <Text fontSize="$sm" color={text}>
+                  {status}
+                </Text>
+              </YStack>
+            ) : null}
+
+            {error ? (
+              <YStack borderRadius={12} padding="$2.5" borderWidth={1} borderColor={dangerText} backgroundColor={dangerBg}>
+                <Text fontSize="$sm" color={dangerText}>
+                  {error}
+                </Text>
+              </YStack>
+            ) : null}
+
+            <Button
+              onPress={() => mutation.mutate(email)}
+              disabled={mutation.isPending || email.length === 0}
+              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)' }}
+            >
+              {mutation.isPending ? t('login.forgot.loading', 'Sending ...') : t('login.forgot.submit', 'Send reset link')}
+            </Button>
+          </YStack>
+        </MobileCard>
+
+        <Button
+          onPress={() => navigate(ADMIN_LOGIN_PATH)}
+          backgroundColor="transparent"
+          borderColor="rgba(255,255,255,0.5)"
+          borderWidth={1}
+          color="white"
+          height={40}
+          borderRadius={12}
+        >
+          {t('login.forgot.back', 'Back to login')}
+        </Button>
+      </YStack>
+    </YStack>
+  );
+}

resources/js/admin/mobile/LoginPage.tsx

@@ -1,15 +1,25 @@
 import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Loader2, Lock, Mail } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
 import { useMutation } from '@tanstack/react-query';
-import { adminPath, ADMIN_DEFAULT_AFTER_LOGIN_PATH, ADMIN_EVENTS_PATH } from '../constants';
+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 { ADMIN_GRADIENTS } from './theme';
+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;
@@ -50,6 +60,7 @@ export default function MobileLoginPage() {
   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)',
@@ -124,76 +135,119 @@ export default function MobileLoginPage() {
   };
 
   return (
-    <div
-      className="flex min-h-screen items-center justify-center px-5 py-10 text-white"
+    <YStack
+      minHeight="100vh"
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="$4"
+      paddingVertical="$5"
       style={{ ...safeAreaStyle, background: ADMIN_GRADIENTS.loginBackground }}
     >
-      <div className="w-full max-w-md space-y-8 rounded-3xl border border-white/10 bg-white/5 p-8 shadow-2xl shadow-blue-500/10 backdrop-blur-lg">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/15">
-            <img src="/logo-transparent-md.png" alt={t('auth.logoAlt', 'Fotospiel')} className="h-10 w-10" />
-          </div>
-          <h1 className="text-2xl font-semibold tracking-tight">{t('login.panel_title', 'Team Login')}</h1>
-          <p className="text-sm text-white/70">
-            {t('login.panel_copy', 'Melde dich an, um Events, Fotos und Aufgaben zu verwalten.')}
-          </p>
-        </div>
+      <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 Aufgaben anzulegen.')}
+              </Text>
+            </YStack>
+          </YStack>
+        </MobileCard>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
-            <label className="text-sm font-semibold text-white/90" htmlFor="login-mobile">
-              {t('login.username_or_email', 'E-Mail oder Benutzername')}
-            </label>
-            <div className="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/10 px-3 py-3">
-              <Mail size={16} className="text-white/70" />
-              <input
-                id="login-mobile"
-                type="text"
-                autoComplete="username"
-                value={login}
-                onChange={(e) => setLogin(e.target.value)}
-                placeholder={t('login.username_or_email_placeholder', 'name@example.com')}
-                className="w-full bg-transparent text-sm text-white placeholder:text-white/50 focus:outline-none"
-                required
-              />
-            </div>
-          </div>
+        <MobileCard backgroundColor={surface} borderColor={border}>
+          <form onSubmit={handleSubmit}>
+            <YStack space="$3">
+              <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>
 
-          <div className="space-y-2">
-            <label className="text-sm font-semibold text-white/90" htmlFor="password-mobile">
-              {t('login.password', 'Passwort')}
-            </label>
-            <div className="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/10 px-3 py-3">
-              <Lock size={16} className="text-white/70" />
-              <input
+            <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', '••••••••')}
-                className="w-full bg-transparent text-sm text-white placeholder:text-white/50 focus:outline-none"
                 required
               />
-            </div>
-          </div>
+            </MobileField>
 
-          {error ? (
-            <div className="rounded-2xl border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-sm text-rose-100">
-              {error}
-            </div>
-          ) : null}
+            <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>
 
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white shadow-lg shadow-rose-500/25 transition hover:brightness-110 disabled:opacity-70"
-            style={{ background: ADMIN_GRADIENTS.primaryCta }}
-          >
-            <Loader2 className={`h-4 w-4 animate-spin ${isSubmitting ? 'opacity-100' : 'opacity-0'}`} />
-            <span>{isSubmitting ? t('login.loading', 'Anmeldung …') : t('login.submit', 'Anmelden')}</span>
-          </button>
-        </form>
+              {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}
+                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>
+            </YStack>
+          </form>
+        </MobileCard>
 
         <MobileInstallBanner
           state={installBanner}
@@ -205,20 +259,23 @@ export default function MobileLoginPage() {
           }}
         />
 
-        <div className="text-center text-xs text-white/60">
-          {t('login.support', 'Fragen? Schreib uns an support@fotospiel.de oder antworte direkt auf deine Einladung.')}
-        </div>
-
-        <div className="text-center">
-          <button
-            type="button"
-            onClick={() => navigate(adminPath('/faq'))}
-            className="text-xs font-semibold text-white/70 underline underline-offset-4"
+        <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>
-        </div>
-      </div>
-    </div>
+          </Button>
+        </YStack>
+      </YStack>
+    </YStack>
   );
 }

resources/js/admin/mobile/PublicHelpPage.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { HelpCircle, Mail, ShieldCheck } from 'lucide-react';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { ADMIN_LOGIN_PATH } from '../constants';
+import { MobileCard, CTAButton } from './components/Primitives';
+import { ADMIN_GRADIENTS, useAdminTheme } from './theme';
+
+type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+export default function PublicHelpPage() {
+  const { t } = useTranslation('auth');
+  const navigate = useNavigate();
+  const { text, muted, surface, border, accentSoft, primary } = useAdminTheme();
+  const faqItems = t('login.help_faq_items', {
+    returnObjects: true,
+    defaultValue: [
+      {
+        question: 'I did not receive an invite.',
+        answer: 'Please check spam and ask your event team to resend the invitation.',
+      },
+      {
+        question: 'I cannot sign in.',
+        answer: 'Sign-in works only with your email address. Your username equals your email.',
+      },
+      {
+        question: 'My event is not visible.',
+        answer: 'Make sure the event is published. Ask the owner to adjust the status.',
+      },
+      {
+        question: 'Uploads are slow or stuck.',
+        answer: 'Wait a moment and check the connection. If it persists, contact support.',
+      },
+    ],
+  }) as FaqItem[];
+  const safeAreaStyle: React.CSSProperties = {
+    paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
+    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
+  };
+
+  return (
+    <YStack
+      minHeight="100vh"
+      paddingHorizontal="$4"
+      paddingVertical="$4"
+      style={{ ...safeAreaStyle, background: ADMIN_GRADIENTS.loginBackground }}
+    >
+      <YStack width="100%" maxWidth={680} alignSelf="center" space="$4">
+        <MobileCard backgroundColor="rgba(15, 23, 42, 0.55)" borderColor="rgba(255,255,255,0.08)">
+          <YStack space="$3">
+            <XStack alignItems="center" space="$2">
+              <XStack
+                width={42}
+                height={42}
+                borderRadius={12}
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor="rgba(255,255,255,0.12)"
+              >
+                <HelpCircle size={20} color="white" />
+              </XStack>
+              <Text fontSize="$lg" fontWeight="800" color="white">
+                {t('login.help_title', 'Hilfe fuer Event-Admins')}
+              </Text>
+            </XStack>
+            <Text fontSize="$sm" color="rgba(255,255,255,0.7)">
+              {t(
+                'login.help_intro',
+                'Hier findest du schnelle Antworten rund um Login, Zugriff und erste Schritte - auch ohne Anmeldung.',
+              )}
+            </Text>
+          </YStack>
+        </MobileCard>
+
+        <MobileCard backgroundColor={surface} borderColor={border}>
+          <YStack space="$3">
+            <XStack alignItems="center" space="$2">
+              <XStack
+                width={36}
+                height={36}
+                borderRadius={12}
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor={accentSoft}
+              >
+                <ShieldCheck size={18} color={primary} />
+              </XStack>
+              <Text fontSize="$md" fontWeight="800" color={text}>
+                {t('login.help_faq_title', 'Haeufige Fragen vor dem Login')}
+              </Text>
+            </XStack>
+            <YStack space="$2">
+              {faqItems.map((item, index) => (
+                <YStack
+                  key={`${item.question}-${index}`}
+                  padding="$2.5"
+                  borderRadius={14}
+                  borderWidth={1}
+                  borderColor={border}
+                  backgroundColor="rgba(255,255,255,0.6)"
+                  space="$1"
+                >
+                  <Text fontSize="$sm" fontWeight="700" color={text}>
+                    {item.question}
+                  </Text>
+                  <Text fontSize="$xs" color={muted}>
+                    {item.answer}
+                  </Text>
+                </YStack>
+              ))}
+            </YStack>
+          </YStack>
+        </MobileCard>
+
+        <MobileCard backgroundColor={surface} borderColor={border}>
+          <YStack space="$3">
+            <XStack alignItems="center" space="$2">
+              <XStack
+                width={36}
+                height={36}
+                borderRadius={12}
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor={accentSoft}
+              >
+                <Mail size={18} color={primary} />
+              </XStack>
+              <Text fontSize="$md" fontWeight="800" color={text}>
+                {t('login.help_support_title', 'Support kontaktieren')}
+              </Text>
+            </XStack>
+            <Text fontSize="$sm" color={muted}>
+              {t('login.help_support_copy', 'Schreib uns bei Fragen an')}{' '}
+              <Text fontWeight="700" color={text}>
+                support@fotospiel.app
+              </Text>
+            </Text>
+            <CTAButton
+              label={t('login.help_support_cta', 'E-Mail an Support senden')}
+              onPress={() => {
+                window.location.href = 'mailto:support@fotospiel.app';
+              }}
+            />
+          </YStack>
+        </MobileCard>
+
+        <Button
+          onPress={() => navigate(ADMIN_LOGIN_PATH)}
+          backgroundColor="transparent"
+          borderColor="rgba(255,255,255,0.4)"
+          borderWidth={1}
+          color="white"
+          height={44}
+          borderRadius={14}
+        >
+          {t('login.help_back', 'Back to login')}
+        </Button>
+      </YStack>
+    </YStack>
+  );
+}

resources/js/admin/mobile/ResetPasswordPage.tsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Lock } from 'lucide-react';
+import { useMutation } from '@tanstack/react-query';
+import { YStack, XStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { ADMIN_LOGIN_PATH } from '../constants';
+import { MobileCard } from './components/Primitives';
+import { MobileField, MobileInput } from './components/FormControls';
+import { ADMIN_GRADIENTS, useAdminTheme } from './theme';
+
+type ResetResponse = {
+  status: string;
+};
+
+type FieldErrors = Record<string, string[]>;
+
+async function resetPassword(payload: {
+  token: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+}): Promise<ResetResponse> {
+  const response = await fetch('/api/v1/tenant-auth/reset-password', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+
+  if (response.status === 422) {
+    const data = await response.json();
+    const errors = (data.errors ?? {}) as FieldErrors;
+    const flattened = Object.values(errors).flat();
+    const message = flattened.join(' ') || 'Validation failed';
+    const error = new Error(message) as Error & { errors?: FieldErrors };
+    error.errors = errors;
+    throw error;
+  }
+
+  if (!response.ok) {
+    throw new Error('Request failed.');
+  }
+
+  return (await response.json()) as ResetResponse;
+}
+
+export default function ResetPasswordPage() {
+  const { t } = useTranslation('auth');
+  const navigate = useNavigate();
+  const { token } = useParams<{ token: string }>();
+  const location = useLocation();
+  const { text, muted, border, surface, accentSoft, primary, dangerBg, dangerText } = useAdminTheme();
+  const searchParams = React.useMemo(() => new URLSearchParams(location.search), [location.search]);
+  const presetEmail = searchParams.get('email') ?? '';
+  const [email, setEmail] = React.useState(presetEmail);
+  const [password, setPassword] = React.useState('');
+  const [passwordConfirmation, setPasswordConfirmation] = React.useState('');
+  const [status, setStatus] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = React.useState<FieldErrors>({});
+  const safeAreaStyle: React.CSSProperties = {
+    paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
+    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
+  };
+
+  const mutation = useMutation({
+    mutationKey: ['tenantAdminResetPassword'],
+    mutationFn: resetPassword,
+    onSuccess: (data) => {
+      setFieldErrors({});
+      setError(null);
+      setStatus(data.status ?? t('login.reset.success', 'Password updated.'));
+    },
+    onError: (err: unknown) => {
+      const typed = err as Error & { errors?: FieldErrors };
+      setFieldErrors(typed.errors ?? {});
+      setError(typed.message);
+    },
+  });
+
+  const handleSubmit = () => {
+    if (!token) {
+      setError(t('login.reset.missing_token', 'Reset token missing.'));
+      return;
+    }
+    setStatus(null);
+    setError(null);
+    mutation.mutate({
+      token,
+      email,
+      password,
+      password_confirmation: passwordConfirmation,
+    });
+  };
+
+  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 space="$2">
+            <XStack alignItems="center" space="$2">
+              <XStack
+                width={42}
+                height={42}
+                borderRadius={12}
+                alignItems="center"
+                justifyContent="center"
+                backgroundColor="rgba(255,255,255,0.12)"
+                borderWidth={1}
+                borderColor="rgba(255,255,255,0.15)"
+              >
+                <Lock size={18} color="white" />
+              </XStack>
+              <Text fontSize="$lg" fontWeight="800" color="white">
+                {t('login.reset.title', 'Reset password')}
+              </Text>
+            </XStack>
+            <Text fontSize="$sm" color="rgba(255,255,255,0.7)">
+              {t('login.reset.copy', 'Choose a new password for your event admin account.')}
+            </Text>
+          </YStack>
+        </MobileCard>
+
+        <MobileCard backgroundColor={surface} borderColor={border}>
+          <YStack space="$3">
+            <MobileField label={t('login.email', 'Email address')} error={fieldErrors.email?.[0]}>
+              <MobileInput
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder={t('login.email_placeholder', 'name@example.com')}
+                autoComplete="email"
+                required
+              />
+            </MobileField>
+
+            <MobileField label={t('login.reset.password', 'New password')} error={fieldErrors.password?.[0]}>
+              <MobileInput
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                placeholder={t('login.reset.password_placeholder', '••••••••')}
+                autoComplete="new-password"
+                required
+              />
+            </MobileField>
+
+            <MobileField
+              label={t('login.reset.password_confirm', 'Confirm password')}
+              error={fieldErrors.password_confirmation?.[0]}
+            >
+              <MobileInput
+                type="password"
+                value={passwordConfirmation}
+                onChange={(event) => setPasswordConfirmation(event.target.value)}
+                placeholder={t('login.reset.password_confirm_placeholder', '••••••••')}
+                autoComplete="new-password"
+                required
+              />
+            </MobileField>
+
+            {status ? (
+              <YStack borderRadius={12} padding="$2.5" borderWidth={1} borderColor={border} backgroundColor={accentSoft}>
+                <Text fontSize="$sm" color={text}>
+                  {status}
+                </Text>
+              </YStack>
+            ) : null}
+
+            {error ? (
+              <YStack borderRadius={12} padding="$2.5" borderWidth={1} borderColor={dangerText} backgroundColor={dangerBg}>
+                <Text fontSize="$sm" color={dangerText}>
+                  {error}
+                </Text>
+              </YStack>
+            ) : null}
+
+            <Button
+              onPress={handleSubmit}
+              disabled={mutation.isPending || !token}
+              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)' }}
+            >
+              {mutation.isPending ? t('login.reset.loading', 'Saving ...') : t('login.reset.submit', 'Save new password')}
+            </Button>
+          </YStack>
+        </MobileCard>
+
+        <Button
+          onPress={() => navigate(ADMIN_LOGIN_PATH)}
+          backgroundColor="transparent"
+          borderColor="rgba(255,255,255,0.5)"
+          borderWidth={1}
+          color="white"
+          height={40}
+          borderRadius={12}
+        >
+          {t('login.reset.back', 'Back to login')}
+        </Button>
+      </YStack>
+    </YStack>
+  );
+}