adds users, user page and add user modal

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-07 14:53:20 +02:00
parent 35b731a356
commit 04b332e104
3 changed files with 109 additions and 1 deletions

View File

@ -0,0 +1,106 @@
<script>
import { goto } from "@roxi/routify"
import {
ActionButton,
Button,
Layout,
Heading,
Body,
Divider,
Label,
Input,
Modal,
ModalContent,
} from "@budibase/bbui"
import { fetchData } from "helperStores"
export let userId
let deleteUserModal
const request = fetchData(`/api/admin/users/${userId}`)
</script>
<Layout noPadding gap="XS">
<div class="back">
<ActionButton on:click={() => $goto("./")} quiet size="S" icon="BackAndroid"
>Back to users</ActionButton
>
</div>
<div class="heading">
<Layout noPadding gap="XS">
<Heading>User: {$request?.data?.email}</Heading>
<Body
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis porro
ut nesciunt ipsam perspiciatis aliquam et hic minus alias beatae. Odit
veritatis quos quas laborum magnam tenetur perspiciatis ex hic.</Body
>
</Layout>
</div>
<Divider size="S" />
<div class="general">
<Heading size="S">General</Heading>
<div class="fields">
<div class="field">
<Label size="L">Email</Label>
<Input disabled thin value={$request?.data?.email} />
</div>
</div>
<div class="regenerate">
<ActionButton size="S" icon="Refresh" quiet
>Regenerate password</ActionButton
>
</div>
</div>
<Divider size="S" />
<div class="delete">
<Layout gap="S" noPadding
><Heading size="S">Delete user</Heading>
<Body>Deleting a user completely removes them from your account.</Body>
<div class="delete-button">
<Button warning on:click={deleteUserModal.show}>Delete user</Button>
</div></Layout
>
</div>
</Layout>
<Modal bind:this={deleteUserModal}>
<ModalContent
title="Delete User"
confirmText="Delete user"
cancelText="Cancel"
showCloseIcon={false}
>
<Body
>Are you sure you want to delete <strong>{$request?.data?.email}</strong
></Body
>
</ModalContent>
</Modal>
<style>
.fields {
display: grid;
grid-gap: var(--spacing-m);
margin-top: var(--spacing-xl);
}
.field {
display: grid;
grid-template-columns: 32% 1fr;
align-items: center;
}
.heading {
margin-bottom: var(--spacing-xl);
}
.general {
position: relative;
margin: var(--spacing-xl) 0;
}
.delete {
margin-top: var(--spacing-xl);
}
.regenerate {
position: absolute;
top: 0;
right: 0;
}
</style>

View File

@ -24,7 +24,7 @@
with autogenerated passwords.</Body with autogenerated passwords.</Body
> >
<Select <Select
placeholder="" placeholder={null}
bind:value={selected} bind:value={selected}
on:change={onChange} on:change={onChange}
{options} {options}

View File

@ -1,4 +1,5 @@
<script> <script>
import { goto } from "@roxi/routify"
import { import {
Heading, Heading,
Body, Body,
@ -60,6 +61,7 @@
</ButtonGroup> </ButtonGroup>
</div> </div>
<Table <Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema} {schema}
data={filteredUsers || $users} data={filteredUsers || $users}
allowEditColumns={false} allowEditColumns={false}