|
|
import BackButton from "@/components/BackButton";
|
|
|
import React from "react";
|
|
|
import { Card } from "@/components/ui/card";
|
|
|
import Screen from "@/components/Screen";
|
|
|
import { Heading } from "@/components/ui/heading";
|
|
|
import { AntDesign } from "@expo/vector-icons";
|
|
|
import { VStack } from "@/components/ui/vstack";
|
|
|
import { Text } from "@/components/ui/text";
|
|
|
import { Button, ButtonIcon, ButtonText } from "@/components/ui/button";
|
|
|
import { LockIcon } from "@/components/ui/icon";
|
|
|
|
|
|
function truncateEmail(email: string) {
|
|
|
const splitedEmail = email.split("@");
|
|
|
let hiddenPart = splitedEmail[0][0];
|
|
|
for (let i = 1; i < splitedEmail[0].length - 1; i++) {
|
|
|
hiddenPart += "⋆";
|
|
|
}
|
|
|
return hiddenPart + splitedEmail[0].slice(-1) + "@" + splitedEmail[1];
|
|
|
}
|
|
|
|
|
|
type props = { email?: string };
|
|
|
|
|
|
export default function CodeSentPage({ email }: props) {
|
|
|
return (
|
|
|
<Screen>
|
|
|
<BackButton icon="close" link={"/login"} action="primary" />
|
|
|
<Card className="rounded-3xl mt-16">
|
|
|
<VStack space="lg">
|
|
|
<AntDesign
|
|
|
className="bg-green-100 p-4 rounded-3xl h-16 w-16 self-center"
|
|
|
name="check"
|
|
|
size={30}
|
|
|
color={"green"}
|
|
|
/>
|
|
|
<Heading className="text-center" size="3xl">
|
|
|
Code envoyé !
|
|
|
</Heading>
|
|
|
<VStack space="md">
|
|
|
<Text className="text-center" size="xl">
|
|
|
Nous t'avons envoyé le code de vérification à
|
|
|
</Text>
|
|
|
<Text className="text-center" size="2xl" bold={true}>
|
|
|
{truncateEmail(email ?? "test@Optifit.com")}
|
|
|
</Text>
|
|
|
<Text className="text-center" size="xl">
|
|
|
Clique sur renvoyer si tu n'as pas reçu d’ici quelques secondes !
|
|
|
🔥
|
|
|
</Text>
|
|
|
</VStack>
|
|
|
<Button size="xl" action="secondary">
|
|
|
<ButtonIcon as={LockIcon} />
|
|
|
<ButtonText>Renvoyer le code</ButtonText>
|
|
|
</Button>
|
|
|
</VStack>
|
|
|
</Card>
|
|
|
</Screen>
|
|
|
);
|
|
|
}
|
