ReactSignUp

  Text,
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
  Heading,
  Stack,
  Link,
import React, { useState } from 'react';
  FormLabel,
  FormControl,
import {
  Input,
  Flex,
  InputGroup,
import { regexObject } from '../../regex';
import { signInWithPopup } from 'firebase/auth';
  useColorModeValue,
} from '@chakra-ui/react';
  HStack,
  Button,
  Box,
  InputRightElement,
import { FcGoogle } from 'react-icons/fc';
import { auth, googleAuthProvider } from '../../utils/firebase';


const SignUp = () => {
  const [showPassword, setShowPassword] = useState(false);
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [identity, setIdentity] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const { emailRegex, passwordRegex, nameRegex, identityNumberRegex } = regexObject;

  const isDisabled =
    [firstName, lastName, identity, email, password].every(Boolean) &&
    emailRegex.test(email) &&
    passwordRegex.test(password) &&
    nameRegex.test(firstName) &&
    nameRegex.test(lastName) &&
    identityNumberRegex.test(identity);

  const handleSubmit = () => {
    if (isDisabled) {
      alert('Form Submitted');
    } else {
    }

    setFirstName('');
    setLastName('');
    setIdentity('');
    setEmail('');
    setPassword('');
    setTimeout(() => setError(''), 3000);
  };

  auth.useDeviceLanguage();
  const continueWithGoogle = () => {
    return signInWithPopup(auth, googleAuthProvider)
      .then((result) => {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const credential = googleAuthProvider.credentialFromResult(result);
        const token = credential.accessToken;
        // The signed-in user info.
        const user = result.user;
        // ...
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.customData.email;
        // The AuthCredential type that was used.
        const credential = googleAuthProvider.credentialFromError(error);
        // ...
      });
  };

  return (
    <Flex
      minH={'100vh'}
      align={'center'}
      justify={'center'}
      bg={useColorModeValue('gray.50', 'gray.800')}
    >
      <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
        <Stack align={'center'}>
          <Heading fontSize={'4xl'} textAlign={'center'}>
            Sign up
          </Heading>
          <Text fontSize={'lg'} color={'gray.600'}>
            to enjoy all of our cool features ✌️
          </Text>
        </Stack>
        <Box rounded={'lg'} bg={useColorModeValue('white', 'gray.700')} boxShadow={'lg'} p={8}>
          <Stack spacing={4}>
            <HStack>
              <Box>
                <FormControl id="firstName" isRequired>
                  <FormLabel>First Name</FormLabel>
                  <Input
                    type="text"
                    id="firstName"
                    name="firstName"
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                  />
                </FormControl>
              </Box>
              <Box>
                <FormControl id="lastName">
                  <FormLabel>Last Name</FormLabel>
                  <Input
                    type="text"
                    id="lastName"
                    name="lastName"
                    value={lastName}
                    onChange={(e) => setLastName(e.target.value)}
                  />
                </FormControl>
              </Box>
            </HStack>
            <FormControl id="identityNumber">
              <FormLabel>Identity Number</FormLabel>
              <Input
                type="text"
                id="identityNumber"
                name="identityNumber"
                value={identity}
                onChange={(e) => setIdentity(e.target.value)}
              />
            </FormControl>
            <FormControl id="email" isRequired>
              <FormLabel>Email address</FormLabel>
              <Input
                type="email"
                id="email"
                name="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </FormControl>
            <FormControl id="password" isRequired>
              <FormLabel>Password</FormLabel>
              <InputGroup>
                <Input
                  type={showPassword ? 'text' : 'password'}
                  id="password"
                  name="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
                <InputRightElement h={'full'}>
                  <Button
                    variant={'ghost'}
                    onClick={() => setShowPassword((showPassword) => !showPassword)}
                  >
                    {showPassword ? <ViewIcon /> : <ViewOffIcon />}
                  </Button>
                </InputRightElement>
              </InputGroup>
            </FormControl>
            <Stack spacing={10} pt={2}>
              <Button
                disabled={!isDisabled}
                onClick={handleSubmit}
                loadingText="Submitting"
                size="lg"
                bg={'blue.400'}
                color={'white'}
                _hover={{
                  bg: 'blue.500',
                }}
              >
                Sign up
              </Button>
              <Button
                // onClick={continueWithGoogle}
                bg={'white'}
                color={'black'}
                _hover={{
                  bg: 'white.800',
                }}
              >
                Continue with Google &nbsp;
                <FcGoogle size="1.5rem" />
              </Button>
            </Stack>
            <Stack pt={6}>
              <Text align={'center'}>
                Already a user?{' '}
                <Link color={'blue.400'} href="/">
                  Login
                </Link>
              </Text>
            </Stack>
          </Stack>
        </Box>
      </Stack>
    </Flex>
  );
};

export default SignUp;