adds users, user page and add user modal

5 years ago · aef14aa35d
3 changed files with 109 additions and 1 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -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>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
@ -24,7 +24,7 @@
    with autogenerated passwords.</Body
  >
  <Select
-    placeholder=""
+    placeholder={null}
    bind:value={selected}
    on:change={onChange}
    {options}
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@roxi/routify"
  import {
    Heading,
    Body,
@ -60,6 +61,7 @@
      </ButtonGroup>
    </div>
    <Table
+      on:click={({ detail }) => $goto(`./${detail._id}`)}
      {schema}
      data={filteredUsers || $users}
      allowEditColumns={false}