Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

registration page

Browse Source
This commit is contained in:
Erik 2022-11-25 00:12:17 +02:00
parent 793c7c3f2f
commit e2cf9939f5
Signed by: Navy.gif
GPG Key ID: 811EC0CD80E7E5FB
4 changed files with 107 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/App.js
View File

@ -14,6 +14,7 @@ import { UnauthedRoute } from './structures/UnauthedRoute';
import Users from './pages/Users';
import Admin from './pages/Admin';
import TitledPage from './components/TitledPage';
import Register from './pages/Register';
function App() {
@ -29,7 +30,7 @@ function App() {
}, []);
const menuItems = [
{ to: '/home', label: 'Home' },
{ to: '/home', label: 'Home', items: [{ to: '/profile', label: 'Profile', relative: false }] },
{ to: '/users', label: 'Users' },
{ to: '/admin', label: 'Admin' }
];
@ -41,7 +42,7 @@ function App() {
<div className='background'>
<BrowserRouter>
<BrowserRouter>
{user ?
<div>
@ -54,34 +55,45 @@ function App() {
</div>
: null}
<div className='main-content'>
<ErrorBoundary>
<Routes>
<Route path='/home/*' element={<PrivateRoute>
<TitledPage title='Home'>
<Home />
</TitledPage>
</PrivateRoute >} />
<Route path='/users/*' element={<PrivateRoute>
<TitledPage title='Users' >
<Users />
</TitledPage>
</PrivateRoute >} />
<Route path='/admin/*' element={<PrivateRoute>
<Admin />
</PrivateRoute >} />
<Route path='/login/*' element={<UnauthedRoute>
<Login />
</UnauthedRoute>} />
<Route path='*' element={<Navigate to='/home' />} />
</Routes>
</ErrorBoundary>
</div>
<div className='main-content'>
<ErrorBoundary>
<Routes>
<Route path='/home/*' element={<PrivateRoute>
<TitledPage title='Home'>
<Home />
</TitledPage>
</PrivateRoute >} />
</BrowserRouter>
<Route path='/users/*' element={<PrivateRoute>
<TitledPage title='Users' >
<Users />
</TitledPage>
</PrivateRoute >} />
<Route path='/admin/*' element={<PrivateRoute>
<Admin />
</PrivateRoute >} />
<Route path='/login/*' element={<UnauthedRoute>
<Login />
</UnauthedRoute>} />
<Route path='/register/*' element={<UnauthedRoute>
<Register />
</UnauthedRoute>} />
<Route path='*' element={<Navigate to='/home' />} />
</Routes>
</ErrorBoundary>
</div>
</BrowserRouter>
</div>
</div>
</div>
);

4
src/css/index.css
View File

@ -18,6 +18,10 @@
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}
.clickable {
cursor: pointer;
}
a:hover:not(.button){
opacity: 1 !important;
color: #C4C4C4;

20
src/pages/Login.js
View File

@ -25,17 +25,17 @@ const CredentialFields = () => {
if (!username.length || !password.length) return;
const result = await post('/api/login', { username, password });
console.log(result);
if (![200, 302].includes(result.status)) {
setFail(true);
return;
}
if (!result.data.twoFactor) {
if (!result.data?.twoFactor) {
setUser(await fetchUser());
return navigate('/home');
}
return navigate('/login/verify');
return navigate('verify');
};
@ -43,13 +43,21 @@ const CredentialFields = () => {
<div className="is-center">
<img className="logoImg mb-4" src={logoImg}></img>
</div>
<div className="card mb-3 is-center dir-column">
{fail ? <p>Invalid credentials</p> : null}
<h2>Log in</h2>
<input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
<input autoComplete='off' placeholder='Password' required id='password' type='password' />
<button onClick={loginClick}>Enter</button>
<form>
<input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
<input autoComplete='off' placeholder='Password' required id='password' type='password' />
<input value='Enter' type='button' onClick={loginClick} />
</form>
<div>
Don&apos;t ave an account? <a onClick={() => navigate('/register')} className="clickable">Register</a> instead
</div>
</div>
<div className="card is-center dir-column">

49
src/pages/Register.js Normal file
View File

@ -0,0 +1,49 @@
import React, { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { post } from "../util/Util";
// TODO: Make this page look similar to the login page, probably generalise the components
const Register = () => {
const [error, setError] = useState();
const [params] = useSearchParams();
const navigate = useNavigate();
document.body.classList.add('bg-triangles');
const code = params.get('code');
const submit = async () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (!username.length || !password.length) return;
const response = await post('/api/register', { username, password, code });
if (response.status !== 200) return setError(response.message);
navigate('/login');
};
return <div className="row is-center is-full-screen is-marginless">
<div className='dingus col-6 col-6-md col-3-lg'>
<div className="card mb-3 is-center dir-column">
<h2>Register</h2>
{error && <p>{error}</p>}
<form action="/api/user">
<input autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
<input autoComplete='off' placeholder='Password' required id='password' type='password' />
<input onClick={submit} className="button" type='button' value='Register' />
</form>
<div>
Have an account? <a onClick={() => navigate('/login')} className="clickable">Log in</a> instead
</div>
</div>
</div>
</div>;
};
export default Register;