-
+
+
+ FAQ
+
{signedIn ? (
<>
@@ -24,11 +39,7 @@ export const Root = () => {
Keys
- setSignedIn(false)}
- to="/"
- >
+
Sign Out
diff --git a/front/src/routes/auth_successful.jsx b/front/src/routes/auth_successful.jsx
index 8487d32..6dbc9f5 100644
--- a/front/src/routes/auth_successful.jsx
+++ b/front/src/routes/auth_successful.jsx
@@ -1,4 +1,6 @@
import { useEffect, useCallback } from "react";
+import { Link } from "react-router-dom";
+
import { useAuthContext } from "../context/auth_context";
export const AuthSuccessful = () => {
@@ -23,10 +25,22 @@ export const AuthSuccessful = () => {
fetchMyself();
}, [fetchMyself]);
+ if (signedIn) {
+ return (
+ <>
+
+
Authentication Successful
+
+ Hello there, {username || ""}!
+
+ Go Home{" "}
+
+
+
+ );
+ }
return (
<>
- Successful Auth
- {signedIn ?Hello there, {username || ""}
:Loading...
} +Loading...
); }; diff --git a/front/src/routes/home.jsx b/front/src/routes/home.jsx index d56d5ef..92c9b39 100644 --- a/front/src/routes/home.jsx +++ b/front/src/routes/home.jsx @@ -1,11 +1,59 @@ +import { CopyBlock, dracula } from "react-code-blocks"; +import { Link } from "react-router-dom"; + import { useAuthContext } from "../context/auth_context"; export const Home = () => { const { username, signedIn } = useAuthContext(); + if (signedIn) { + const sshConfig = `Host chessh + Hostname ${process.env.REACT_APP_SSH_SERVER} + User ${username} + Port ${process.env.REACT_APP_SSH_PORT} + PubkeyAuthentication yes`; + return ( + <> +Hello there, {username}!
++ You can now start playing CheSSH by using any of your imported{" "} + public keys, or by{" "} + creating a password. +
+ ++
Getting Started
+-
+
- + Add the following to your ssh config (normally in ~/.ssh/config): + + +
- And connect with: +
+
+
-
);
};
diff --git a/front/src/routes/keys.jsx b/front/src/routes/keys.jsx
new file mode 100644
index 0000000..ee34143
--- /dev/null
+++ b/front/src/routes/keys.jsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { useAuthContext } from "../context/auth_context";
+
+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 = ({ props }) => {
+ const { id, name, key } = props;
+
+ const deleteThisKey = () => {
+ fetch(`/api/keys/${id}`, {
+ credentials: "same-origin",
+ method: "DELETE",
+ })
+ .then((r) => r.json())
+ .then((d) => d.success); //&& onDelete());
+ };
+
+ return (
+ Welcome home, {signedIn ? username : "guest"}!
+CheSSH
+
+ );
+};
+
+const AddKey = () => {
+ const [key, setKey] = useState("");
+ const [name, setName] = useState("");
+ const [error, setError] = useState("");
+
+ const createKey = () => {
+ fetch(`/api/player/keys`, {
+ credentials: "same-origin",
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ key,
+ name,
+ }),
+ })
+ .then((r) => r.json())
+ .then((d) => {
+ if (d.success) {
+ setName("");
+ setKey("");
+ } else {
+ setError(d.errors);
+ }
+ });
+ };
+
+ return (
+ {name}
+{minimizeKey(key)}
+ + +
+ setName(e.target.value)} />
+