Source: pages/createaccver.js

import React from "react";
import Link from "next/link";
import { useRouter } from "next/dist/client/router";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import People from "@material-ui/icons/People";
// core components
import Header from "/components/Header/Header.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Footer from "/components/Footer/Footer.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Button from "/components/CustomButtons/Button.js";
import Card from "/components/Card/Card.js";
import CardBody from "/components/Card/CardBody.js";
import CardHeader from "/components/Card/CardHeader.js";
import CardFooter from "/components/Card/CardFooter.js";
import CustomInput from "/components/CustomInput/CustomInput.js";
import { useState } from "react";
import { useAuth } from "../context/AuthContext";

import styles from "/styles/jss/nextjs-material-kit/pages/loginPage.js";

const useStyles = makeStyles(styles);

/**
 * The function `handleCodeChanges` updates the value of `verCode` based on the input from an event.
 * @param event - The `event` parameter in the `handleCodeChanges` function typically represents the
 * event that occurred, such as a change event on an input field. In this case, it is capturing the
 * value entered by the user in an input field.
 */
export const handleCodeChanges = (event) => {
  const enteredCode = event.target.value;
  setVerCode(enteredCode);
};

/**
 * The handleSubmit function handles form submission for account creation, including verification
 * code validation and error handling.
 * @param event - The `event` parameter in the `handleSubmit` function is an event object that
 * represents the event being handled, such as a form submission event. In this case, the function is
 * used to handle form submission for creating a new account. The `event.preventDefault()` method is
 * called to prevent the default behavior
 */
export const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    if (verCode === code) {
      await signup(email, password, username);
      setLoading(true);
      alert("Account Created Successfully!");
      router.push("/login");
    } else {
      alert("Invalid verification code.");
      setVerCode("");
    }
  } catch (error) {
    if (error.code === "auth/email-already-in-use") {
      alert("Email is already in use. Please Sign In or use another email.");
      router.push("/login");
    } else {
      console.error("Error creating account:", error);
      alert("Error creating account. Please try again later.");
    }
  } finally {
    setLoading(false);
  }
};

/**
 * The `VerificationPage` function handles account verification by validating a verification code and
 * creating a new account with error handling.
 * @param props - The `props` parameter in the `VerificationPage` function represents the properties
 * passed to the component.
 * @returns The `VerificationPage` component is being returned. It includes a form for verifying a
 * user's account creation with a verification code input field and a "Verify" button. The component
 * also handles form submission, validation of the verification code, and error handling. The layout
 * includes a header, background image, and styling for the form elements.
 */
export function VerificationPage(props) {
  const router = useRouter();
  const { username, password, email, code } = router.query;
  const [verCode, setVerCode] = useState("");
  const { signup } = useAuth();
  const [loading, setLoading] = useState(false);

  const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
  setTimeout(function () {
    setCardAnimation("");
  }, 700);
  const classes = useStyles();
  const { ...rest } = props;
  return (
    <div>
      <Header
        absolute
        color="transparent"
        brand="ThisIsNotFair"
        rightLinks={
          <HeaderLinks enableapps={false} login={false} loginButton={false} />
        }
        {...rest}
      />
      <div
        className={classes.pageHeader}
        style={{
          backgroundImage: "url('/img/bg7.jpg')",
          backgroundSize: "cover",
          backgroundPosition: "top center",
        }}
      >
        <div className={classes.container}>
          <GridContainer justify="center">
            <GridItem xs={12} sm={6} md={4}>
              <Card className={classes[cardAnimaton]}>
                <form className={classes.form}>
                  <CardHeader color="primary" className={classes.cardHeader}>
                    <h3>Verification</h3>
                  </CardHeader>
                  <CardBody
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "center",
                    }}
                  >
                    <p>Check your email for the verification code.</p>
                    <CustomInput
                      labelText="Verification Code"
                      id="first"
                      formControlProps={{
                        fullWidth: true,
                      }}
                      inputProps={{
                        type: "text",
                        onChange: handleCodeChanges,
                        value: verCode,
                        endAdornment: (
                          <InputAdornment position="end">
                            <Icon className={classes.inputIconsColor}>
                              lock_outline
                            </Icon>
                          </InputAdornment>
                        ),
                      }}
                    />
                  </CardBody>
                  <CardFooter className={classes.cardFooter}>
                    {/* Remove the href next time */}
                    <Button
                      simple
                      color="primary"
                      size="lg"
                      onClick={handleSubmit}
                      onKeyDown={(e) => e.key === "Enter" && handleSubmit(e)}
                      disabled={loading}
                    >
                      Verify
                    </Button>
                  </CardFooter>
                </form>
              </Card>
            </GridItem>
          </GridContainer>
        </div>
        <Footer whiteFont />
      </div>
    </div>
  );
}