team invite link handling login state

one can register a new account or login and join

frontend/src/CUTT.tsx

@@ -10,6 +10,7 @@ import MVPChart from "./MVPChart";
 import { SetPassword } from "./SetPassword";
 import { Register } from "./Register";
 import { ForgotPassword } from "./Login";
+import { Join } from "./JoinTeam";
 
 const Maintenance = () => {
   return (
@@ -40,6 +41,7 @@ function App() {
                 <Route path="network" element={<GraphComponent />} />
                 <Route path="mvp" element={<MVPChart />} />
                 <Route path="team" element={<TeamPanel />} />
+                <Route path="join" element={<Join />} />
               </Routes>
               <Footer />
             </SessionProvider>

frontend/src/JoinTeam.tsx

@@ -0,0 +1,44 @@
+import { jwtDecode } from "jwt-decode";
+import { PassToken } from "./api";
+import { useEffect, useState } from "react";
+import { useSession } from "./Session";
+
+export const Join = () => {
+  const [token, setToken] = useState("");
+  const { user } = useSession();
+  const [teamName, setTeamName] = useState("");
+  const [teamID, setTeamID] = useState<number>();
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+    if (token) {
+      setToken(token);
+      try {
+        const payload = jwtDecode<PassToken>(token);
+        if (payload.sub === "register") {
+          if (payload.team_id) setTeamID(payload.team_id);
+        } else {
+          setError("not a valid token for joining");
+        }
+        if (payload.name) setTeamName(payload.name);
+      } catch (InvalidTokenError) {
+        setError("not a valid token");
+      }
+    } else setError("no token found");
+  }, []);
+
+  return (
+    <section className="section is-medium">
+      <div className="container is-max-tablet">
+        <h1 className="title">Join "{teamName}"</h1>
+        <div className="field is-grouped is-grouped-centered">
+          <button className="button is-primary is-large is-outlined">
+            join
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};

frontend/src/Register.tsx

@@ -8,6 +8,7 @@ interface PassToken extends JwtPayload {
   name: string;
   team_id: number;
 }
+import { Link, useLocation, useNavigate } from "react-router";
 
 export const Register = () => {
   const [name, setName] = useState("");
@@ -23,10 +24,11 @@ export const Register = () => {
   const [token, setToken] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const location = useLocation();
   const navigate = useNavigate();
 
   useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
+    const params = new URLSearchParams(location.search);
     const token = params.get("token");
     if (token) {
       setToken(token);
@@ -111,6 +113,17 @@ export const Register = () => {
         <h1 className="title">
           Register {teamName && `in team "${teamName}"`}
         </h1>
+        <div className="notification is-warning">
+          <div className="icon-text">
+            <span className="icon">
+              <TriangleAlert />
+            </span>
+            <span>
+              If you already have an account,{" "}
+              <a href={`/join${location.search}&login=1`}>login</a> first.
+            </span>
+          </div>
+        </div>
         <form onSubmit={handleSubmit}>
           <div className="field">
             <div className="field">

frontend/src/Session.tsx

@@ -10,6 +10,12 @@ import { Login } from "./Login";
 import Header from "./Header";
 import { Team } from "./types";
 import Loading from "./Loading";
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router";
 
 export interface SessionProviderProps {
   children: ReactNode;
@@ -46,6 +52,9 @@ export function SessionProvider(props: SessionProviderProps) {
   const [players, setPlayers] = useState<User[] | null>(null);
   const [error, setError] = useState<unknown>(null);
   const [loading, setLoading] = useState(false);
+  const location = useLocation();
+  let [searchParams] = useSearchParams();
+  const navigate = useNavigate();
 
   function loadUser() {
     setLoading(true);
@@ -101,6 +110,8 @@ export function SessionProvider(props: SessionProviderProps) {
   if (loading || (!error && !user))
     content = <section className="section is-medium">{Loading}</section>;
   else if (error) {
+    if (location.pathname === "/join" && !searchParams.get("login"))
+      navigate(`/register${location.search}`);
     content = (
       <section className="section is-medium">
         <div className="container is-max-tablet">