feat: arbitrary profile picture

2022-03-04 05:56:52 +05:30
parent b7988b54c5
commit a8e7fd3434
38 changed files with 132 additions and 88 deletions
--- a/packages/hoppscotch-app/assets/icons/auth/email.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/email.svg
@@ -1,7 +1,15 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Email" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="teal"/><rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%"/><path fill="none" stroke="teal" stroke-width="20" d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Email"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="teal" />
+  <rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%" />
+  <path
+    fill="none"
+    stroke="teal"
+    stroke-width="20"
+    d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"
+  />
+</svg>
--- a/packages/hoppscotch-app/assets/icons/auth/github.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/github.svg
@@ -1,7 +1,12 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="GitHub" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#181717"/><path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="GitHub"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#181717" />
+  <path
+    fill="#fff"
+    d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
+  />
+</svg>
--- a/packages/hoppscotch-app/assets/icons/auth/google.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/google.svg
@@ -1,7 +1,24 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Google" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#fff"/><path fill="#4285f4" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#34a853" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fbbc02" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#ea4335" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Google"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#fff" />
+  <path
+    fill="#4285f4"
+    d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"
+  />
+  <path
+    fill="#34a853"
+    d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"
+  />
+  <path
+    fill="#fbbc02"
+    d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"
+  />
+  <path
+    fill="#ea4335"
+    d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"
+  />
+</svg>
--- a/packages/hoppscotch-app/assets/icons/auth/microsoft.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/microsoft.svg
@@ -1,11 +1,12 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Microsoft" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#fff"/><path
-d="M75 75v171h171v-171z" fill="#f25022"/><path
-d="M266 75v171h171v-171z" fill="#7fba00"/><path
-d="M75 266v171h171v-171z" fill="#00a4ef"/><path
-d="M266 266v171h171v-171z" fill="#ffb900"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Microsoft"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#fff" />
+  <path d="M75 75v171h171v-171z" fill="#f25022" />
+  <path d="M266 75v171h171v-171z" fill="#7fba00" />
+  <path d="M75 266v171h171v-171z" fill="#00a4ef" />
+  <path d="M266 266v171h171v-171z" fill="#ffb900" />
+</svg>
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -79,12 +79,15 @@
                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
                  "
                />
-                <ButtonSecondary
+                <ProfilePicture
                  v-else
                  v-tippy="{ theme: 'tooltip' }"
-                  :title="t('header.account')"
-                  class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-                  svg="user"
+                  :title="currentUser.displayName"
+                  :initial="currentUser.displayName"
+                  indicator
+                  :indicator-styles="
+                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                  "
                />
              </template>
              <div class="flex flex-col px-2 text-tiny" role="menu">
--- a/packages/hoppscotch-app/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/components/profile/Picture.vue
@@ -1,20 +1,31 @@
 <template>
  <div
    tabindex="0"
-    class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
  >
    <img
-      class="absolute object-cover object-center w-5 h-5 rounded-full transition bg-primaryDark"
+      v-if="url"
+      class="absolute object-cover object-center transition bg-primaryDark"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
      :src="url"
      :alt="alt"
      loading="lazy"
    />
-    <div class="absolute inset-0 rounded-full shadow-inner"></div>
+    <div
+      v-else
+      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :style="`background-color: ${toHex(initial)}`"
+    >
+      {{ initial.charAt(0).toUpperCase() }}
+    </div>
    <span
      v-if="indicator"
-      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="indicatorStyles"
+      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      :class="[`rounded-${rounded}`, indicatorStyles]"
    ></span>
+    <!-- w-5 h-5 rounded-lg -->
  </div>
 </template>

@@ -25,9 +36,7 @@ export default defineComponent({
  props: {
    url: {
      type: String,
-      default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
-        .toString(36)
-        .substring(7)}.svg?mood[]=happy`,
+      default: "",
    },
    alt: {
      type: String,
@@ -41,6 +50,34 @@ export default defineComponent({
      type: String,
      default: "bg-green-500",
    },
+    rounded: {
+      type: String,
+      default: "full",
+    },
+    size: {
+      type: String,
+      default: "5",
+    },
+    initial: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    toHex(initial) {
+      let hash = 0
+      if (initial.length === 0) return hash
+      for (let i = 0; i < initial.length; i++) {
+        hash = initial.charCodeAt(i) + ((hash << 5) - hash)
+        hash = hash & hash
+      }
+      let color = "#"
+      for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 255
+        color += `00${value.toString(16)}`.substr(-2)
+      }
+      return color
+    },
  },
 })
 </script>
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -35,17 +35,16 @@
            :title="member.user.displayName"
            class="inline-flex"
          >
-            <img
+            <ProfilePicture
              v-if="member.user.photoURL"
-              :src="member.user.photoURL"
+              :url="member.user.photoURL"
              :alt="member.user.displayName"
-              class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
-              loading="lazy"
+              class="ring-primary ring-2"
            />
-            <SmartIcon
+            <ProfilePicture
              v-else
-              name="user"
-              class="rounded-lg svg-icons bg-primaryLight ring-primary ring-2"
+              :initial="member.user.displayName"
+              class="ring-primary ring-2"
            />
          </div>
        </div>
--- a/packages/hoppscotch-app/locales/af.json
+++ b/packages/hoppscotch-app/locales/af.json
@@ -216,7 +216,6 @@
    "subscriptions": "Inskrywings"
  },
  "header": {
-    "account": "Rekening",
    "install_pwa": "Installeer toep",
    "login": "Teken aan",
    "save_workspace": "Stoor my werkspasie"
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/packages/hoppscotch-app/locales/ar.json
@@ -217,7 +217,6 @@
    "subscriptions": "الاشتراكات"
  },
  "header": {
-    "account": "حساب",
    "install_pwa": "تثبيت التطبيق",
    "login": "تسجيل الدخول",
    "save_workspace": "حفظ مساحة العمل الخاصة بي"
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/packages/hoppscotch-app/locales/ca.json
@@ -216,7 +216,6 @@
    "subscriptions": "Subscripcions"
  },
  "header": {
-    "account": "Compte",
    "install_pwa": "Instal·la l'aplicació",
    "login": "iniciar Sessió",
    "save_workspace": "Desa el meu espai de treball"
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -216,7 +216,6 @@
    "subscriptions": "订阅"
  },
  "header": {
-    "account": "帐户",
    "install_pwa": "安装应用",
    "login": "登录",
    "save_workspace": "保存我的工作区"
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/packages/hoppscotch-app/locales/cs.json
@@ -216,7 +216,6 @@
    "subscriptions": "Předplatné"
  },
  "header": {
-    "account": "Účet",
    "install_pwa": "Nainstalovat aplikaci",
    "login": "Přihlásit se",
    "save_workspace": "Uložit můj pracovní prostor"
--- a/packages/hoppscotch-app/locales/da.json
+++ b/packages/hoppscotch-app/locales/da.json
@@ -216,7 +216,6 @@
    "subscriptions": "Abonnementer"
  },
  "header": {
-    "account": "Konto",
    "install_pwa": "Installer app",
    "login": "Log på",
    "save_workspace": "Gem mit arbejdsområde"
--- a/packages/hoppscotch-app/locales/de.json
+++ b/packages/hoppscotch-app/locales/de.json
@@ -216,7 +216,6 @@
    "subscriptions": "Abonnements"
  },
  "header": {
-    "account": "Konto",
    "install_pwa": "App installieren",
    "login": "Anmeldung",
    "save_workspace": "Meinen Arbeitsbereich speichern"
--- a/packages/hoppscotch-app/locales/el.json
+++ b/packages/hoppscotch-app/locales/el.json
@@ -216,7 +216,6 @@
    "subscriptions": "Συνδρομές"
  },
  "header": {
-    "account": "λογαριασμός",
    "install_pwa": "Εγκατάσταση εφαρμογής",
    "login": "Σύνδεση",
    "save_workspace": "Αποθήκευση του χώρου εργασίας μου"
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -216,7 +216,6 @@
    "subscriptions": "Subscriptions"
  },
  "header": {
-    "account": "Account",
    "install_pwa": "Install app",
    "login": "Login",
    "save_workspace": "Save My Workspace"
--- a/packages/hoppscotch-app/locales/es.json
+++ b/packages/hoppscotch-app/locales/es.json
@@ -216,7 +216,6 @@
    "subscriptions": "Suscripciones"
  },
  "header": {
-    "account": "Cuenta",
    "install_pwa": "Instalar aplicación",
    "login": "Acceso",
    "save_workspace": "Guardar mi espacio de trabajo"
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/packages/hoppscotch-app/locales/fi.json
@@ -216,7 +216,6 @@
    "subscriptions": "Tilaukset"
  },
  "header": {
-    "account": "Tili",
    "install_pwa": "Asenna sovellus",
    "login": "Kirjaudu sisään",
    "save_workspace": "Tallenna työtila"
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/packages/hoppscotch-app/locales/fr.json
@@ -216,7 +216,6 @@
    "subscriptions": "Abonnements"
  },
  "header": {
-    "account": "Compte",
    "install_pwa": "Installer l'application",
    "login": "Connexion",
    "save_workspace": "Enregistrer mon espace de travail"
--- a/packages/hoppscotch-app/locales/he.json
+++ b/packages/hoppscotch-app/locales/he.json
@@ -216,7 +216,6 @@
    "subscriptions": "מנויים"
  },
  "header": {
-    "account": "חֶשְׁבּוֹן",
    "install_pwa": "התקן אפליקציה",
    "login": "התחברות",
    "save_workspace": "שמור את סביבת העבודה שלי"
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -216,7 +216,6 @@
    "subscriptions": "Feliratkozások"
  },
  "header": {
-    "account": "Fiók",
    "install_pwa": "Alkalmazás telepítése",
    "login": "Bejelentkezés",
    "save_workspace": "Saját munkaterület mentése"
--- a/packages/hoppscotch-app/locales/it.json
+++ b/packages/hoppscotch-app/locales/it.json
@@ -216,7 +216,6 @@
    "subscriptions": "Sottoscrizioni"
  },
  "header": {
-    "account": "Account",
    "install_pwa": "Installa l'applicazione",
    "login": "Accedi",
    "save_workspace": "Salva il mio spazio di lavoro"
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/packages/hoppscotch-app/locales/ja.json
@@ -216,7 +216,6 @@
    "subscriptions": "サブスクリプション"
  },
  "header": {
-    "account": "アカウント",
    "install_pwa": "アプリをインストールする",
    "login": "ログイン",
    "save_workspace": "ワークスペースを保存"
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/packages/hoppscotch-app/locales/ko.json
@@ -216,7 +216,6 @@
    "subscriptions": "구독"
  },
  "header": {
-    "account": "계정",
    "install_pwa": "앱을 설치",
    "login": "로그인",
    "save_workspace": "내 작업 공간 저장"
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/packages/hoppscotch-app/locales/nl.json
@@ -216,7 +216,6 @@
    "subscriptions": "Abonnementen"
  },
  "header": {
-    "account": "Rekening",
    "install_pwa": "Installeer app",
    "login": "Log in",
    "save_workspace": "Bewaar mijn werkruimte"
--- a/packages/hoppscotch-app/locales/no.json
+++ b/packages/hoppscotch-app/locales/no.json
@@ -216,7 +216,6 @@
    "subscriptions": "Abonnementer"
  },
  "header": {
-    "account": "Regnskap",
    "install_pwa": "Installer app",
    "login": "Logg Inn",
    "save_workspace": "Lagre arbeidsområdet mitt"
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/packages/hoppscotch-app/locales/pl.json
@@ -216,7 +216,6 @@
    "subscriptions": "Subskrypcje"
  },
  "header": {
-    "account": "Konto",
    "install_pwa": "Zainstaluj aplikację",
    "login": "Zaloguj sie",
    "save_workspace": "Zapisz mój obszar roboczy"
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -216,7 +216,6 @@
    "subscriptions": "Assinaturas"
  },
  "header": {
-    "account": "Conta",
    "install_pwa": "Instalar aplicativo",
    "login": "Conecte-se",
    "save_workspace": "Salvar meu espaço de trabalho"
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/packages/hoppscotch-app/locales/pt.json
@@ -216,7 +216,6 @@
    "subscriptions": "Assinaturas"
  },
  "header": {
-    "account": "Conta",
    "install_pwa": "Instalar aplicativo",
    "login": "Conecte-se",
    "save_workspace": "Salvar meu espaço de trabalho"
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/packages/hoppscotch-app/locales/ro.json
@@ -216,7 +216,6 @@
    "subscriptions": "Abonamente"
  },
  "header": {
-    "account": "Cont",
    "install_pwa": "Instalează aplicația",
    "login": "Autentificare",
    "save_workspace": "Salvați spațiul meu de lucru"
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/packages/hoppscotch-app/locales/ru.json
@@ -216,7 +216,6 @@
    "subscriptions": "Подписки"
  },
  "header": {
-    "account": "Счет",
    "install_pwa": "Установить приложение",
    "login": "Авторизоваться",
    "save_workspace": "Сохранить мою рабочую область"
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/packages/hoppscotch-app/locales/sr.json
@@ -217,7 +217,6 @@
    "subscriptions": "Претплате"
  },
  "header": {
-    "account": "Рачун",
    "install_pwa": "Инсталирати апликацију",
    "login": "Пријавите се",
    "save_workspace": "Сачувај мој радни простор"
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/packages/hoppscotch-app/locales/sv.json
@@ -216,7 +216,6 @@
    "subscriptions": "Prenumerationer"
  },
  "header": {
-    "account": "konto",
    "install_pwa": "Installera app",
    "login": "Logga in",
    "save_workspace": "Spara min arbetsyta"
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/packages/hoppscotch-app/locales/tr.json
@@ -216,7 +216,6 @@
    "subscriptions": "abonelikler"
  },
  "header": {
-    "account": "Hesap",
    "install_pwa": "Uygulamayı yükle",
    "login": "Giriş yap",
    "save_workspace": "Çalışma Alanımı Kaydet"
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/packages/hoppscotch-app/locales/tw.json
@@ -216,7 +216,6 @@
    "subscriptions": "訂閱"
  },
  "header": {
-    "account": "帳號",
    "install_pwa": "安裝應用程式",
    "login": "登入",
    "save_workspace": "儲存我的工作區"
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/packages/hoppscotch-app/locales/uk.json
@@ -216,7 +216,6 @@
    "subscriptions": "Підписки"
  },
  "header": {
-    "account": "Рахунок",
    "install_pwa": "Встановити додаток",
    "login": "Увійти",
    "save_workspace": "Зберегти мою робочу область"
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/packages/hoppscotch-app/locales/vi.json
@@ -216,7 +216,6 @@
    "subscriptions": "Đăng ký"
  },
  "header": {
-    "account": "Tài khoản",
    "install_pwa": "Cài đặt ứng dụng",
    "login": "Đăng nhập",
    "save_workspace": "Lưu không gian làm việc của tôi"
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -28,16 +28,20 @@
          ></div>
          <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
            <div class="flex items-end">
-              <img
+              <ProfilePicture
                v-if="currentUser.photoURL"
-                :src="currentUser.photoURL"
-                class="w-16 h-16 rounded-lg ring-primary ring-4"
-                :alt="`${currentUser.displayName}`"
+                :url="currentUser.photoURL"
+                :alt="currentUser.displayName"
+                class="ring-primary ring-4"
+                size="16"
+                rounded="lg"
              />
-              <SmartIcon
+              <ProfilePicture
                v-else
-                name="user"
-                class="svg-icons !w-16 !h-16 bg-primaryLight rounded-lg ring-primary ring-4"
+                :initial="currentUser.displayName"
+                rounded="lg"
+                size="16"
+                class="ring-primary ring-4"
              />
              <div class="ml-4">
                <label class="heading">