Add modal to let users change their own password, without endpoint for now

5 years ago · 053af1becb
3 changed files with 42 additions and 20 deletions
--- a/packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte
+++ b/packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte
@ -0,0 +1,21 @@
 <script>
  import { ModalContent, Body, notifications } from "@budibase/bbui"
  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
  let password
  let error
  const updatePassword = async () => {
    // Update password
  }
 </script>
 <ModalContent
  title="Change password"
  confirmText="Update password"
  onConfirm={updatePassword}
  disabled={error}
 >
  <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 { ModalContent, Body, Input } from "@budibase/bbui"
  import { writable } from "svelte/store"
  import { auth } from "stores/backend"
  import { saveRow } from "components/backend/DataTable/api"
  import { TableNames } from "constants"
  const values = writable({
    firstName: $auth.user.firstName,
@ -11,19 +9,7 @@
  })
  const updateInfo = async () => {
-    const newUser = {
+    // Update name
      ...$auth.user,
      firstName: $values.firstName,
      lastName: $values.lastName,
    }
    console.log(newUser)
    const response = await saveRow(newUser, TableNames.USERS)
    if (response.ok) {
      await auth.checkAuth()
      notifications.success("Information updated successfully")
    } else {
      notifications.error("Failed to update information")
    }
  }
 </script>
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -19,16 +19,19 @@
  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()
    await apps.load(AppStatus.DEV)
    loaded = true
  })
  $: console.log($auth.user)
 </script>
 {#if loaded}
@ -56,7 +59,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")}
@ -76,7 +84,11 @@
              <div class="group-title">
                <Body weight="500" size="XS">GROUP</Body>
                {#if $auth.user?.builder?.global}
-                  <Icon name="Settings" hoverable />
+                  <Icon
                    name="Settings"
                    hoverable
                    on:click={() => alert("Navigate to portal group page.")}
                  />
                {/if}
              </div>
              {#each $apps as app, idx (app.appId)}
@ -100,6 +112,9 @@
  <Modal bind:this={userInfoModal}>
    <UpdateUserInfoModal />
  </Modal>
  <Modal bind:this={changePasswordModal}>
    <ChangePasswordModal />
  </Modal>
 {/if}
 <style>
@ -136,7 +151,7 @@
    grid-gap: var(--spacing-xl);
  }
  .group {
-    margin-top: 20px;
+    margin-top: var(--spacing-s);
  }
  .group-title {
    display: grid;