Skip to content

Commit

Permalink
Merge pull request #3 from tirzah-dev/loginPage
Browse files Browse the repository at this point in the history
login and signup page
  • Loading branch information
tirzah-dev authored Dec 13, 2023
2 parents cc745aa + 676d991 commit a9a1357
Show file tree
Hide file tree
Showing 9 changed files with 431 additions and 115 deletions.
2 changes: 1 addition & 1 deletion apps/frontend/src/app/app.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
18 changes: 12 additions & 6 deletions apps/frontend/src/app/firebase/firebase.ts
Original file line number Diff line number Diff line change
@@ -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"

Expand All @@ -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()
export const auth = getAuth(app)
export const googleProvider = new GoogleAuthProvider()
11 changes: 11 additions & 0 deletions apps/frontend/src/app/views/dashboard/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from "react"

export const Dashboard = () => {


return (
<div>
<h1>DASHBOARD PAGE</h1>
</div>
)
}
133 changes: 47 additions & 86 deletions apps/frontend/src/app/views/login/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>([]);
Expand All @@ -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
// <NavLink
// onClick={onSignoutClick}
// exact
// to="/login"
// activeClassName="bg-gray-100"
// className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
// role="menuitem"
// >
// Sign out
// </NavLink>
// 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<any>) => {
setEmail(e.target.value)
setAuthError("")
// console.log("email:", email)
}
const onPasswordChange = (e: React.ChangeEvent<any>) => {
setPassword(e.target.value)
setAuthError("")
// console.log("password:", password)
}
// const onSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
// 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 (
<AuthLayout className="h-screen">
Expand Down Expand Up @@ -178,7 +139,7 @@ export const Login = () => {
}
</div>
<div className='loginButtonContainer' style={{gridRowStart: "6", gridRowEnd: "7"}}>
<button className="loginButton" type="submit" onClick={signInUser} disabled={isDisabled} style={{backgroundColor: isDisabled ? "#6F6F6F" : "#000"}}>
<button className="loginButton" type="submit" onClick={signInEP} disabled={isDisabled} style={{backgroundColor: isDisabled ? "#6F6F6F" : "#000"}}>
<span className="loginButtonText">
Login
</span>
Expand All @@ -200,8 +161,8 @@ export const Login = () => {
</button>
</div>
<div className="signupForgot" style={{gridRowStart: "8", gridRowEnd: "9"}}>
<button className="signupButton">
<span className="signupButtonText">
<button className="loginSignupButton">
<span className="loginSignupButtonText">
<Link to="/signup">Sign Up</Link>
</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/app/views/login/login.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -78,7 +78,7 @@
line-height: normal;
text-decoration-line: underline;
}
.signupButton {
.loginSignupButton {
justify-content: center;
align-items: top;
}
Expand Down
4 changes: 3 additions & 1 deletion apps/frontend/src/app/views/router/router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand All @@ -25,6 +26,7 @@ export default function Router() {
<Route path="*" element={<Navigate to="/" />} />
<Route path="/forgotPassword" element={<ForgotPassword />} />
<Route path="/signup" element={<SignUp />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
);
}
}
71 changes: 55 additions & 16 deletions apps/frontend/src/app/views/signup/SignUp.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div>
Sign Up
<div className="signupLayout">
<div className='signupGroup103Container'>
<img src={loginGroup103} alt="" className="signupGroup103" style={{gridRowStart: "1", gridRowEnd: "2"}}/>
</div>
<div className='signupLogoContainer'>
<div className="signupLogo" style={{gridRowStart: "2", gridRowEnd: "3"}}>
<h1 className="signupW">W</h1>
<img src={loginListThreeFilled} alt="" className="signupListThreeFilled"/>
<h1 className="signupL">L</h1>
<img src={loginVector} alt="" className="signupVector"/>
<img src={loginCrystalBall} alt="" className="signupCrystalBall"/>
</div>
</div>
<div className="signupFirstNameContainer">
<h2 className="signupFirstName">First Name</h2>
<div className="signupFirstNameInputContainer">
<input className="signupFirstNameInput"/>
</div>
</div>
<div className="signupLastNameContainer">
<h2 className="signupLastName">Last Name</h2>
<div className="signupLastNameInputContainer">
<input className="signupLastNameInput"/>
</div>
</div>
<div className="signupUsernameContainer">
<h2 className="signupUsername">Username</h2>
<div className="signupUsernameInputContainer">
<input className="signupUsernameInput"/>
</div>
</div>
<div className="signupEmailContainer">
<h2 className="signupEmail">Email</h2>
<div className="signupEmailInputContainer">
<input className="signupEmailInput"/>
</div>
</div>
<div className="signupPasswordContainer">
<h2 className="signupPassword">Password</h2>
<div className="signupPasswordInputContainer">
<input className="signupPasswordInput"/>
</div>
</div>
<div className="signupButtonContainer">
<button className="signupButton">
<span className="signupButtonText">Submit</span>
</button>
</div>
</div>
)
}
Loading

0 comments on commit a9a1357

Please sign in to comment.