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/routes/auth_successful.jsx b/front/src/routes/auth_successful.jsx
new file mode 100644
index 0000000..7c66587
--- /dev/null
+++ b/front/src/routes/auth_successful.jsx
@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { Link } from "react-router-dom";
+
+import { useAuthContext } from "../context/auth_context";
+
+export const AuthSuccessful = () => {
+  const { player, setPlayer, signedIn, setSignedIn, setSessionOver } =
+    useAuthContext();
+
+  useEffect(() => {
+    fetch("/api/player/token/me", {
+      credentials: "same-origin",
+    })
+      .then((r) => r.json())
+      .then(({ player, expiration }) => {
+        setSignedIn(!!player);
+        setPlayer(player);
+        setSessionOver(expiration);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (signedIn) {
+    return (
+      <>
+        <h3>Hello there, {player?.username || ""}! </h3>
+        <div>
+          <span> If you have not already done so: </span>
+          <Link to="/keys" className="button">
+            Add a Public Key
+          </Link>
+        </div>
+        <br />
+        <div>
+          <Link to="/home" className="button">
+            Go Home
+          </Link>
+        </div>
+      </>
+    );
+  }
+  return (
+    <>
+      <p>Loading...</p>
+    </>
+  );
+};