Add profile and password modals into app dropdown

packages/client/src/components/app/UserMenu.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
-  import { ActionMenu, Icon, MenuItem } from "@budibase/bbui"
-  import { UserAvatar } from "@budibase/frontend-core"
+  import { ActionMenu, Icon, MenuItem, Modal } from "@budibase/bbui"
+  import {
+    UserAvatar,
+    ProfileModal,
+    ChangePasswordModal,
+  } from "@budibase/frontend-core"
   import { getContext } from "svelte"
-  import { User, ContextUser } from "@budibase/types"
+  import { type User, type ContextUser, isSSOUser } from "@budibase/types"
   import { sdk } from "@budibase/shared-core"
+  import { API } from "@/api"
 
   export let compact: boolean = false
 
-  const { authStore } = getContext("sdk")
+  const { authStore, environmentStore } = getContext("sdk")
+
+  let profileModal: any
+  let changePasswordModal: any
 
   $: text = getText($authStore)
   $: isBuilder = sdk.users.hasBuilderPermissions($authStore)
+  $: isSSO = $authStore != null && isSSOUser($authStore)
+  $: isOwner = $authStore?.accountPortalAccess && $environmentStore.cloud
 
   const getText = (user?: User | ContextUser): string => {
     if (!user) {
@@ -47,11 +57,45 @@
         <Icon size="L" name="ChevronDown" />
       </div>
     </svelte:fragment>
+
+    <MenuItem icon="UserEdit" on:click={() => profileModal?.show()}>
+      My profile
+    </MenuItem>
+    {#if !isSSO}
+      <MenuItem
+        icon="LockClosed"
+        on:click={() => {
+          if (isOwner) {
+            window.location.href = `${$environmentStore.accountPortalUrl}/portal/account`
+          } else {
+            changePasswordModal?.show()
+          }
+        }}
+      >
+        Update password
+      </MenuItem>
+    {/if}
+
     <MenuItem icon="Apps" on:click={goToPortal}>Go to portal</MenuItem>
     <MenuItem icon="LogOut" on:click={authStore.actions.logOut}>
       Log out
     </MenuItem>
   </ActionMenu>
+
+  <Modal bind:this={profileModal}>
+    <ProfileModal
+      {API}
+      user={$authStore}
+      on:save={() => authStore.actions.fetchUser()}
+    />
+  </Modal>
+  <Modal bind:this={changePasswordModal}>
+    <ChangePasswordModal
+      {API}
+      passwordMinLength={$environmentStore.passwordMinLength}
+      on:save={() => authStore.actions.fetchUser()}
+    />
+  </Modal>
 {/if}
 
 <style>

packages/client/src/index.ts

@@ -82,6 +82,7 @@ export interface SDK {
   fetchDatasourceSchema: any
   generateGoldenSample: any
   authStore: typeof authStore
+  environmentStore: typeof environmentStore
   builderStore: Readable<{
     inBuilder: boolean
   }> & {

packages/client/src/stores/environment.ts

@@ -1,13 +1,23 @@
 import { API } from "@/api"
 import { writable } from "svelte/store"
+import type { GetEnvironmentResponse } from "@budibase/types"
 
-const initialState = {
-  loaded: false,
+interface EnvironmentState extends GetEnvironmentResponse {
+  loaded: boolean
+}
+
+const initialState: EnvironmentState = {
+  multiTenancy: false,
+  offlineMode: false,
   cloud: false,
+  disableAccountPortal: false,
+  isDev: false,
+  maintenance: [],
+  loaded: false,
 }
 
 const createEnvironmentStore = () => {
-  const store = writable(initialState)
+  const store = writable<EnvironmentState>(initialState)
 
   const actions = {
     fetchEnvironment: async () => {

packages/frontend-core/src/components/ChangePasswordModal.svelte

@@ -15,8 +15,8 @@
   const updatePassword = async () => {
     try {
       await API.updateSelf({ password })
-      dispatch("save")
       notifications.success("Password changed successfully")
+      dispatch("save")
     } catch (error) {
       notifications.error("Failed to update password")
     }

packages/frontend-core/src/components/ProfileModal.svelte

@@ -18,8 +18,8 @@
   const updateInfo = async () => {
     try {
       await API.updateSelf($values)
-      dispatch("save")
       notifications.success("Information updated successfully")
+      dispatch("save")
     } catch (error) {
       console.error(error)
       notifications.error("Failed to update information")

packages/types/src/documents/global/user.ts

@@ -1,4 +1,5 @@
 import { Document } from "../document"
+import { ContextUser } from "../../sdk"
 
 // SSO
 
@@ -32,7 +33,7 @@ export interface UserSSO {
 
 export type SSOUser = User & UserSSO
 
-export function isSSOUser(user: User): user is SSOUser {
+export function isSSOUser(user: User | ContextUser): user is SSOUser {
   return !!(user as SSOUser).providerType
 }