From 4173ff8fa23a10d18fc0d8bff70295170d32ef5a Mon Sep 17 00:00:00 2001 From: Dan Patterson Date: Fri, 23 Feb 2024 16:04:30 -0700 Subject: [PATCH 1/4] fixing back/front of signup page --- .../src/app/api-client/apiModules/users.ts | 13 ++- .../app/components/authlayout/AuthLayout.tsx | 6 +- apps/frontend/src/app/firebase/firebase.ts | 2 +- apps/frontend/src/app/views/signup/SignUp.tsx | 105 +++++++++--------- apps/frontend/src/app/views/signup/signup.css | 32 ++++-- apps/server/src/app/users/users.service.ts | 8 +- 6 files changed, 96 insertions(+), 70 deletions(-) diff --git a/apps/frontend/src/app/api-client/apiModules/users.ts b/apps/frontend/src/app/api-client/apiModules/users.ts index bc7e585..ab9477a 100644 --- a/apps/frontend/src/app/api-client/apiModules/users.ts +++ b/apps/frontend/src/app/api-client/apiModules/users.ts @@ -79,6 +79,17 @@ export const allFilesForUser = async (path: string) => { export const signUpUser = async (data: any) => { const userData = await apiClientWithAuth.post(apiEndpoints.users + "/signup", data) - console.log(data) + // console.log(userData) return userData.data + // if it is a successful sign up +// // if property 'id' exists then it was a success +// if(userData.data.success === true){ +// console.log('user was created', userData) +// } +// // unsuccessful attempt, property 'id' wouldn't exist +// else { +// // this should be the error object you sent back +// console.log(userData) +// alert("email already in use") +// } } \ No newline at end of file diff --git a/apps/frontend/src/app/components/authlayout/AuthLayout.tsx b/apps/frontend/src/app/components/authlayout/AuthLayout.tsx index 68c5d24..a90970f 100644 --- a/apps/frontend/src/app/components/authlayout/AuthLayout.tsx +++ b/apps/frontend/src/app/components/authlayout/AuthLayout.tsx @@ -4,10 +4,10 @@ import backgroundImage from './background-auth.jpg' export function AuthLayout({ children }: any) { return ( - <> +
-
+
{children}
@@ -19,6 +19,6 @@ export function AuthLayout({ children }: any) { />
- +
) } \ No newline at end of file diff --git a/apps/frontend/src/app/firebase/firebase.ts b/apps/frontend/src/app/firebase/firebase.ts index dd4014b..71560f8 100644 --- a/apps/frontend/src/app/firebase/firebase.ts +++ b/apps/frontend/src/app/firebase/firebase.ts @@ -18,7 +18,7 @@ const firebaseConfig = { appId: "1:1092456040603:web:83a5c56785f71e0ff81e3e", measurementId: process.env.NX_MEASUREMENT_ID }; -console.log(firebaseConfig) +// console.log(firebaseConfig) // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); diff --git a/apps/frontend/src/app/views/signup/SignUp.tsx b/apps/frontend/src/app/views/signup/SignUp.tsx index 366c638..30c462e 100644 --- a/apps/frontend/src/app/views/signup/SignUp.tsx +++ b/apps/frontend/src/app/views/signup/SignUp.tsx @@ -60,74 +60,75 @@ export const SignUp = () => { // } // } const signUp = async () => { - try { - await signUpUser({email, password, firstName, lastName, username}) - // navigate("/dashboard") - } - catch(err: any) { - console.log(err.message) - setInputError(true) + const response = await signUpUser({email, password, firstName, lastName, username}) + if(response.success === true) { + // set user here + navigate("/dashboard") + } else { + alert(response.message) } } return (
-
- +
+
-
-
-

W

- -

L

- - +
+
+

W

+ +

L

+ +
-
+

* Indicates Required

-
-

*First Name

-
- setFirstName(e.target.value)}/> +
+
+

*First Name

+
+ setFirstName(e.target.value)}/> +
-
-
-

*Last Name

-
- setLastName(e.target.value)}/> +
+

*Last Name

+
+ setLastName(e.target.value)}/> +
-
-
-

*Username

-
- setUsername(e.target.value)}/> +
+

*Username

+
+ setUsername(e.target.value)}/> +
-
-
-

*Email

-
- setEmail(e.target.value)}/> +
+

*Email

+
+ setEmail(e.target.value)}/> +
-
-
-

Please enter a valid email address

-
-
-

*Password

-
- setPassword(e.target.value)}/> +
+

Please enter a valid email address

+
+
+

*Password

+
+ setPassword(e.target.value)}/> +
+
+
+

Password must be at least 8 characters

+
+
+
-
-
-

Password must be at least 8 characters

-
-
-
diff --git a/apps/frontend/src/app/views/signup/signup.css b/apps/frontend/src/app/views/signup/signup.css index 2f731e9..d11207d 100644 --- a/apps/frontend/src/app/views/signup/signup.css +++ b/apps/frontend/src/app/views/signup/signup.css @@ -292,7 +292,7 @@ } .signupLayout { display: grid; - grid-template-rows: 40px 97px 48px 84px 84px 84px 80px 16px 80px 16px 76px; + grid-template-rows: 40px 97px 48px; } .signupIndicatesRequiredContainer { display: flex; @@ -310,28 +310,38 @@ line-height: normal; } .signupEmailErrorContainer { - padding-left: 6px; + width: 295px; + height: 16px; + top: 616px; + left: 24px; } .signupEmailError { - color: var(--Primary-Red, #F00); - font-feature-settings: 'clig' off, 'liga' off; + color: #FF0000; font-family: Arial; font-size: 14px; font-style: italic; font-weight: 400; - line-height: normal; + line-height: 16px; + letter-spacing: 0px; + text-align: left; + padding-left: 10px; } .signupPasswordErrorContainer { - padding-left: 6px; + width: 296px; + height: 16px; + top: 714px; + left: 24px; } .signupPasswordError { - color: #F00; - font-feature-settings: 'clig' off, 'liga' off; + color: #FF0000; font-family: Arial; font-size: 14px; font-style: italic; font-weight: 400; - line-height: normal; + line-height: 16px; + letter-spacing: 0px; + text-align: left; + padding-left: 10px; } .signupAsterisk { font-family: Arial; @@ -343,4 +353,8 @@ text-align: left; color: #ff0000; padding-right: 4px; +} +.signupBodyContainer { + display: grid; + grid-template-rows: 84px 84px 84px 80px 16px 80px 16px 76px; } \ No newline at end of file diff --git a/apps/server/src/app/users/users.service.ts b/apps/server/src/app/users/users.service.ts index 6fd195f..0af1661 100644 --- a/apps/server/src/app/users/users.service.ts +++ b/apps/server/src/app/users/users.service.ts @@ -54,10 +54,10 @@ export class UsersService { field: 'email', matches: body['email'] }) - if(user.length > 0) { - console.log("user already exists") - return user[0] + // console.log("user already exists") + // return user[0] + return {success: false, message: "User already exists."} } body['joinDate'] = new Date() @@ -78,7 +78,7 @@ export class UsersService { body['id'] = userIdObj.id return body - } catch (error) { + } catch (error) { console.log(error) return error } From 73e506cb937ad6603cdb260db2025ca85c0ab80a Mon Sep 17 00:00:00 2001 From: Dan Patterson Date: Mon, 26 Feb 2024 11:20:40 -0700 Subject: [PATCH 2/4] fixing signup/deleting namepage --- .../src/app/views/namePage/NamePage.tsx | 36 ------------------ .../src/app/views/namePage/namepage.css | 0 apps/frontend/src/app/views/router/router.tsx | 2 - apps/frontend/src/app/views/signup/SignUp.tsx | 38 +++++++++---------- apps/frontend/src/app/views/signup/signup.css | 6 +-- apps/server/src/app/users/users.service.ts | 2 +- 6 files changed, 21 insertions(+), 63 deletions(-) delete mode 100644 apps/frontend/src/app/views/namePage/NamePage.tsx delete mode 100644 apps/frontend/src/app/views/namePage/namepage.css diff --git a/apps/frontend/src/app/views/namePage/NamePage.tsx b/apps/frontend/src/app/views/namePage/NamePage.tsx deleted file mode 100644 index 61829ee..0000000 --- a/apps/frontend/src/app/views/namePage/NamePage.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useState, useContext, useEffect } from "react" -import "./namepage.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 { getAuth, updateCurrentUser, updateProfile } from "firebase/auth" -import { auth } from "../../firebase/firebase" -import { useNavigate } from 'react-router-dom'; -import { AuthLayout } from '../../components/authlayout/AuthLayout'; -// import "../../firebase/auth" -import firebase from "firebase/compat/app" -import "firebase/compat/auth" - -export const NamePage = () => { - - const [firstName, setFirstName] = useState("") - const [lastName, setLastName] = useState("") - const [userName, setUserName] = useState("") - - // const auth = getAuth() - // const user = firebase.auth().currentUser - // user?.updateProfile({ - - // }).then(() => { - // console.log("profile updated") - // }).catch((err: string) => { - // console.log(err) - // }) - - return ( - -

Name Page

- - ) -} \ No newline at end of file diff --git a/apps/frontend/src/app/views/namePage/namepage.css b/apps/frontend/src/app/views/namePage/namepage.css deleted file mode 100644 index e69de29..0000000 diff --git a/apps/frontend/src/app/views/router/router.tsx b/apps/frontend/src/app/views/router/router.tsx index 7e4afbf..b890699 100644 --- a/apps/frontend/src/app/views/router/router.tsx +++ b/apps/frontend/src/app/views/router/router.tsx @@ -11,7 +11,6 @@ import AdminPage from '../admin/AdminPage'; import { ForgotPassword } from '../forgotPassword/ForgotPassword'; import {SignUp} from "../signup/SignUp" import { Dashboard } from '../dashboard/Dashboard'; -import { NamePage } from "../namePage/NamePage" export default function Router() { @@ -28,7 +27,6 @@ export default function Router() { } /> } /> } /> - }/> ); } \ No newline at end of file diff --git a/apps/frontend/src/app/views/signup/SignUp.tsx b/apps/frontend/src/app/views/signup/SignUp.tsx index 30c462e..4c1ba94 100644 --- a/apps/frontend/src/app/views/signup/SignUp.tsx +++ b/apps/frontend/src/app/views/signup/SignUp.tsx @@ -14,7 +14,7 @@ import { signUpUser, getUsersFromSearch } from "../../api-client/apiModules/user export const SignUp = () => { const [isDisabled, setIsDisabled] = React.useState(true) - const [authError, setAuthError] = React.useState("") + const [authError, setAuthError] = React.useState(false) const [emailError, setEmailError] = React.useState(true) const navigate = useNavigate() const [firstName, setFirstName] = React.useState('') @@ -24,25 +24,19 @@ export const SignUp = () => { const [password, setPassword] = React.useState('') const [inputError, setInputError] = React.useState(false) - // const emailRegex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/) - // if(!emailRegex.test(email)) { - // setEmailError(true) - // } else { - // setEmailError(false) - // } - - // testing for commit change - useEffect(() => { 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 if(password.length < 8) { setIsDisabled(true) } else { - setEmailError(false) setIsDisabled(false) } }) + // const resetInputs = () => { + + // } // const createUser = async () => { // if(firstName.length < 1 || lastName.length < 1 || username.length < 1 || emailError === true || password.length < 7) { // setInputError(true) @@ -61,10 +55,12 @@ export const SignUp = () => { // } const signUp = async () => { const response = await signUpUser({email, password, firstName, lastName, username}) - if(response.success === true) { + console.log(response) + if(response.success !== false) { // set user here navigate("/dashboard") } else { + setAuthError(true) alert(response.message) } } @@ -85,44 +81,44 @@ export const SignUp = () => {
-

* Indicates Required

+

{authError ? "* Indicates Required" : <> }

-

*First Name

+

{authError ? "*" : " "}First Name

setFirstName(e.target.value)}/>
-

*Last Name

+

{authError ? "*" : " "}Last Name

setLastName(e.target.value)}/>
-

*Username

+

{authError ? "*" : " "}Username

setUsername(e.target.value)}/>
-

*Email

+

{authError ? "*" : " "}Email

setEmail(e.target.value)}/>
-

Please enter a valid email address

+

{authError ? "Please enter a valid email address" : ""}

-

*Password

+

{authError ? "*" : " "}Password

setPassword(e.target.value)}/>
-

Password must be at least 8 characters

+

{authError ? "Password must be at least 8 characters" : ""}

+
+
+ +
+ ) } \ No newline at end of file diff --git a/apps/frontend/src/app/views/forgotPassword/forgotpassword.css b/apps/frontend/src/app/views/forgotPassword/forgotpassword.css new file mode 100644 index 0000000..9ef078d --- /dev/null +++ b/apps/frontend/src/app/views/forgotPassword/forgotpassword.css @@ -0,0 +1,68 @@ +.fpLayout { + display: grid; +} +.fpLogoContainer { + display: flex; + justify-content: center; + top: 20px; + position: relative; +} +.fpLogo { + width: 196px; + height: 100px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + column-gap: 7px; +} +.fpW { + color: #000; + font-family: Fontspring-DEMO-capitana-medium; + font-size: 40px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.fpListThreeFilled { + width: 40px; + height: 40px; + flex-shrink: 0; + fill: var(--Primary-Blue, #148CFB); +} +.fpL { + 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; +} +.fpVector { + width: 3px; + height: 70px; + flex-shrink: 0; + stroke-width: 3px; + stroke: #000; +} +.fpCrystalBall { + width: 40px; + height: 40px; + flex-shrink: 0; +} +.fpGroup103Container { + display: flex; + justify-content: center; + align-items: top; +} +.fpGroup103 { + width: 128px; + height: 39px; + flex-shrink: 0; +} \ No newline at end of file diff --git a/apps/frontend/src/app/views/login/Login.tsx b/apps/frontend/src/app/views/login/Login.tsx index 3905343..e08ef48 100644 --- a/apps/frontend/src/app/views/login/Login.tsx +++ b/apps/frontend/src/app/views/login/Login.tsx @@ -15,6 +15,7 @@ import loginGroup103 from "../../images/logos/loginGroup103.svg" import "./login.css" import { auth } from "../../firebase/firebase" import { signInWithEmailAndPassword } from "firebase/auth" +import { signUpUser, getUsersFromSearch, loginEmailAndPassword } from "../../api-client/apiModules/users" export const Login = () => { const [ signIn, setSignIn ] = React.useState([]); @@ -86,6 +87,23 @@ export const Login = () => { setAuthError(err.message) } } + const loginEP = async () => { + const response = await loginEmailAndPassword({email, password}) + console.log(response) + + } + // 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) + // } + // } return ( diff --git a/apps/frontend/src/app/views/router/router.tsx b/apps/frontend/src/app/views/router/router.tsx index b890699..8076be6 100644 --- a/apps/frontend/src/app/views/router/router.tsx +++ b/apps/frontend/src/app/views/router/router.tsx @@ -24,7 +24,7 @@ export default function Router() { } /> } /> } /> - } /> + } /> } /> } /> diff --git a/apps/frontend/src/app/views/signup/SignUp.tsx b/apps/frontend/src/app/views/signup/SignUp.tsx index 4c1ba94..584322f 100644 --- a/apps/frontend/src/app/views/signup/SignUp.tsx +++ b/apps/frontend/src/app/views/signup/SignUp.tsx @@ -9,10 +9,13 @@ 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" 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) @@ -23,6 +26,7 @@ export const SignUp = () => { const [email, setEmail] = React.useState('') const [password, setPassword] = React.useState('') const [inputError, setInputError] = React.useState(false) + useEffect(() => { const emailRegex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/); @@ -34,36 +38,22 @@ export const SignUp = () => { setIsDisabled(false) } }) - // const resetInputs = () => { - // } - // 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 () => { const response = await signUpUser({email, password, firstName, lastName, username}) console.log(response) if(response.success !== false) { - // set user here + context.setUser(response) navigate("/dashboard") + // console.log(context.user) } else { setAuthError(true) alert(response.message) } } + function whiteSpace() { + return {""} + } return ( @@ -85,25 +75,25 @@ export const SignUp = () => {
-

{authError ? "*" : " "}First Name

+

{authError ? "*" : whiteSpace()}First Name

setFirstName(e.target.value)}/>
-

{authError ? "*" : " "}Last Name

+

{authError ? "*" : whiteSpace()}Last Name

setLastName(e.target.value)}/>
-

{authError ? "*" : " "}Username

+

{authError ? "*" : whiteSpace()}Username

setUsername(e.target.value)}/>
-

{authError ? "*" : " "}Email

+

{authError ? "*" : whiteSpace()}Email

setEmail(e.target.value)}/>
@@ -112,7 +102,7 @@ export const SignUp = () => {

{authError ? "Please enter a valid email address" : ""}

-

{authError ? "*" : " "}Password

+

{authError ? "*" : whiteSpace()}Password

setPassword(e.target.value)}/>
diff --git a/apps/frontend/src/app/views/signup/signup.css b/apps/frontend/src/app/views/signup/signup.css index f035534..1f08b77 100644 --- a/apps/frontend/src/app/views/signup/signup.css +++ b/apps/frontend/src/app/views/signup/signup.css @@ -321,7 +321,7 @@ font-size: 14px; font-style: italic; font-weight: 400; - line-height: 16px; + line-height: 6px; letter-spacing: 0px; text-align: left; padding-left: 10px; @@ -338,7 +338,7 @@ font-size: 14px; font-style: italic; font-weight: 400; - line-height: 16px; + line-height: 26px; letter-spacing: 0px; text-align: left; padding-left: 10px; @@ -356,5 +356,5 @@ } .signupBodyContainer { display: grid; - grid-template-rows: 102px 86px 98px 86px 16px 66px 16px 124px; + grid-template-rows: 102px 86px 98px 86px 20px 66px 20px 124px; } \ No newline at end of file From 74ab0d05061da71d5ba01e9a6d509d730a83d194 Mon Sep 17 00:00:00 2001 From: Dan Patterson Date: Wed, 28 Feb 2024 11:05:05 -0700 Subject: [PATCH 4/4] fixing backend --- apps/frontend/src/app/api-client/apiModules/users.ts | 2 ++ apps/frontend/src/app/views/login/Login.tsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/frontend/src/app/api-client/apiModules/users.ts b/apps/frontend/src/app/api-client/apiModules/users.ts index 77a8c9f..c760551 100644 --- a/apps/frontend/src/app/api-client/apiModules/users.ts +++ b/apps/frontend/src/app/api-client/apiModules/users.ts @@ -82,6 +82,8 @@ export const loginEmailAndPassword = async (data: any) => { return userData.data } +// export const passwordReset = (email) => auth.sendPasswordResetEmail(email) + export const signUpUser = async (data: any) => { const userData = await apiClientWithAuth.post(apiEndpoints.users + "/signup", data) // console.log(userData) diff --git a/apps/frontend/src/app/views/login/Login.tsx b/apps/frontend/src/app/views/login/Login.tsx index e08ef48..66cc363 100644 --- a/apps/frontend/src/app/views/login/Login.tsx +++ b/apps/frontend/src/app/views/login/Login.tsx @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-explicit-any */ -import React, { ChangeEvent, useEffect } from 'react'; +import React, { ChangeEvent, useEffect, useContext } from 'react'; import { UserContext } from '../../app'; import { useGoogleLogin } from '@react-oauth/google'; import axios from 'axios'; @@ -90,7 +90,7 @@ export const Login = () => { const loginEP = async () => { const response = await loginEmailAndPassword({email, password}) console.log(response) - + } // const signUp = async () => { // const response = await signUpUser({email, password, firstName, lastName, username})