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

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);
 
-  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={() => {
+  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);
     }
-        }} style={{ marginTop: "20px" }}>Uložit</Button>
+  }, []);
+
+  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 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()
+          }
+        }} />
+        <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
       </div>
     </div>
   }
-  // TODO nějaký loader
-  return <div>TODO</div>;
 }