Compare commits

..

No commits in common. "b0b14bc5594ebd3c3e38fca368ef0161c2dddd8f" and "f47280d432126e4a65b8add0e633666d58091f85" have entirely different histories.

2 changed files with 6 additions and 94 deletions

View File

@ -9,41 +9,11 @@ const usernameKey = "Username";
export function Index() { export function Index() {
const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null); const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
const [validated, setValidated] = createSignal(false);
onMount(async() => { onMount(() => {
// attempt to get userinfo from localstorage // attempt to get userinfo from localstorage
// validate userinfo with backend // validate userinfo with backend
const UserId = localStorage.getItem(userIdKey); console.log("validating userinfo in localstorage");
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 ( return (
@ -56,17 +26,10 @@ export function Index() {
<div class="py-4"> <div class="py-4">
<h2 class="text-xl py-2 font-black">Play:</h2> <h2 class="text-xl py-2 font-black">Play:</h2>
<Show when={userInfo() === null}> <Show when={userInfo() === null}>
<UserRegistration setUserInfo={(i) => { <UserRegistration setUserInfo={setUserInfo} />
setValidated(true);
setUserInfo(i);
}}
/>
</Show> </Show>
<Show when={userInfo() !== null && !validated()}> <Show when={userInfo() !== null}>
<p>Validating user id...</p> <p>:D (user registered)</p>
</Show>
<Show when={userInfo() !== null && validated()}>
<LobbyConnection />
</Show> </Show>
</div> </div>
<hr /> <hr />
@ -161,54 +124,3 @@ 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>
);
}

View File

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