From 4666d7871a9e064a3b3033c7c1daa9c3c4972d98 Mon Sep 17 00:00:00 2001 From: Logan Hunt Date: Thu, 19 Jan 2023 14:04:10 -0700 Subject: 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 --- front/src/routes/auth_successful.jsx | 47 ++++++++ front/src/routes/demo.jsx | 61 +++++++++++ front/src/routes/home.jsx | 62 +++++++++++ front/src/routes/keys.jsx | 204 +++++++++++++++++++++++++++++++++++ front/src/routes/password.jsx | 144 +++++++++++++++++++++++++ 5 files changed, 518 insertions(+) create mode 100644 front/src/routes/auth_successful.jsx create mode 100644 front/src/routes/demo.jsx create mode 100644 front/src/routes/home.jsx create mode 100644 front/src/routes/keys.jsx create mode 100644 front/src/routes/password.jsx (limited to 'front/src/routes') 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 ( + <> +

Hello there, {player?.username || ""}!

+
+ If you have not already done so: + + Add a Public Key + +
+
+
+ + Go Home + +
+ + ); + } + return ( + <> +

Loading...

+ + ); +}; diff --git a/front/src/routes/demo.jsx b/front/src/routes/demo.jsx new file mode 100644 index 0000000..b1a2f88 --- /dev/null +++ b/front/src/routes/demo.jsx @@ -0,0 +1,61 @@ +import { useEffect, useRef, useState } from "react"; +import { Link } from "react-router-dom"; + +import * as AsciinemaPlayer from "asciinema-player"; +import "asciinema-player/dist/bundle/asciinema-player.css"; + +const demoProps = { + theme: "tango", + startAt: 12, + autoPlay: true, +}; + +const demoCast = "/chessh.cast"; +const demoCastElementId = "demo"; + +export const Demo = () => { + const player = useRef(null); + const [renderedPlayer, setRenderedPlayer] = useState(false); + + useEffect(() => { + if (!renderedPlayer) { + AsciinemaPlayer.create( + demoCast, + document.getElementById(demoCastElementId), + demoProps + ); + setRenderedPlayer(true); + } + }, [renderedPlayer, player]); + + return ( +
+

+ Welcome to > CheSSH! +

+
+

+ CheSSH is a multiplayer, scalable, free, open source, and (optionally) + passwordless game of Chess over the SSH protocol, written in Elixir. +

+ + 🌟 Star Repo 🌟 + +
+
+
+
+
+

Would you like to play a game?

+ + Yes, Falken ⇒ + +
+
+ ); +}; 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 ( + <> +

Welcome, {player?.username}

+
+

Getting Started

+
    +
    +
  1. + Add a public key, or{" "} + set a password. +
    2. +
    +
    +
  2. + Insert the following block in your{" "} + ssh config: +
    3. + + +
    + +
    +
  3. Then, connect with:
    4. + +
    +
+ + ); + } + + return ( + <> +

Looks like you're not signed in 👀.

+ + ); +}; diff --git a/front/src/routes/keys.jsx b/front/src/routes/keys.jsx new file mode 100644 index 0000000..4dee1ce --- /dev/null +++ b/front/src/routes/keys.jsx @@ -0,0 +1,204 @@ +import Modal from "react-modal"; +import { useEffect, useState, useCallback } from "react"; +import { useAuthContext } from "../context/auth_context"; + +Modal.setAppElement("#root"); + +const MINIMIZE_KEY_LEN = 40; +const minimizeKey = (key) => { + const n = key.length; + if (n >= MINIMIZE_KEY_LEN) { + const half = Math.floor(MINIMIZE_KEY_LEN / 2); + return key.substring(0, half) + "..." + key.substring(n - half, n); + } + return key; +}; + +const KeyCard = ({ onDelete, props }) => { + const { id, name, key } = props; + + const deleteThisKey = () => { + if ( + window.confirm( + "Are you sure? This will close all your current ssh sessions." + ) + ) { + fetch(`/api/keys/${id}`, { + credentials: "same-origin", + method: "DELETE", + }) + .then((r) => r.json()) + .then((d) => d.success && onDelete && onDelete()); + } + }; + + return ( +
+

{name}

+

{minimizeKey(key)}

+ + +
+ ); +}; + +const AddKeyButton = ({ onSave }) => { + const [open, setOpen] = useState(false); + const [name, setName] = useState(""); + const [key, setKey] = useState(""); + const [errors, setErrors] = useState(null); + + const setDefaults = () => { + setName(""); + setKey(""); + setErrors(null); + }; + + const close = () => { + setDefaults(); + setOpen(false); + }; + + const createKey = () => { + fetch(`/api/player/keys`, { + credentials: "same-origin", + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + key: key.trim(), + name: name.trim(), + }), + }) + .then((r) => r.json()) + .then((d) => { + if (d.success) { + if (onSave) { + onSave(); + } + close(); + } else if (d.errors) { + if (typeof d.errors === "object") { + setErrors( + Object.keys(d.errors).map( + (field) => `${field}: ${d.errors[field].join(",")}` + ) + ); + } else { + setErrors([d.errors]); + } + } + }); + }; + + return ( +
+ + +
+

Add SSH Key

+

+ Not sure about this? Check{" "} + + here + {" "} + for help! +

+
+

Key Name *

+ setName(e.target.value)} + required + /> +
+
+

SSH Key *

+