Skip to content

Commit

Permalink
setting up signup and login - WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
calebwharton committed Jul 6, 2024
1 parent dfdcd86 commit 8cac417
Show file tree
Hide file tree
Showing 15 changed files with 288 additions and 95 deletions.
9 changes: 3 additions & 6 deletions api/db/User.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import { Schema, model } from 'mongoose';

const userSchema = new Schema({
firstName: {
email: {
type: String,
required: true,
unique: true,
},
lastName: String,
email: {
password: {
type: String,
required: true,
unique: true,
maxLength: 40,
minLength: 1,
},
});

Expand Down
4 changes: 1 addition & 3 deletions api/routes/user.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,8 @@ userRoutes.post("/", (req: Request, res: Response) => {

// Logic to create a new user in the database
const newUser = new User({
firstName: req.body.firstName,
lastName: req.body.lastName,
email: req.body.email,
accessToken: req.body.accessToken,
password: req.body.password,
})

try {
Expand Down
4 changes: 3 additions & 1 deletion web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"@tanstack/react-query": "^5.18.1",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"axios": "^1.6.7",
"add": "^2.0.6",
"axios": "^1.7.2",
"ldrs": "^1.0.2",
"react": "^18.2.0",
"react-cookies": "^0.1.1",
Expand All @@ -23,6 +24,7 @@
"react-router-dom": "^6.22.0",
"tailwind-merge": "^2.2.1",
"universal-cookie": "^7.0.2",
"yarn": "^1.22.22",
"zod": "^3.22.4"
},
"devDependencies": {
Expand Down
5 changes: 5 additions & 0 deletions web/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { useState } from 'react';
import Home from '@pages/Home';
import Form from '@pages/Form';

const router = createBrowserRouter([
{
path: '/',
element: <Home />,
},
{
path: '/sign-in',
element: <Form />
}
]);

export default function App() {
Expand Down
1 change: 0 additions & 1 deletion web/src/assets/GoogleIcon.svg

This file was deleted.

Binary file added web/src/assets/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 3 additions & 29 deletions web/src/components/login.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import { useGoogleLogin } from "react-oauth-google";
import axios from "axios";
import { useNavigate } from "react-router-dom";

interface UserData {
firstName: string;
lastName: string;
email: string;
accessToken: string;
upi: string;
}

// New user to MongoDB
Expand All @@ -19,7 +16,6 @@ const postUserData = async (data: UserData) => {
firstName: data.firstName,
lastName: data.lastName,
email: data.email,
accessToken: data.accessToken,
}),
})
.then((response) => {
Expand All @@ -43,8 +39,6 @@ const updateUserData = async (data: UserData) => {
firstName: data.firstName,
lastName: data.lastName,
email: data.email,
accessToken: data.accessToken,
upi: data.email.split("@")[0],
}),
}
);
Expand All @@ -60,32 +54,20 @@ const updateUserData = async (data: UserData) => {
};

// Passes UPI to WDCC member checker API
const useGoogleSignIn = (
const signIn = (
currentPage: string,
setLoading: (loading: boolean) => void
) => {
const navigate = useNavigate();

const handleSignIn = useGoogleLogin({
const handleSignIn = signIn({
onSuccess: async (tokenResponse) => {
try {
setLoading(true);
const userInfo = await axios.get(
"https://www.googleapis.com/oauth2/v3/userinfo",
{
headers: {
Authorization: `Bearer ${tokenResponse.access_token}`,
},
}
);


if (userInfo.data.email.endsWith("aucklanduni.ac.nz")) {
const userUPI: string = userInfo.data.email.split("@")[0];
const getUserData = async () => {
await fetch(
`${import.meta.env.VITE_SERVER_URL}/api/user/` +
userUPI,
userInfo.data.email,
{
method: "GET",
}
Expand All @@ -103,17 +85,13 @@ const useGoogleSignIn = (
firstName: userInfo.data.firstName,
lastName: userInfo.data.lastName,
email: userInfo.data.email,
accessToken: tokenResponse.access_token,
upi: userUPI,
});
} else {
console.log("Posting User Data");
postUserData({
firstName: userInfo.data.firstName,
lastName: userInfo.data.lastName,
email: userInfo.data.email,
accessToken: tokenResponse.access_token,
upi: userUPI,
});
}
})
Expand All @@ -124,10 +102,6 @@ const useGoogleSignIn = (

// Check MongoDB if user is in DB, then updates/posts user data accordingly
getUserData();
} else {
// Redirect to error page if user is not in WDCC
navigate("/sign-in-error");
}
} catch (error) {
console.error("Failed to fetch user info:", error);
}
Expand Down
4 changes: 1 addition & 3 deletions web/src/components/sign-in-button.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import GoogleIcon from "../assets/GoogleIcon.svg"
import '../styles/sign-in-button.css';

interface GoogleSignin {
Expand All @@ -9,8 +8,7 @@ interface GoogleSignin {
const GoogleSigninBtn = ({ onClick }: GoogleSignin) => {
return(
<button className={"button"} onClick={onClick}>
<img src={GoogleIcon} alt="Google Icon" className={"icon"} />
sign in
<h3>Sign In</h3>
</button>
);
};
Expand Down
89 changes: 89 additions & 0 deletions web/src/components/sign-up.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const SignUpForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [validSubmit, setValidSubmit] = useState('');

const navigate = useNavigate();

const submitForm = async () => {
if (email && password) {
try {
await axios.post(
`${import.meta.env.VITE_SERVER_URL}/api/user`,
{
email,
password,
},

);
navigate('/');
} catch (error) {
console.error('Error submitting form:', error);
setValidSubmit('error');
}
} else {
setValidSubmit('error');
}
};

const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmail(e.target.value);
};

const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPassword(e.target.value);
};

return (
<div className="qr-code-form">
<h1 className="header">Sign Up</h1>
{validSubmit === 'error' && (
<p className="error-msg">Please fill in the required areas correctly</p>
)}

<div className="form-form">
<div className="input-section">
<label className="input-label" htmlFor="email">
Email
</label>
<input
className="input-fields"
id="email"
type="text"
placeholder="example@gmail.com"
value={email}
onChange={handleEmailChange}
/>
</div>

<div className="input-section">
<label className="input-label" htmlFor="password">
Password
</label>
<input
className="input-fields"
id="password"
type="password"
placeholder="*******"
value={password}
onChange={handlePasswordChange}
/>
</div>

<div className="submit-button-container">
<div className="submit-link">
<button className="submit-button" onClick={submitForm}>
Submit!
</button>
</div>
</div>
</div>
</div>
);
};

export default SignUpForm;
14 changes: 14 additions & 0 deletions web/src/pages/Form.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import QRCodeForm from "../components/sign-up";
import '../styles/form.css';

function Form() {
return (
<div className='form-outer background-form'>
<div className='form-inner'>
<QRCodeForm />
</div>
</div>
)
}

export default Form;
29 changes: 10 additions & 19 deletions web/src/pages/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,24 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import GoogleSigninBtn from "@components/sign-in-button";
import '../styles/Admin-Login.css';
import useGoogleSignIn from '@components/login';
import '../styles/login.css';
import { bouncy } from "ldrs";

function AdminLogin() {
const [isLoading, setLoading] = useState<boolean>(false);
const url = window.location.pathname;
const handleSignIn = useGoogleSignIn(url, setLoading);

const navigate = useNavigate();
const handleSignInClick = () => {
navigate('/sign-in');
};

bouncy.register();

return (
<div className="admin-login-outer background-admin-login">
<div className="admin-login-left-items">
<h2 className="welcome-title-admin-login">Welcome to the</h2>
<h1 className="passport-title-admin-login">Braincells</h1>
<h2 className="dashboard-title-admin-login">Hackathon</h2>
{isLoading ? (
<div className="py-2">
<l-bouncy
size="60"
speed="1.75"
color="#03045e"
></l-bouncy>
</div>
) : (
<GoogleSigninBtn onClick={handleSignIn} adminLogin={true} />
)}
<h1 className="passport-title-admin-login">Brainies</h1>
<h2 className="dashboard-title-admin-login">Project</h2>
<GoogleSigninBtn onClick={handleSignInClick} />
</div>
<div className="admin-login-right-items">
</div>
Expand Down
Loading

0 comments on commit 8cac417

Please sign in to comment.