Login page for links editor

frontend/components/Login/authcontext.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useContext, createContext } from "react";
+
+export interface AuthContextState {
+  loggedIn: boolean;
+  loginFailed: boolean;
+  login: (pass?: string) => void;
+}
+
+const DEFAULT_STATE: AuthContextState = {
+  loggedIn: false,
+  loginFailed: false,
+  login: () => console.error("No parent AuthContext found!"),
+};
+
+const AuthContext: React.Context<AuthContextState> = createContext(
+  DEFAULT_STATE
+);
+
+const password = "bubbles";
+
+export const AuthProvider: React.FC = (props) => {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [loginFailed, setLoginFailed] = useState(false);
+
+  function login(pass?: string): void {
+    if (pass === password) {
+      setLoggedIn(true);
+      setLoginFailed(false);
+    } else {
+      setLoggedIn(false);
+      setLoginFailed(true);
+    }
+  }
+
+  return (
+    <AuthContext.Provider value={{ loggedIn, login, loginFailed }} {...props} />
+  );
+};
+
+export const useAuth = () => useContext(AuthContext);

frontend/components/Login/loginbox.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { useAuth } from "components/Login/authcontext";
+
+const LoginBox: React.FC = () => {
+  const [password, setPassword] = useState("");
+  const [focused, setFocused] = useState(false);
+  const { login, loginFailed } = useAuth();
+
+  const passwordLabelClassName = `absolute inset-y-0 left-0 px-4 font-sans text-gray-600 ${
+    focused || password
+      ? "transform scale-75 -translate-y-5 -translate-x-2"
+      : ""
+  } transition-transform pointer-events-none`;
+
+  function handleSubmit(e: React.SyntheticEvent): void {
+    e.preventDefault();
+    login(password);
+    setPassword("");
+  }
+
+  return (
+    <div className="space-y-4">
+      {loginFailed ? (
+        <div className="text-red-600">Invalid credentials.</div>
+      ) : null}
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div>
+          <label htmlFor="password" className="relative">
+            <span className={passwordLabelClassName}>Password</span>
+          </label>
+          <input
+            name="password"
+            type="password"
+            value={password}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onChange={(event) => setPassword(event.target.value)}
+            className="bg-transparent p-4 border border-gray-300 leading-snug focus:outline-none focus:border-gray-500 rounded"
+          />
+        </div>
+        <input
+          type="submit"
+          value="Log In"
+          className="w-full px-4 py-2 font-sans font-semibold text-white bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 rounded-lg"
+        />
+      </form>
+    </div>
+  );
+};
+
+export default LoginBox;

frontend/components/Login/loginhead.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+const LoginHead: React.FC = () => {
+  return (
+    <div className="flex flex-col justify-center items-center space-y-10">
+      <div className="flex flex-row justify-center items-center space-x-5">
+        <Image
+          src="/images/csc-logo-fb-trans.png"
+          height={80}
+          width={80}
+          alt="CSC Logo"
+        />
+        <h1 className="text-4xl font-sans font-bold text-gray-900">linklist</h1>
+      </div>
+      <h2 className="text-xl font-sans font-semibold text-gray-900 text-center">
+        Log in to continue to your Linklist admin
+      </h2>
+    </div>
+  );
+};
+
+export default LoginHead;

frontend/components/editor.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import Analytics from "components/Analytics/index";
+
+const Editor: React.FC = () => {
+  return (
+    <div>
+      <Analytics />
+    </div>
+  );
+};
+
+export default Editor;

frontend/pages/editor.tsx

@@ -0,0 +1,52 @@
+import Head from "next/head";
+import { GetStaticProps } from "next";
+import React from "react";
+import { AuthProvider, useAuth } from "components/Login/authcontext";
+import LoginHead from "components/Login/loginhead";
+import LoginBox from "components/Login/loginbox";
+import Editor from "components/editor";
+
+export const getStaticProps: GetStaticProps = async () => {
+  // TODO: Fetch links here
+
+  return {
+    props: { data: null }, // will be passed to the page component as props
+    // Next.js will attempt to re-generate the page:
+    // - When a request comes in
+    // - At most once every second
+    revalidate: 1,
+  };
+};
+
+const LoginScreen: React.FC = () => {
+  return (
+    <div className="fixed h-screen w-full overflow-auto bg-gray-100">
+      <div className="m-auto h-full flex justify-center items-center">
+        <div className="container m-auto h-auto flex flex-col justify-center items-center p-10 space-y-20">
+          <Head>
+            <title>Login</title>
+          </Head>
+          <LoginHead />
+          <div className="flex justify-center items-center px-10 py-8 bg-gray-50 border-2 border-gray-300 rounded-lg">
+            <LoginBox />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LoginChecker: React.FC = () => {
+  const { loggedIn } = useAuth();
+  return loggedIn ? <Editor /> : <LoginScreen />;
+};
+
+const Login: React.FC = () => {
+  return (
+    <AuthProvider>
+      <LoginChecker />
+    </AuthProvider>
+  );
+};
+
+export default Login;

frontend/pages/editor/index.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { GetStaticProps } from "next";
-import Analytics from "components/Analytics/index";
-
-export const getStaticProps: GetStaticProps = async () => {
-  // TODO: Fetch links here
-
-  return {
-    props: { data: null }, // will be passed to the page component as props
-    // Next.js will attempt to re-generate the page:
-    // - When a request comes in
-    // - At most once every second
-    revalidate: 1,
-  };
-};
-
-const Editor: React.FC = ({ data }: any) => {
-  console.log({ data });
-
-  return (
-    <div>
-      <Analytics />
-    </div>
-  );
-};
-
-export default Editor;

frontend/pages/editor/login.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const Login: React.FC = () => {
-  return <div></div>;
-};
-
-export default Login;

frontend/styles/globals.css

@@ -3,3 +3,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: "Karla";
+  src: local("Karla"),
+       url("/fonts/Karla-VariableFont_wght.ttf") format("truetype");
+  font-style: normal;
+}

frontend/tailwind.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   purge: {
     content: [
@@ -24,6 +25,7 @@ module.exports = {
         },
       },
       fontFamily: {
+        sans: ["Karla", "Helvetica", "Ubuntu", "sans-serif"],
         karla: ["Karla", "Verdana", "sans-serif"],
       },
       fontSize: {