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.
59 lines
2.1 KiB
59 lines
2.1 KiB
import { Button, ButtonText, ButtonIcon } from "../ui/button";
|
|
import {
|
|
FormControl,
|
|
FormControlLabel,
|
|
FormControlLabelText,
|
|
} from "../ui/form-control";
|
|
import { MailIcon, ArrowRightIcon } from "../ui/icon";
|
|
import { Input, InputIcon, InputField } from "../ui/input";
|
|
import { VStack } from "../ui/vstack";
|
|
import React from "react";
|
|
import PasswordField from "./PasswordField";
|
|
import FormError from "./FormError";
|
|
|
|
export default function LoginForm() {
|
|
const REQUIRED_ERROR = "Au moins un des champs requis est vide !";
|
|
const [emailValue, setEmailValue] = React.useState("");
|
|
const [isEmailInvalid, setIsEmailInvalid] = React.useState(false);
|
|
const [passwordValue, setPasswordValue] = React.useState("");
|
|
const [isPasswordInvalid, setIsPasswordInvalid] = React.useState(false);
|
|
const [isFormInvalid, setIsFormInvalid] = React.useState(false);
|
|
const handleSubmit = () => {
|
|
//check for empty fields
|
|
setIsEmailInvalid(emailValue == "");
|
|
setIsPasswordInvalid(passwordValue == "");
|
|
setIsFormInvalid(isEmailInvalid || isPasswordInvalid);
|
|
};
|
|
|
|
return (
|
|
<FormControl className="gap-4" isInvalid={isFormInvalid}>
|
|
<FormControl isInvalid={isEmailInvalid}>
|
|
<FormControlLabel>
|
|
<FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
|
|
</FormControlLabel>
|
|
<Input variant="outline" size="xl">
|
|
<InputIcon color="black" as={MailIcon} />
|
|
<InputField
|
|
value={emailValue}
|
|
onChangeText={setEmailValue}
|
|
placeholder="Test@optifit.com"
|
|
/>
|
|
</Input>
|
|
</FormControl>
|
|
<FormControl isInvalid={isPasswordInvalid}>
|
|
<FormControlLabel>
|
|
<FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
|
|
</FormControlLabel>
|
|
<PasswordField value={passwordValue} onChangeText={setPasswordValue} />
|
|
</FormControl>
|
|
<VStack>
|
|
<FormError text={REQUIRED_ERROR} />
|
|
<Button size="xl" onPress={handleSubmit}>
|
|
<ButtonText>Se connecter</ButtonText>
|
|
<ButtonIcon as={ArrowRightIcon} />
|
|
</Button>
|
|
</VStack>
|
|
</FormControl>
|
|
);
|
|
}
|