Merge pull request #1526 from Budibase/ak-fixes

AK fixes

packages/bbui/src/Avatar/Avatar.svelte

@@ -12,15 +12,7 @@
   export let size = "M"
   export let url = ""
   export let disabled = false
-  export let name = "John Doe"
-
-  function getInitials(name) {
-    let parts = name.split(" ")
-    if (parts.length > 0) {
-      return parts.map(name => name[0]).join("")
-    }
-    return name
-  }
+  export let initials = "JD"
 </script>
 
 {#if url}
@@ -38,7 +30,7 @@
       size
     )}); font-size: calc(var({sizes.get(size)}) / 2)"
   >
-    {getInitials(name)}
+    {initials || ""}
   </div>
 {/if}
 
@@ -52,5 +44,6 @@
     border-radius: 50%;
     overflow: hidden;
     user-select: none;
+    text-transform: uppercase;
   }
 </style>

packages/bbui/src/Form/Core/TextField.svelte

@@ -82,6 +82,7 @@
     on:blur
     on:focus
     on:input
+    on:keyup
     on:blur={onBlur}
     on:focus={onFocus}
     on:input={onInput}

packages/bbui/src/Form/Input.svelte

@@ -34,5 +34,6 @@
     on:input
     on:blur
     on:focus
+    on:keyup
   />
 </Field>

packages/builder/src/components/settings/ChangePasswordModal.svelte

@@ -8,7 +8,7 @@
 
   const updatePassword = async () => {
     try {
-      await auth.updateSelf({ ...$auth.user, password })
+      await auth.updateSelf({ password })
       notifications.success("Password changed successfully")
     } catch (error) {
       notifications.error("Failed to update password")

packages/builder/src/components/settings/UpdateUserInfoModal.svelte

@@ -10,7 +10,7 @@
 
   const updateInfo = async () => {
     try {
-      await auth.updateSelf({ ...$auth.user, ...$values })
+      await auth.updateSelf($values)
       notifications.success("Information updated successfully")
     } catch (error) {
       notifications.error("Failed to update information")

packages/builder/src/pages/builder/admin/index.svelte

@@ -10,8 +10,10 @@
   import { goto } from "@roxi/routify"
   import api from "builderStore/api"
   import { admin, organisation } from "stores/portal"
+  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
 
   let adminUser = {}
+  let error
 
   async function save() {
     try {
@@ -42,13 +44,11 @@
       </Layout>
       <Layout gap="XS" noPadding>
         <Input label="Email" bind:value={adminUser.email} />
-        <Input
-          label="Password"
-          type="password"
-          bind:value={adminUser.password}
-        />
+        <PasswordRepeatInput bind:password={adminUser.password} bind:error />
       </Layout>
-      <Button cta on:click={save}>Create super admin user</Button>
+      <Button cta disabled={error} on:click={save}>
+        Create super admin user
+      </Button>
     </Layout>
   </div>
 </section>

packages/builder/src/pages/builder/apps/index.svelte

@@ -51,7 +51,7 @@
             </Layout>
             <ActionMenu align="right">
               <div slot="control" class="avatar">
-                <Avatar size="M" name="John Doe" />
+                <Avatar size="M" initials={$auth.initials} />
                 <Icon size="XL" name="ChevronDown" />
               </div>
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>

packages/builder/src/pages/builder/auth/reset.svelte

@@ -13,7 +13,6 @@
     try {
       if (forceResetPassword) {
         await auth.updateSelf({
-          ...$auth.user,
           password,
           forceResetPassword: false,
         })

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -3,7 +3,6 @@
   import {
     Icon,
     Avatar,
-    Search,
     Layout,
     SideNavigation as Navigation,
     SideNavigationItem as Item,
@@ -77,7 +76,7 @@
         <div />
         <ActionMenu align="right">
           <div slot="control" class="avatar">
-            <Avatar size="M" name="John Doe" />
+            <Avatar size="M" initials={$auth.initials} />
             <Icon size="XL" name="ChevronDown" />
           </div>
           <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -41,8 +41,8 @@
     const enrichedApps = apps.map(app => ({
       ...app,
       deployed: app.status === AppStatus.DEPLOYED,
-      lockedYou: app.lockedBy?.email === user.email,
-      lockedOther: app.lockedBy && app.lockedBy.email !== user.email,
+      lockedYou: app.lockedBy && app.lockedBy.email === user?.email,
+      lockedOther: app.lockedBy && app.lockedBy.email !== user?.email,
     }))
     if (sortBy === "status") {
       return enrichedApps.sort((a, b) => {

packages/builder/src/pages/builder/portal/manage/auth/index.svelte

@@ -4,7 +4,6 @@
     Button,
     Heading,
     Divider,
-    Page,
     Label,
     notifications,
     Layout,
@@ -23,6 +22,13 @@
   const ConfigFields = {
     Google: ["clientID", "clientSecret", "callbackURL"],
   }
+  const ConfigLabels = {
+    Google: {
+      clientID: "Client ID",
+      clientSecret: "Client secret",
+      callbackURL: "Callback URL",
+    },
+  }
 
   let google
 
@@ -85,7 +91,7 @@
     <Layout gap="XS" noPadding>
       {#each ConfigFields.Google as field}
         <div class="form-row">
-          <Label size="L">{field}</Label>
+          <Label size="L">{ConfigLabels.Google[field]}</Label>
           <Input bind:value={google.config[field]} />
         </div>
       {/each}

packages/builder/src/pages/builder/portal/manage/users/[userId].svelte

@@ -84,7 +84,7 @@
     <Heading>User: {$userFetch?.data?.email}</Heading>
     <Body>
       Change user settings and update their app roles. Also contains the ability
-      to delete the user as well as force reset their password..
+      to delete the user as well as force reset their password.
     </Body>
   </Layout>
   <Divider size="S" />
@@ -108,7 +108,7 @@
         <Input disabled thin value={$userFetch?.data?.lastName} />
       </div>
       <div class="field">
-        <Label size="L">Development access?</Label>
+        <Label size="L">Development access</Label>
         <Toggle
           text=""
           value={$userFetch?.data?.builder?.global}

packages/builder/src/pages/builder/portal/manage/users/_components/TagsTableRenderer.svelte

@@ -9,13 +9,26 @@
   $: leftover = roles.length - tags.length
 </script>
 
-<Tags>
+<div class="tag-renderer">
+  <Tags>
     {#each tags as tag}
-    <Tag disabled>
+      <Tag>
         {tag}
       </Tag>
     {/each}
     {#if leftover}
       <Tag>+{leftover} more</Tag>
     {/if}
-</Tags>
+  </Tags>
+</div>
+
+<style>
+  .tag-renderer :global(.spectrum-Tags-item:hover) {
+    color: var(--spectrum-alias-label-text-color);
+    border-color: var(--spectrum-alias-border-color-darker-default);
+    cursor: pointer;
+  }
+  .tag-renderer :global(.spectrum-Tags-itemLabel) {
+    cursor: pointer;
+  }
+</style>

packages/builder/src/stores/portal/auth.js

@@ -1,25 +1,42 @@
-import { writable } from "svelte/store"
+import { derived, writable, get } from "svelte/store"
 import api from "../../builderStore/api"
 
 export function createAuthStore() {
-  const store = writable({ user: null })
+  const user = writable(null)
+  const store = derived(user, $user => {
+    let initials = null
+    if ($user) {
+      if ($user.firstName) {
+        initials = $user.firstName[0]
+        if ($user.lastName) {
+          initials += $user.lastName[0]
+        }
+      } else {
+        initials = $user.email[0]
+      }
+    }
+    return {
+      user: $user,
+      initials,
+    }
+  })
 
   return {
     subscribe: store.subscribe,
     checkAuth: async () => {
       const response = await api.get("/api/admin/users/self")
       if (response.status !== 200) {
-        store.update(state => ({ ...state, user: null }))
+        user.set(null)
       } else {
-        const user = await response.json()
-        store.update(state => ({ ...state, user }))
+        const json = await response.json()
+        user.set(json)
       }
     },
     login: async creds => {
       const response = await api.post(`/api/admin/auth`, creds)
       const json = await response.json()
       if (response.status === 200) {
-        store.update(state => ({ ...state, user: json.user }))
+        user.set(json.user)
       } else {
         throw "Invalid credentials"
       }
@@ -31,12 +48,13 @@ export function createAuthStore() {
         throw "Unable to create logout"
       }
       await response.json()
-      store.update(state => ({ ...state, user: null }))
+      user.set(null)
     },
-    updateSelf: async user => {
-      const response = await api.post("/api/admin/users/self", user)
+    updateSelf: async fields => {
+      const newUser = { ...get(user), ...fields }
+      const response = await api.post("/api/admin/users/self", newUser)
       if (response.status === 200) {
-        store.update(state => ({ ...state, user: { ...state.user, ...user } }))
+        user.set(newUser)
       } else {
         throw "Unable to update user details"
       }