diff --git a/resources/lang/en.json b/resources/lang/en.json
index f38dd2828..62a7153d7 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -10,6 +10,7 @@
"join_discord": "Join the Discord!",
"login_discord": "Login with Discord",
"logged_in": "Logged in!",
+ "log_out": "Log out",
"create_lobby": "Create Lobby",
"join_lobby": "Join Lobby",
"single_player": "Single Player",
diff --git a/src/client/Main.ts b/src/client/Main.ts
index ef6251560..eb6bb3631 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -31,7 +31,7 @@ import { generateCryptoRandomUUID } from "./Utils";
import "./components/baseComponents/Button";
import { OButton } from "./components/baseComponents/Button";
import "./components/baseComponents/Modal";
-import { discordLogin, isLoggedIn } from "./jwt";
+import { discordLogin, getUserMe, isLoggedIn, logOut } from "./jwt";
import "./styles.css";
export interface JoinLobbyEvent {
@@ -95,21 +95,9 @@ class Client {
const loginDiscordButton = document.getElementById(
"login-discord",
) as OButton;
- const claims = isLoggedIn();
- if (claims === false) {
- // Not logged in
- loginDiscordButton.disable = false;
- loginDiscordButton.translationKey = "main.login_discord";
- loginDiscordButton.addEventListener("click", discordLogin);
- } else {
- // Logged in
- loginDiscordButton.disable = true;
- loginDiscordButton.translationKey = "main.logged_in";
- // const avatarUrl = avatar
- // ? `https://cdn.discordapp.com/avatars/${id}/${avatar}.${avatar.startsWith("a_") ? "gif" : "png"}`
- // : `https://cdn.discordapp.com/embed/avatars/${Number(discriminator) % 5}.png`;
- // TODO: Update the page for logged in user
- }
+ const logoutDiscordButton = document.getElementById(
+ "logout-discord",
+ ) as OButton;
this.usernameInput = document.querySelector(
"username-input",
@@ -150,6 +138,41 @@ class Client {
hlpModal.open();
});
+ const claims = isLoggedIn();
+ if (claims === false) {
+ // Not logged in
+ loginDiscordButton.disable = false;
+ loginDiscordButton.translationKey = "main.login_discord";
+ loginDiscordButton.addEventListener("click", discordLogin);
+ logoutDiscordButton.hidden = true;
+ } else {
+ // JWT appears to be valid, assume we are logged in
+ loginDiscordButton.disable = true;
+ loginDiscordButton.translationKey = "main.logged_in";
+ logoutDiscordButton.hidden = false;
+ logoutDiscordButton.addEventListener("click", () => {
+ // Log out
+ logOut();
+ loginDiscordButton.disable = false;
+ loginDiscordButton.translationKey = "main.login_discord";
+ loginDiscordButton.addEventListener("click", discordLogin);
+ logoutDiscordButton.hidden = true;
+ });
+ // Look up the discord user object.
+ // TODO: Add caching
+ getUserMe().then((userMeResponse) => {
+ if (userMeResponse === false) {
+ // Not logged in
+ loginDiscordButton.disable = false;
+ loginDiscordButton.translationKey = "main.login_discord";
+ loginDiscordButton.addEventListener("click", discordLogin);
+ logoutDiscordButton.hidden = true;
+ return;
+ }
+ // TODO: Update the page for logged in user
+ });
+ }
+
const settingsModal = document.querySelector(
"user-setting",
) as UserSettingModal;
diff --git a/src/client/index.html b/src/client/index.html
index da463d4dd..d1101a0fc 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -219,6 +219,14 @@
block
>
+