You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Mobile/app/ResetPasswordPage.tsx

66 lines
1.8 KiB

import { Text } from "./components/ui/text";
import {
Button,
ButtonGroup,
ButtonIcon,
ButtonText,
} from "./components/ui/button";
import { VStack } from "./components/ui/vstack";
import React from "react";
import {
ArrowRightIcon,
LockIcon,
MailIcon,
MessageCircleIcon,
} from "./components/ui/icon";
import BackButton from "./components/BackButton";
import Screen from "./components/Screen";
import { Heading } from "./components/ui/heading";
import { Link } from "expo-router";
const resetButtons: IResetButton[] = [
{ icon: MailIcon, text: "Envoyer par email" },
{ icon: LockIcon, text: "Envoyer par 2FA" },
{ icon: MessageCircleIcon, text: "Envoyer par SMS" },
];
interface IResetButton {
icon: React.ElementType;
text: string;
}
export default function ResetPasswordPage() {
return (
<Screen>
<BackButton link={"/LoginPage"} />
<VStack space="2xl">
<VStack space="sm">
<Heading className="text-center" size="3xl">
Réinitialisation de ton mot de passe
</Heading>
<Text size="lg" className="text-center">
Selectionne une méthode pour recevoir ton code temporaire
</Text>
</VStack>
<ButtonGroup space="xl">
{resetButtons.map((resetButton) => (
<Link href={"/CodeSentPage"} asChild>
<Button
className="justify-between"
key={resetButton.text}
size="2xl"
action="primary"
variant="outline"
>
<ButtonIcon as={resetButton.icon} />
<ButtonText>{resetButton.text}</ButtonText>
<ButtonIcon as={ArrowRightIcon} />
</Button>
</Link>
))}
</ButtonGroup>
</VStack>
</Screen>
);
}