diff --git a/apps/frontend/src/app/api-client/apiModules/users.ts b/apps/frontend/src/app/api-client/apiModules/users.ts index bc7e585..c760551 100644 --- a/apps/frontend/src/app/api-client/apiModules/users.ts +++ b/apps/frontend/src/app/api-client/apiModules/users.ts @@ -35,18 +35,18 @@ export const postUsersToRealtimeDatabase = async (data: any) => { export const uploadStorageDocument = async (path: string, file: any) => { const fileRef = ref(storage, `${path}/${file.name}`); - + uploadBytes(fileRef, file).then((snapshot) => { - console.log('Uploaded a blob or file!'); + console.log('Uploaded a blob or file!'); }); - + return true; - } - - export const downloadStorageDocument = async (path: string, fileName: string) => { +} + +export const downloadStorageDocument = async (path: string, fileName: string) => { //for this to work must use gsutil and set the cors const fileRef = ref(storage, path); - + await getDownloadURL(fileRef).then((url) => { const aTag = document.createElement('a'); aTag.href = url; @@ -58,9 +58,9 @@ export const uploadStorageDocument = async (path: string, file: any) => { }) .catch((error) => { // Handle any errors - console.log('Error: ', error) + console.log('Error: ', error) }); - } +} export const allFilesForUser = async (path: string) => { const listRef = ref(storage, path); @@ -77,8 +77,26 @@ export const allFilesForUser = async (path: string) => { return allItems } +export const loginEmailAndPassword = async (data: any) => { + const userData = await apiClientWithAuth.post(apiEndpoints.users + "/login", data) + 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(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/forgotPassword/ForgotPassword.tsx b/apps/frontend/src/app/views/forgotPassword/ForgotPassword.tsx index 6148502..2687900 100644 --- a/apps/frontend/src/app/views/forgotPassword/ForgotPassword.tsx +++ b/apps/frontend/src/app/views/forgotPassword/ForgotPassword.tsx @@ -1,9 +1,75 @@ -import React from "react" +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 { AuthLayout } from '../../components/authlayout/AuthLayout'; +import { Link, useNavigate } from 'react-router-dom'; +import googleGImage from "../../images/logos/googleGImage.svg" +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 "./forgotpassword.css" +import { auth } from "../../firebase/firebase" +import { signInWithEmailAndPassword } from "firebase/auth" export const ForgotPassword = () => { + + const [email, setEmail] = React.useState("") + const [isDisabled, setIsDisabled] = React.useState(true) + + useEffect(() => { + const emailRegex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/); + if (!emailRegex.test(email)) { + setIsDisabled(true) + } else { + setIsDisabled(false) + } + }) + + const onEmailChange = (e: React.ChangeEvent) => { + setEmail(e.target.value) + // setAuthError("") + } + return ( -
- Forgot Password -
+ +
+ +
+
+
+

W

+ +

L

+ + +
+
+
+

Enter a valid email address to receive a verification code

+
+
+

Email

+
+ +
+
+
+ +
+
+ +
+ ) } \ 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..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'; @@ -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/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 68f4c40..24b78ee 100644 --- a/apps/frontend/src/app/views/router/router.tsx +++ b/apps/frontend/src/app/views/router/router.tsx @@ -11,9 +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" -import { Assets } from "../assets/Assets" -import { AssetsInput } from "../assets/AssetsInput" export default function Router() { @@ -27,12 +24,9 @@ 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 366c638..584322f 100644 --- a/apps/frontend/src/app/views/signup/SignUp.tsx +++ b/apps/frontend/src/app/views/signup/SignUp.tsx @@ -9,12 +9,15 @@ 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("") + const [authError, setAuthError] = React.useState(false) const [emailError, setEmailError] = React.useState(true) const navigate = useNavigate() const [firstName, setFirstName] = React.useState('') @@ -23,111 +26,95 @@ export const SignUp = () => { const [email, setEmail] = React.useState('') 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 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) + 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) } } + function whiteSpace() { + return {""} + } return (
-
- +
+
-
-
-

W

- -

L

- - +
+
+

W

+ +

L

+ +
-
-

* Indicates Required

+
+

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

-
-

*First Name

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

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

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

*Last Name

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

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

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

*Username

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

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

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

*Email

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

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

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

Please enter a valid email address

-
-
-

*Password

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

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

+
+
+

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

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

{authError ? "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..1f08b77 100644 --- a/apps/frontend/src/app/views/signup/signup.css +++ b/apps/frontend/src/app/views/signup/signup.css @@ -292,13 +292,13 @@ } .signupLayout { display: grid; - grid-template-rows: 40px 97px 48px 84px 84px 84px 80px 16px 80px 16px 76px; + grid-template-rows: 40px 97px 60px; } .signupIndicatesRequiredContainer { display: flex; justify-content: center; align-items: center; - padding-top: 24px; + padding-top: 34px; } .signupIndicatesRequired { color: #F00; @@ -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: 6px; + 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: 26px; + 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: 102px 86px 98px 86px 20px 66px 20px 124px; } \ 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..96b256e 100644 --- a/apps/server/src/app/users/users.service.ts +++ b/apps/server/src/app/users/users.service.ts @@ -47,17 +47,17 @@ export class UsersService { } async signUpUser(body): Promise { - console.log(body, "======") + // 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] + // 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 }