Web Client (#11)

* Github Oauth

* A simple frontend

* Add middleware proxy on dev

* Forward proxy and rewrite path, add oauth to frontend, increase jwt expiry time to 12 hours

* Some simple style changes

* Add keys as user

* Checkpoint - auth is broken

* Fix auth and use player model, unrelated to this pr: flip board if dark

* Close player session when password or key deleted or put

* Add build script - this branch is quickly becoming cringe

* Docker v2 - add migration and scripts, fix local storage and index that caused build issues

* Ignore keys, proxy api correctly nginx

* Finally nginx is resolved jesus christ

* Remove max screen dimension limits cuz cringe

* Cursor highlight

* Add password form, some minor frontend changes as well

* Remove cringe on home page

* Move to 127.0.0.1 loopback in env

* Add github id in player structs for tests

1 files changed, 47 insertions, 0 deletions

diff --git a/front/src/root.jsx b/front/src/root.jsx
new file mode 100644
index 0000000..61f8615
--- /dev/null
+++ b/front/src/root.jsx
@@ -0,0 +1,47 @@
+import { Link, Outlet } from "react-router-dom";
+
+import logo from "./assets/chessh_sm.svg";
+
+import { useAuthContext } from "./context/auth_context";
+
+export const Root = () => {
+  const { signedIn, signOut } = useAuthContext();
+
+  return (
+    <>
+      <div className="container">
+        <div className="navbar">
+          <div className="flex-row-around">
+            <Link to="/home">
+              <img src={logo} className="logo" alt="CheSSH Logo" />
+            </Link>
+          </div>
+          <div className="nav">
+            {signedIn ? (
+              <>
+                <Link className="link" to="/password">
+                  Password
+                </Link>
+                <Link className="link" to="/keys">
+                  Keys
+                </Link>
+                <Link className="button" onClick={signOut} to="/">
+                  Sign Out
+                </Link>
+              </>
+            ) : (
+              <>
+                <a href={process.env.REACT_APP_GITHUB_OAUTH} className="button">
+                  🐙 Login w/ GitHub 🐙
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="content">
+          <Outlet />
+        </div>
+      </div>
+    </>
+  );
+};