mirror of
https://github.com/openziti/zrok.git
synced 2024-11-07 16:54:23 +01:00
login/logout scaffolding (#17)
This commit is contained in:
parent
5628567f10
commit
cf1abe7282
@ -1,16 +1,30 @@
|
||||
import Login from './Login';
|
||||
import Logout from './Logout';
|
||||
import Version from './Version';
|
||||
import * as gateway from "./api/gateway";
|
||||
import {useState} from "react";
|
||||
|
||||
gateway.init({
|
||||
url: '/api/v1'
|
||||
});
|
||||
|
||||
const App = () => {
|
||||
const [user, setUser] = useState();
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Login
|
||||
loginSuccess={setUser}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="zrok">
|
||||
<header className="zrok-header">
|
||||
<h1>zrok</h1>
|
||||
<Version/>
|
||||
<Logout user={user} logout={() => { setUser(null); }}/>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
|
27
ui/src/Login.js
Normal file
27
ui/src/Login.js
Normal file
@ -0,0 +1,27 @@
|
||||
import {useState} from "react";
|
||||
|
||||
const Login = (props) => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault()
|
||||
props.loginSuccess({
|
||||
email: email,
|
||||
})
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label htmlFor="email">email: </label>
|
||||
<input type="text" value={email} placeholder="enter an email" onChange={({ target }) => setEmail(target.value)}/>
|
||||
<div>
|
||||
<label htmlFor="password">password: </label>
|
||||
<input type="password" value={password} placeholder="enter a password" onChange={({ target}) => setPassword(target.value)}/>
|
||||
</div>
|
||||
<button type="submit">Log In</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default Login;
|
11
ui/src/Logout.js
Normal file
11
ui/src/Logout.js
Normal file
@ -0,0 +1,11 @@
|
||||
const Logout = (props) => {
|
||||
const onClick = () => {
|
||||
props.logout()
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={onClick}>Log Out {props.user.email}</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logout;
|
Loading…
Reference in New Issue
Block a user