Signup page

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")
+//  }
 }

apps/frontend/src/app/components/authlayout/AuthLayout.tsx

@@ -4,10 +4,10 @@ import backgroundImage from './background-auth.jpg'
 
 export function AuthLayout({ children }: any) {
   return (
-    <>
+    <div>
       <div className="relative flex min-h-full justify-center md:px-12 lg:px-0">
         <div className="relative z-10 flex flex-1 flex-col bg-white px-4 py-3 shadow-xl sm:justify-center md:flex-none md:px-28">
-          <div className="mx-auto w-full max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
+          <div className="mx-auto max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
             {children}
           </div>
         </div>
@@ -19,6 +19,6 @@ export function AuthLayout({ children }: any) {
           />
         </div>
       </div>
-    </>
+    </div>
   )
 }

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);

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<any>) => {
+        setEmail(e.target.value)
+        // setAuthError("")
+    }
+
     return (
-        <div>
-            Forgot Password
-        </div>
+        <AuthLayout className="fpLayout">
+            <div className='fpGroup103Container'>
+                <img src={loginGroup103} alt="" className="fpGroup103" style={{gridRowStart: "1", gridRowEnd: "2"}}/>
+            </div>
+            <div className='fpLogoContainer'>
+                <div className="fpLogo" style={{gridRowStart: "2", gridRowEnd: "3"}}>
+                <h1 className="fpW">W</h1>
+                <img src={loginListThreeFilled} alt="" className="fpListThreeFilled"/>
+                <h1 className="fpL">L</h1>
+                <img src={loginVector} alt="" className="fpVector"/>
+                <img src={loginCrystalBall} alt="" className="fpCrystalBall"/>
+                </div>
+            </div>
+            <div>
+                <h2>Enter a valid email address to receive a verification code</h2>
+            </div>
+            <div>
+                <h2>Email</h2>
+                <div className="loginEmailInputContainer">
+                    <input required className="loginEmailInput" type="text" value={email} onChange={onEmailChange} />
+                </div>
+            </div>
+            <div className='loginButtonContainer' style={{gridRowStart: "6", gridRowEnd: "7"}}>
+                <button className="loginButton" type="submit"  disabled={isDisabled} style={{backgroundColor: isDisabled ? "#6F6F6F" : "#000"}}>
+                    <span className="loginButtonText">
+                        Submit
+                    </span>
+                </button>
+            </div>
+            <div>
+                <button className="loginSignupButton">
+                    <span className="loginSignupButtonText">
+                        <Link to="/signup">Sign Up</Link>
+                    </span>
+                </button>
+            </div>
+        </AuthLayout>
     )
 }

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;
+}

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<any>([]);
@@ -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 (
       <AuthLayout className="h-screen">

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() {
         <Route path='/account' element={<AccountPage/>} />
         <Route path='/admin' element={<AdminPage/>} />
         <Route path="*" element={<Navigate to="/" />} />
-        <Route path="/forgotPassword" element={<ForgotPassword />} />
+        <Route path="/forgotpassword" element={<ForgotPassword />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/namepage" element={<NamePage />}/>
-        <Route path="/assets" element={<Assets />} />
-        <Route path="/assets/input" element={<AssetsInput />} />
       </Routes>
     );
 }