allow dispay full name in UI if present

amidaware · Oct 21, 2024 · bd0566b · bd0566b
1 parent fe3604f
commit bd0566b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -157,7 +157,7 @@
 
         <AlertsIcon />
 
-        <q-btn-dropdown flat no-caps stretch :label="username || ''">
+        <q-btn-dropdown flat no-caps stretch :label="displayName || ''">
           <q-list>
             <q-item
               clickable
@@ -240,7 +240,7 @@ const {
   daysUntilCertExpires,
 } = storeToRefs(useDashboardStore());
 
-const { username } = storeToRefs(useAuthStore());
+const { displayName } = storeToRefs(useAuthStore());
 
 const darkMode = computed({
   get: () => {

diff --git a/src/stores/auth.ts b/src/stores/auth.ts
@@ -28,13 +28,17 @@ interface TOTPSetupResponse {
 export const useAuthStore = defineStore("auth", {
   state: () => ({
     username: useStorage("user_name", null),
+    name: useStorage("name", null),
     token: useStorage("access_token", null),
     ssoLoginProvider: useStorage("sso_provider", null),
   }),
   getters: {
     loggedIn: (state) => {
       return state.token !== null;
     },
+    displayName: (state) => {
+      return state.name ? state.name : state.username;
+    },
   },
   actions: {
     async checkCredentials(
@@ -45,12 +49,14 @@ export const useAuthStore = defineStore("auth", {
       if (!data.totp) {
         this.token = data.token;
         this.username = data.username;
+        this.name = data.name;
       }
       return data;
     },
     async login(credentials: LoginRequest) {
       const { data } = await axios.post("/v2/login/", credentials);
       this.username = data.username;
+      this.name = data.name;
       this.token = data.token;
       this.ssoLoginProvider = null;
 
@@ -64,6 +70,7 @@ export const useAuthStore = defineStore("auth", {
       }
       this.token = null;
       this.username = null;
+      this.name = null;
       this.ssoLoginProvider = null;
     },
     async setupTotp(): Promise<TOTPSetupResponse | false> {