adding register and login pages
This commit is contained in:
@@ -1,20 +1,36 @@
|
||||
import React from 'react';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import Home from "./pages/home";
|
||||
import Login from "./pages/login";
|
||||
import Game from "./pages/game";
|
||||
import {BrowserRouter, Route, Routes} from "react-router-dom";
|
||||
import Register from "./pages/register";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />}/>
|
||||
<Route path="/login" element={<Login />}/>
|
||||
<Route path="/game" element={<Game />}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
function App() {
|
||||
const savedToken = localStorage.getItem('token');
|
||||
const [token, setToken] = useState(savedToken ? savedToken : null)
|
||||
useEffect(() => {
|
||||
if(savedToken !== token){
|
||||
localStorage.setItem('token', token);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />}/>
|
||||
<Route path="/login" element={<Login setToken={setToken} />}/>
|
||||
<Route path="/register" element={<Register setToken={setToken} />}/>
|
||||
<Route path="/game" element={<Game />}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
root.render(<App />)
|
||||
69
webapp/src/modules/fetcher.js
Normal file
69
webapp/src/modules/fetcher.js
Normal file
@@ -0,0 +1,69 @@
|
||||
|
||||
async function get(url, token) {
|
||||
const options = {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json', authorization: `${token}` },
|
||||
};
|
||||
|
||||
return await fetch(url, options)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
return json;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
async function post(url, body, token) {
|
||||
const options = {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: { 'Content-Type': 'application/json', authorization: `${token}` },
|
||||
body: JSON.stringify(body),
|
||||
};
|
||||
|
||||
return await fetch(url, options)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
return json;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
async function patch(url, body, token) {
|
||||
const options = {
|
||||
method: 'PATCH',
|
||||
mode: 'cors',
|
||||
headers: { 'Content-Type': 'application/json', authorization: `${token}` },
|
||||
body: JSON.stringify(body),
|
||||
};
|
||||
|
||||
return await fetch(url, options)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
return json;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
async function put(url, body, token) {
|
||||
const options = {
|
||||
method: 'PUT',
|
||||
mode: 'cors',
|
||||
headers: { 'Content-Type': 'application/json', authorization: `${token}` },
|
||||
body: JSON.stringify(body),
|
||||
};
|
||||
|
||||
return await fetch(url, options)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
return json;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
export {
|
||||
get,
|
||||
post,
|
||||
patch,
|
||||
put,
|
||||
};
|
||||
@@ -1,60 +1,60 @@
|
||||
import {Link, redirect, useNavigate} from "react-router-dom";
|
||||
import {useState} from "react";
|
||||
import {get, post} from '../../modules/fetcher';
|
||||
function Login({setToken}) {
|
||||
const navigate = useNavigate();
|
||||
const loginUser = async (e) => {
|
||||
e.preventDefault()
|
||||
post('https://saucisson.justw.tf/api/users/login', {username, password}, '')
|
||||
.then(async res => {
|
||||
if (res.status === 200) {
|
||||
console.log(res.JSON.message)
|
||||
setToken(res.JSON.token)
|
||||
navigate('/')
|
||||
} else {
|
||||
setError(res.message)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function Login() {
|
||||
}
|
||||
const [error, setError] = useState(null)
|
||||
const [username, setUsername] = useState(null)
|
||||
const [password, setPassword] = useState(null)
|
||||
return (
|
||||
<section className="bg-gray-50 dark:bg-gray-900">
|
||||
<section className="bg-gradient-to-r from-mainBlue to-darkGreen">
|
||||
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<a href="#" className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
<img className="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
|
||||
alt="logo"/>
|
||||
Debate
|
||||
</a>
|
||||
<div
|
||||
className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
|
||||
className="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
|
||||
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||||
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
|
||||
Sign in to your account
|
||||
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
|
||||
Login to your account
|
||||
</h1>
|
||||
<form className="space-y-4 md:space-y-6" action="#">
|
||||
<form onSubmit={loginUser} className="space-y-4 md:space-y-6">
|
||||
{error && (
|
||||
<div>
|
||||
<p className="text-red-500 text-md">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label htmlFor="email"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
|
||||
email</label>
|
||||
<input type="email" name="email" id="email"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
placeholder="name@company.com" required=""/>
|
||||
className="block mb-2 text-sm font-medium text-gray-900">Your
|
||||
username</label>
|
||||
<input type="text" name="email" id="email"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
|
||||
placeholder="John Doe" required="" onChange={e => {setUsername(e.target.value)}}/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
|
||||
className="block mb-2 text-sm font-medium text-gray-900">Password</label>
|
||||
<input type="password" name="password" id="password" placeholder="••••••••"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
required=""/>
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
|
||||
required onChange={e => {setPassword(e.target.value)}}/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start">
|
||||
<div className="flex items-center h-5">
|
||||
<input id="remember" aria-describedby="remember" type="checkbox"
|
||||
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
|
||||
required=""/>
|
||||
</div>
|
||||
<div className="ml-3 text-sm">
|
||||
<label htmlFor="remember" className="text-gray-500 dark:text-gray-300">Remember
|
||||
me</label>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#"
|
||||
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500">Forgot
|
||||
password?</a>
|
||||
</div>
|
||||
<button type="submit"
|
||||
className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign
|
||||
in
|
||||
</button>
|
||||
<p className="text-sm font-light text-gray-500 dark:text-gray-400">
|
||||
Don’t have an account yet? <a href="#"
|
||||
className="font-medium text-blue-600 hover:underline dark:text-blue-500">Sign
|
||||
up</a>
|
||||
<button className="w-full text-white bg-darkGreen focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">Login</button>
|
||||
<p className="text-sm font-light text-gray-500">
|
||||
Don’t have an account yet? <Link to={'/register'}
|
||||
className="font-medium text-darkGreen hover:underline">Sign
|
||||
up</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,79 @@
|
||||
import {Link, redirect, useNavigate} from "react-router-dom";
|
||||
import {post} from "../../modules/fetcher";
|
||||
import {useState} from "react";
|
||||
|
||||
|
||||
function Register() {
|
||||
function Register({setToken}) {
|
||||
const navigate = useNavigate();
|
||||
const registerUser = async (e) => {
|
||||
e.preventDefault()
|
||||
if(password === confirmPassword) {
|
||||
post('https://saucisson.justw.tf/api/users/register', {username, password}, '')
|
||||
.then(async res => {
|
||||
if (res.status === 200) {
|
||||
setToken(res.JSON.token)
|
||||
navigate('/')
|
||||
} else {
|
||||
setError(res.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setError("Password doesn't match")
|
||||
}
|
||||
|
||||
}
|
||||
const [error, setError] = useState(null)
|
||||
const [username, setUsername] = useState(null)
|
||||
const [password, setPassword] = useState(null)
|
||||
const [confirmPassword, setconfirmPassword] = useState(null)
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<section className="bg-gradient-to-r from-mainBlue to-darkGreen">
|
||||
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
<div
|
||||
className="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0">
|
||||
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
|
||||
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl">
|
||||
Create an account
|
||||
</h1>
|
||||
<form className="space-y-4 md:space-y-6" onSubmit={registerUser}>
|
||||
{error && (
|
||||
<div>
|
||||
<p className="text-red-500 text-md">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label htmlFor="email"
|
||||
className="block mb-2 text-sm font-medium text-gray-900">Your
|
||||
username</label>
|
||||
<input type="text" name="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5" placeholder="John Doe" required="" onChange={e => {setUsername(e.target.value)}}/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900">Password</label>
|
||||
<input type="password" name="password" id="password" placeholder="••••••••"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
|
||||
required="" onChange={e => {setPassword(e.target.value)}}/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900">Password confirmation</label>
|
||||
<input type="password" name="confirm_password" id="confirm_password" placeholder="••••••••"
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5"
|
||||
required="" onChange={e => {setconfirmPassword(e.target.value)}}/>
|
||||
</div>
|
||||
<button type="submit"
|
||||
className="w-full text-white bg-darkGreen focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">Register
|
||||
</button>
|
||||
<p className="text-sm font-light text-gray-500">
|
||||
Don’t have an account yet? <Link to={'/login'}
|
||||
className="font-medium text-darkGreen hover:underline">Sign
|
||||
up</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user