Stuff
This commit is contained in:
parent
68ae33e78a
commit
f76aa74179
45 changed files with 6239 additions and 22 deletions
|
@ -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
873
webapp/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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
17
webapp/src/client.js
Normal 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
|
|
@ -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>
|
||||
|
|
|
@ -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
58
webapp/src/pages/login.js
Normal 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
|
Loading…
Add table
Add a link
Reference in a new issue