ReactSignUp

    0

    0

    Library: react

      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;
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.