This commit is contained in:
Miguel de la Cruz 2021-09-12 21:57:59 +02:00
parent 68ae33e78a
commit f76aa74179
45 changed files with 6239 additions and 22 deletions

View file

@ -5,3 +5,4 @@ outputDir="../server/web/static"
mv $outputDir/index.*.js $outputDir/index.js
mv $outputDir/index.*.js.map $outputDir/index.js.map
sed -i -E "s/index.\w+.js/index.js/" $outputDir/index.html
sed -i -E "s/sourceMappingURL=index.\w+.js.map/sourceMappingURL=index.js.map/" $outputDir/index.js

873
webapp/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -12,7 +12,9 @@
"parcel": "^2.0.0-rc.0"
},
"dependencies": {
"@material-ui/core": "^4.12.3",
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0"
}
}

17
webapp/src/client.js Normal file
View file

@ -0,0 +1,17 @@
export class Client {
login(username, password) {
console.log('Logging with', username)
return fetch("/api/login", {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
}).then(r => r.text()).then(token => {
console.log("GOT TOKEN")
localStorage.setItem('token', token)
})
}
}
const client = new Client()
export default client

View file

@ -3,6 +3,8 @@
<head>
<meta charset="utf8" />
<title>Craban</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
</head>
<body>

View file

@ -1,7 +1,48 @@
import ReactDOM from 'react-dom'
import {
BrowserRouter as Router,
Switch,
Redirect,
Route,
Link
} from 'react-router-dom'
import { CssBaseline } from '@material-ui/core';
import Login from './pages/login'
const Secure = ({children}) => {
const token = localStorage.getItem('token')
if (!token) {
return <Redirect to="/login" />
}
return children
}
const Home = () => {
return <h1>Home</h1>
}
const App = () => {
return <h1>Hello Craban!!</h1>
return (
<Router>
<CssBaseline />
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Secure>
<Home />
</Secure>
</Route>
</Switch>
</Router>
)
}
ReactDOM.render(<App />, document.getElementById('app'))

58
webapp/src/pages/login.js Normal file
View file

@ -0,0 +1,58 @@
import { useState } from 'react'
import { Redirect } from 'react-router-dom'
import {
Box,
TextField,
Button
} from '@material-ui/core';
import client from '../client'
const Login = () => {
if (localStorage.getItem('token')) {
return <Redirect to='/' />
}
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const handleSubmit = (e) => {
e.preventDefault()
client.login(username, password).then(() => {
setUsername('')
setPassword('')
})
}
const handleChange = (setFn) => {
return (e) => {
setFn(e.target.value)
}
}
return (
<Box>
<h1>Login</h1>
<TextField
id="username"
label="Username"
variant="outlined"
value={username}
onChange={handleChange(setUsername)}
/>
<TextField
id="password"
label="Password"
type="password"
variant="outlined"
value={password}
onChange={handleChange(setPassword)}
/>
<Button variant="contained" color="primary" onClick={handleSubmit}>Login</Button>
</Box>
)
}
export default Login