Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { useState } from "react";
- import { Link, useNavigate } from "react-router-dom";
- import { parsePhoneNumberFromString } from 'libphonenumber-js';
- import api from '../../hooks/api';
- import Navbar from "../../components/navbar";
- export default function SignUp() {
- const [newUserData, setNewUserData] = useState({
- firstName: '',
- lastName: '',
- emailAddress: '',
- phoneNumber: '',
- username: '',
- password: '',
- });
- const [confirmPassword, setConfirmPassword] = useState('');
- const [isError, setIsError] = useState(false);
- const [isSuccess, setIsSuccess] = useState(false);
- const [errorText, setErrorText] = useState('');
- const [successText, setSuccessText] = useState('');
- const navigate = useNavigate('');
- const handleChange = async (e) => {
- const { name, value } = e.target;
- if (name === 'confirmPassword') {
- setConfirmPassword(value);
- } else if (name === 'phoneNumber') {
- try {
- // Attempt to parse the phone number from the input
- const phoneNumber = parsePhoneNumberFromString(value);
- if (phoneNumber) {
- // Format the number based on its detected region
- const formattedNumber = phoneNumber.formatInternational();
- setNewUserData((prevData) => ({
- ...prevData,
- phoneNumber: formattedNumber,
- }));
- } else {
- // Handle invalid phone number
- setNewUserData((prevData) => ({
- ...prevData,
- phoneNumber: value, // Keep the raw input if invalid
- }));
- }
- } catch (error) {
- console.error('Error formatting phone number:', error);
- setNewUserData((prevData) => ({
- ...prevData,
- phoneNumber: value, // Keep the raw input in case of error
- }));
- }
- } else {
- setNewUserData((prevData) => ({
- ...prevData,
- [name]: value,
- }));
- }
- };
- const handleSubmit = async (e) => {
- e.preventDefault();
- if (newUserData.password !== confirmPassword) {
- setErrorText('Passwords Do Not Match! Try Again!');
- setIsError(true);
- setTimeout(() => {
- setIsError(false);
- return setErrorText('');
- }, 5000);
- };
- try {
- const response = await api.post('/auth/signup', newUserData);
- window.localStorage.setItem('emailAddress', newUserData.emailAddress);
- window.localStorage.setItem('phoneNumber', newUserData.phoneNumber);
- setSuccessText(response.data.message);
- setIsSuccess(true);
- setTimeout(() => {
- setIsSuccess(false);
- setSuccessText('');
- return navigate('/auth/verify-email');
- }, 3000);
- } catch (err) {
- console.error(err);
- if (err.response.status === 409) {
- setErrorText(err.response.data.message);
- setIsError(true);
- setTimeout(() => {
- setIsError(false);
- return setErrorText('');
- }, 5000);
- } else {
- setErrorText(err.message);
- setIsError(true);
- setTimeout(() => {
- setIsError(false);
- return setErrorText('');
- }, 5000);
- };
- }
- };
- return (
- <div className="flex flex-row items-center justify-center w-full h-[850px]">
- <Navbar props={{ loggedIn: false }} />
- <div className="flex flex-col items-center justify-start w-full h-full ml-5 mt-10">
- <div className="flex flex-col items-center justify-center w-full p-2">
- <h1 className="font-inkfree font-bold italic text-center text-fg text-2xl tracking-widest w-full">
- Create A New Account
- </h1>
- </div>
- <form
- onSubmit={handleSubmit}
- className="flex flex-col items-center justify-start w-[70%] h-[700px]">
- <div className="flex flex-col items-center justify-evenly w-full h-full border-2 border-bdr rounded-xl boxShadow">
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="firstName"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- First Name
- </label>
- <input
- type="text"
- id="firstName"
- name="firstName"
- value={newUserData.firstName}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="lastName"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- Last Name
- </label>
- <input
- type="text"
- id="lastName"
- name="lastName"
- value={newUserData.lastName}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="emailAddress"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- Email Address
- </label>
- <input
- type="email"
- id="emailAddress"
- name="emailAddress"
- value={newUserData.emailAddress}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="phoneNumber"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- Phone Number
- </label>
- <input
- type="text"
- id="phoneNumber"
- name="phoneNumber"
- value={newUserData.phoneNumber}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="username"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- Create Username
- </label>
- <input
- type="text"
- id="username"
- name="username"
- value={newUserData.username}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="password"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- Create Password
- </label>
- <input
- type="text"
- id="password"
- name="password"
- value={newUserData.password}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <label
- htmlFor="confirmPassword"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
- Confirm Password
- </label>
- <input
- type="text"
- id="confirmPassword"
- name="confirmPassword"
- value={confirmPassword}
- onChange={handleChange}
- required
- className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[50%] h-[50px] bg-gray-600 border-2 border-bdr rounded-lg outline-none hover:outline-none hover:bg-hvr hover:text-black focus:bg-bg focus:text-fg transition-all-delay-150" />
- </div>
- </div>
- <div className="flex flex-col items-center justify-center w-[80%] m-5 p-2">
- {isError && (<div className="bg-red-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{errorText}</div>)}
- {isSuccess && (<div className="bg-green-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{successText}</div>)}
- </div>
- <div className="flex flex-row items-center justify-evenly w-full">
- <Link
- to="/"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest border-2 border-bdr rounded-full w-[300px] h-[40px] outline-none hover:outline-none hover:bg-hvr hover:text-black hover:text-bold hover:scale-110 hover:text-2xl focus:outline-none transition-all delay-150 pt-1">
- Cancel
- </Link>
- <button
- type="submit"
- className="font-inkfree italic text-xl text-fg text-center tracking-widest border-2 border-bdr rounded-full w-[300px] h-[40px] outline-none hover:outline-none hover:bg-hvr hover:text-black hover:text-bold hover:scale-110 hover:text-2xl focus:outline-none transition-all delay-150">
- Sign Up
- </button>
- </div>
- </form>
- </div>
- </div>
- );
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement