@appscode/design-system 1.0.43-alpha.154 → 1.0.43-alpha.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.154",
+  "version": "1.0.43-alpha.157",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v2/navbar/User.vue

@@ -24,7 +24,7 @@
           </div>
           <div class="profile-info" style="width: calc(100% - 60px)">
             <a
-              :href="`/${user.username}`"
+              :href="`${serverDomain}/${user.username}`"
               :title="user.username.toUpperCase()"
               class="line-break-anywhere is-ellipsis-1"
               >{{ user.username.toUpperCase() }}</a
@@ -36,7 +36,7 @@
           <li key="settings">
             <a :href="`${serverDomain}/user/settings/`">Settings</a>
           </li>
-          <li v-if="user.is_admin" key="site-admin">
+          <li v-if="isLoggedinUserAdmin" key="site-admin">
             <a :href="`${accountsDomain}/admin`">Site Administration</a>
           </li>
           <li
@@ -57,9 +57,9 @@
               <span>Switch Account</span>
               <span
                 ><i
-                  :class="`fa fa-angle-${
-                    dropDownStatus === 'open' ? 'up' : 'down'
-                  }`"
+                  :class="
+                    `fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`
+                  "
                 ></i
               ></span>
             </a>
@@ -142,36 +142,40 @@ export default {
     // active user info
     user: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     serverDomain: {
       type: String,
-      default: "",
+      default: ""
     },
     accountsDomain: {
       type: String,
-      default: "",
+      default: ""
     },
     showAccountSwitcher: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // all available organization list including personal account
     organizations: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
+    isLoggedinUserAdmin: {
+      type: Boolean,
+      default: false
+    }
   },
 
   components: {
     NavbarItem: () => import("./NavbarItem.vue"),
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
   },
 
   computed: {
     formattedOrganizations() {
       let activeUser;
-      const filteredList = this.organizations.filter((item) => {
+      const filteredList = this.organizations.filter(item => {
         if (item.username === this.user.username) {
           activeUser = item;
         } else {
@@ -183,13 +187,13 @@ export default {
       filteredList.unshift(activeUser);
 
       return filteredList || [];
-    },
+    }
   },
 
   data() {
     return {
       dropDownStatus: "close",
-      dropDownSectionHeight: null,
+      dropDownSectionHeight: null
     };
   },
 
@@ -206,7 +210,7 @@ export default {
     },
     onMouseLeave() {
       this.dropDownStatus = "close";
-    },
+    }
   },
 
   watch: {
@@ -222,9 +226,9 @@ export default {
         } else {
           this.dropDownSectionHeight = null;
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -234,4 +238,4 @@ export default {
 .line-break-anywhere {
   line-break: anywhere;
 }
-</style>
+</style>

package/vue-components/v3/navbar/User.vue

@@ -15,7 +15,12 @@
             <button class="camera-icon"></button>
           </div>
           <div class="profile-info" style="width: calc(100% - 60px);">
-            <p :title="user.username.toUpperCase()" class="line-break-anywhere is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
+            <a
+              :href="`${serverDomain}/${user.username}`"
+              :title="user.username.toUpperCase()"
+              class="line-break-anywhere is-ellipsis-1"
+              >{{ user.username.toUpperCase() }}</a
+            >
             <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
           </div>
         </div>
@@ -24,7 +29,7 @@
             <a :href="`${serverDomain}/user/settings/`">Settings</a>
           </li>
           <li v-if="user.is_admin" key="site-admin">
-            <a :href="`${serverDomain}/admin`">Site Administration</a>
+            <a :href="`${accountsDomain}/admin`">Site Administration</a>
           </li>
           <li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
             <a class="
@@ -104,7 +109,7 @@
             <a :href="`${serverDomain}/dashboard`"> Dashboard </a>
           </li>
           <li key="signout">
-            <a :href="`${serverDomain}/user/logout`"> Sign out </a>
+            <a :href="`${accountsDomain}/user/logout`"> Sign out </a>
           </li>
         </transition-group>
       </div>
@@ -126,6 +131,10 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    accountsDomain: {
+      type: String,
+      default: "",
+    },
     showAccountSwitcher: {
       type: Boolean,
       default: false,