Accounts and login.

components/Footer.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Footer() {
+  return <footer className="container mt-5 mb-5">umami - deliciously simple web stats</footer>;
+}

components/Header.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Link from 'next/link';
+
+export default function Header() {
+  return (
+    <header className="container">
+      <h1>
+        <Link href="/">
+          <a>umami</a>
+        </Link>
+      </h1>
+    </header>
+  );
+}

components/Layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
-import Header from 'components/header';
-import Footer from 'components/footer';
+import Header from 'components/Header';
+import Footer from 'components/Footer';
 
 export default function Layout({ title, children }) {
   return (
@@ -13,14 +13,6 @@ export default function Layout({ title, children }) {
           href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap"
           rel="stylesheet"
         />
-        {typeof window !== 'undefined' && (
-          <script
-            async
-            defer
-            data-website-id="d0059975-b79a-4f83-8926-ed731475fded"
-            src="/umami.js"
-          />
-        )}
       </Head>
       <Header />
       <main className="container">{children}</main>

components/Login.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import Router from 'next/router';
+import { post } from 'lib/web';
+
+const validate = ({ username, password }) => {
+  const errors = {};
+
+  if (!username) {
+    errors.username = 'Required';
+  }
+  if (!password) {
+    errors.password = 'Required';
+  }
+
+  return errors;
+};
+
+export default function Login() {
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ username, password }) => {
+    const response = await post('/api/auth', { username, password });
+
+    if (response?.token) {
+      await Router.push('/admin');
+    } else {
+      setMessage('Incorrect username/password.');
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        username: '',
+        password: '',
+      }}
+      validate={validate}
+      onSubmit={handleSubmit}
+    >
+      {() => (
+        <Form>
+          <h3>{message}</h3>
+          <div>
+            <label htmlFor="username">Username</label>
+            <Field name="username" type="text" />
+            <ErrorMessage name="username" />
+          </div>
+          <div>
+            <label htmlFor="password">Password</label>
+            <Field name="password" type="password" />
+            <ErrorMessage name="password" />
+          </div>
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  );
+}

components/footer.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function Footer() {
-  return <footer className="container">Footer</footer>;
-}

components/header.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function Header() {
-  return <header className="container">
-    <h1>umami</h1>
-  </header>;
-}