From 1a02587b830bdbf239b03f3d8b253b7186ce64c8 Mon Sep 17 00:00:00 2001
From: Martin Berka <martin.berka@radbuza.net>
Date: Fri, 2 Jun 2023 20:27:52 +0200
Subject: [PATCH] =?UTF-8?q?Podpora=20p=C5=99=C3=ADhl=C3=A1=C5=A1en=C3=AD?=
 =?UTF-8?q?=20pomoc=C3=AD=20Enter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/Login.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/Login.tsx b/client/src/Login.tsx
index 9d12aa0..91348bc 100644
--- a/client/src/Login.tsx
+++ b/client/src/Login.tsx
@@ -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>;
 }