Advertisement
mekasu0124

Untitled

Jan 19th, 2025
48
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { useState } from "react";
  2. import { Link, useNavigate } from "react-router-dom";
  3. import { parsePhoneNumberFromString } from 'libphonenumber-js';
  4.  
  5. import api from '../../hooks/api';
  6. import Navbar from "../../components/navbar";
  7.  
  8.  
  9. export default function SignUp() {
  10.   const [newUserData, setNewUserData] = useState({
  11.     firstName: '',
  12.     lastName: '',
  13.     emailAddress: '',
  14.     phoneNumber: '',
  15.     username: '',
  16.     password: '',
  17.   });
  18.  
  19.   const [confirmPassword, setConfirmPassword] = useState('');
  20.  
  21.   const [isError, setIsError] = useState(false);
  22.   const [isSuccess, setIsSuccess] = useState(false);
  23.  
  24.   const [errorText, setErrorText] = useState('');
  25.   const [successText, setSuccessText] = useState('');
  26.  
  27.   const navigate = useNavigate('');
  28.  
  29.   const handleChange = async (e) => {
  30.     const { name, value } = e.target;
  31.  
  32.     if (name === 'confirmPassword') {
  33.       setConfirmPassword(value);
  34.     } else if (name === 'phoneNumber') {
  35.       try {
  36.         // Attempt to parse the phone number from the input
  37.         const phoneNumber = parsePhoneNumberFromString(value);
  38.  
  39.         if (phoneNumber) {
  40.           // Format the number based on its detected region
  41.           const formattedNumber = phoneNumber.formatInternational();
  42.           setNewUserData((prevData) => ({
  43.             ...prevData,
  44.             phoneNumber: formattedNumber,
  45.           }));
  46.         } else {
  47.           // Handle invalid phone number
  48.           setNewUserData((prevData) => ({
  49.             ...prevData,
  50.             phoneNumber: value, // Keep the raw input if invalid
  51.           }));
  52.         }
  53.       } catch (error) {
  54.         console.error('Error formatting phone number:', error);
  55.         setNewUserData((prevData) => ({
  56.           ...prevData,
  57.           phoneNumber: value, // Keep the raw input in case of error
  58.         }));
  59.       }
  60.     } else {
  61.       setNewUserData((prevData) => ({
  62.         ...prevData,
  63.         [name]: value,
  64.       }));
  65.     }
  66.   };
  67.  
  68.   const handleSubmit = async (e) => {
  69.     e.preventDefault();
  70.  
  71.     if (newUserData.password !== confirmPassword) {
  72.       setErrorText('Passwords Do Not Match! Try Again!');
  73.       setIsError(true);
  74.  
  75.       setTimeout(() => {
  76.         setIsError(false);
  77.         return setErrorText('');
  78.       }, 5000);
  79.     };
  80.  
  81.     try {
  82.       const response = await api.post('/auth/signup', newUserData);
  83.  
  84.       window.localStorage.setItem('emailAddress', newUserData.emailAddress);
  85.       window.localStorage.setItem('phoneNumber', newUserData.phoneNumber);
  86.  
  87.       setSuccessText(response.data.message);
  88.       setIsSuccess(true);
  89.  
  90.       setTimeout(() => {
  91.         setIsSuccess(false);
  92.         setSuccessText('');
  93.         return navigate('/auth/verify-email');
  94.       }, 3000);
  95.     } catch (err) {
  96.       console.error(err);
  97.       if (err.response.status === 409) {
  98.         setErrorText(err.response.data.message);
  99.         setIsError(true);
  100.  
  101.         setTimeout(() => {
  102.           setIsError(false);
  103.           return setErrorText('');
  104.         }, 5000);
  105.       } else {
  106.         setErrorText(err.message);
  107.         setIsError(true);
  108.  
  109.         setTimeout(() => {
  110.           setIsError(false);
  111.           return setErrorText('');
  112.         }, 5000);
  113.       };
  114.     }
  115.   };
  116.  
  117.   return (
  118.     <div className="flex flex-row items-center justify-center w-full h-[850px]">
  119.       <Navbar props={{ loggedIn: false }} />
  120.  
  121.       <div className="flex flex-col items-center justify-start w-full h-full ml-5 mt-10">
  122.         <div className="flex flex-col items-center justify-center w-full p-2">
  123.           <h1 className="font-inkfree font-bold italic text-center text-fg text-2xl tracking-widest w-full">
  124.             Create A New Account
  125.           </h1>
  126.         </div>
  127.  
  128.         <form
  129.           onSubmit={handleSubmit}
  130.           className="flex flex-col items-center justify-start w-[70%] h-[700px]">
  131.  
  132.           <div className="flex flex-col items-center justify-evenly w-full h-full border-2 border-bdr rounded-xl boxShadow">
  133.             <div className="flex flex-row items-center justify-evenly w-full">              
  134.               <label
  135.                 htmlFor="firstName"
  136.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  137.                 First Name
  138.               </label>
  139.  
  140.               <input
  141.                 type="text"
  142.                 id="firstName"
  143.                 name="firstName"
  144.                 value={newUserData.firstName}
  145.                 onChange={handleChange}
  146.                 required
  147.                 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" />
  148.             </div>
  149.  
  150.             <div className="flex flex-row items-center justify-evenly w-full">
  151.               <label
  152.                 htmlFor="lastName"
  153.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  154.                 Last Name
  155.               </label>
  156.  
  157.               <input
  158.                 type="text"
  159.                 id="lastName"
  160.                 name="lastName"
  161.                 value={newUserData.lastName}
  162.                 onChange={handleChange}
  163.                 required
  164.                 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" />
  165.             </div>
  166.  
  167.             <div className="flex flex-row items-center justify-evenly w-full">
  168.               <label
  169.                 htmlFor="emailAddress"
  170.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  171.                 Email Address
  172.               </label>
  173.  
  174.               <input
  175.                 type="email"
  176.                 id="emailAddress"
  177.                 name="emailAddress"
  178.                 value={newUserData.emailAddress}
  179.                 onChange={handleChange}
  180.                 required
  181.                 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" />
  182.             </div>
  183.  
  184.             <div className="flex flex-row items-center justify-evenly w-full">
  185.               <label
  186.                 htmlFor="phoneNumber"
  187.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  188.                 Phone Number
  189.               </label>
  190.  
  191.               <input
  192.                 type="text"
  193.                 id="phoneNumber"
  194.                 name="phoneNumber"
  195.                 value={newUserData.phoneNumber}
  196.                 onChange={handleChange}
  197.                 required
  198.                 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" />
  199.             </div>
  200.  
  201.             <div className="flex flex-row items-center justify-evenly w-full">
  202.               <label
  203.                 htmlFor="username"
  204.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  205.                 Create Username
  206.               </label>
  207.  
  208.               <input
  209.                 type="text"
  210.                 id="username"
  211.                 name="username"
  212.                 value={newUserData.username}
  213.                 onChange={handleChange}
  214.                 required
  215.                 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" />
  216.             </div>
  217.  
  218.             <div className="flex flex-row items-center justify-evenly w-full">
  219.               <label
  220.                 htmlFor="password"
  221.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  222.                 Create Password
  223.               </label>
  224.  
  225.               <input
  226.                 type="text"
  227.                 id="password"
  228.                 name="password"
  229.                 value={newUserData.password}
  230.                 onChange={handleChange}
  231.                 required
  232.                 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" />
  233.             </div>
  234.  
  235.             <div className="flex flex-row items-center justify-evenly w-full">
  236.               <label
  237.                 htmlFor="confirmPassword"
  238.                 className="font-inkfree italic text-xl text-fg text-center tracking-widest w-[35%]">
  239.                 Confirm Password
  240.               </label>
  241.  
  242.               <input
  243.                 type="text"
  244.                 id="confirmPassword"
  245.                 name="confirmPassword"
  246.                 value={confirmPassword}
  247.                 onChange={handleChange}
  248.                 required
  249.                 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" />
  250.             </div>
  251.           </div>
  252.  
  253.           <div className="flex flex-col items-center justify-center w-[80%] m-5 p-2">
  254.             {isError && (<div className="bg-red-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{errorText}</div>)}
  255.             {isSuccess && (<div className="bg-green-600 text-black text-center border-2 border-black rounded-full p-2 w-[60%]">{successText}</div>)}
  256.           </div>
  257.  
  258.           <div className="flex flex-row items-center justify-evenly w-full">
  259.             <Link
  260.               to="/"
  261.               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">
  262.  
  263.               Cancel
  264.             </Link>
  265.  
  266.             <button
  267.               type="submit"
  268.               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">
  269.  
  270.               Sign Up
  271.             </button>
  272.           </div>
  273.         </form>
  274.       </div>
  275.     </div>
  276.   );
  277. };
  278.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement