Signup

Create Folder Pages > SignUpPage.jsx

import React, { useContext, useState } from "react";
import {
  Flex,
  Box,
  FormControl,
  FormLabel,
  Input,
  Stack,
  Button,
  Heading,
  Text,
  useColorModeValue,
  useToast,
} from "@chakra-ui/react";
import { Link, useNavigate } from "react-router-dom";
import { sendEmailVerification, updateProfile } from "firebase/auth";
import { auth, db } from "../Configs/firebase";
import { doc, setDoc, serverTimestamp } from "firebase/firestore";
import colors from "../Utils/colors";
import AuthContext from "../Routes/hooks/AuthContext";
import moment from "moment";

function SignUpPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmationPassword, setConfirmationPassword] = useState("");
  const [name, setName] = useState("");
  const [nohp, setNohp] = useState("");
  const [instagram, setInstagram] = useState("");
  const toast = useToast();

  const navigate = useNavigate();

  const { signUp } = useContext(AuthContext);

  const handleRegister = async () => {
    const displayName = name;
    if ((email === "" && password === "") || password !== confirmationPassword)
      return toast({
        title: "Something Wrong",
        description: "check your email & password",
        status: "error",
        duration: 10000,
        isClosable: true,
        position: "top-end",
      });

    if (email !== "" || password !== "") {
      try {
        signUp(email, password)
          .then(async (userCredential) => {
            await updateProfile(auth.currentUser, {
              displayName,
            });
            sendEmailVerification(auth.currentUser);

            // Signed in
            const user = userCredential.user;
            if (user) {
              toast({
                title: "Success Create",
                description: `Success Create account ${user.displayName}`,
                status: "success",
                duration: 10000,
                isClosable: true,
                position: "top-right",
              });
            }
            await setDoc(doc(db, "users", user.uid), {
              name: user.displayName,
              email: user.email,
              uid_user: user.uid,
              nohp: nohp,
              sosmed: instagram,
              role: "user",
              subscription: "null",
              enrollmentDate: moment().format("MMMM Do YYYY, h:mm:ss a"),
              createdAt: new Date(),
            });
            navigate("/login", { replace: true });
          })
          .catch((error) => {
            toast({
              title: "Something Wrong",
              description: `It looks like you don't have account in your browser, please signup and reload this page / ${error.message}`,
              status: "error",
              duration: 10000,
              isClosable: true,
              position: "top-right",
            });
          });
      } catch (error) {
        toast({
          title: "Something Wrong",
          description: error,
          status: "error",
          duration: 10000,
          isClosable: true,
          position: "top-end",
        });
      }
    }
  };

  return (
    <Flex
      minH={"100vh"}
      align={"center"}
      justify={"center"}
      bg={useColorModeValue("gray.50", "gray.800")}
      bgColor="black"
    >
      <Stack spacing={8} mx={"auto"} py={12} px={6}>
        <Stack align={"center"}>
          <Heading fontSize={"4xl"} textAlign={"center"} color="white">
            Sign up
          </Heading>
          <Text fontSize={"lg"} color={"gray.600"}>
            to enjoy all of our cool features ✌️
          </Text>
        </Stack>
        <Box
          rounded={"lg"}
          bg={useColorModeValue(colors.theme, "gray.700")}
          boxShadow={"lg"}
          p={8}
          w={{ base: "350px", md: "450px", lg: "450px" }}
        >
          <Stack spacing={4}>
            <FormControl>
              <FormLabel htmlFor="name" color={colors.black}>
                Name
              </FormLabel>
              <Input
                id="name"
                type="name"
                color={colors.black}
                bgColor={colors.white}
                onChange={(e) => setName(e.target.value)}
              />
            </FormControl>
            <FormControl>
              <FormLabel htmlFor="nohp" color={colors.black}>
                Phone Number
              </FormLabel>
              <Input
                id="nohp"
                type="nohp"
                color={colors.black}
                bgColor={colors.white}
                onChange={(e) => setNohp(e.target.value)}
                placeholder="08xxxxxxxxxx"
              />
            </FormControl>
            <FormControl>
              <FormLabel htmlFor="email" color={colors.black}>
                Email
              </FormLabel>
              <Input
                id="email"
                type="email"
                color={colors.black}
                bgColor={colors.white}
                onChange={(e) => setEmail(e.target.value)}
              />
            </FormControl>

            <FormControl>
              <FormLabel htmlFor="instagram" color={colors.black}>
                Social Media
              </FormLabel>
              <Input
                id="sosmed"
                type="text"
                color={colors.black}
                bgColor={colors.white}
                onChange={(e) => setInstagram(e.target.value)}
              />
            </FormControl>

            <FormControl>
              <FormLabel htmlFor="password" color={colors.black}>
                Password
              </FormLabel>
              <Input
                id="password"
                type="password"
                color={colors.black}
                bgColor={colors.white}
                onChange={(e) => setPassword(e.target.value)}
              />
            </FormControl>
            <FormControl>
              <FormLabel htmlFor="password" color={colors.black}>
                Confirm Password
              </FormLabel>
              <Input
                id="password"
                type="password"
                color={colors.black}
                bgColor={colors.white}
                onChange={(e) => setConfirmationPassword(e.target.value)}
              />
            </FormControl>
            <Stack spacing={10} pt={2}>
              <Button
                onClick={() => handleRegister()}
                loadingText="Submitting"
                size="lg"
                bg="black"
                color={"white"}
                _hover={{
                  bg: "blue.500",
                }}
              >
                Sign up
              </Button>
            </Stack>
            <Stack pt={6}>
              <Text align={"center"}>
                Already a user?{" "}
                <Button bgColor="black" color="white">
                  <Link to="/login">Login</Link>
                </Button>
              </Text>
            </Stack>
          </Stack>
        </Box>
      </Stack>
    </Flex>
  );
}

export default SignUpPage;

Create folder Utils and then create utils.js

export default {
    primary : '#fc5c65',
    secondary: '#4ecdc4',
    black: '#1a202c',
    white: '#fff',
    medium : '#6e6969',
    light : '#d8d8d8',
    dark: '#2B2B2B',
    darklight: '#413F42',
    danger: "#ff5252",
    theme: '#FFD600',
    text: '#00B5D8'

}