diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index 1eeca67..ce9dc71 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { BrowserRouter } from 'react-router-dom'; import Footer from './components/footer/footer'; -import Header from './components/header/header'; +// import Header from './components/header/header'; import Router from './views/router/router'; import './app.module.scss'; diff --git a/apps/frontend/src/app/firebase/firebase.ts b/apps/frontend/src/app/firebase/firebase.ts index 1ae4ccc..52e9dcd 100644 --- a/apps/frontend/src/app/firebase/firebase.ts +++ b/apps/frontend/src/app/firebase/firebase.ts @@ -1,4 +1,5 @@ import { initializeApp } from "@firebase/app"; +import { getAnalytics } from "firebase/analytics"; import { getStorage } from "@firebase/storage"; import { getAuth, GoogleAuthProvider } from "firebase/auth" @@ -7,14 +8,19 @@ export const settings = { }; const firebaseConfig = { - authDomain: `${settings.project_id}.firebaseapp.com`, - projectId: settings.project_id, - databaseURL: `https://${settings.project_id}-default-rtdb.firebaseio.com`, - storageBucket: `${settings.project_id}.appspot.com`, + apiKey: "AIzaSyBBiN0i2T47tZkQmVwRcp7TAdtKESP5aQ8", + authDomain: "wol-planner-7e216.firebaseapp.com", + databaseURL: "https://wol-planner-7e216-default-rtdb.firebaseio.com", + projectId: "wol-planner-7e216", + storageBucket: "wol-planner-7e216.appspot.com", + messagingSenderId: "1092456040603", + appId: "1:1092456040603:web:83a5c56785f71e0ff81e3e", + measurementId: "G-J1J4WPZG89" }; // 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() \ No newline at end of file +export const auth = getAuth(app) +export const googleProvider = new GoogleAuthProvider() \ No newline at end of file diff --git a/apps/frontend/src/app/views/dashboard/Dashboard.tsx b/apps/frontend/src/app/views/dashboard/Dashboard.tsx new file mode 100644 index 0000000..228e1da --- /dev/null +++ b/apps/frontend/src/app/views/dashboard/Dashboard.tsx @@ -0,0 +1,11 @@ +import React from "react" + +export const Dashboard = () => { + + + return ( +
+

DASHBOARD PAGE

+
+ ) +} \ 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 ce15db6..728fa7d 100644 --- a/apps/frontend/src/app/views/login/Login.tsx +++ b/apps/frontend/src/app/views/login/Login.tsx @@ -3,18 +3,18 @@ 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 { NavLink, Link } from 'react-router-dom'; +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 "./login.css" -// import { auth, googleProvider} from "../../firebase/firebase" -// import { createUserWithEmailAndPassword, signInWithPopup, signOut } from "firebase/auth" +import { auth } from "../../firebase/firebase" +import { signInWithEmailAndPassword } from "firebase/auth" export const Login = () => { const [ signIn, setSignIn ] = React.useState([]); @@ -23,107 +23,68 @@ export const Login = () => { const [password, setPassword] = React.useState('') const [isDisabled, setIsDisabled] = React.useState(true) const [authError, setAuthError] = React.useState("") + const navigate = useNavigate() const login = useGoogleLogin({ onSuccess: (codeResponse) => ( - console.log(codeResponse, "code response"), - setSignIn(codeResponse) + setSignIn(codeResponse), + navigate("/dashboard") + // window.location.replace(localhost:4200/dashboard) + //`${window.location.origin}/whatever` ), onError: (error) => console.log('Login Failed:', error) }); - // why is submit in useEffect - // two buttons inside one form - maybe don't use form tags - form used for plain js whe ur not setting state - // do i use the same function for both submit buttons - // navlink to redirect to another page?? how to implement - // - // Sign out - // - // how to save/store inputs for regular login? - it's fine - // how to use error message to let user know - error state - see example in slack - // where is backend crud request located - using nest on backend - - 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)); + // }) + // .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)) { - // console.log('Invalid email address'); setIsDisabled(true) } else { setIsDisabled(false) - // console.log('Valid email address'); } }) const onEmailChange = (e: React.ChangeEvent) => { setEmail(e.target.value) setAuthError("") - // console.log("email:", email) } const onPasswordChange = (e: React.ChangeEvent) => { setPassword(e.target.value) setAuthError("") - // console.log("password:", password) } - // const onSubmit = (e: React.MouseEvent) => { - // e.preventDefault() - // console.log(email, password) - // } - // function handleAuthError(err: string) { - // setAuthError(err) - // console.log(authError) - // } - const signInUser = async () => { - setAuthError("") - 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("user signed in") - localStorage.setItem('user', JSON.stringify(userData)); - }) - .catch((err) => { - console.log(err) - setAuthError(err.message) - }); - } - } + const signInEP = async () => { + try { + await signInWithEmailAndPassword(auth, email, password) + navigate("/dashboard") + } + catch(err: any) { + console.error(err.message) + setAuthError(err.message) + } + } return ( @@ -178,7 +139,7 @@ export const Login = () => { }
-
- diff --git a/apps/frontend/src/app/views/login/login.css b/apps/frontend/src/app/views/login/login.css index a55affa..ac05e1d 100644 --- a/apps/frontend/src/app/views/login/login.css +++ b/apps/frontend/src/app/views/login/login.css @@ -68,7 +68,7 @@ font-weight: 800; line-height: normal; } -.signupButtonText { +.loginSignupButtonText { color: #000; font-feature-settings: 'clig' off, 'liga' off; font-family: Sofia Pro; @@ -78,7 +78,7 @@ line-height: normal; text-decoration-line: underline; } -.signupButton { +.loginSignupButton { justify-content: center; align-items: top; } diff --git a/apps/frontend/src/app/views/router/router.tsx b/apps/frontend/src/app/views/router/router.tsx index 709edd1..b890699 100644 --- a/apps/frontend/src/app/views/router/router.tsx +++ b/apps/frontend/src/app/views/router/router.tsx @@ -10,6 +10,7 @@ import IndividualBlogPage from '../blogs/IndividualBlogPage'; import AdminPage from '../admin/AdminPage'; import { ForgotPassword } from '../forgotPassword/ForgotPassword'; import {SignUp} from "../signup/SignUp" +import { Dashboard } from '../dashboard/Dashboard'; export default function Router() { @@ -25,6 +26,7 @@ export default function Router() { } /> } /> } /> + } /> ); - } \ No newline at end of file +} \ 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 2d21b83..4bf4895 100644 --- a/apps/frontend/src/app/views/signup/SignUp.tsx +++ b/apps/frontend/src/app/views/signup/SignUp.tsx @@ -1,24 +1,63 @@ -import React from "react" -import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; +import React, { useState } 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" export const SignUp = () => { - // const auth = getAuth(); - // createUserWithEmailAndPassword(auth, email, password) - // .then((userCredential) => { - // // Signed up - // const user = userCredential.user; - // // ... - // }) - // .catch((error) => { - // const errorCode = error.code; - // const errorMessage = error.message; - // // .. - // }); + return ( -
- Sign Up +
+
+ +
+
+
+

W

+ +

L

+ + +
+
+
+

First Name

+
+ +
+
+
+

Last Name

+
+ +
+
+
+

Username

+
+ +
+
+
+

Email

+
+ +
+
+
+

Password

+
+ +
+
+
+ +
) } \ No newline at end of file diff --git a/apps/frontend/src/app/views/signup/signup.css b/apps/frontend/src/app/views/signup/signup.css new file mode 100644 index 0000000..7699d17 --- /dev/null +++ b/apps/frontend/src/app/views/signup/signup.css @@ -0,0 +1,296 @@ +.signupFirstNameContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.signupFirstName { + color: #000; + font-feature-settings: 'clig' off, 'liga' off; + font-family: Sofia Pro; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-bottom: 4px; + width: 345px; +} +.signupFirstNameInput { + font-feature-settings: 'clig' off, 'liga' off; + font-family: DM Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + /* line-height: 28px; 140% */ + height: 28px; + border: none; + width: 320px; + justify-content: center; + align-items: center; +} +.signupFirstNameInputContainer { + display: flex; + height: 40px; + padding: 6px 4px 4px 4px; + align-items: center; + border-radius: 8px; + border: 2px solid #6F6F6F; + background: #F6F6F6; + width: 345px; +} +.signupLastNameContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.signupLastName { + color: #000; + font-feature-settings: 'clig' off, 'liga' off; + font-family: Sofia Pro; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-bottom: 4px; + width: 345px; +} +.signupLastNameInput { + font-feature-settings: 'clig' off, 'liga' off; + font-family: DM Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + /* line-height: 28px; 140% */ + height: 28px; + border: none; + width: 320px; + justify-content: center; + align-items: center; +} +.signupLastNameInputContainer { + display: flex; + height: 40px; + padding: 6px 4px 4px 4px; + align-items: center; + border-radius: 8px; + border: 2px solid #6F6F6F; + background: #F6F6F6; + width: 345px; +} +.signupUsernameContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.signupUsername { + color: #000; + font-feature-settings: 'clig' off, 'liga' off; + font-family: Sofia Pro; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-bottom: 4px; + width: 345px; +} +.signupUsernameInput { + font-feature-settings: 'clig' off, 'liga' off; + font-family: DM Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + /* line-height: 28px; 140% */ + height: 28px; + border: none; + width: 320px; + justify-content: center; + align-items: center; +} +.signupUsernameInputContainer { + display: flex; + height: 40px; + padding: 6px 4px 4px 4px; + align-items: center; + border-radius: 8px; + border: 2px solid #6F6F6F; + background: #F6F6F6; + width: 345px; +} +.signupEmailContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.signupEmail { + color: #000; + font-feature-settings: 'clig' off, 'liga' off; + font-family: Sofia Pro; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-bottom: 4px; + width: 345px; +} +.signupEmailInput { + font-feature-settings: 'clig' off, 'liga' off; + font-family: DM Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + /* line-height: 28px; 140% */ + height: 28px; + border: none; + width: 320px; + justify-content: center; + align-items: center; +} +.signupEmailInputContainer { + display: flex; + height: 40px; + padding: 6px 4px 4px 4px; + align-items: center; + border-radius: 8px; + border: 2px solid #6F6F6F; + background: #F6F6F6; + width: 345px; +} +.signupPasswordContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.signupPassword { + color: #000; + font-feature-settings: 'clig' off, 'liga' off; + font-family: Sofia Pro; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-bottom: 4px; + width: 345px; +} +.signupPasswordInput { + font-feature-settings: 'clig' off, 'liga' off; + font-family: DM Sans; + font-size: 20px; + font-style: normal; + font-weight: 700; + /* line-height: 28px; 140% */ + height: 28px; + border: none; + width: 320px; + justify-content: center; + align-items: center; +} +.signupPasswordInputContainer { + display: flex; + height: 40px; + padding: 6px 4px 4px 4px; + align-items: center; + border-radius: 8px; + border: 2px solid #6F6F6F; + background: #F6F6F6; + width: 345px; +} +.signupButtonContainer { + display: flex; + justify-content: center; + align-items: center; +} +.signupButton { + display: flex; + width: 345px; + height: 56px; + padding: 16px 0px 17px 0px; + justify-content: center; + align-items: center; + border-radius: 100px; + background: #000; +} +.signupButtonText { + color: #FFF; + font-feature-settings: 'clig' off, 'liga' off; + + /* Mobile Button Text */ + font-family: Sofia Pro; + font-size: 20px; + font-style: normal; + font-weight: 800; + line-height: normal; +} +.signupGroup103Container { + display: flex; + justify-content: center; + align-items: top; +} +.signupGroup103 { + width: 128px; + height: 39px; + flex-shrink: 0; +} +.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; +} +.signupLayout { + display: grid; + grid-template-rows: 40px 137px 98px 66px 116px 66px 96px 106px; + padding: 12px 16px 12px 16px; +} \ No newline at end of file diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx index 3089d7a..82507af 100644 --- a/apps/frontend/src/main.tsx +++ b/apps/frontend/src/main.tsx @@ -1,6 +1,7 @@ import { StrictMode } from 'react'; import * as ReactDOM from 'react-dom/client'; import { GoogleOAuthProvider } from '@react-oauth/google'; +import { BrowserRouter } from 'react-router-dom'; import App from './app/app'; @@ -10,8 +11,8 @@ const root = ReactDOM.createRoot( ); root.render( - - - + + + );