66 lines
2.7 KiB
JavaScript
66 lines
2.7 KiB
JavaScript
import { h } from 'preact';
|
|
import { route } from 'preact-router';
|
|
import { useContext, useState } from 'preact/hooks';
|
|
import AppState from '../../store/AppState';
|
|
import {Breadcrumbs, Warnbox} from '../../components';
|
|
import { CheckBox, Button, TextBox } from '../../components/controls';
|
|
import api from '../../api'
|
|
function Login() {
|
|
let [sessiondata, setsession] = useContext(AppState).session;
|
|
const [val, set] = useState({ username: '', password: '', error: null });
|
|
const navigation = ["Login"];
|
|
if (sessiondata.active)
|
|
route('/', true);
|
|
function onSubmit(e) {
|
|
e.preventDefault();
|
|
api.login(val.username, val.password).then(result => {
|
|
if(result == 'login_failed'){
|
|
set(prev=>({ ...prev, error: "login_failed",password: '' }));
|
|
}
|
|
else if(result=='network_error')
|
|
set(prev=>({ ...prev, error: "network_connection" }));
|
|
else {
|
|
console.log(typeof(result))
|
|
let newsession = {
|
|
type: 'start',
|
|
username: val.username,
|
|
token: result
|
|
}
|
|
setsession(newsession);
|
|
set({ username: '', password: '' });
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
return (
|
|
<div class="container">
|
|
<Breadcrumbs items={navigation} />
|
|
<div className={'contentbox'} >
|
|
<h2>Anmeldung</h2>
|
|
<p >Bitte melden Sie sich mit ihren Nutzerdaten an.</p>
|
|
|
|
{val.error ==='login_failed' && <Warnbox title='Anmeldefehler'>Ungültige Anmeldedaten.<br />Bitte überprüfen Sie den eingebenen Benutzernamen und das Passwort.</Warnbox>}
|
|
{val.error ==='network_connection' && <Warnbox title='Netwerkfehler'>Die Kommunikation mit dem Gerät ist zurzeit nicht möglich.<br />Bitte überprüfen Sie die Netzwerkverbindung.</Warnbox>}
|
|
<form id="login_form" onSubmit={onSubmit} >
|
|
<div className='row'>
|
|
<TextBox maxlength={25} formdata={val} formchange={set} id="username" label="Benutzername" />
|
|
</div>
|
|
<div className='row'>
|
|
<TextBox maxlength={25} formdata={val} formchange={set} id="password" label="Passwort" type='password' />
|
|
|
|
</div>
|
|
<div className='row'>
|
|
<CheckBox id="permanent" formdata={val} formchange={set} label="Angemeldet bleiben?" />
|
|
|
|
</div>
|
|
<Button onClick={onSubmit}>Anmelden</Button>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
}
|
|
|
|
export default Login; |