docs(user): add user dashboard

vuetifyjs · Sep 27, 2023 · a62b689 · a62b689
1 parent 0c40304
commit a62b689
Show file tree

Hide file tree

Showing 24 changed files with 400 additions and 154 deletions.
diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
@@ -9,6 +9,10 @@
   import { useI18n } from 'vue-i18n'
   import { useRoute, useRouter } from 'vue-router'
   import { useTheme } from 'vuetify'
+  import { useAuth0 } from '@/plugins/auth'
+
+  // Stores
+  import { useAuthStore } from '@/store/auth'
   import { useUserStore } from '@/store/user'
   import { usePwaStore } from '@/store/pwa'
 
@@ -26,6 +30,8 @@
   const route = useRoute()
   const theme = useTheme()
   const { locale } = useI18n()
+  const auth = useAuthStore()
+  const auth0 = useAuth0()
 
   const path = computed(() => route.path.replace(`/${locale.value}/`, ''))
 
@@ -67,6 +73,14 @@
   const systemTheme = ref('light')
   if (IN_BROWSER) {
     let media: MediaQueryList
+
+    watch(auth0.user, async val => {
+      if (!val?.sub) return
+
+      await auth.getUser()
+      auth.verifyUserSponsorship()
+    }, { immediate: true })
+
     watch(() => user.theme, val => {
       if (val === 'system') {
         media = getMatchMedia()!

diff --git a/packages/docs/src/components/app/GitHubLogin.vue b/packages/docs/src/components/app/GitHubLogin.vue
@@ -30,22 +30,17 @@
       <div class="d-flex align-center">
         <span class="me-1">{{ user.name }}</span>
 
-        <v-icon v-if="auth.admin" color="primary" icon="$vuetify" size="12" />
-
-        <v-icon v-if="isSponsoring" icon="mdi-crown" color="#e98b20" size="12" />
+        <user-badges size="12" />
       </div>
     </template>
 
     <template #append>
-      <v-fade-transition leave-absolute>
-        <v-icon
-          :key="app.settings"
-          :icon="app.settings ? 'mdi-cog' : 'mdi-cog-outline'"
-          class="me-4"
-          size="small"
-          @click="app.settings = !app.settings"
-        />
-      </v-fade-transition>
+      <v-icon
+        icon="mdi-view-dashboard-outline"
+        class="me-4"
+        size="small"
+        @click="onClickDashboard"
+      />
 
       <v-icon
         icon="mdi-logout-variant"
@@ -58,29 +53,24 @@
 </template>
 
 <script setup>
+  // Components
+  import UserBadges from '@/components/user/UserBadges.vue'
+
   // Composables
   import { useAuth0 } from '@/plugins/auth'
   import { useI18n } from 'vue-i18n'
+  import { useRouter } from 'vue-router'
 
   // Utilities
-  import { computed } from 'vue'
-
-  // Stores
-  import { useAppStore } from '@/store/app'
-  import { useAuthStore } from '@/store/auth'
+  import { rpath } from '@/util/routes'
 
-  const app = useAppStore()
-  const auth = useAuthStore()
-  const { loginWithPopup, user, logout, isAuthenticated } = useAuth0()
   const { t } = useI18n()
+  const router = useRouter()
+  const { loginWithPopup, user, logout, isAuthenticated } = useAuth0()
 
-  const isSponsoring = computed(() => {
-    if (!auth.sponsor) return false
-
-    const sponsor = Array.isArray(auth.sponsor) ? auth.sponsor : [auth.sponsor]
-
-    return sponsor.find(s => s.tier.monthlyPriceInDollars >= 1)
-  })
+  function onClickDashboard () {
+    router.push(rpath('/user/dashboard/'))
+  }
 
   function onClickLogout () {
     logout({ logoutParams: { returnTo: window.location.origin } })

diff --git a/packages/docs/src/components/app/bar/Bar.vue b/packages/docs/src/components/app/bar/Bar.vue
@@ -32,19 +32,21 @@
         <app-bar-enterprise-link />
       </template>
 
-      <app-vertical-divider v-if="mdAndUp" />
+      <template v-if="!user.quickbar">
+        <app-vertical-divider v-if="mdAndUp" />
 
-      <app-bar-theme-toggle />
+        <app-bar-theme-toggle />
 
-      <app-bar-store-link v-if="lgAndUp" />
+        <app-bar-store-link v-if="lgAndUp" />
 
-      <app-bar-jobs-link v-if="lgAndUp" />
+        <app-bar-jobs-link v-if="lgAndUp" />
 
-      <app-bar-notifications-menu />
+        <app-bar-notifications-menu />
 
-      <app-bar-settings-toggle />
+        <app-bar-settings-toggle />
 
-      <app-bar-language-menu v-if="smAndUp" />
+        <app-bar-language-menu v-if="smAndUp" />
+      </template>
     </template>
   </v-app-bar>
 </template>
@@ -72,10 +74,14 @@
   import { useDisplay, useTheme } from 'vuetify'
   import { useRoute } from 'vue-router'
 
+  // Stores
+  import { useUserStore } from '@/store/user'
+
   // Utilities
   import { computed } from 'vue'
 
   const app = useAppStore()
+  const user = useUserStore()
   const { smAndUp, mdAndUp, lgAndUp, mdAndDown } = useDisplay()
   const route = useRoute()
   const theme = useTheme()

diff --git a/packages/docs/src/components/app/settings/AdvancedOptions.vue b/packages/docs/src/components/app/settings/AdvancedOptions.vue
@@ -1,36 +1,14 @@
 <template>
-  <div class="ps-1 mb-3">
-    <v-label :text="t('display')" class="mb-2 font-weight-medium" />
-
-    <v-messages :messages="t('display-message')" active />
-  </div>
-
-  <ad-option />
-
-  <br>
-
-  <quickbar-option />
-
-  <br>
-
-  <v-divider />
-
-  <br>
-
-  <div class="ps-1 mb-3">
+  <div class="mb-3">
     <v-label :text="t('communication')" class="mb-2 font-weight-medium" />
 
     <v-messages :messages="t('communication-message')" active />
   </div>
 
   <banner-option />
 
-  <br>
-
   <notifications-option />
 
-  <br>
-
   <div class="d-flex justify-end">
     <v-btn
       :text="t('reset-all')"
@@ -41,22 +19,16 @@
     />
   </div>
 
-  <br>
-
-  <v-divider />
-
-  <br>
+  <v-divider class="my-3" />
 
   <developer-mode />
 </template>
 
 <script setup>
   // Components
-  import AdOption from './options/AdOption.vue'
   import BannerOption from './options/BannerOption.vue'
   import DeveloperMode from './DeveloperMode.vue'
   import NotificationsOption from './options/NotificationsOption.vue'
-  import QuickbarOption from './options/QuickbarOption.vue'
 
   // Composables
   import { useI18n } from 'vue-i18n'

diff --git a/packages/docs/src/components/app/settings/Drawer.vue b/packages/docs/src/components/app/settings/Drawer.vue
@@ -20,7 +20,7 @@
 
     <v-divider />
 
-    <v-container class="px-1 py-3">
+    <v-container class="px-3 py-3">
       <options />
     </v-container>
 
@@ -36,27 +36,13 @@
   import Options from '@/components/app/settings/Options.vue'
 
   // Composables
-  import { useAuth0 } from '@/plugins/auth'
   import { useRtl } from 'vuetify'
   import { useI18n } from 'vue-i18n'
 
   // Stores
   import { useAppStore } from '@/store/app'
-  import { useAuthStore } from '@/store/auth'
-
-  // Utilities
-  import { watch } from 'vue'
 
   const app = useAppStore()
-  const auth = useAuthStore()
-  const auth0 = useAuth0()
   const { t } = useI18n()
   const { isRtl } = useRtl()
-
-  watch(auth0.user, async val => {
-    if (!val?.sub) return
-
-    await auth.getUser()
-    auth.verifyUserSponsorship()
-  }, { immediate: true })
 </script>
diff --git a/packages/docs/src/components/app/settings/Options.vue b/packages/docs/src/components/app/settings/Options.vue
@@ -1,43 +1,35 @@
 <template>
-  <div class="px-2">
-    <div class="ps-1 mb-3">
+  <div>
+    <div class="mb-3">
       <v-label :text="t('theme')" class="mb-2 font-weight-medium" />
 
       <v-messages :messages="t('theme-message')" active />
     </div>
 
     <theme-option />
 
-    <v-divider class="my-3" />
+    <v-divider class="mt-4 mb-3" />
 
-    <div class="ps-1 mb-3">
+    <div class="mb-3">
       <v-label :text="t('general')" class="mb-2 font-weight-medium" />
 
       <v-messages :messages="t('general-message')" active />
     </div>
 
-    <ad-option />
-
     <code-option />
 
     <api-option />
 
     <slash-search-option />
 
     <sync-option />
-
-    <v-divider class="my-3" />
-
-    <developer-mode />
   </div>
 </template>
 
 <script setup>
   // Components
-  import AdOption from '@/components/app/settings/options/AdOption.vue'
   import ApiOption from '@/components/app/settings/options/ApiOption.vue'
   import CodeOption from '@/components/app/settings/options/CodeOption.vue'
-  import DeveloperMode from '@/components/app/settings/DeveloperMode.vue'
   import SlashSearchOption from '@/components/app/settings/options/SlashSearchOption.vue'
   import SyncOption from '@/components/app/settings/options/SyncOption.vue'
   import ThemeOption from '@/components/app/settings/options/ThemeOption.vue'

diff --git a/packages/docs/src/components/app/settings/Perks.vue b/packages/docs/src/components/app/settings/Perks.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <ad-option />
+
+    <quickbar-option />
+  </div>
+</template>
+
+<script setup>
+// Components
+  import AdOption from '@/components/app/settings/options/AdOption.vue'
+  import QuickbarOption from '@/components/app/settings/options/QuickbarOption.vue'
+</script>
diff --git a/packages/docs/src/components/app/settings/options/AdOption.vue b/packages/docs/src/components/app/settings/options/AdOption.vue
@@ -2,67 +2,29 @@
   <v-defaults-provider
     :defaults="{
       VIcon: {
-        color: user.disableAds && canToggle ? 'primary' : 'disabled'
+        color: user.disableAds && auth.isSubscriber ? 'primary' : 'disabled'
       }
     }"
   >
     <settings-switch
       v-model="user.disableAds"
-      :readonly="!canToggle"
+      :disabled="!auth.isSubscriber"
       :label="t('disable-ads')"
       :messages="t('disable-ads-message')"
-      :disabled="!canToggle"
+      :readonly="!auth.isSubscriber"
     />
-
-    <v-btn
-      v-if="!canToggle"
-      :href="isAuthenticated ? 'https://github.com/sponsors/johnleider' : undefined"
-      :text="isAuthenticated ? t('subscribe-to-unlock') : t('login-with-github')"
-      block
-      class="mb-3 text-none"
-      color="surface-variant"
-      prepend-icon="mdi-github"
-      rel="noopener"
-      size="small"
-      target="_blank"
-      variant="outlined"
-      @click="onClick"
-    >
-      <template #prepend>
-        <v-icon color="surface-variant" />
-      </template>
-    </v-btn>
   </v-defaults-provider>
 </template>
 
 <script setup>
   // Composables
   import { useI18n } from 'vue-i18n'
-  import { useAuth0 } from '@/plugins/auth'
 
   // Stores
   import { useAuthStore } from '@/store/auth'
   import { useUserStore } from '@/store/user'
 
-  // Utilities
-  import { computed } from 'vue'
-
   const { t } = useI18n()
   const auth = useAuthStore()
   const user = useUserStore()
-  const { isAuthenticated, loginWithPopup } = useAuth0()
-
-  const isSponsoring = computed(() => {
-    if (!auth.sponsor) return false
-
-    const sponsor = Array.isArray(auth.sponsor) ? auth.sponsor : [auth.sponsor]
-
-    return sponsor.find(s => s.tier.monthlyPriceInDollars >= 1)
-  })
-
-  const canToggle = computed(() => auth.admin || isSponsoring.value)
-
-  function onClick () {
-    if (!isAuthenticated.value) loginWithPopup()
-  }
 </script>