fix(gui): add unique avatar for user

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/account/UserList.vue

@@ -172,7 +172,9 @@ const copyPasswordResetUrl = async (user: User) => {
         <!-- Email -->
         <a-table-column key="email" :title="$t('labels.email')" data-index="email">
           <template #default="{ text }">
-            <div>
+            <div class="flex items-center">
+              <GeneralAvatar size="20" :name="text" class="mr-2" />
+
               {{ text }}
             </div>
           </template>

packages/nc-gui/components/general/Avatar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Avatar from 'vue-boring-avatars'
+
+const {
+  name,
+  colors = ['#FA8CB1', '#FDC5C9', '#f8d8c3', '#cfb699', '#9e6d4e'],
+  size = 30,
+  variant = 'beam',
+} = defineProps<{ name: string; colors?: string; size?: number | string; variant?: string }>()
+</script>
+
+<template>
+  <Avatar :size="size" :variant="variant" :colors="colors" :name="name" />
+</template>

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -253,7 +253,9 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
       </div>
 
       <div v-for="(user, index) of users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2 nc-user-row">
-        <div class="flex w-4/6 flex-wrap nc-user-email">
+        <div class="flex w-4/6 flex-wrap nc-user-email items-center">
+          <GeneralAvatar size="20" :name="user.email" class="mr-2" />
+
           {{ user.email }}
         </div>
 

packages/nc-gui/layouts/base.vue

@@ -81,17 +81,14 @@ hooks.hook('page:finish', () => {
 
         <template v-if="signedIn">
           <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-user-accounts-menu">
-            <MdiDotsVertical
-              data-testid="nc-menu-accounts"
-              class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts text-white"
-              @click.prevent
-            />
+            <GeneralAvatar data-testid="nc-menu-accounts" class="cursor-pointer nc-menu-accounts" :name="email" @click.prevent />
 
             <template #overlay>
               <a-menu class="!py-0 leading-8 !rounded">
                 <a-menu-item key="0" data-testid="nc-menu-accounts__user-settings" class="!rounded-t">
                   <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/account/users">
-                    <MdiAccountCircleOutline class="mt-1 group-hover:text-accent" />&nbsp;
+                    <GeneralAvatar size="16" :name="email" />
+                    &nbsp;
                     <div class="prose group-hover:text-primary">
                       <div>Account</div>
                       <div class="text-xs text-gray-500">{{ email }}</div>

packages/nc-gui/package-lock.json

@@ -35,6 +35,7 @@
         "tinycolor2": "^1.4.2",
         "unique-names-generator": "^4.7.1",
         "validator": "^13.7.0",
+        "vue-boring-avatars": "^1.3.0",
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.2.2",
@@ -16831,6 +16832,14 @@
         "@vue/shared": "3.2.41"
       }
     },
+    "node_modules/vue-boring-avatars": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-boring-avatars/-/vue-boring-avatars-1.3.0.tgz",
+      "integrity": "sha512-X0Ur6+aYE8jXjKyY/LaWKrZ+FeJmc4xsirdz/lLuvm68wiokJc26Y9WpYPDuS1L2GwbvRDqLrnd9F2eL46buzA==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-bundle-renderer": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-0.4.4.tgz",
@@ -29719,6 +29728,12 @@
         "@vue/shared": "3.2.41"
       }
     },
+    "vue-boring-avatars": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vue-boring-avatars/-/vue-boring-avatars-1.3.0.tgz",
+      "integrity": "sha512-X0Ur6+aYE8jXjKyY/LaWKrZ+FeJmc4xsirdz/lLuvm68wiokJc26Y9WpYPDuS1L2GwbvRDqLrnd9F2eL46buzA==",
+      "requires": {}
+    },
     "vue-bundle-renderer": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-0.4.4.tgz",

packages/nc-gui/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
+    "@types/file-saver": "^2.0.5",
     "@vue-flow/additional-components": "^1.2.0",
     "@vue-flow/core": "^1.3.0",
     "@vuelidate/core": "^2.0.0-alpha.44",
@@ -41,7 +42,6 @@
     "ant-design-vue": "^3.2.11",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
-    "@types/file-saver": "^2.0.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
@@ -58,6 +58,7 @@
     "tinycolor2": "^1.4.2",
     "unique-names-generator": "^4.7.1",
     "validator": "^13.7.0",
+    "vue-boring-avatars": "^1.3.0",
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -528,7 +528,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                           class="nc-project-menu-item group !no-underline"
                           to="/account/users"
                         >
-                          <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
+                          <GeneralAvatar size="16" :name="email" />
+                          &nbsp;
                           <div class="prose-sm group-hover:text-primary">
                             <div>Account</div>
                             <div class="text-xs text-gray-500">{{ email }}</div>