Merge branch 'user-app-list' of github.com:Budibase/budibase into user-app-list

2021-05-19 15:10:24 +01:00 · 2021-05-19 15:10:24 +01:00 · dbf8e426bc
parent 6d6eee2a93 c3b462aea1
commit dbf8e426bc
19 changed files with 123 additions and 103 deletions
--- a/packages/builder/src/components/login/ForgotForm.svelte
+++ b/packages/builder/src/components/login/ForgotForm.svelte
@ -7,8 +7,7 @@
    Body,
    Heading,
  } from "@budibase/bbui"
-  import { organisation } from "stores/portal"
-  import { auth } from "stores/backend"
+  import { organisation, auth } from "stores/portal"

  let email = ""

--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@ -11,8 +11,7 @@
    Heading,
  } from "@budibase/bbui"
  import GoogleButton from "./GoogleButton.svelte"
-  import { auth } from "stores/backend"
-  import { organisation } from "stores/portal"
+  import { organisation, auth } from "stores/portal"

  let username = ""
  let password = ""
--- a/packages/builder/src/components/login/ResetForm.svelte
+++ b/packages/builder/src/components/login/ResetForm.svelte
@ -1,9 +1,8 @@
 <script>
  import { notifications, Button, Layout, Body, Heading } from "@budibase/bbui"
-  import { organisation } from "stores/portal"
+  import { organisation, auth } from "stores/portal"
  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
  import { params, goto } from "@roxi/routify"
-  import { auth } from "stores/backend"

  const resetCode = $params["?code"]
  let password, error
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -6,12 +6,9 @@
    Layout,
    ActionMenu,
    MenuItem,
-    Link,
  } from "@budibase/bbui"
  import { gradient } from "actions"
-  import { AppStatus } from "constants"
-  import { url } from "@roxi/routify"
-  import { auth } from "stores/backend"
+  import { auth } from "stores/portal"

  export let app
  export let exportApp
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -1,7 +1,7 @@
 <script>
  import { gradient } from "actions"
  import { Heading, Button, Icon, ActionMenu, MenuItem } from "@budibase/bbui"
-  import { auth } from "stores/backend"
+  import { auth } from "stores/portal"

  export let app
  export let openApp
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@ -1,8 +1,7 @@
 <script>
  import { onMount } from "svelte"
  import { isActive, redirect } from "@roxi/routify"
-  import { auth } from "stores/backend"
-  import { admin } from "stores/portal"
+  import { admin, auth } from "stores/portal"

  let loaded = false
  $: hasAdminUser = !!$admin?.checklist?.adminUser
--- a/packages/builder/src/pages/builder/app/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/_layout.svelte
@ -1,5 +1,5 @@
 <script>
-  import { auth } from "stores/backend"
+  import { auth } from "stores/portal"
 </script>

 {#if $auth.user}
--- a/packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte
+++ b/packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte
@ -0,0 +1,27 @@
+<script>
+  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
+  import { auth } from "stores/portal"
+
+  let password
+  let error
+
+  const updatePassword = async () => {
+    try {
+      await auth.updateSelf({ ...$auth.user, password })
+      notifications.success("Information updated successfully")
+    } catch (error) {
+      notifications.error("Failed to update password")
+    }
+  }
+</script>
+
+<ModalContent
+  title="Change password"
+  confirmText="Update password"
+  onConfirm={updatePassword}
+  disabled={error || !password}
+>
+  <Body size="S">Enter your new password below.</Body>
+  <PasswordRepeatInput bind:password bind:error />
+</ModalContent>
--- a/packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte
+++ b/packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte
@ -1,9 +1,7 @@
 <script>
  import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
  import { writable } from "svelte/store"
-  import { auth } from "stores/backend"
-  import { saveRow } from "components/backend/DataTable/api"
-  import { TableNames } from "constants"
+  import { auth } from "stores/portal"

  const values = writable({
    firstName: $auth.user.firstName,
@ -11,17 +9,10 @@
  })

  const updateInfo = async () => {
-    const newUser = {
-      ...$auth.user,
-      firstName: $values.firstName,
-      lastName: $values.lastName,
-    }
-    console.log(newUser)
-    const response = await saveRow(newUser, TableNames.USERS)
-    if (response.ok) {
-      await auth.checkAuth()
+    try {
+      await auth.updateSelf({ ...$auth.user, ...$values })
      notifications.success("Information updated successfully")
-    } else {
+    } catch (error) {
      notifications.error("Failed to update information")
    }
  }
--- a/packages/builder/src/pages/builder/apps/_layout.svelte
+++ b/packages/builder/src/pages/builder/apps/_layout.svelte
@ -1,5 +1,5 @@
 <script>
-  import { auth } from "stores/backend"
+  import { auth } from "stores/portal"
 </script>

 {#if $auth.user}
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -13,16 +13,16 @@
    Modal,
  } from "@budibase/bbui"
  import { onMount } from "svelte"
-  import { apps, organisation } from "stores/portal"
-  import { auth } from "stores/backend"
+  import { apps, organisation, auth } from "stores/portal"
  import { goto } from "@roxi/routify"
  import { AppStatus } from "constants"
  import { gradient } from "actions"
  import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"
+  import ChangePasswordModal from "./_components/ChangePasswordModal.svelte"

  let loaded = false
  let userInfoModal
-  let userPasswordModal
+  let changePasswordModal

  onMount(async () => {
    await organisation.init()
@ -44,8 +44,7 @@
              </Heading>
              <Body>
                Welcome to the {$organisation.company} portal. Below you'll find
-                the list of apps that you have access to, as well as company news
-                and the employee handbook.
+                the list of apps that you have access to.
              </Body>
            </Layout>
            <ActionMenu align="right">
@ -56,7 +55,12 @@
              <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
                Update user information
              </MenuItem>
-              <MenuItem icon="LockClosed">Update password</MenuItem>
+              <MenuItem
+                icon="LockClosed"
+                on:click={() => changePasswordModal.show()}
+              >
+                Update password
+              </MenuItem>
              <MenuItem
                icon="UserDeveloper"
                on:click={() => $goto("../portal")}
@ -67,32 +71,32 @@
            </ActionMenu>
          </div>
          <Divider />
-          <div class="apps-title">
+          {#if $apps.length}
            <Heading>Apps</Heading>
-            <Select placeholder="Filter by groups" />
-          </div>
-          <div class="group">
-            <Layout gap="S" noPadding>
-              <div class="group-title">
-                <Body weight="500" size="XS">GROUP</Body>
-                {#if $auth.user?.builder?.global}
-                  <Icon name="Settings" hoverable />
-                {/if}
-              </div>
-              {#each $apps as app, idx (app.appId)}
-                <a class="app" target="_blank" href={`/${app.appId}`}>
-                  <div class="preview" use:gradient={{ seed: app.name }} />
-                  <div class="app-info">
-                    <Heading size="XS">{app.name}</Heading>
-                    <Body size="S">
-                      Edited {Math.round(Math.random() * 10 + 1)} months ago
-                    </Body>
-                  </div>
-                  <Icon name="ChevronRight" />
-                </a>
-              {/each}
+            <div class="group">
+              <Layout gap="S" noPadding>
+                {#each $apps as app, idx (app.appId)}
+                  <a class="app" target="_blank" href={`/${app.appId}`}>
+                    <div class="preview" use:gradient={{ seed: app.name }} />
+                    <div class="app-info">
+                      <Heading size="XS">{app.name}</Heading>
+                      <Body size="S">
+                        Edited {Math.round(Math.random() * 10 + 1)} months ago
+                      </Body>
+                    </div>
+                    <Icon name="ChevronRight" />
+                  </a>
+                {/each}
+              </Layout>
+            </div>
+          {:else}
+            <Layout gap="XS" noPadding>
+              <Heading size="S">You don't have access to any apps yet.</Heading>
+              <Body size="S">
+                The apps you have access to will be listed here.
+              </Body>
            </Layout>
-          </div>
+          {/if}
        </Layout>
      </div>
    </Page>
@ -100,6 +104,9 @@
  <Modal bind:this={userInfoModal}>
    <UpdateUserInfoModal />
  </Modal>
+  <Modal bind:this={changePasswordModal}>
+    <ChangePasswordModal />
+  </Modal>
 {/if}

 <style>
@ -130,19 +137,8 @@
    cursor: pointer;
    filter: brightness(110%);
  }
-  .apps-title {
-    display: grid;
-    grid-template-columns: 1fr 150px;
-    grid-gap: var(--spacing-xl);
-  }
  .group {
-    margin-top: 20px;
-  }
-  .group-title {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    grid-gap: var(--spacing-xl);
-    align-items: center;
+    margin-top: var(--spacing-s);
  }
  .app {
    display: grid;
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@ -1,6 +1,6 @@
 <script>
  import { redirect } from "@roxi/routify"
-  import { auth } from "stores/backend"
+  import { auth } from "stores/portal"

  $: {
    if (!$auth.user) {
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -12,8 +12,7 @@
    Modal,
  } from "@budibase/bbui"
  import ConfigChecklist from "components/common/ConfigChecklist.svelte"
-  import { organisation } from "stores/portal"
-  import { auth } from "stores/backend"
+  import { organisation, auth } from "stores/portal"
  import BuilderSettingsModal from "components/start/BuilderSettingsModal.svelte"
  import { onMount } from "svelte"

--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -17,8 +17,7 @@
  import api, { del } from "builderStore/api"
  import analytics from "analytics"
  import { onMount } from "svelte"
-  import { apps } from "stores/portal"
-  import { auth } from "stores/backend"
+  import { apps, auth } from "stores/portal"
  import download from "downloadjs"
  import { goto } from "@roxi/routify"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
--- a/packages/builder/src/pages/builder/portal/settings/general.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/general.svelte
@ -14,45 +14,52 @@
  import { organisation } from "stores/portal"
  import { post } from "builderStore/api"
  import analytics from "analytics"
-  let analyticsDisabled = analytics.disabled()
-
-  function toggleAnalytics() {
-    if (analyticsDisabled) {
-      analytics.optIn()
-    } else {
-      analytics.optOut()
-    }
-  }
+  import { writable } from "svelte/store"

+  const values = writable({
+    analytics: !analytics.disabled(),
+    company: $organisation.company,
+    platformUrl: $organisation.platformUrl,
+    logo: $organisation.logoUrl
+      ? { url: $organisation.logoUrl, type: "image", name: "Logo" }
+      : null,
+  })
  let loading = false
-  let file = $organisation.logoUrl
-    ? { url: $organisation.logoUrl, type: "image", name: "Logo" }
-    : null

-  async function uploadLogo() {
+  async function uploadLogo(file) {
    let data = new FormData()
    data.append("file", file)
-
    const res = await post("/api/admin/configs/upload/settings/logo", data, {})
    return await res.json()
  }

  async function saveConfig() {
    loading = true
-    await toggleAnalytics()
-    if (file) {
-      await uploadLogo()
+
+    // Set analytics preference
+    if ($values.analytics) {
+      analytics.optIn()
+    } else {
+      analytics.optOut()
+    }
+
+    // Upload logo if required
+    if ($values.logo && !$values.logo.url) {
+      await uploadLogo($values.logo)
      await organisation.init()
    }
+
+    // Update settings
    const res = await organisation.save({
-      company: $organisation.company,
-      platformUrl: $organisation.platformUrl,
+      company: $values.company ?? "",
+      platformUrl: $values.platformUrl ?? "",
    })
    if (res.status === 200) {
-      notifications.success("Settings saved.")
+      notifications.success("Settings saved successfully")
    } else {
      notifications.error(res.message)
    }
+
    loading = false
  }
 </script>
@ -73,15 +80,15 @@
  <div class="fields">
    <div class="field">
      <Label size="L">Organization name</Label>
-      <Input thin bind:value={$organisation.company} />
+      <Input thin bind:value={$values.company} />
    </div>
    <div class="field logo">
      <Label size="L">Logo</Label>
      <div class="file">
        <Dropzone
-          value={[file]}
+          value={[$values.logo]}
          on:change={e => {
-            file = e.detail?.[0]
+            $values.logo = e.detail?.[0]
          }}
        />
      </div>
@ -95,7 +102,7 @@
  <div class="fields">
    <div class="field">
      <Label size="L">Platform URL</Label>
-      <Input thin bind:value={$organisation.platformUrl} />
+      <Input thin bind:value={$values.platformUrl} />
    </div>
  </div>
  <Divider size="S" />
@ -110,7 +117,7 @@
    <div class="fields">
      <div class="field">
        <Label size="L">Send Analytics to Budibase</Label>
-        <Toggle text="" value={!analyticsDisabled} />
+        <Toggle text="" bind:value={$values.analytics} />
      </div>
    </div>
  </Layout>
--- a/packages/builder/src/stores/backend/index.js
+++ b/packages/builder/src/stores/backend/index.js
@ -7,4 +7,3 @@ export { roles } from "./roles"
 export { datasources } from "./datasources"
 export { integrations } from "./integrations"
 export { queries } from "./queries"
-export { auth } from "./auth"
--- a/packages/builder/src/stores/backend/auth.js
+++ b/packages/builder/src/stores/backend/auth.js
@ -7,7 +7,7 @@ export function createAuthStore() {
  return {
    subscribe: store.subscribe,
    checkAuth: async () => {
-      const response = await api.get("/api/self")
+      const response = await api.get("/api/admin/users/self")
      const user = await response.json()
      if (response.status === 200) {
        store.update(state => ({ ...state, user }))
@ -33,6 +33,14 @@ export function createAuthStore() {
      await response.json()
      store.update(state => ({ ...state, user: null }))
    },
+    updateSelf: async user => {
+      const response = await api.post("/api/admin/users/self", user)
+      if (response.status === 200) {
+        store.update(state => ({ ...state, user: { ...state.user, ...user } }))
+      } else {
+        throw "Unable to update user details"
+      }
+    },
    forgotPassword: async email => {
      const response = await api.post(`/api/admin/auth/reset`, {
        email,
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@ -3,3 +3,4 @@ export { users } from "./users"
 export { admin } from "./admin"
 export { apps } from "./apps"
 export { email } from "./email"
+export { auth } from "./auth"
--- a/packages/builder/src/stores/portal/organisation.js
+++ b/packages/builder/src/stores/portal/organisation.js
@ -2,7 +2,7 @@ import { writable, get } from "svelte/store"
 import api from "builderStore/api"

 const DEFAULT_CONFIG = {
-  platformUrl: undefined,
+  platformUrl: "http://localhost:1000",
  logoUrl: "https://i.imgur.com/ZKyklgF.png",
  docsUrl: undefined,
  company: "Budibase",