Add support for registering via the client.

.github/workflows/publish.yml

@@ -35,6 +35,7 @@ jobs:
           echo "VITE_BUILD_NUMBER=$((GITHUB_RUN_NUMBER))" >> $GITHUB_ENV
           echo "VITE_BUILD_COMMIT=$GITHUB_SHA" >> $GITHUB_ENV
           echo "VITE_DEFAULT_HOMESERVER=https://kcore.half-shot.uk" >> $GITHUB_ENV
+          echo "VITE_REGISTRATION_TOKEN=wg-w1-xooNi3ahzah5" >> $GITHUB_ENV
       - name: Set up Node
         uses: actions/setup-node@v4
         with:

src/frontend/components/config.ts

@@ -1,8 +1,9 @@
 interface WormgineClientConfiguration {
   defaultHomeserver: string | null;
+  registrationToken: string | null;
 }
 
-const { VITE_DEFAULT_HOMESERVER } = import.meta.env;
+const { VITE_DEFAULT_HOMESERVER, VITE_REGISTRATION_TOKEN } = import.meta.env;
 
 function truthyStringOrNull(value: unknown) {
   if (typeof value === "string" && value) {
@@ -13,6 +14,7 @@ function truthyStringOrNull(value: unknown) {
 
 const config: WormgineClientConfiguration = {
   defaultHomeserver: truthyStringOrNull(VITE_DEFAULT_HOMESERVER),
+  registrationToken: truthyStringOrNull(VITE_REGISTRATION_TOKEN),
 };
 
 export default config;

src/frontend/components/menus/online-play.tsx

@@ -9,6 +9,7 @@ import styles from "./online-play.module.css";
 import { useObservableEagerState } from "observable-hooks";
 import Logger from "../../../log";
 import { DefaultWeaponSchema } from "../../../weapons/schema";
+import { getLocalTeamsHook } from "../../../settings";
 
 interface Props {
   client: NetGameClient | undefined;
@@ -29,6 +30,7 @@ function LoggedInView({
 }) {
   const [displayname, setDisplayName] = useState<string>();
   const [authenticatedAvatarBlob, setAvatarBlobUrl] = useState<string>();
+  const [localTeams] = getLocalTeamsHook();
 
   const createGameCallback = useCallback(() => {
     client
@@ -98,18 +100,94 @@ function LoggedInView({
           You may press the button below to create a lobby. To join a lobby, use
           a URL provided by the host.
         </p>
-        <button onClick={createGameCallback}>Create Lobby</button>
+        <p>
+          {localTeams?.length === 0 ? (
+            <strong>
+              You must have at least one local team before you can create a
+              lobby.
+            </strong>
+          ) : null}
+        </p>
+        <button onClick={createGameCallback} disabled={!localTeams?.length}>
+          Create Lobby
+        </button>
       </section>
     </>
   );
 }
 
+function RegistrationForm({
+  setClientConfig,
+  onBack,
+}: {
+  setClientConfig: Props["setClientConfig"];
+  onBack: () => void;
+}) {
+  const [loginInProgress, setLoginInProgress] = useState(false);
+  const [error, setError] = useState<string>();
+  const onSubmit = useCallback(
+    async (e: SubmitEvent) => {
+      e.preventDefault();
+      if (!config.defaultHomeserver || !config.registrationToken) {
+        return;
+      }
+      try {
+        setLoginInProgress(true);
+        const target = e.target as HTMLFormElement;
+        const username = (
+          target.elements.namedItem("username") as HTMLInputElement
+        ).value;
+        const password = (
+          target.elements.namedItem("password") as HTMLInputElement
+        ).value;
+        const { accessToken } = await NetGameClient.register(
+          config.defaultHomeserver,
+          config.registrationToken,
+          username,
+          password,
+        );
+        setClientConfig({
+          accessToken,
+          baseUrl: config.defaultHomeserver,
+        });
+      } catch (ex) {
+        setError((ex as Error).toString());
+      } finally {
+        setLoginInProgress(false);
+      }
+    },
+    [setClientConfig],
+  );
+
+  return (
+    <section>
+      <p>
+        You may log into an existing account below by specifying a username and
+        password. Future versions will allow you to create an account / login to
+        other servers.
+      </p>
+      {error && (
+        <p>
+          Error: <span>{error}</span>
+        </p>
+      )}
+      <form disabled={loginInProgress} onSubmit={onSubmit}>
+        <input type="text" placeholder="username" id="username"></input>
+        <input type="password" placeholder="password" id="password"></input>
+        <button type="submit">Register</button>
+      </form>
+      <button onClick={onBack}>Back to login</button>
+    </section>
+  );
+}
+
 function LoginForm({
   setClientConfig,
 }: {
   setClientConfig: Props["setClientConfig"];
 }) {
   const [loginInProgress, setLoginInProgress] = useState(false);
+  const [showRegForm, setShowRegForm] = useState(false);
   const [error, setError] = useState<string>();
   const onSubmit = useCallback(
     async (e: SubmitEvent) => {
@@ -144,6 +222,15 @@ function LoginForm({
     [setClientConfig],
   );
 
+  if (showRegForm) {
+    return (
+      <RegistrationForm
+        setClientConfig={setClientConfig}
+        onBack={() => setShowRegForm(false)}
+      ></RegistrationForm>
+    );
+  }
+
   return (
     <section>
       <p>
@@ -161,6 +248,11 @@ function LoginForm({
         <input type="password" placeholder="password" id="password"></input>
         <button type="submit">Login</button>
       </form>
+      {config.registrationToken && (
+        <button onClick={() => setShowRegForm(true)}>
+          Register new account
+        </button>
+      )}
     </section>
   );
 }

src/net/client.ts

@@ -282,21 +282,23 @@ export class NetGameClient extends EventEmitter {
     localStorage.removeItem(WORMGINE_STORAGE_KEY_CLIENT_CONFIG);
   }
 
-  public static async register(
+  public static async login(
     homeserverUrl: string,
-    name: string,
+    username: string,
     password: string,
-  ) {
+  ): Promise<{ accessToken: string }> {
     const client = createClient({
       baseUrl: homeserverUrl,
       fetchFn: (input, init) => globalThis.fetch(input, init),
+      store: new MemoryStore({ localStorage: window.localStorage }),
     });
-    return await client.register(name, password, null, {
-      type: "m.login.password",
-    });
+    const response = await client.loginWithPassword(username, password);
+    return { accessToken: response.access_token };
   }
-  public static async login(
+
+  public static async register(
     homeserverUrl: string,
+    registrationToken: string,
     username: string,
     password: string,
   ): Promise<{ accessToken: string }> {
@@ -305,8 +307,52 @@ export class NetGameClient extends EventEmitter {
       fetchFn: (input, init) => globalThis.fetch(input, init),
       store: new MemoryStore({ localStorage: window.localStorage }),
     });
-    const response = await client.loginWithPassword(username, password);
-    return { accessToken: response.access_token };
+    const params: { session: string; flows: { stages: string[] }[] } =
+      await client.registerRequest({}).catch((ex) => ex.data);
+    if (
+      !params.flows.some((s) => s.stages[0] === "m.login.registration_token")
+    ) {
+      throw Error(
+        "Cannot register on this host. Registration token support is not enabled",
+      );
+    }
+    try {
+      const response = await client.register(
+        username,
+        password,
+        params.session,
+        {
+          type: "m.login.registration_token",
+          token: registrationToken,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any,
+      );
+      if (!response.access_token) {
+        throw Error("Unexpected response");
+      }
+      return { accessToken: response.access_token };
+    } catch (ex) {
+      if (
+        (ex as MatrixError).data.completed?.includes(
+          "m.login.registration_token",
+        )
+      ) {
+        const response = await client.register(
+          username,
+          password,
+          params.session,
+          {
+            type: "m.login.dummy",
+          },
+        );
+        if (!response.access_token) {
+          throw Error("Unexpected response");
+        }
+        return { accessToken: response.access_token };
+      } else {
+        throw ex;
+      }
+    }
   }
 
   constructor(config: NetClientConfig) {

src/settings.ts

@@ -39,6 +39,10 @@ export function getGameSettings(): GameSettings {
   };
 }
 
+export function getLocalTeamsHook() {
+  return useLocalStorageState<StoredTeam[]>(WORMGINE_STORAGE_KEY_TEAMS);
+}
+
 export function getLocalTeams(): StoredTeam[] {
   const item = localStorage.getItem(WORMGINE_STORAGE_KEY_TEAMS);
   if (!item) {