Add modal to let users change their own password, without endpoint for now
This commit is contained in:
Andrew Kingston
parent
5c8c663935
commit
ba1ee6b033
|
|
@ -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>
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { ModalContent, Body, Input, notifications } from "@budibase/bbui"
|
import { ModalContent, Body, Input } from "@budibase/bbui"
|
||||||
import { writable } from "svelte/store"
|
import { writable } from "svelte/store"
|
||||||
import { auth } from "stores/backend"
|
import { auth } from "stores/backend"
|
||||||
import { saveRow } from "components/backend/DataTable/api"
|
|
||||||
import { TableNames } from "constants"
|
|
||||||
|
|
||||||
const values = writable({
|
const values = writable({
|
||||||
firstName: $auth.user.firstName,
|
firstName: $auth.user.firstName,
|
||||||
|
|
@ -11,19 +9,7 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
const updateInfo = async () => {
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,16 +19,19 @@
|
||||||
import { AppStatus } from "constants"
|
import { AppStatus } from "constants"
|
||||||
import { gradient } from "actions"
|
import { gradient } from "actions"
|
||||||
import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"
|
import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"
|
||||||
|
import ChangePasswordModal from "./_components/ChangePasswordModal.svelte"
|
||||||
|
|
||||||
let loaded = false
|
let loaded = false
|
||||||
let userInfoModal
|
let userInfoModal
|
||||||
let userPasswordModal
|
let changePasswordModal
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await organisation.init()
|
await organisation.init()
|
||||||
await apps.load(AppStatus.DEV)
|
await apps.load(AppStatus.DEV)
|
||||||
loaded = true
|
loaded = true
|
||||||
})
|
})
|
||||||
|
|
||||||
|
$: console.log($auth.user)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loaded}
|
{#if loaded}
|
||||||
|
|
@ -56,7 +59,12 @@
|
||||||
<MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
|
<MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
|
||||||
Update user information
|
Update user information
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem icon="LockClosed">Update password</MenuItem>
|
<MenuItem
|
||||||
|
icon="LockClosed"
|
||||||
|
on:click={() => changePasswordModal.show()}
|
||||||
|
>
|
||||||
|
Update password
|
||||||
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
icon="UserDeveloper"
|
icon="UserDeveloper"
|
||||||
on:click={() => $goto("../portal")}
|
on:click={() => $goto("../portal")}
|
||||||
|
|
@ -76,7 +84,11 @@
|
||||||
<div class="group-title">
|
<div class="group-title">
|
||||||
<Body weight="500" size="XS">GROUP</Body>
|
<Body weight="500" size="XS">GROUP</Body>
|
||||||
{#if $auth.user?.builder?.global}
|
{#if $auth.user?.builder?.global}
|
||||||
<Icon name="Settings" hoverable />
|
<Icon
|
||||||
|
name="Settings"
|
||||||
|
hoverable
|
||||||
|
on:click={() => alert("Navigate to portal group page.")}
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#each $apps as app, idx (app.appId)}
|
{#each $apps as app, idx (app.appId)}
|
||||||
|
|
@ -100,6 +112,9 @@
|
||||||
<Modal bind:this={userInfoModal}>
|
<Modal bind:this={userInfoModal}>
|
||||||
<UpdateUserInfoModal />
|
<UpdateUserInfoModal />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
<Modal bind:this={changePasswordModal}>
|
||||||
|
<ChangePasswordModal />
|
||||||
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -136,7 +151,7 @@
|
||||||
grid-gap: var(--spacing-xl);
|
grid-gap: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
.group {
|
.group {
|
||||||
margin-top: 20px;
|
margin-top: var(--spacing-s);
|
||||||
}
|
}
|
||||||
.group-title {
|
.group-title {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue