First login page

src/components/button.js

@@ -9,11 +9,13 @@ export default ({
   compact,
   secondary,
   tertiary,
-  iconOnly
+  iconOnly,
+  ...rest
 }) => (
   <button
     onClick={onClick}
     className={cn({ small, compact, secondary, tertiary, iconOnly })}
+    {...rest}
   >
     {children}
     <style jsx>{`

src/components/header/header.js

@@ -1,8 +1,10 @@
 import { useState, useEffect } from "react";
 import cn from "classnames";
+import { User } from "react-feather";
+
+import Link from "../link";
 import Logo from "../logo";
 import Button from "../button";
-import { User } from "react-feather";
 import Toggle from "./toggle";
 
 export default () => {
@@ -20,10 +22,12 @@ export default () => {
         <Logo />
         <nav className={cn({ active })}>
           <Toggle />
-          <Button small tertiary>
-            <User size={21} />
-            Belépés
-          </Button>
+          <Link underline={false} href="/api/v1/login/authsch">
+            <Button small tertiary>
+              <User size={21} />
+              Belépés
+            </Button>
+          </Link>
         </nav>
         <button
           onClick={() => toggleMenu()}

src/components/textfield.js

@@ -0,0 +1,23 @@
+export default props => (
+  <>
+    <input {...props} type="text" />
+    <style jsx>
+      {`
+        input {
+          background: var(--accents-3);
+          color: var(--fg);
+          border: 2px solid var(--accents-3);
+          padding: var(--gap);
+          transition: all var(--transition);
+          -webkit-appearance: none;
+          border-radius: 0;
+        }
+
+        input:focus {
+          outline: 0;
+          border-color: var(--fg);
+        }
+      `}
+    </style>
+  </>
+);

src/pages/first-login.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import Router from "next/router";
+
+import Button from "../components/button";
+import TextField from "../components/textfield";
+
+// TODO error handling
+// TODO redirect if user is logged in
+
+export default () => {
+  const [text, setText] = useState("");
+
+  function handleSubmit (e) {
+    e.preventDefault();
+    (async function setDisplayName () {
+      await fetch("/api/v1/auth/display-name/", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ displayName: text })
+      });
+      Router.push("/");
+    })();
+  }
+  return (
+    <main className="container">
+      <h1>Kérlek, válassz magadnak felhasználónevet</h1>
+      <form onSubmit={handleSubmit}>
+        <TextField
+          value={text}
+          autoFocus
+          onChange={e => setText(e.target.value)}
+        />
+        <Button type="submit">Tovább</Button>
+      </form>
+
+      <style jsx>{`
+        .container {
+          min-height: 100vh;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        h1 {
+          font-size: 16px;
+          font-weight: 400;
+          text-align: center;
+        }
+
+        form > :global(input) {
+          margin-right: var(--gap-half);
+        }
+      `}</style>
+    </main>
+  );
+};