Skip to content

Commit

Permalink
Merge pull request #16 from tirzah-dev/signupPage
Browse files Browse the repository at this point in the history 
fixing error states on signup page
  • Loading branch information
@tirzah-dev
tirzah-dev authored Feb 23, 2024
2 parents d00ffb0 + c4befa6 commit c1619ad
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 67 deletions.
5 changes: 4 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,7 @@ testem.log
Thumbs.db

# api keys
.env
.env

# service account
wol-planner-7e216-cf2ab387f459.json
6 changes: 6 additions & 0 deletions apps/frontend/src/app/api-client/apiModules/users.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,3 +76,9 @@ export const allFilesForUser = async (path: string) => {

return allItems
}

export const signUpUser = async (data: any) => {
const userData = await apiClientWithAuth.post(apiEndpoints.users + "/signup", data)
console.log(data)
return userData.data
}
26 changes: 23 additions & 3 deletions apps/frontend/src/app/firebase/firebase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { initializeApp } from "@firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getStorage } from "@firebase/storage";
import { getAuth, GoogleAuthProvider } from "firebase/auth"
import { getFirestore, collection, getDocs } from "firebase/firestore";

export const settings = {
project_id: 'wol-planner-7e216',
Expand All @@ -15,12 +16,31 @@ const firebaseConfig = {
storageBucket: process.env.NX_STORAGE_BUCKET,
messagingSenderId: process.env.NX_MESSAGING_SENDER_ID,
appId: "1:1092456040603:web:83a5c56785f71e0ff81e3e",
measurementId: process.env.NX_MEASUREMENT_ID
measurementId: process.env.NX_MEASUREMENT_ID
};

console.log(firebaseConfig)
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const storage = getStorage(app);
export const auth = getAuth(app)
export const googleProvider = new GoogleAuthProvider()
export const googleProvider = new GoogleAuthProvider()

// init services
// const db = getFirestore()

// collection reference
// const colRef = collection(db, "user")

//get collection data
// getDocs(colRef)
// .then((snapshot) => {
// let user1 = []
// snapshot.docs.forEach((doc) => {
// user1.push({...doc.data(), id: doc.id})
// })
// console.log(user1)
// })
// .catch(err => {
// console.log(err.message)
// })
57 changes: 29 additions & 28 deletions apps/frontend/src/app/views/login/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import React, { ChangeEvent, useEffect } from 'react';
import { UserContext } from '../../app';
import { useGoogleLogin } from '@react-oauth/google';
// import axios from 'axios';
// import { createUserData } from '../../api-client/apiModules/users';
import axios from 'axios';
import { createUserData } from '../../api-client/apiModules/users';
import { AuthLayout } from '../../components/authlayout/AuthLayout';
import { Link, useNavigate } from 'react-router-dom';
import googleGImage from "../../images/logos/googleGImage.svg"
Expand All @@ -27,38 +27,39 @@ export const Login = () => {

const login = useGoogleLogin({
onSuccess: (codeResponse) => (
setSignIn(codeResponse),
navigate("/dashboard")
setSignIn(codeResponse)

// window.location.replace(localhost:4200/dashboard)
//`${window.location.origin}/whatever`
),
onError: (error) => console.log('Login Failed:', error)
});

// useEffect(
// () => {
// const signInUser = async () => {
// if (signIn) {
// axios
// .get(`https://www.googleapis.com/oauth2/v1/userinfo?access_token=${signIn.access_token}`, {
// headers: {
// Authorization: `Bearer ${signIn.access_token}`,
// Accept: 'application/json'
// }
// })
// .then(async (res) => {
// const userData = await createUserData({name: res.data.name, email: res.data.email, picture: res.data.picture});
// setUser(userData);
// console.log("useEffect signed in user", userData)
// localStorage.setItem('user', JSON.stringify(userData));
// })
// .catch((err) => console.log(err));
// }
// }
// signInUser();
// },
// [ signIn ]
// );
useEffect(
() => {
const signInUser = async () => {
if (signIn) {
axios
.get(`https://www.googleapis.com/oauth2/v1/userinfo?access_token=${signIn.access_token}`, {
headers: {
Authorization: `Bearer ${signIn.access_token}`,
Accept: 'application/json'
}
})
.then(async (res) => {
const userData = await createUserData({name: res.data.name, email: res.data.email, picture: res.data.picture});
setUser(userData);
console.log("useEffect signed in user", userData)
localStorage.setItem('user', JSON.stringify(userData))
navigate("/dashboard")
})
.catch((err) => console.log(err));
}
}
signInUser();
},
[ signIn ]
);
useEffect(() => {
const emailRegex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
if (!emailRegex.test(email)) {
Expand Down
72 changes: 43 additions & 29 deletions apps/frontend/src/app/views/signup/SignUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { createUserWithEmailAndPassword } from "firebase/auth"
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"


export const SignUp = () => {

Expand Down Expand Up @@ -35,26 +37,38 @@ export const SignUp = () => {
const emailRegex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
if (!emailRegex.test(email)) {
setEmailError(true)
setIsDisabled(true)
} else {
setEmailError(false)
setIsDisabled(false)
}
})
const createUser = async () => {
if(firstName.length < 1 || lastName.length < 1 || username.length < 1 || emailError === true || password.length < 7) {
// const createUser = async () => {
// if(firstName.length < 1 || lastName.length < 1 || username.length < 1 || emailError === true || password.length < 7) {
// setInputError(true)
// }
// else {
// try {
// await createUserWithEmailAndPassword(auth, email, password)
// navigate("/namepage")
// }
// catch(err: any) {
// console.error(err.message)
// setInputError(true)
// // setAuthError(err.message)
// }
// }
// }
const signUp = async () => {
try {
await signUpUser({email, password, firstName, lastName, username})
// navigate("/dashboard")
}
catch(err: any) {
console.log(err.message)
setInputError(true)
}
else {
try {
await createUserWithEmailAndPassword(auth, email, password)
navigate("/namepage")
}
catch(err: any) {
console.error(err.message)
setInputError(true)
// setAuthError(err.message)
}
}
}
}
}

return (
<AuthLayout>
Expand All @@ -75,46 +89,46 @@ export const SignUp = () => {
<p className="signupIndicatesRequired">* Indicates Required</p>
</div>
<div className="signupFirstNameContainer">
<h2 className="signupFirstName">First Name</h2>
<h2 className="signupFirstName"><span className="signupAsterisk">*</span>First Name</h2>
<div className="signupFirstNameInputContainer">
<input className="signupFirstNameInput" onChange={(e) => setFirstName(e.target.value)}/>
<input className="signupFirstNameInput" type="text" onChange={(e) => setFirstName(e.target.value)}/>
</div>
</div>
<div className="signupLastNameContainer">
<h2 className="signupLastName">Last Name</h2>
<h2 className="signupLastName"><span className="signupAsterisk">*</span>Last Name</h2>
<div className="signupLastNameInputContainer">
<input className="signupLastNameInput" onChange={(e) => setLastName(e.target.value)}/>
<input className="signupLastNameInput" type="text" onChange={(e) => setLastName(e.target.value)}/>
</div>
</div>
<div className="signupUsernameContainer">
<h2 className="signupUsername">Username</h2>
<h2 className="signupUsername"><span className="signupAsterisk">*</span>Username</h2>
<div className="signupUsernameInputContainer">
<input className="signupUsernameInput" onChange={(e) => setUsername(e.target.value)}/>
<input className="signupUsernameInput" type="text" onChange={(e) => setUsername(e.target.value)}/>
</div>
</div>
<div className="signupEmailContainer">
<h2 className="signupEmail">Email</h2>
<h2 className="signupEmail"><span className="signupAsterisk">*</span>Email</h2>
<div className="signupEmailInputContainer">
<input className="signupEmailInput" onChange={(e) => setEmail(e.target.value)}/>
<input className="signupEmailInput" type="text" onChange={(e) => setEmail(e.target.value)}/>
</div>
</div>
<div className="signupEmailErrorContainer">
<p className="signupEmailError">Please enter a valid email address</p>
</div>
<div className="signupPasswordContainer">
<h2 className="signupPassword">Password</h2>
<h2 className="signupPassword"><span className="signupAsterisk">*</span>Password</h2>
<div className="signupPasswordInputContainer">
<input className="signupPasswordInput" onChange={(e) => setPassword(e.target.value)}/>
<input className="signupPasswordInput" required type="password" onChange={(e) => setPassword(e.target.value)}/>
</div>
</div>
<div className="signupPasswordErrorContainer">
<p className="signupPasswordError">Password must be at least 8 characters</p>
</div>
<div className="signupButtonContainer">
<button className="signupButton" onClick={createUser} disabled={isDisabled} style={{backgroundColor: isDisabled ? "#6F6F6F" : "#000"}}>
<button className="signupButton" onClick={signUp} disabled={isDisabled} style={{backgroundColor: isDisabled ? "#6F6F6F" : "#000"}}>
<span className="signupButtonText">Submit</span>
</button>
</div>
<div className="signupPasswordErrorContainer">
<p className="signupPasswordError">Password must be at least 8 characters</p>
</div>
</div>
</AuthLayout>
)
Expand Down
19 changes: 16 additions & 3 deletions apps/frontend/src/app/views/signup/signup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
width: 320px;
justify-content: center;
align-items: center;
border: none;
}
.signupFirstNameInputContainer {
display: flex;
Expand Down Expand Up @@ -291,12 +292,13 @@
}
.signupLayout {
display: grid;
grid-template-rows: 40px 147px 98px 76px 100px 76px 96px 110px;
grid-template-rows: 40px 97px 48px 84px 84px 84px 80px 16px 80px 16px 76px;
}
.signupIndicatesRequiredContainer {
display: flex;
justify-content: center;
align-items: center;
padding-top: 24px;
}
.signupIndicatesRequired {
color: #F00;
Expand All @@ -308,7 +310,7 @@
line-height: normal;
}
.signupEmailErrorContainer {

padding-left: 6px;
}
.signupEmailError {
color: var(--Primary-Red, #F00);
Expand All @@ -320,7 +322,7 @@
line-height: normal;
}
.signupPasswordErrorContainer {

padding-left: 6px;
}
.signupPasswordError {
color: #F00;
Expand All @@ -330,4 +332,15 @@
font-style: italic;
font-weight: 400;
line-height: normal;
}
.signupAsterisk {
font-family: Arial;
font-size: 14px;
font-style: italic;
font-weight: 400;
line-height: 16px;
letter-spacing: 0px;
text-align: left;
color: #ff0000;
padding-right: 4px;
}
4 changes: 4 additions & 0 deletions apps/server/src/app/users/users.controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ export class UsersController {
signInUser(@Body() body: any) {
return this.usersService.signInUser(body);
}
@Post("/signup")
signUpUser(@Body() body: any) {
return this.usersService.signUpUser(body);
}

@Put()
updateUser(@Body() body: any) {
Expand Down
41 changes: 40 additions & 1 deletion apps/server/src/app/users/users.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export class UsersService {
}

async signInUser(body): Promise<any> {
console.log(body, "*******")
try{
const user = await getDataByField({
collection: 'users',
Expand All @@ -28,7 +29,45 @@ export class UsersService {
body['userType'] = 'Reader'
const nameArr = body['name'].split(' ')
body['firstName'] = nameArr[0]
body['lastName'] = nameArr[1]
body['lastName'] = nameArr[1] || ""
body['roles'] = []
body['active'] = true

const userIdObj = await createData({
collection: 'users',
params: body
})

body['id'] = userIdObj.id
return body
} catch (error) {
console.log(error)
return error
}
}

async signUpUser(body): Promise<any> {
console.log(body, "======")
try{
const user = await getDataByField({
collection: 'users',
field: 'email',
matches: body['email']
})

if(user.length > 0) {
console.log("user already exists")
return user[0]
}

body['joinDate'] = new Date()
body['userType'] = 'Reader'
// const nameArr = body['name'].split(' ')
// body['email'] = nameArr[0]
// body['password'] = nameArr[1]
// body['firstName'] = nameArr[2]
// body['lastName'] = nameArr[3]
// body['username'] = nameArr[4]
body['roles'] = []
body['active'] = true

Expand Down
Loading

0 comments on commit c1619ad

Please sign in to comment.