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/LoginPage.tsx

68 lines
2.2 KiB

import { Text } from "./components/ui/text";
import { VStack } from "./components/ui/vstack";
import { Button, ButtonGroup } from "./components/ui/button";
import { Feather } from "@expo/vector-icons";
import { HStack } from "./components/ui/hstack";
import React from "react";
import { FeatherIconNames } from "@expo/vector-icons/build/Feather";
import { Box } from "./components/ui/box";
import { Heading } from "./components/ui/heading";
import { Link } from "expo-router";
import { LinkText } from "./components/ui/link";
import LoginForm from "./components/form/LoginForm";
import Screen from "./components/Screen";
const socialNetworkButtons: ISocialNetworkButtons[] = [
{ icon: "instagram" },
{ icon: "facebook" },
{ icon: "linkedin" },
];
interface ISocialNetworkButtons {
icon: FeatherIconNames;
}
export default function LoginPage() {
return (
<Screen>
<Box className="h-full justify-center">
<VStack space="2xl">
<VStack space="sm">
<Heading className="text-center" size="3xl">
Connexion à Optifit
</Heading>
<Text size="lg" className="text-center">
Personnalise ton expérience du sport avec Optifit, ton nouveau
coach IA.
</Text>
</VStack>
<LoginForm />
<ButtonGroup className="justify-center" flexDirection="row">
{socialNetworkButtons.map((socialNetworkButton) => (
<Button
key={socialNetworkButton.icon}
size="xl"
variant="outline"
action="primary"
>
<Feather name={socialNetworkButton.icon} size={27} />
</Button>
))}
</ButtonGroup>
<VStack>
<HStack className="justify-center items-center" space="xs">
<Text>Tu n'as pas encore de compte ?</Text>
<Link href="/SigninPage">
<LinkText bold={true}>Inscris-toi !</LinkText>
</Link>
</HStack>
<Link className="text-center" href="/ResetPasswordPage">
<LinkText bold={true}>Mot de passe oublié ?</LinkText>
</Link>
</VStack>
</VStack>
</Box>
</Screen>
);
}