Skip to content

Commit

Permalink
Merge pull request #3 from JonasSchweigler/feature/auth-pages
Browse files Browse the repository at this point in the history
Feature/auth pages
  • Loading branch information
JonasSchweigler authored Jan 4, 2024
2 parents cd040ed + e7ceb59 commit 0fac0ba
Show file tree
Hide file tree
Showing 12 changed files with 326 additions and 27 deletions.
108 changes: 108 additions & 0 deletions apps/web/src/components/cards/login-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import { useState } from "react";
import apiClient from "../../libs/api.client";
import { toast } from "react-toastify";
import { Link } from "react-router-dom";

export const LoginCard = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

let token = localStorage.getItem("token");

const handleSubmit = (event) => {
event.preventDefault();

apiClient
.post(
"/user/login",
{
email,
password,
},
{
headers: {
"Content-Type": "application/json",
},
}
)
.then((response) => {
if (response.data.message === "Login successful") {
token = response.data.token;
localStorage.setItem("token", token);
toast.success("Login Successful!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
draggable: true,
});
setTimeout(() => {
window.location.href = "/app";
}, 3000);
} else {
toast.error("Login Failed!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
draggable: true,
});
}
})
.catch(() => {
toast.error("Login Failed!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
draggable: true,
});
});
};
return (
<div>
<div className='login-card'>
<h2>Sign In</h2>
<form onSubmit={handleSubmit}>
<div className='form-control'>
<div className='form-el-container'>
<label htmlFor='email'>Email</label>
</div>
<div className='form-el-container'>
<input
className='forminput'
type='text'
id='email'
value={email}
onChange={(event) => setEmail(event.target.value)}
placeholder='Enter your email'
/>
</div>
</div>
<div className='form-control'>
<div className='form-el-container'>
<label htmlFor='password'>Password</label>
</div>
<div className='form-el-container'>
<input
className='forminput'
type='password'
id='password'
value={password}
onChange={(event) => setPassword(event.target.value)}
placeholder='Enter your password'
/>
</div>
</div>
<button className='btn' type='submit'>
Sign In
</button>
</form>
</div>
<p className='read-the-docs'>
Don&apos;t have a account, register from{" "}
<Link to='/register'>here</Link>.
</p>
</div>
);
};
140 changes: 140 additions & 0 deletions apps/web/src/components/cards/register-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import { useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import { Link } from "react-router-dom";

import "react-toastify/dist/ReactToastify.css";
import apiClient from "../../libs/api.client";

export const RegisterCard = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");

const handleSubmit = (event) => {
event.preventDefault();

apiClient
.post(
"/user/register",
{
email,
password,
firstName,
lastName,
},
{
headers: {
"Content-Type": "application/json",
},
}
)
.then((response) => {
if (response.data.email === email) {
toast.success("Register Successful!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
draggable: true,
});
setTimeout(() => {
window.location.href = "/verify";
}, 3000);
} else {
toast.error("Register Failed!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
draggable: true,
});
}
})
.catch(() => {
toast.error("Register Failed!", {
position: "bottom-right",
autoClose: 3000,
hideProgressBar: true,
closeOnClick: true,
draggable: true,
});
});
};

return (
<div>
<div className='login-card'>
<h2>Sign In</h2>
<form onSubmit={handleSubmit}>
<div className='form-control'>
<div className='form-el-container'>
<label htmlFor='email'>Email</label>
</div>
<div className='form-el-container'>
<input
className='forminput'
type='text'
id='email'
value={email}
onChange={(event) => setEmail(event.target.value)}
placeholder='Enter your email'
/>
</div>
</div>
<div className='form-control'>
<div className='form-el-container'>
<label htmlFor='password'>Password</label>
</div>
<div className='form-el-container'>
<input
className='forminput'
type='password'
id='password'
value={password}
onChange={(event) => setPassword(event.target.value)}
placeholder='Enter your password'
/>
</div>
</div>
<div className='form-control'>
<div className='form-el-container'>
<label htmlFor='firstName'>First Name</label>
</div>
<div className='form-el-container'>
<input
className='forminput'
type='firstName'
id='firstName'
value={firstName}
onChange={(event) => setFirstName(event.target.value)}
placeholder='Enter your firstName'
/>
</div>
</div>
<div className='form-control'>
<div className='form-el-container'>
<label htmlFor='lastName'>Last Name</label>
</div>
<div className='form-el-container'>
<input
className='forminput'
type='lastName'
id='lastName'
value={lastName}
onChange={(event) => setLastName(event.target.value)}
placeholder='Enter your lastName'
/>
</div>
</div>
<button className='btn' type='submit'>
Sign Up
</button>
</form>
</div>
<p className='read-the-docs'>
Already have a account? Login from <Link to='/login'>here</Link>.
</p>
</div>
);
};
2 changes: 1 addition & 1 deletion apps/web/src/pages/about.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Navbar from "../components/navbar";
function Home() {
return (
<>
<Navbar pageTitle={"rcsCTF24"} />
<Navbar pageTitle={"About"} />
<div className='about-elements'>
<h2>Guides</h2>
<div className='action-card'>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/pages/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function Player() {
]);

useEffect(() => {
if (!token) return (window.location.href = "/login");
if (!token) return (window.location.href = "/");

apiClient
.get("/challenge/progress", {
Expand All @@ -25,9 +25,9 @@ function Player() {
},
})
.then((res) => {
if (!Array.isArray(res.data)) return (window.location.href = "/login");
if (!Array.isArray(res.data)) return (window.location.href = "/");
if (res.data.message === "Invalid token")
return (window.location.href = "/login");
return (window.location.href = "/");
setMachines(res.data);
});
}, [token]);
Expand Down
51 changes: 47 additions & 4 deletions apps/web/src/pages/home.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,56 @@
import "../styles/App.css";
import "../styles/home.styles.css";
import "react-toastify/dist/ReactToastify.css";
// import { Link } from "react-router-dom";
import apiClient from "../libs/api.client";
import Navbar from "../components/navbar";
import { useEffect, useState } from "react";
import { LoginCard } from "../components/cards/login-card";
import { RegisterCard } from "../components/cards/register-card";

function Home() {
const [user, setUser] = useState(null);
useEffect(() => {
const token = localStorage.getItem("token");

if (!token) return;

apiClient
.get("/user/whoami", {
headers: {
Authorization: "Bearer " + token,
},
})
.then((res) => {
if (res.data.error) return;

if (res.data.message === "Invalid token") return;
setUser(res.data);
});
}, []);

return (
<div>
<Navbar pageTitle='Welcome to eeCTF' />
<p>hello</p>
<Navbar
pageTitle={
user ? "Welcome back, " + user.last_name : "Welcome to eeCTF"
}
/>
<div>
{user === null ? (
<div className='auht-grid'>
<LoginCard />
<RegisterCard />
</div>
) : (
<div className='home-card'>
<div className='home-card-content'>
{/* <p>
You are currently in {user.team_name} team. Your team has{" "}
{user.team_score} points.
</p> */}
</div>
</div>
)}
</div>
</div>
);
}
Expand Down
5 changes: 2 additions & 3 deletions apps/web/src/pages/leaderboard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function Leaderboard() {
useEffect(() => {
const token = localStorage.getItem("token");

if (!token) return (window.location.href = "/login");
if (!token) return (window.location.href = "/");

apiClient
.get("/stats/leaderboard", {
Expand All @@ -18,8 +18,7 @@ function Leaderboard() {
},
})
.then((response) => {
if (!Array.isArray(response.data))
return (window.location.href = "/login");
if (!Array.isArray(response.data)) return (window.location.href = "/");
setLeaderboard(response.data);
})
.catch(() => {
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/pages/news.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Navbar from "../components/navbar";
function News() {
return (
<>
<Navbar pageTitle={"rcsCTF24"} />
<Navbar pageTitle={"News"} />
{/* <div className='about-elements'>
<h2>News</h2>
<div className='action-card'>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/pages/verify.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function Home() {
draggable: true,
});
setTimeout(() => {
window.location.href = "/login";
window.location.href = "/";
}, 3000);
} else {
toast.error("Email Verification Failed!", {
Expand Down
Loading

0 comments on commit 0fac0ba

Please sign in to comment.