Add event-admin password reset flow

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>
   );
 }