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, 62 insertions, 0 deletions

diff --git a/front/src/routes/home.jsx b/front/src/routes/home.jsx
new file mode 100644
index 0000000..baccb5f
--- /dev/null
+++ b/front/src/routes/home.jsx
@@ -0,0 +1,62 @@
+import { CopyBlock, dracula } from "react-code-blocks";
+import { Link } from "react-router-dom";
+
+import { useAuthContext } from "../context/auth_context";
+
+export const Home = () => {
+  const { player, signedIn } = useAuthContext();
+
+  if (signedIn) {
+    const sshConfig = `Host chessh
+  Hostname ${process.env.REACT_APP_SSH_SERVER}
+  Port ${process.env.REACT_APP_SSH_PORT}
+  User ${player?.username}
+  PubkeyAuthentication yes`;
+    return (
+      <>
+        <h2>Welcome, {player?.username}</h2>
+        <hr />
+        <h3>Getting Started</h3>
+        <ol>
+          <div>
+            <li>
+              Add a <Link to="/keys">public key</Link>, or{" "}
+              <Link to="/password">set a password</Link>.
+            </li>
+          </div>
+          <div>
+            <li>
+              Insert the following block in your{" "}
+              <a href="https://linux.die.net/man/5/ssh_config">ssh config</a>:
+            </li>
+
+            <CopyBlock
+              theme={dracula}
+              text={sshConfig}
+              showLineNumbers={true}
+              wrapLines
+              codeBlock
+            />
+          </div>
+
+          <div>
+            <li>Then, connect with:</li>
+            <CopyBlock
+              theme={dracula}
+              text={"ssh -t chessh"}
+              language={"shell"}
+              showLineNumbers={false}
+              codeBlock
+            />
+          </div>
+        </ol>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <p>Looks like you're not signed in 👀. </p>
+    </>
+  );
+};