✨ User details from identity token

app/app.vue

@@ -23,13 +23,8 @@
 <script setup lang="ts">
 import {usePopup} from "~/components/ui/popup/Popup";
 import PopupTemplate from "~/components/ui/popup/PopupTemplate.vue";
-import {useAccountStore} from "~/auth/useAccountStore";
 
 const popup = computed(() => usePopup().get());
-
-onMounted(() => {
-    useAccountStore().init();
-})
 </script>
 
 <style>

app/auth/Account.ts

@@ -1,32 +1,20 @@
-import axios from "axios";
+import {jwtDecode} from "jwt-decode";
 
 export class Account
 {
-    firstname?: string;
-    lastname?: string;
-    username?: string;
-    email?: string;
-    password?: string;
-    roles?: string[];
-    initial?: boolean;
-
-    static get(onSuccess: (account: Account) => void)
-    {
-
-    }
-
-    static create(user: AccountCreation, onSuccess: () => void)
-    {
-
-    }
-}
-
-export class AccountCreation
-{
+    id?: string;
     firstname?: string;
     lastname?: string;
     email?: string;
-    password?: string;
-    username?: string;
-    role: string = "USER";
+}
+
+export function getAccount()
+{
+    const payload = jwtDecode(useCookie<string>("identity").value) as any;
+    const account = new Account();
+    account.id = payload.upn;
+    account.email = payload.email;
+    account.lastname = payload.lastname;
+    account.firstname = payload.firstname;
+    return account;
 }

app/auth/useAccountStore.ts

@@ -1,25 +0,0 @@
-import {Account} from "~/auth/Account";
-
-export const useAccountStore = defineStore('account', {
-    state: () => ({
-        account: undefined as Account | undefined
-    }),
-    getters: {
-        require: (state) =>
-        {
-            return (): Account | undefined =>
-            {
-                return state.account;
-            }
-        }
-    },
-    actions: {
-        init()
-        {
-            Account.get((account: Account) =>
-            {
-                this.account = account;
-            })
-        }
-    }
-})

app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="content-l">
-        <h1>Hello, Andreas Dinauer</h1>
+        <h1>Hello, {{account.firstname}} {{account.lastname}}</h1>
         <div class="col-2">
             <div class="tile-m spaced-center">
                 <p>Total Groups</p>
@@ -20,9 +20,12 @@
 import EventList from "~/components/events/EventList.vue";
 import type {Group} from "~/components/group/Group";
 import type {Artifact} from "~/components/artifact/Artifact";
+import {getAccount} from "~/auth/Account";
 
 const groups = useGet<Group[]>("/api/groups");
 const artifacts = useGet<Artifact[]>("/api/artifacts");
+
+const account = getAccount();
 </script>
 
 <style scoped>

app/pages/settings/index.vue

@@ -4,11 +4,15 @@
         <div class="col-3">
             <div class="tile-m">
                 <h3>User ID</h3>
-                <p>{{userId}}</p>
+                <p>{{account.id}}</p>
+            </div>
+            <div class="tile-m">
+                <h3>Name</h3>
+                <p>{{account.firstname}} {{account.lastname}}</p>
             </div>
             <div class="tile-m">
                 <h3>E-Mail</h3>
-                <p>andreas.j.dinauer@gmail.com</p>
+                <p>{{account.email}}</p>
             </div>
         </div>
         <h1>Access Tokens</h1>
@@ -45,8 +49,9 @@ import ContentRow from "~/components/ui/table/ContentRow.vue";
 import ContentCell from "~/components/ui/table/ContentCell.vue";
 import dayjs from "dayjs";
 import {jwtDecode} from "jwt-decode";
+import {getAccount} from "~/auth/Account";
 
-const userId = (jwtDecode(useCookie<string>("identity").value) as any).upn;
+const account = getAccount();
 
 const tokens: Ref<Token[] | undefined> = ref(undefined);
 onMounted(() => {