Add event-admin password reset flow
This commit is contained in:
Codex Agent
167
resources/js/admin/mobile/PublicHelpPage.tsx
Normal file
167
resources/js/admin/mobile/PublicHelpPage.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user