Prvotní nástřel fungující aplikace

client/src/Login.tsx

@@ -0,0 +1,28 @@
+import { useState } 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 [loginName, setLoginName] = useState<string>('');
+
+  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" }} onChange={(e) => setLoginName(e.target.value)} type='text' />
+        <Button onClick={() => {
+          if (loginName?.length > 0) {
+            auth?.setLogin(loginName);
+          }
+        }} style={{ marginTop: "20px" }}>Uložit</Button>
+      </div>
+    </div>
+  }
+  // TODO nějaký loader
+  return <div>TODO</div>;
+}