zomo/discord-retokenizer-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init + login

Browse Source
This commit is contained in:
zomo
2022-12-11 01:36:17 -06:00
commit f3b12c3756
16 changed files with 401 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Layout } from "./pages/Layout";
import { Login } from "./pages/Login";
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/" element={<Layout />}> {/* collapsible sidebar with links */}
{/* <Route index element={<Dashboard />} />
<Route path="bots" element={<Bots />} />
<Route path="bot/:id" element={<Bot />} />
<Route path="tokens" element={<Contact />} />
<Route path="token/:id" element={<Contact />} />
<Route path="*" element={<MissingPage />} /> */}
</Route>
</Routes>
</BrowserRouter>
</div>
)
}
export default App

48
src/authorization.ts Normal file
View File

@@ -0,0 +1,48 @@
export function getTokenFromStorage() {
return localStorage.getItem('token')
}
export enum LoggedIn {
No,
Yes,
Invalid,
}
export function isLoggedIn(): LoggedIn {
const token = getTokenFromStorage()
if (token) {
return LoggedIn.Yes
}
return LoggedIn.No
}
export function authorizeLogin(
username: string,
password: string,
setLoggedIn: (loggedIn: LoggedIn) => void
) {
// TODO why is ENV undefined?
console.log(import.meta.env.API)
fetch('http://localhost:8080' + '/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: username,
password: password,
}),
})
.then(response => {
return response.json()
})
.then(data => {
if (data.token) {
localStorage.setItem('token', data.token)
setLoggedIn(LoggedIn.Yes)
} else {
setLoggedIn(LoggedIn.Invalid)
}
})
}

9
src/import-meta-env.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
// Generated by '@import-meta-env/typescript'
interface ImportMetaEnv {
readonly API: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}

7
src/index.html Normal file
View File

@@ -0,0 +1,7 @@
<html>
<head> </head>
<body>
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>

95
src/index.scss Normal file
View File

@@ -0,0 +1,95 @@
body {
margin: 0;
}
#root {
--bg-color-1: #262626;
--bg-color-2: #363636;
--bg-color-3: #464646;
--text-color-1: #d6d6d6;
--text-color-2: #a6a6a6;
--color-error: #860000;
background-color: var(--bg-color-1);
color: var(--text-color-1);
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
input {
border: none;
outline: none;
background-color: var(--bg-color-2);
color: var(--text-color-2);
font-size: 16px;
&[type="text"],
&[type="password"] {
width: 200px;
}
padding: 7px 10px;
margin: 0 5px;
border-radius: 200px;
&:focus {
background-color: var(--bg-color-3);
color: var(--text-color-1);
}
border-bottom: 1px solid transparent;
&.error {
border-bottom: 1px solid var(--color-error);
}
}
button {
border: none;
outline: none;
background-color: var(--bg-color-2);
color: var(--text-color-2);
font-size: 16px;
&.svg svg {
fill: var(--text-color-2);
height: 16px;
}
padding: 7px 10px;
margin: 0 5px;
&.pad {
padding: 10px 15px;
margin: 10px;
}
border-radius: 200px;
&:hover,
&:focus {
background-color: var(--bg-color-3);
color: var(--text-color-1);
&.svg svg {
fill: var(--text-color-1);
}
}
}
#login {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.form {
margin-bottom: 5px;
}
}
}

10
src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.scss'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

14
src/pages/Layout.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Outlet, Navigate } from 'react-router-dom'
import { isLoggedIn, LoggedIn } from '../authorization'
export function Layout() {
return (
<div>
<h1>Layout</h1>
{
isLoggedIn() === LoggedIn.No && <Navigate to="/login" replace={true} />
}
<Outlet />
</div>
)
}

42
src/pages/Login.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { useMemo, useState } from "react"
import { Navigate } from "react-router-dom"
import { authorizeLogin, isLoggedIn, LoggedIn } from "../authorization"
export function Login() {
var [username, setUsername] = useState("")
var [password, setPassword] = useState("")
var [loggedIn, setLoggedIn] = useState(isLoggedIn())
var login = () => {
if (username.length === 0 || password.length === 0) {
setLoggedIn(LoggedIn.Invalid)
return
}
authorizeLogin(username, password, setLoggedIn)
}
useMemo(() => {
if (loggedIn === LoggedIn.Invalid) {
setLoggedIn(LoggedIn.No)
}
}, [username, password])
return (
<div id="login">
<div className="form">
<input type="text" className={loggedIn === LoggedIn.Invalid ? "error" : ""} onChange={e => setUsername(e.target.value)} />
<input type="password" className={loggedIn === LoggedIn.Invalid ? "error" : ""} onChange={e => setPassword(e.target.value)} />
</div>
<div>
<button className="pad svg" onClick={login}>
<svg viewBox="0 0 1000 1000">
<path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
</svg>
</button>
</div>
{
loggedIn === LoggedIn.Yes && <Navigate to="/" replace={true} />
}
</div>
)
}