samselikoff · samselikoff · Sep 8, 2020 · Sep 8, 2020
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@tailwindcss/ui": "^0.5.0",
     "date-fns": "^2.15.0",
     "firebase": "^7.19.0",
+    "formik": "^2.1.5",
     "gray-matter": "^4.0.2",
     "next": "^9.5.3-canary.25",
     "next-mdx-enhanced": "^4.0.0",

diff --git a/pages/_app.js b/pages/_app.js
@@ -31,7 +31,7 @@ const Layout = ({ children }) => {
 
   return (
     <>
-      <div className="font-sans text-base antialiased text-gray-800">
+      <div className="flex flex-col min-h-screen font-sans text-base antialiased text-gray-800">
         <header className="px-6">
           <div className="pt-4 mx-auto max-w-7xl md:pt-6 xl:pt-8">
             <div className="flex justify-between pb-4 md:pb-0 md:border-b md:border-gray-200 md:justify-start">
@@ -53,7 +53,7 @@ const Layout = ({ children }) => {
             />
           </div>
         </header>
-        <main>{children}</main>
+        <main className="flex flex-col flex-1">{children}</main>
       </div>
     </>
   );

diff --git a/pages/login.js b/pages/login.js
@@ -0,0 +1,152 @@
+import { useEffect, useState } from "react";
+import { Formik, Field, Form } from "formik";
+import * as firebase from "firebase/app";
+
+// Add the Firebase products that you want to use
+import "firebase/auth";
+
+export default function Login() {
+  let app;
+  let [state, setState] = useState("authenticating");
+
+  useEffect(() => {
+    let firebaseConfig = {
+      apiKey: "AIzaSyAXX4G4xSLAwfIgR8vOsgYQOq9or0Jmmyo",
+      authDomain: "test-3fb7f.firebaseapp.com",
+      databaseURL: "https://test-3fb7f.firebaseio.com",
+      projectId: "test-3fb7f",
+      storageBucket: "test-3fb7f.appspot.com",
+      messagingSenderId: "197704559138",
+      appId: "1:197704559138:web:f373ec99c0218a774ff87b",
+      measurementId: "G-HP7G1FS9FN",
+    };
+    // Initialize Firebase
+    app = !firebase.apps.length
+      ? firebase.initializeApp(firebaseConfig)
+      : firebase.app();
+
+    app.auth().onAuthStateChanged(function (user) {
+      if (user) {
+        setState("authenticated");
+      } else {
+        setState("anonymous");
+      }
+    });
+  });
+
+  function logout() {
+    firebase.auth().signOut();
+  }
+
+  return (
+    <div className="flex flex-col flex-1 py-12 -mt-px bg-gray-100 border-t border-gray-200 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-900">
+          Sign in
+        </h2>
+      </div>
+
+      {state === "authenticating" ? (
+        <p>Checking auth status...</p>
+      ) : state === "authenticated" ? (
+        <div>
+          <p>Hi sam :)</p>
+          <button onClick={logout}>Log out</button>
+        </div>
+      ) : state === "anonymous" ? (
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+          <div className="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
+            <Formik
+              initialValues={{ email: "", password: "" }}
+              onSubmit={async (values) => {
+                await app
+                  .auth()
+                  .signInWithEmailAndPassword(values.email, values.password);
+              }}
+            >
+              {(renderProps) => (
+                <Form>
+                  <div>
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium leading-5 text-gray-700"
+                    >
+                      Email address
+                    </label>
+                    <div className="mt-1 rounded-md shadow-sm">
+                      <Field
+                        id="email"
+                        name="email"
+                        autoComplete="username"
+                        type="email"
+                        required
+                        className="block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="mt-6">
+                    <label
+                      htmlFor="password"
+                      className="block text-sm font-medium leading-5 text-gray-700"
+                    >
+                      Password
+                    </label>
+                    <div className="mt-1 rounded-md shadow-sm">
+                      <Field
+                        id="password"
+                        type="password"
+                        name="password"
+                        required
+                        autoComplete="current-password"
+                        className="block w-full px-3 py-2 placeholder-gray-400 transition duration-150 ease-in-out border border-gray-300 rounded-md appearance-none focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                      />
+                    </div>
+                  </div>
+
+                  {/* <div className="flex items-center justify-between mt-6">
+                  <div className="flex items-center">
+                    <input
+                      id="remember_me"
+                      type="checkbox"
+                      className="w-4 h-4 text-blue-600 transition duration-150 ease-in-out form-checkbox"
+                    />
+                    <label
+                      htmlFor="remember_me"
+                      className="block ml-2 text-sm leading-5 text-gray-900"
+                    >
+                      Remember me
+                    </label>
+                  </div>
+
+                  <div className="text-sm leading-5">
+                    <a
+                      href="#"
+                      className="font-medium text-blue-600 transition duration-150 ease-in-out hover:text-blue-500 focus:outline-none focus:underline"
+                    >
+                      Forgot your password?
+                    </a>
+                  </div>
+                </div> */}
+
+                  <div className="mt-6">
+                    <span className="block w-full rounded-md shadow-sm">
+                      <button
+                        type="submit"
+                        className="flex w-full px-4 py-2 text-sm font-medium text-white transition duration-150 ease-in-out bg-blue-600 border border-transparent rounded-md hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700"
+                      >
+                        Sign in
+                      </button>
+                    </span>
+                  </div>
+                </Form>
+              )}
+            </Formik>
+          </div>
+        </div>
+      ) : (
+        <p>Unknown state</p>
+      )}
+    </div>
+  );
+}
diff --git a/pages/work-journal-admin.js b/pages/work-journal-admin.js
@@ -1,9 +1,11 @@
 import { Head, Container, Spacer, Title, Lead } from "../components/ui";
 import { useEffect, useState, useRef } from "react";
 import * as firebase from "firebase/app";
+import { format } from "date-fns";
+
 // Add the Firebase products that you want to use
 import "firebase/database";
-import { format } from "date-fns";
+import "firebase/auth";
 
 let firebaseApp;
 
@@ -97,6 +99,7 @@ export default function WorkJournalAdminPage() {
             <p className="text-sm italic font-medium text-gray-500 uppercase">
               New entry
             </p>
+
             <NewEntry
               entry={newEntry}
               isSaving={isSavingNewEntry}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -82,6 +82,7 @@ module.exports = {
 
           // Another (darker darks): https://hihayk.github.io/scale/#4/4/91/91/0/0/-19/-5/a6afb9/166/175/185
           // But swapped 900 with above
+          50: "#fbfbfc",
           100: "#F7F8F9",
           200: "#E3E6E8",
           300: "#CFD3D8",

diff --git a/yarn.lock b/yarn.lock
@@ -2825,6 +2825,11 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 define-properties@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -3327,6 +3332,20 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
+formik@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.1.5.tgz#de5bbbe35543fa6d049fe96b8ee329d6cd6892b8"
+  integrity sha512-bWpo3PiqVDYslvrRjTq0Isrm0mFXHiO33D8MS6t6dWcqSFGeYF52nlpCM2xwOJ6tRVRznDkL+zz/iHPL4LDuvQ==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    scheduler "^0.18.0"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -3723,7 +3742,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4253,6 +4272,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -4273,7 +4297,7 @@ lodash.uniq@4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.19:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -5347,6 +5371,11 @@ react-dom@16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-focus-lock@^2.3.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.1.tgz#e842cc93da736b5c5d331799012544295cbcee4f"
@@ -5766,6 +5795,14 @@ sass-loader@8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
+scheduler@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -6251,6 +6288,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
@@ -6330,7 +6372,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tslib@^1.0.0, tslib@^1.11.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.0.0, tslib@^1.10.0, tslib@^1.11.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==