38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import React, { useCallback, useRef } from 'react';
|
|
import { Button } from 'react-bootstrap';
|
|
import { useAuth } from './context/auth';
|
|
import './Login.css';
|
|
|
|
/**
|
|
* Formulář pro prvotní zadání přihlašovacího jména.
|
|
*/
|
|
export default function Login() {
|
|
const auth = useAuth();
|
|
const loginRef = useRef<HTMLInputElement>(null);
|
|
|
|
const doLogin = useCallback(() => {
|
|
const length = loginRef?.current?.value && loginRef?.current?.value.length && loginRef.current.value.replace(/\s/g, '').length
|
|
if (length) {
|
|
auth?.setLogin(loginRef.current.value);
|
|
}
|
|
}, []);
|
|
|
|
if (!auth || !auth.login) {
|
|
return <div className='login'>
|
|
<h1>Luncher</h1>
|
|
<h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
|
|
<div className='login-inner'>
|
|
<p style={{ fontSize: "12px", marginTop: "10px" }}>
|
|
Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
|
|
</p>
|
|
Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
|
|
if (event.key === 'Enter') {
|
|
doLogin()
|
|
}
|
|
}} />
|
|
<Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|