forked from GreenPioneer/nx_firebase_template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #23 from VSchool/authEmailPassword
Auth email password
- Loading branch information
Showing
4 changed files
with
164 additions
and
433 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
|
|
||
| .signupLogoContainer { | ||
| display: flex; | ||
| justify-content: center; | ||
| top: 20px; | ||
| position: relative; | ||
| } | ||
| .signupLogo { | ||
| width: 196px; | ||
| height: 100px; | ||
| flex-shrink: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| column-gap: 7px; | ||
| } | ||
| .signupW { | ||
| color: #000; | ||
| font-family: Fontspring-DEMO-capitana-medium; | ||
| font-size: 40px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: normal; | ||
| } | ||
| .signupListThreeFilled { | ||
| width: 40px; | ||
| height: 40px; | ||
| flex-shrink: 0; | ||
| fill: var(--Primary-Blue, #148CFB); | ||
| } | ||
| .signupL { | ||
| display: flex; | ||
| width: 23px; | ||
| height: 48px; | ||
| flex-direction: column; | ||
| justify-content: space-evenly; | ||
| flex-shrink: 0; | ||
| color: #000; | ||
| font-family: Fontspring-DEMO-capitana-medium; | ||
| font-size: 40px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: normal; | ||
| } | ||
| .signupVector { | ||
| width: 3px; | ||
| height: 70px; | ||
| flex-shrink: 0; | ||
| stroke-width: 3px; | ||
| stroke: #000; | ||
| } | ||
| .signupCrystalBall { | ||
| width: 40px; | ||
| height: 40px; | ||
| flex-shrink: 0; | ||
| } |
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,21 @@ | ||
| import loginListThreeFilled from "../../images/logos/loginListThreeFilled.svg" | ||
| import loginVector from "../../images/logos/loginVector.svg" | ||
| import loginCrystalBall from "../../images/logos/loginCrystalBall.svg" | ||
|
|
||
| import './SignUpLogo.css' | ||
| export default function SignUpLogo() { | ||
|
|
||
| return ( | ||
| <> | ||
| <div className='signupLogoContainer'> | ||
| <div className="signupLogo" > | ||
| <h1 className="signupW">W</h1> | ||
| <img src={loginListThreeFilled} alt="" className="signupListThreeFilled" /> | ||
| <h1 className="signupL">L</h1> | ||
| <img src={loginVector} alt="" className="signupVector" /> | ||
| <img src={loginCrystalBall} alt="" className="signupCrystalBall" /> | ||
| </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 |
|---|---|---|
| @@ -1,122 +1,74 @@ | ||
| import React, { useState, useContext, useEffect } from "react" | ||
| import "./signup.css" | ||
| import loginListThreeFilled from "../../images/logos/loginListThreeFilled.svg" | ||
| import loginVector from "../../images/logos/loginVector.svg" | ||
| import loginCrystalBall from "../../images/logos/loginCrystalBall.svg" | ||
| import loginGroup103 from "../../images/logos/loginGroup103.svg" | ||
| import { createUserWithEmailAndPassword } from "firebase/auth" | ||
| import { useState, useContext, FormEvent } from "react" | ||
| import { auth } from "../../firebase/firebase" | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { AuthLayout } from '../../components/authlayout/AuthLayout'; | ||
| import { signUpUser, getUsersFromSearch } from "../../api-client/apiModules/users" | ||
| import { UserContext } from "../../../app/app" | ||
|
|
||
| import SignUpLogo from "../../components/logo/SignUpLogo"; | ||
| import { createUserWithEmailAndPassword } from 'firebase/auth'; | ||
| import "./signup.css" | ||
|
|
||
|
|
||
| export const SignUp = () => { | ||
|
|
||
| const context = useContext(UserContext) | ||
|
|
||
| const [isDisabled, setIsDisabled] = React.useState(true) | ||
| const [authError, setAuthError] = React.useState(false) | ||
| const [emailError, setEmailError] = React.useState(true) | ||
| const navigate = useNavigate() | ||
| const [firstName, setFirstName] = React.useState('') | ||
| const [lastName, setLastName] = React.useState('') | ||
| const [username, setUsername] = React.useState('') | ||
| const [email, setEmail] = React.useState('') | ||
| const [password, setPassword] = React.useState('') | ||
| const [inputError, setInputError] = React.useState(false) | ||
|
|
||
| const [email, setEmail] = useState(''); | ||
| const [password, setPassword] = useState(''); | ||
| const [confirmPassword, setConfirmPassword] = useState(''); | ||
| const [error, setError] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| const emailRegex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/); | ||
| if (!emailRegex.test(email)) { | ||
| setIsDisabled(true) | ||
| } else if(password.length < 8) { | ||
| setIsDisabled(true) | ||
| } else { | ||
| setIsDisabled(false) | ||
| } | ||
| }) | ||
| const navigate = useNavigate(); | ||
|
|
||
| const signUp = async () => { | ||
| const response = await signUpUser({email, password, firstName, lastName, username}) | ||
| console.log(response) | ||
| if(response.success !== false) { | ||
| context.setUser(response) | ||
| navigate("/dashboard") | ||
| // console.log(context.user) | ||
| } else { | ||
| setAuthError(true) | ||
| alert(response.message) | ||
| const signUp = async (e: FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault() | ||
| try { | ||
| await createUserWithEmailAndPassword(auth, email, password); | ||
| navigate('/dashboard') | ||
| } catch (error: any) { | ||
| setError(error.message); | ||
| } | ||
| } | ||
| function whiteSpace() { | ||
| return <span style={{paddingLeft: "5px"}}>{""}</span> | ||
| }; | ||
|
|
||
| const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| setPassword(e.target.value) | ||
| if (confirmPassword !== e.target.value) { | ||
| setError("Passwords do not match") | ||
| return | ||
| } else setError("") | ||
| } | ||
| const handleConfirmPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| setConfirmPassword(e.target.value) | ||
| if (password !== e.target.value) { | ||
| setError("Passwords do not match") | ||
| return | ||
| } else setError("") | ||
| } | ||
|
|
||
| return ( | ||
| <AuthLayout> | ||
| <div className="signupLayout"> | ||
| <div className='signupGroup103Container' style={{gridRowStart: "1", gridRowEnd: "2"}}> | ||
| <img src={loginGroup103} alt="" className="signupGroup103" /> | ||
| <div className="signupLayout"> | ||
| <div></div> | ||
| <SignUpLogo /> | ||
| <div></div> | ||
| <form className="signupForm" onSubmit={(e) => signUp(e)}> | ||
| <div className="formGroup"> | ||
| <label htmlFor="email">Email</label> | ||
| <input id="email" className="inputField" type="text" onChange={(e) => setEmail(e.target.value)} /> | ||
| </div> | ||
| <div className="formGroup"> | ||
| <label htmlFor="password">Password</label> | ||
| <input id="password" className="inputField" required type="password" onChange={handlePasswordChange} /> | ||
| </div> | ||
| <div className='signupLogoContainer' style={{gridRowStart: "2", gridRowEnd: "3"}}> | ||
| <div className="signupLogo" > | ||
| <h1 className="signupW">W</h1> | ||
| <img src={loginListThreeFilled} alt="" className="signupListThreeFilled"/> | ||
| <h1 className="signupL">L</h1> | ||
| <img src={loginVector} alt="" className="signupVector"/> | ||
| <img src={loginCrystalBall} alt="" className="signupCrystalBall"/> | ||
| </div> | ||
| <div className="formGroup"> | ||
| <label htmlFor="confirmPassword">Confirm Password</label> | ||
| <input id="confirmPassword" className="inputField" required type="password" onChange={handleConfirmPasswordChange} /> | ||
| </div> | ||
| <div className="signupIndicatesRequiredContainer" style={{gridRowStart: "3", gridRowEnd: "4"}}> | ||
| <p className="signupIndicatesRequired">{authError ? "* Indicates Required" : <> </>}</p> | ||
| <div className="formGoup" style={{ position: 'relative', height: '15px' }}> | ||
| {error ? <div className="error">{error}</div> : <div className="error"></div>} | ||
| </div> | ||
| <div className="signupBodyContainer"> | ||
| <div className="signupFirstNameContainer" style={{gridRowStart: "1", gridRowEnd: "2"}}> | ||
| <h2 className="signupFirstName" ><span className="signupAsterisk">{authError ? "*" : whiteSpace()}</span>First Name</h2> | ||
| <div className="signupFirstNameInputContainer"> | ||
| <input className="signupFirstNameInput" type="text" onChange={(e) => setFirstName(e.target.value)}/> | ||
| </div> | ||
| </div> | ||
| <div className="signupLastNameContainer" style={{gridRowStart: "2", gridRowEnd: "3"}}> | ||
| <h2 className="signupLastName"><span className="signupAsterisk">{authError ? "*" : whiteSpace()}</span>Last Name</h2> | ||
| <div className="signupLastNameInputContainer"> | ||
| <input className="signupLastNameInput" type="text" onChange={(e) => setLastName(e.target.value)}/> | ||
| </div> | ||
| </div> | ||
| <div className="signupUsernameContainer" style={{gridRowStart: "3", gridRowEnd: "4"}}> | ||
| <h2 className="signupUsername"><span className="signupAsterisk">{authError ? "*" : whiteSpace()}</span>Username</h2> | ||
| <div className="signupUsernameInputContainer"> | ||
| <input className="signupUsernameInput" type="text" onChange={(e) => setUsername(e.target.value)}/> | ||
| </div> | ||
| </div> | ||
| <div className="signupEmailContainer" style={{gridRowStart: "4", gridRowEnd: "5"}}> | ||
| <h2 className="signupEmail"><span className="signupAsterisk">{authError ? "*" : whiteSpace()}</span>Email</h2> | ||
| <div className="signupEmailInputContainer"> | ||
| <input className="signupEmailInput" type="text" onChange={(e) => setEmail(e.target.value)}/> | ||
| </div> | ||
| </div> | ||
| <div className="signupEmailErrorContainer" style={{gridRowStart: "5", gridRowEnd: "6"}}> | ||
| <p className="signupEmailError">{authError ? "Please enter a valid email address" : ""}</p> | ||
| </div> | ||
| <div className="signupPasswordContainer" style={{gridRowStart: "6", gridRowEnd: "7"}}> | ||
| <h2 className="signupPassword"><span className="signupAsterisk">{authError ? "*" : whiteSpace()}</span>Password</h2> | ||
| <div className="signupPasswordInputContainer"> | ||
| <input className="signupPasswordInput" required type="password" onChange={(e) => setPassword(e.target.value)}/> | ||
| </div> | ||
| </div> | ||
| <div className="signupPasswordErrorContainer" style={{gridRowStart: "7", gridRowEnd: "8"}}> | ||
| <p className="signupPasswordError">{authError ? "Password must be at least 8 characters" : ""}</p> | ||
| </div> | ||
| <div className="signupButtonContainer" style={{gridRowStart: "8", gridRowEnd: "9"}}> | ||
| <button className="signupButton" onClick={signUp} disabled={isDisabled} style={{backgroundColor: isDisabled ? "#6F6F6F" : "#000"}}> | ||
| <span className="signupButtonText">Submit</span> | ||
| </button> | ||
| </div> | ||
| <div className="submitButton"> | ||
| <button type="submit">Sign Up</button> | ||
| </div> | ||
| </div> | ||
| </AuthLayout> | ||
| </form> | ||
| </div > | ||
| ) | ||
| } |
Oops, something went wrong.