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 = {
-      ...$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")
-    }
+    // Update name
  }
 </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;