login/logout scaffolding (#17)

This commit is contained in:
Michael Quigley 2022-08-02 12:52:32 -04:00
parent 5628567f10
commit cf1abe7282
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 52 additions and 0 deletions

View File

@ -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
View 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
View 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;