Marbes/Luncher
5
2
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

Podpora příhlášení pomocí Enter

Browse Source
This commit is contained in:
Martin Berka 2023-06-02 20:27:52 +02:00
parent 16bb467bcd
commit 1a02587b83
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/Login.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import React, { useCallback, useRef } from 'react';
import { Button } from 'react-bootstrap';
import { useAuth } from './context/auth';
import './Login.css';
@ -10,20 +10,26 @@ export default function Login() {
const auth = useAuth();
const loginRef = useRef<HTMLInputElement>(null);
const doLogin = useCallback(() => {
// Netuším proč mě TypeScript seřve když se to pokusím zchainovat dohromady
if (loginRef?.current?.value && loginRef?.current?.value.length > 0) {
auth?.setLogin(loginRef.current.value);
}
}, []);
if (!auth || !auth.login) {
return <div className='login'>
<div className='login-inner'>
<p style={{ fontSize: "12px", marginTop: "10px" }}>Zobrazované jméno by mělo být ideálně vaše jméno a příjmení, nebo přezdívka, pod kterou vás kolegové dokážou snadno identifikovat. Jméno lze kdykoliv upravit/smazat v local storage prohlížeče.<br />PS: Enter nefunguje</p>
Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' />
<Button onClick={() => {
// Netuším proč mě TypeScript seřve když se to pokusím zchainovat dohromady
if (loginRef?.current?.value && loginRef?.current?.value.length > 0) {
auth?.setLogin(loginRef.current.value);
<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ážou snadno identifikovat.
</p>
Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
if (event.key === 'Enter') {
doLogin()
}
}} style={{ marginTop: "20px" }}>Uložit</Button>
}} />
<Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
</div>
</div>
}
// TODO nějaký loader
return <div>TODO</div>;
}