changes

src/pages/Index.tsx

@@ -9,11 +9,41 @@ const usernameKey = "Username";
 
 export function Index() {
     const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
+    const [validated, setValidated] = createSignal(false);
 
-    onMount(() => {
+    onMount(async() => {
         // attempt to get userinfo from localstorage
         // validate userinfo with backend
-        console.log("validating userinfo in localstorage");
+        const UserId = localStorage.getItem(userIdKey);
+        const Username = localStorage.getItem(usernameKey);
+
+        if (UserId === null || Username === null) {
+            return;
+        }
+
+        setUserInfo({
+            UserId,
+            Username,
+        });
+        setValidated(false);
+
+        try {
+            // validate in backend
+            await backend.get("/validate", {
+                headers: {
+                    "Authorization": `Bearer ${UserId}`,
+                },
+            });
+
+            // If the previous hasn't throw, the token is valid.
+            setValidated(true);
+        } catch (e) {
+            // If this throws, the userid is not validated
+            localStorage.removeItem(userIdKey);
+            localStorage.removeItem(usernameKey);
+            setUserInfo(null);
+            setValidated(false);
+        }
     });
 
     return (
@@ -26,10 +56,17 @@ export function Index() {
             <div class="py-4">
                 <h2 class="text-xl py-2 font-black">Play:</h2>
                 <Show when={userInfo() === null}>
-                    <UserRegistration setUserInfo={setUserInfo} />
+                    <UserRegistration setUserInfo={(i) => {
+                        setValidated(true);
+                        setUserInfo(i);
+                    }}
+                    />
                 </Show>
-                <Show when={userInfo() !== null}>
-                    <p>:D (user registered)</p>
+                <Show when={userInfo() !== null && !validated()}>
+                    <p>Validating user id...</p>
+                </Show>
+                <Show when={userInfo() !== null && validated()}>
+                    <LobbyConnection />
                 </Show>
             </div>
             <hr />
@@ -124,3 +161,54 @@ function UserRegistration(props: {setUserInfo: (u: UserInfo) => void}) {
     );
 }
 
+function LobbyConnection() {
+    const [loading, setLoading] = createSignal(false);
+
+    const joinLobby = (ev: Event) => {
+        ev.preventDefault();
+    };
+
+    const createLobby = async() => {
+        //
+        setLoading(true);
+    };
+
+    return (
+        <div class="pl-2 border-l border-c-border-1">
+            <h3 class="text-xl py-2 font-bold">Join a lobby:</h3>
+
+            <form onSubmit={joinLobby}>
+                <label for="lobby-join-input">
+                    Enter the ID of the lobby you want to join:
+                </label>
+                <br />
+                <input
+                    id="lobby-join-input"
+                    type="text"
+                    class="bg-c-bg text-c-on-bg py-1 px-2 rounded border border-c-border-1 my-2"
+                />
+                <br />
+                <button
+                    class="inline-block py-2 px-4 rounded bg-blue-600 text-white
+                    disabled:opacity-50 disabled:cursor-not-allowed"
+                    type="submit"
+                    disabled={loading() || true}
+                >
+                    Join lobby
+                </button>
+            </form>
+
+            <h3 class="text-xl pt-6 pb-2 font-bold">Create a new lobby:</h3>
+
+            <button
+                class="inline-block py-2 px-4 rounded bg-blue-600 text-white
+                    disabled:opacity-50 disabled:cursor-not-allowed"
+                onClick={createLobby}
+                disabled={loading()}
+            >
+                Create a new lobby
+            </button>
+
+        </div>
+    );
+}

src/utils.ts

@@ -5,7 +5,7 @@ export const backend = axios.create({
 });
 
 export type UserInfo = {
-    UserId: number,
+    UserId: string,
     Username: string,
 }