feat: get signup via discord working

frontend/pages/login/discord.tsx

@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
 import { useRecoilState } from "recoil";
 import fetchAPI from "../../lib/fetch";
 import { userState } from "../../lib/state";
-import { MeUser } from "../../lib/types";
+import { APIError, MeUser, SignupResponse } from "../../lib/types";
+import TextInput from "../../components/TextInput";
 
 interface CallbackResponse {
   has_account: boolean;
@@ -12,7 +13,7 @@ interface CallbackResponse {
 
   discord?: string;
   ticket?: string;
-  require_invite?: boolean;
+  require_invite: boolean;
 }
 
 interface State {
@@ -23,6 +24,7 @@ interface State {
   discord: string | null;
   ticket: string | null;
   error?: any;
+  requireInvite: boolean;
 }
 
 export default function Discord() {
@@ -37,7 +39,9 @@ export default function Discord() {
     discord: null,
     ticket: null,
     error: null,
+    requireInvite: false,
   });
+  const [formData, setFormData] = useState<{ username: string, invite: string }>({ username: "", invite: "" });
 
   useEffect(() => {
     if (!router.query.code || !router.query.state) { return; }
@@ -58,19 +62,19 @@ export default function Discord() {
         user: resp.user || null,
         discord: resp.discord || null,
         ticket: resp.ticket || null,
+        requireInvite: resp.require_invite,
       })
     }).catch(e => {
-      return {
-        props: {
-          hasAccount: false,
-          isLoading: false,
-          error: e,
-          token: null,
-          user: null,
-          discord: null,
-          ticket: null,
-        },
-      };
+      setState({
+        hasAccount: false,
+        isLoading: false,
+        error: e,
+        token: null,
+        user: null,
+        discord: null,
+        ticket: null,
+        requireInvite: false,
+      });
     })
 
     // we got a token + user, save it and return to the home page
@@ -82,5 +86,49 @@ export default function Discord() {
     }
   }, [state.token, state.user, setState, router]);
 
-  return <>wow such login</>;
+  // user needs to create an account
+  const signup = async () => {
+    try {
+      const resp = await fetchAPI<SignupResponse>("/auth/discord/signup", "POST", {
+        ticket: state.ticket,
+        username: formData.username,
+        invite_code: formData.invite,
+      });
+
+      setUser(resp.user);
+      localStorage.setItem("pronouns-token", resp.token);
+    } catch (e) {
+      setState({ ...state, error: e });
+    }
+  };
+
+  return <>
+    <h1 className="font-bold text-lg">Get started</h1>
+    <p>You{"'"}ve logged in with Discord as <strong className="font-bold">{state.discord}</strong>.</p>
+
+    {state.error && (
+      <div className="bg-red-600 dark:bg-red-700 p-2 rounded-md">
+        <p>Error: {state.error.message ?? state.error}</p>
+        <p>Try again?</p>
+      </div>
+    )}
+
+    <label>
+      <span className="font-bold">Username</span>
+      <TextInput value={formData.username} onChange={(e) => setFormData({ ...formData, username: e.target.value })} />
+    </label>
+    {state.requireInvite && (
+      <label>
+        <span className="font-bold">Invite code</span>
+        <TextInput value={formData.invite} onChange={(e) => setFormData({ ...formData, invite: e.target.value })} />
+      </label>
+    )}
+    <button
+      type="button"
+      onClick={() => signup()}
+      className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md"
+    >
+      <span className="font-bold">Create account</span>
+    </button>
+  </>;
 }