From cb9e764508dfcbde30e4dbe5486677c279e28c22 Mon Sep 17 00:00:00 2001
From: Meghan <Meg.Woodford@IntelliTect.com>
Date: Tue, 21 May 2024 15:54:53 -0700
Subject: [PATCH] Finalize login dialog and add a token service

---
 wordle-web/app.vue                     |  7 +++++++
 wordle-web/components/SigninDialog.vue |  6 +++++-
 wordle-web/scripts/tokenService.ts     | 25 +++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 wordle-web/scripts/tokenService.ts

diff --git a/wordle-web/app.vue b/wordle-web/app.vue
index 5e20a8dc..7b005d2f 100644
--- a/wordle-web/app.vue
+++ b/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";
diff --git a/wordle-web/components/SigninDialog.vue b/wordle-web/components/SigninDialog.vue
index 3fff9383..7efb0473 100644
--- a/wordle-web/components/SigninDialog.vue
+++ b/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) => {
diff --git a/wordle-web/scripts/tokenService.ts b/wordle-web/scripts/tokenService.ts
new file mode 100644
index 00000000..20516cdd
--- /dev/null
+++ b/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;
+  }
+}