Mobile/components/form/SigninForm.tsx

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 FormError from "./FormError";
import PasswordField from "./PasswordField";

export default function SigninForm() {
  const REQUIRED = "Au moins un des champs requis est vide !";
  const INVALID_EMAIL = "Adresse mail invalide !";
  // TODO Définir ce qu'est un mdp valide
  const INVALID_PASSWORD = "Mot de passe invalide !";
  const NOT_MATCHING_PASSWORD = "Les mots de passe ne correspondent pas !";
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  const [emailValue, setEmailValue] = React.useState("");
  const [isEmailInvalid, setIsEmailInvalid] = React.useState(false);
  const [passwordValue, setPasswordValue] = React.useState("");
  const [isPasswordInvalid, setIsPasswordInvalid] = React.useState(false);
  const [passwordConfirmValue, setPasswordConfirmValue] = React.useState("");
  const [isPasswordConfirmInvalid, setIsPasswordConfirmInvalid] =
    React.useState(false);
  const [isFormInvalid, setIsFormInvalid] = React.useState(false);
  const [formError, setFormError] = React.useState("");

  function validateForm() {
    setFormError("");
    setIsFormInvalid(false);
  }

  function invalidateForm(error: string) {
    setFormError(error);
    setIsFormInvalid(true);
  }

  const handleSubmit = () => {
    //check for valid email block
    if (emailValue != "") {
      if (emailRegex.test(emailValue)) {
        setIsEmailInvalid(false);
      } else {
        setIsEmailInvalid(true);
        invalidateForm(INVALID_EMAIL);
        return;
      }
    } else {
      setIsEmailInvalid(true);
      invalidateForm(REQUIRED);
      return;
    }

    //TODO : check for valid password block
    if (passwordValue != "") {
      setIsPasswordInvalid(false);
    } else {
      setIsPasswordInvalid(true);
      invalidateForm(REQUIRED);
      return;
    }

    //check for valid password confirmation
    if (passwordConfirmValue != "") {
      if (passwordConfirmValue == passwordValue) {
        setIsPasswordConfirmInvalid(false);
        validateForm();
      } else {
        setIsPasswordConfirmInvalid(true);
        invalidateForm(NOT_MATCHING_PASSWORD);
        return;
      }
    } else {
      setIsPasswordConfirmInvalid(true);
      invalidateForm(REQUIRED);
      return;
    }
  };

  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>
      <FormControl isInvalid={isPasswordConfirmInvalid}>
        <FormControlLabel>
          <FormControlLabelText bold={true}>
            Confirmation du mot de passe
          </FormControlLabelText>
        </FormControlLabel>
        <PasswordField
          value={passwordConfirmValue}
          onChangeText={setPasswordConfirmValue}
        />
      </FormControl>
      <VStack>
        <FormError text={formError} />
        <Button size="xl" onPress={handleSubmit}>
          <ButtonText>S'inscrire</ButtonText>
          <ButtonIcon as={ArrowRightIcon} />
        </Button>
      </VStack>
    </FormControl>
  );
}