Finalize login dialog and add a token service

wordle-web/app.vue

@@ -17,6 +17,7 @@
           <v-card>
             <v-card-text>
               <v-btn
+              v-if="!tokenService.isLoggedIn()"
                 @click="showLoginDialog = true"
                 class="mb-5"
                 flat
@@ -25,6 +26,9 @@
                 <v-icon> mdi-lock </v-icon>
                 Login
               </v-btn>
+              <div v-else>
+                {{  tokenService.getUserName() }}
+              </div>
               <br />
               <v-btn @click="toggleTheme" class="mb-5" flat color="primary">
                 <v-icon> mdi-theme-light-dark </v-icon>
@@ -51,12 +55,15 @@
 <script setup lang="ts">
 import { useTheme } from "vuetify";
 import nuxtStorage from "nuxt-storage";
+import TokenService from "@/scripts/TokenService";
 
 const router = useRouter();
 const theme = useTheme();
 const showHelpDialog = ref(false);
 const showLoginDialog = ref(false);
 
+const tokenService = new TokenService();
+
 onMounted(() => {
   var defaultTheme = nuxtStorage.localStorage.getData("theme");
   theme.global.name.value = defaultTheme ?? "dark";

wordle-web/components/SigninDialog.vue

@@ -30,6 +30,9 @@
 
 <script setup lang="ts">
 import axios from "axios";
+import TokenService from "@/scripts/TokenService";
+
+const tokenService = new TokenService();
 
 const modelValue = defineModel<boolean>({ default: false });
 const showPassword = ref(false);
@@ -38,13 +41,14 @@ const password = ref("");
 const errorMessage = ref("");
 
 function signIn() {
-    errorMessage.value = "";
+  errorMessage.value = "";
   axios
     .post("/Token/GetToken", {
       username: userName.value,
       password: password.value,
     })
     .then((response) => {
+      tokenService.setToken(response.data.token);
       modelValue.value = false;
     })
     .catch((error) => {

wordle-web/scripts/tokenService.ts

@@ -0,0 +1,25 @@
+export default class TokenService {
+  private tokenKey: string = "token";
+
+  public setToken(token: string) {
+    localStorage.setItem(this.tokenKey, token);
+  }
+
+  public getToken(): string {
+    return localStorage.getItem(this.tokenKey) ?? "";
+  }
+
+  public isLoggedIn(): boolean {
+    // Won't work if the token is expired
+    return this.getToken() !== "";
+  }
+
+  public getUserName() {
+    const token = this.getToken();
+    if (token === "") {
+      return "";
+    }
+    console.log(JSON.parse(atob(token.split(".")[1])));
+    return JSON.parse(atob(token.split(".")[1])).userName;
+  }
+}