feat: init profile page

packages/hoppscotch-app/assets/icons/verified.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>

packages/hoppscotch-app/components/app/Header.vue

@@ -69,6 +69,12 @@
                 svg="user"
               />
             </template>
+            <SmartItem
+              to="/profile"
+              svg="user"
+              :label="$t('navigation.profile')"
+              @click.native="$refs.user.tippy().hide()"
+            />
             <SmartItem
               to="/settings"
               svg="settings"

packages/hoppscotch-app/components/teams/index.vue

@@ -1,17 +1,6 @@
 <template>
   <AppSection label="teams">
-    <h4 class="text-secondaryDark">
-      {{ $t("team.title") }}
-    </h4>
-    <div class="mt-1 text-secondaryLight">
-      <SmartAnchor
-        :label="`${$t('team.join_beta')}`"
-        to="https://hoppscotch.io/beta"
-        blank
-        class="link"
-      />
-    </div>
-    <div class="space-y-4 mt-4">
+    <div class="space-y-4 p-4">
       <ButtonSecondary
         :label="`${$t('team.create_new')}`"
         outline
@@ -37,7 +26,7 @@
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
-        class="grid gap-4 sm:grid-cols-2 md:grid-cols-3"
+        class="grid gap-4 sm:grid-cols-3 md:grid-cols-4"
       >
         <TeamsTeam
           v-for="(team, index) in myTeams.data.right.myTeams"

packages/hoppscotch-app/locales/en.json

@@ -246,6 +246,7 @@
   "navigation": {
     "doc": "Docs",
     "graphql": "GraphQL",
+    "profile": "Profile",
     "realtime": "Realtime",
     "rest": "REST",
     "settings": "Settings"

packages/hoppscotch-app/pages/profile.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="py-8 px-4">
+        <div v-if="currentUser === null">
+          <ButtonPrimary
+            :label="$t('auth.login')"
+            @click.native="showLogin = true"
+          />
+        </div>
+        <div v-else class="space-y-4">
+          <div class="flex px-4 items-center">
+            <img
+              v-if="currentUser.photoURL"
+              :src="currentUser.photoURL"
+              class="rounded-full h-16 w-16"
+            />
+            <SmartIcon v-else name="user" class="svg-icons" />
+            <div class="ml-4">
+              <label class="heading">
+                {{ currentUser.displayName || $t("state.nothing_found") }}
+              </label>
+              <p class="flex text-secondaryLight items-center">
+                {{ currentUser.email || $t("state.nothing_found") }}
+                <SmartIcon
+                  name="verified"
+                  v-if="currentUser.emailVerified"
+                  class="ml-2 text-green-500 svg-icons"
+                />
+              </p>
+            </div>
+          </div>
+          <SmartTabs styles="sticky bg-primary z-10 top-0">
+            <SmartTab
+              :id="'sync'"
+              :label="$t('settings.account')"
+              :selected="true"
+            >
+              <section class="p-4">
+                <h4 class="font-semibold text-secondaryDark">
+                  {{ $t("settings.sync") }}
+                </h4>
+                <div class="mt-1 text-secondaryLight">
+                  {{ $t("settings.sync_description") }}
+                </div>
+                <div class="space-y-4 py-4">
+                  <div class="flex items-center">
+                    <SmartToggle
+                      :on="SYNC_COLLECTIONS"
+                      @change="
+                        toggleSettings('syncCollections', !SYNC_COLLECTIONS)
+                      "
+                    >
+                      {{ $t("settings.sync_collections") }}
+                    </SmartToggle>
+                  </div>
+                  <div class="flex items-center">
+                    <SmartToggle
+                      :on="SYNC_ENVIRONMENTS"
+                      @change="
+                        toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
+                      "
+                    >
+                      {{ $t("settings.sync_environments") }}
+                    </SmartToggle>
+                  </div>
+                  <div class="flex items-center">
+                    <SmartToggle
+                      :on="SYNC_HISTORY"
+                      @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
+                    >
+                      {{ $t("settings.sync_history") }}
+                    </SmartToggle>
+                  </div>
+                </div>
+              </section>
+            </SmartTab>
+            <SmartTab
+              v-if="currentBackendUser && currentBackendUser.eaInvited"
+              :id="'teams'"
+              :label="$t('team.title')"
+            >
+              <AppSection label="teams">
+                <Teams />
+              </AppSection>
+            </SmartTab>
+          </SmartTabs>
+        </div>
+      </div>
+      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { applySetting, SettingsType, useSetting } from "~/newstore/settings"
+import { KeysMatching } from "~/types/ts-utils"
+
+export default defineComponent({
+  setup() {
+    return {
+      SYNC_COLLECTIONS: useSetting("syncCollections"),
+      SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
+      SYNC_HISTORY: useSetting("syncHistory"),
+      currentUser: useReadonlyStream(currentUser$, currentUser$.value),
+      currentBackendUser: useReadonlyStream(
+        currentUserInfo$,
+        currentUserInfo$.value
+      ),
+    }
+  },
+  data() {
+    return {
+      showLogin: false,
+    }
+  },
+  head() {
+    return {
+      title: `${this.$t("navigation.profile")} • Hoppscotch`,
+    }
+  },
+  methods: {
+    applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
+      applySetting(key, value)
+    },
+    toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
+      name: K,
+      value: SettingsType[K]
+    ) {
+      this.applySetting(name, value)
+    },
+  },
+})
+</script>

packages/hoppscotch-app/pages/settings.vue

@@ -1,104 +1,6 @@
 <template>
   <div>
     <div class="divide-y divide-dividerLight space-y-8">
-      <div class="md:grid md:gap-4 md:grid-cols-3">
-        <div class="p-8 md:col-span-1">
-          <h3 class="heading">
-            {{ $t("settings.account") }}
-          </h3>
-          <p class="mt-1 text-secondaryLight">
-            {{ $t("settings.account_description") }}
-          </p>
-        </div>
-        <div class="p-8 md:col-span-2">
-          <div v-if="currentUser === null">
-            <ButtonPrimary
-              :label="`${$t('auth.login')}`"
-              @click.native="showLogin = true"
-            />
-          </div>
-          <div v-else class="space-y-8">
-            <section>
-              <h4 class="font-semibold text-secondaryDark">
-                {{ $t("settings.user") }}
-              </h4>
-              <div class="space-y-4 py-4">
-                <div class="flex items-start">
-                  <div class="flex items-center">
-                    <img
-                      v-if="currentUser.photoURL"
-                      :src="currentUser.photoURL"
-                      class="rounded-full h-5 w-5"
-                    />
-                    <SmartIcon v-else name="user" class="svg-icons" />
-                  </div>
-                  <div class="ml-4">
-                    <label>
-                      {{ currentUser.displayName || $t("state.nothing_found") }}
-                    </label>
-                    <p class="mt-1 text-secondaryLight">
-                      {{ $t("settings.account_name_description") }}
-                    </p>
-                  </div>
-                </div>
-                <div class="flex items-start">
-                  <div class="flex items-center">
-                    <SmartIcon name="at-sign" class="svg-icons" />
-                  </div>
-                  <div class="ml-4">
-                    <label>
-                      {{ currentUser.email || $t("state.nothing_found") }}
-                    </label>
-                    <p class="mt-1 text-secondaryLight">
-                      {{ $t("settings.account_email_description") }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </section>
-            <Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
-            <section>
-              <h4 class="font-semibold text-secondaryDark">
-                {{ $t("settings.sync") }}
-              </h4>
-              <div class="mt-1 text-secondaryLight">
-                {{ $t("settings.sync_description") }}
-              </div>
-              <div class="space-y-4 py-4">
-                <div class="flex items-center">
-                  <SmartToggle
-                    :on="SYNC_COLLECTIONS"
-                    @change="
-                      toggleSettings('syncCollections', !SYNC_COLLECTIONS)
-                    "
-                  >
-                    {{ $t("settings.sync_collections") }}
-                  </SmartToggle>
-                </div>
-                <div class="flex items-center">
-                  <SmartToggle
-                    :on="SYNC_ENVIRONMENTS"
-                    @change="
-                      toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
-                    "
-                  >
-                    {{ $t("settings.sync_environments") }}
-                  </SmartToggle>
-                </div>
-                <div class="flex items-center">
-                  <SmartToggle
-                    :on="SYNC_HISTORY"
-                    @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
-                  >
-                    {{ $t("settings.sync_history") }}
-                  </SmartToggle>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
@@ -325,7 +227,6 @@
         </div>
       </div>
     </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <SmartConfirmModal
       :show="confirmRemove"
       :title="`${$t('confirm.remove_telemetry')} ${$t(
@@ -344,7 +245,6 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 import {
   hasExtensionInstalled,
   hasChromeExtensionInstalled,
@@ -357,9 +257,7 @@ import {
   useSetting,
 } from "~/newstore/settings"
 import type { KeysMatching } from "~/types/ts-utils"
-import { currentUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig } from "~/newstore/localpersistence"
-import { useReadonlyStream } from "~/helpers/utils/composables"
 
 type SettingsType = typeof defaultSettings
 
@@ -371,17 +269,9 @@ export default defineComponent({
       PROXY_KEY: useSetting("PROXY_KEY"),
       EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
-      SYNC_COLLECTIONS: useSetting("syncCollections"),
-      SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
-      SYNC_HISTORY: useSetting("syncHistory"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
-      currentUser: useReadonlyStream(currentUser$, currentUser$.value),
-      currentBackendUser: useReadonlyStream(
-        currentUserInfo$,
-        currentUserInfo$.value
-      ),
     }
   },
   data() {
@@ -395,9 +285,7 @@ export default defineComponent({
 
       clearIcon: "rotate-ccw",
 
-      showLogin: false,
-
-      active: getLocalConfig("THEME_COLOR") || "indigo",
+      active: getLocalConfig("THEME_COLOR") || "blue",
       confirmRemove: false,
     }
   },