-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
4,478 additions
and
18,153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,107 @@ | ||
| "use client"; | ||
| "use client" | ||
|
|
||
| import { useState, useEffect } from "react"; | ||
| import { useState, useEffect } from "react" | ||
| import { useSignUpContext } from "@/context/signup" | ||
| import { SignUpErrors } from "@cs/types/index" | ||
|
|
||
| export default function UserDetailsForm() { | ||
| const { fullName, setFullName, email, setEmail, password, setPassword, confirmPassword, setConfirmPassword, address, setAddress, errors, setErrors } = useSignUpContext(); | ||
| // create a errors object state | ||
| // const [errors, setErrors] = useState<SignUpErrors>({}); | ||
| const { | ||
| fullName, | ||
| setFullName, | ||
| email, | ||
| setEmail, | ||
| password, | ||
| setPassword, | ||
| confirmPassword, | ||
| setConfirmPassword, | ||
| address, | ||
| setAddress, | ||
| errors, | ||
| setErrors, | ||
| } = useSignUpContext() | ||
| // create a errors object state | ||
| // const [errors, setErrors] = useState<SignUpErrors>({}); | ||
|
|
||
| // create a useEffect that will check for errors in the form | ||
| useEffect(() => { | ||
| const emailValidation = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g; | ||
| const errObj: SignUpErrors = {} | ||
| // create a useEffect that will check for errors in the form | ||
| useEffect(() => { | ||
| const errObj: SignUpErrors = {} | ||
|
|
||
| if (fullName.length < 1) { | ||
| errObj['fullName'] = 'Please enter your full name' | ||
| } else { | ||
| errObj['fullName'] = '' | ||
| } | ||
| if (fullName.length < 1) { | ||
| errObj["fullName"] = "Please enter your full name" | ||
| } else { | ||
| errObj["fullName"] = "" | ||
| } | ||
| if (!address) { | ||
| errObj["address"] = "Please enter your address" | ||
| } else { | ||
| errObj["address"] = "" | ||
| } | ||
|
|
||
| if (!emailValidation.test(email)) { | ||
| errObj['email'] = 'Please enter a valid email' | ||
| } else { | ||
| errObj['email'] = '' | ||
| } | ||
| if (password.length < 8) { | ||
| errObj["password"] = "Password must be at least 8 characters long" | ||
| } else { | ||
| errObj["password"] = "" | ||
| } | ||
|
|
||
| if(!address) { | ||
| errObj['address'] = 'Please enter your address' | ||
| } else { | ||
| errObj['address'] = '' | ||
| } | ||
| if (password && confirmPassword && password !== confirmPassword) { | ||
| errObj["confirmPassword"] = "Passwords do not match" | ||
| } else { | ||
| errObj["confirmPassword"] = "" | ||
| } | ||
|
|
||
| if (password.length < 8) { | ||
| errObj['password'] = 'Password must be at least 8 characters long' | ||
| } else { | ||
| errObj['password'] = '' | ||
| } | ||
| setErrors(errObj) | ||
| }, [fullName, email, password, confirmPassword, address, setErrors]) | ||
|
|
||
| if (password && confirmPassword && password !== confirmPassword) { | ||
| errObj['confirmPassword'] = 'Passwords do not match' | ||
| } else { | ||
| errObj['confirmPassword'] = '' | ||
| } | ||
| return ( | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| justifyContent: "center", | ||
| width: "50%", | ||
| margin: "auto", | ||
| }} | ||
| className="w-50 " | ||
| > | ||
| {errors.fullName && <p className="signup-error">{errors.fullName}</p>} | ||
| <div className="input-wrapper"> | ||
| <input | ||
| value={fullName} | ||
| placeholder="Full name" | ||
| onChange={(e) => setFullName(e.target.value)} | ||
| type="text" | ||
| /> | ||
| </div> | ||
|
|
||
| setErrors(errObj) | ||
| }, [fullName, email, password, confirmPassword, address]) | ||
|
|
||
| return ( | ||
| <div style={{display:'flex', flexDirection:'column', justifyContent:'center', width:'50%', margin:'auto' }} className="w-50 " > | ||
| {errors.fullName && <p className="signup-error">{errors.fullName}</p>} | ||
| <div className="input-wrapper"> | ||
| <label htmlFor="first">Full Name</label> | ||
| <input value={fullName} onChange={(e) => setFullName(e.target.value)} type="text" /> | ||
| </div> | ||
| {errors.email && <p className="signup-error">{errors.email}</p>} | ||
| <div className="input-wrapper"> | ||
| <label htmlFor="first">Email</label> | ||
| <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> | ||
| </div> | ||
| {errors.address && <p className="signup-error">{errors.address}</p>} | ||
| <div className="input-wrapper"> | ||
| <label htmlFor="first">Address</label> | ||
| <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} /> | ||
| </div> | ||
| {errors.password && <p className="signup-error">{errors.password}</p>} | ||
| <div className="input-wrapper"> | ||
| <label htmlFor="first">Password</label> | ||
| <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /> | ||
| </div> | ||
| {errors.confirmPassword && <p className="signup-error">{errors.confirmPassword}</p>} | ||
| <div className="input-wrapper"> | ||
| <label htmlFor="first">Confirm password</label> | ||
| <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| {errors.address && <p className="signup-error">{errors.address}</p>} | ||
| <div className="input-wrapper"> | ||
| <input | ||
| type="text" | ||
| placeholder="Address" | ||
| value={address} | ||
| onChange={(e) => setAddress(e.target.value)} | ||
| /> | ||
| </div> | ||
| {errors.password && <p className="signup-error">{errors.password}</p>} | ||
| <div className="input-wrapper"> | ||
| <input | ||
| type="password" | ||
| placeholder="password" | ||
| value={password} | ||
| onChange={(e) => setPassword(e.target.value)} | ||
| /> | ||
| </div> | ||
| {errors.confirmPassword && ( | ||
| <p className="signup-error">{errors.confirmPassword}</p> | ||
| )} | ||
| <div className="input-wrapper"> | ||
| <input | ||
| type="password" | ||
| placeholder="Confirm password" | ||
| value={confirmPassword} | ||
| onChange={(e) => setConfirmPassword(e.target.value)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, { useEffect } from "react" | ||
| import { useSignUpContext } from "@/context/signup" | ||
| import { SignUpErrors } from "@cs/types/index" | ||
| import { FcGoogle } from "react-icons/fc" | ||
| import { FaMeta } from "react-icons/fa6" | ||
| // import "@/styles/globals.css" | ||
|
|
||
| const UserEmail: React.FC = () => { | ||
| const { email, setEmail, errors, setErrors } = useSignUpContext() | ||
| useEffect(() => { | ||
| const emailValidation = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g | ||
| const errObj: SignUpErrors = {} | ||
|
|
||
| if (!emailValidation.test(email)) { | ||
| errObj["email"] = "Please enter a valid email" | ||
| } else { | ||
| errObj["email"] = "" | ||
| } | ||
| setErrors(errObj) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div className=" m-auto flex w-3/6 flex-col justify-center align-middle "> | ||
| {/* {errors.email && <p className="signup-error">{errors.email}</p>} */} | ||
| <div className="input-wrapper my-4"> | ||
| <input | ||
| type="email" | ||
| className="required:border-red-500" | ||
| placeholder="Email" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-8 flex flex-row justify-center"> | ||
| <span className="border-2 border-solid"> | ||
| <hr /> | ||
| </span> | ||
| <span>or</span> | ||
| <span className="border-2 border-solid"> | ||
| <hr /> | ||
| </span> | ||
| </div> | ||
| <div className="mb-2 flex cursor-pointer justify-center rounded-full border-2 border-solid p-1"> | ||
| <FcGoogle /> | ||
| <button className="px-1">Sign up with Google</button> | ||
| </div> | ||
| <div className="mb-6 flex cursor-pointer justify-center rounded-full border-2 border-solid p-1"> | ||
| <FaMeta /> | ||
| <button className="px-1">Sign up with Meta</button> | ||
| </div> | ||
| <p> | ||
| By signing up with Cubeseed you agree to the Terms and Conditions, and | ||
| Privacy Policy. | ||
| </p> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default UserEmail |
Oops, something went wrong.