From 6fc3c803e9a23e028cb5cd444ea60f181f951e0c Mon Sep 17 00:00:00 2001
From: Daniel Gal <daniel.gal@sch.bme.hu>
Date: Mon, 10 Feb 2020 14:58:23 +0100
Subject: [PATCH 1/4] First login page

---
 src/components/header/header.js | 14 +++++++++-----
 src/pages/first-login.js        | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/first-login.js

diff --git a/src/components/header/header.js b/src/components/header/header.js
index 792e173..e0194a5 100644
--- a/src/components/header/header.js
+++ b/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()}
diff --git a/src/pages/first-login.js b/src/pages/first-login.js
new file mode 100644
index 0000000..b268f91
--- /dev/null
+++ b/src/pages/first-login.js
@@ -0,0 +1,25 @@
+import { useRouter } from "next/router";
+
+import Page from "../components/page";
+import Button from "../components/button";
+
+export default () => {
+  const router = useRouter();
+  function onClick (e) {
+    (async function setDisplayName () {
+      await fetch("/api/v1/auth/display-name/", {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+        },
+        method: "POST",
+        body: JSON.stringify({ displayName: "Den" })
+      });
+    })();
+  }
+  return (
+    <Page pageTitle="First login">
+      <Button onClick={onClick}>Go</Button>
+    </Page>
+  );
+};

From a7aeac4bdc65c1239eb9cac05ba1fc6dbc53d47f Mon Sep 17 00:00:00 2001
From: Daniel Gal <daniel.gal@sch.bme.hu>
Date: Tue, 11 Feb 2020 23:04:05 +0100
Subject: [PATCH 2/4] Style

---
 src/components/button.js    |  4 ++-
 src/components/textfield.js | 23 ++++++++++++++++
 src/pages/first-login.js    | 54 ++++++++++++++++++++++++++++---------
 3 files changed, 68 insertions(+), 13 deletions(-)
 create mode 100644 src/components/textfield.js

diff --git a/src/components/button.js b/src/components/button.js
index b4264c9..a0d5040 100644
--- a/src/components/button.js
+++ b/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>{`
diff --git a/src/components/textfield.js b/src/components/textfield.js
new file mode 100644
index 0000000..a46c9e5
--- /dev/null
+++ b/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>
+  </>
+);
diff --git a/src/pages/first-login.js b/src/pages/first-login.js
index b268f91..e662063 100644
--- a/src/pages/first-login.js
+++ b/src/pages/first-login.js
@@ -1,25 +1,55 @@
-import { useRouter } from "next/router";
+import { useState } from "react";
+import Router from "next/router";
 
-import Page from "../components/page";
 import Button from "../components/button";
+import TextArea from "../components/textarea";
+import TextField from "../components/textfield";
 
 export default () => {
-  const router = useRouter();
-  function onClick (e) {
+  const [text, setText] = useState("");
+
+  function handleSubmit (e) {
+    e.preventDefault();
     (async function setDisplayName () {
       await fetch("/api/v1/auth/display-name/", {
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json"
-        },
         method: "POST",
-        body: JSON.stringify({ displayName: "Den" })
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ displayName: text })
       });
+      Router.push("/");
     })();
   }
   return (
-    <Page pageTitle="First login">
-      <Button onClick={onClick}>Go</Button>
-    </Page>
+    <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>
   );
 };

From 86c923e621bdb501b179f4ef6821d22acd5fd644 Mon Sep 17 00:00:00 2001
From: Daniel Gal <daniel.gal@sch.bme.hu>
Date: Tue, 11 Feb 2020 23:10:22 +0100
Subject: [PATCH 3/4] Finishing touches

---
 src/pages/first-login.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/first-login.js b/src/pages/first-login.js
index e662063..da1c09e 100644
--- a/src/pages/first-login.js
+++ b/src/pages/first-login.js
@@ -2,9 +2,10 @@ import { useState } from "react";
 import Router from "next/router";
 
 import Button from "../components/button";
-import TextArea from "../components/textarea";
 import TextField from "../components/textfield";
 
+// TODO error handling
+
 export default () => {
   const [text, setText] = useState("");
 

From 97fb8a987e8446e577d650183e955a5bf8fdf857 Mon Sep 17 00:00:00 2001
From: Daniel Gal <daniel.gal@sch.bme.hu>
Date: Tue, 11 Feb 2020 23:11:40 +0100
Subject: [PATCH 4/4] =?UTF-8?q?Last=20finishing=20touch=20esk=C3=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/first-login.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/first-login.js b/src/pages/first-login.js
index da1c09e..f83cf1c 100644
--- a/src/pages/first-login.js
+++ b/src/pages/first-login.js
@@ -5,6 +5,7 @@ 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("");