feat(fe2): /profile route for user profile edit [WBX-66] (#2015)

* feat(fe2): /profile route for profile edit dialog * making dialogs render in SSR
specklesystems · Feb 7, 2024 · e65caad · e65caad
1 parent 9caa2a3
commit e65caad
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 13 deletions.
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -148,6 +148,7 @@ import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { useTheme, AppTheme } from '~~/lib/core/composables/theme'
 import { useServerInfo } from '~/lib/core/composables/server'
 import type { RouteLocationRaw } from 'vue-router'
+import { homeRoute, profileRoute } from '~/lib/common/helpers/route'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -158,14 +159,15 @@ const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, setTheme } = useTheme()
 const { serverInfo } = useServerInfo()
 const router = useRouter()
+const route = useRoute()
 
 const showInviteDialog = ref(false)
 const showProfileEditDialog = ref(false)
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
-
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
+const isProfileRoute = computed(() => route.path === profileRoute)
 
 const toggleInviteDialog = () => {
   showInviteDialog.value = true
@@ -186,4 +188,15 @@ const goToConnectors = () => {
 const goToServerManagement = () => {
   router.push('/server-management')
 }
+
+watch(
+  isProfileRoute,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      showProfileEditDialog.value = true
+      void router.replace({ path: homeRoute, force: true }) // in-place replace
+    }
+  },
+  { immediate: true }
+)
 </script>
diff --git a/packages/frontend-2/components/project/page/stats-block/Settings.vue b/packages/frontend-2/components/project/page/stats-block/Settings.vue
@@ -102,16 +102,13 @@ const onButtonClick = () => {
   dialogOpen.value = true
 }
 
-onMounted(() => {
-  readDialogStateFromQuery()
-})
-
 watch(
   () => route.query.settings,
   (newSettings, oldSettings) => {
     if (newSettings !== oldSettings) {
       readDialogStateFromQuery()
     }
-  }
+  },
+  { immediate: true }
 )
 </script>
diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts
@@ -2,6 +2,7 @@ import type { LocationQueryRaw } from 'vue-router'
 import { serializeHashState } from '~~/lib/common/composables/url'
 import { ViewerHashStateKeys } from '~~/lib/viewer/composables/setup/urlHashState'
 
+export const profileRoute = '/profile'
 export const authBlockedDueToVerificationRoute = '/error-email-verify'
 export const homeRoute = '/'
 export const loginRoute = '/authn/login'

diff --git a/packages/frontend-2/pages/index.vue b/packages/frontend-2/pages/index.vue
@@ -14,7 +14,8 @@ useHead({
 })
 
 definePageMeta({
-  middleware: ['dashboard-redirect']
+  middleware: ['dashboard-redirect'],
+  alias: '/profile'
 })
 
 const { isLoggedIn } = useActiveUser()

diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -38,7 +38,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.13",
+    "@headlessui/vue": "^1.7.18",
     "@heroicons/vue": "^2.0.12",
     "@speckle/shared": "workspace:^",
     "@vueuse/core": "^9.13.0",

diff --git a/yarn.lock b/yarn.lock
@@ -9994,12 +9994,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@headlessui/vue@npm:^1.7.13":
-  version: 1.7.13
-  resolution: "@headlessui/vue@npm:1.7.13"
+"@headlessui/vue@npm:^1.7.13, @headlessui/vue@npm:^1.7.18":
+  version: 1.7.18
+  resolution: "@headlessui/vue@npm:1.7.18"
+  dependencies:
+    "@tanstack/vue-virtual": ^3.0.0-beta.60
   peerDependencies:
     vue: ^3.2.0
-  checksum: a8b68aec6003c1b0f298a5cca8aa1e37063322be000f0d730b6fc8580b78cccb22ac11fc3fabc5bea40998ed9cfc127328ee3519d803eda8a206b4d344338ab0
+  checksum: aecbc3710de70748227ecd64699c34410bbd8c516b0f2d577bbdcde76ca4dcd31ca404500b817b53d4e8498f286e0b6525bb83bb28904b2e2bef6a2df328414b
   languageName: node
   linkType: hard
 
@@ -14285,7 +14287,7 @@ __metadata:
   dependencies:
     "@babel/preset-env": ^7.21.5
     "@babel/preset-react": ^7.18.6
-    "@headlessui/vue": ^1.7.13
+    "@headlessui/vue": ^1.7.18
     "@heroicons/vue": ^2.0.12
     "@rollup/plugin-typescript": ^11.1.0
     "@speckle/shared": "workspace:^"
@@ -15866,6 +15868,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/virtual-core@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@tanstack/virtual-core@npm:3.0.0"
+  checksum: 7283d50fc7b7a56608c37a8e94a93b85890ff7e39c6281633a19c4d6f6f4fbf25f8418f1eec302a008a8746a0d1d0cd00630137b55e6cf019818d68af8ed16b6
+  languageName: node
+  linkType: hard
+
+"@tanstack/vue-virtual@npm:^3.0.0-beta.60":
+  version: 3.0.4
+  resolution: "@tanstack/vue-virtual@npm:3.0.4"
+  dependencies:
+    "@tanstack/virtual-core": 3.0.0
+  peerDependencies:
+    vue: ^2.7.0 || ^3.0.0
+  checksum: 9bae7a7f210154f27e379722d4e5777fbc7dcecd379cd1e88b7fe815c0066cabc3cf3235cdf4b708ca99c926c26cd0602704344ae4e22670a1ec78e1e2324bc4
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^8.5.0":
   version: 8.19.0
   resolution: "@testing-library/dom@npm:8.19.0"