adds functionality to check list of users and add users in settings modal
This commit is contained in:
parent
c4cbfd0c0c
commit
5fe8b523bf
2 changed files with 109 additions and 29 deletions
22
packages/builder/src/components/settings/UserRow.svelte
Normal file
22
packages/builder/src/components/settings/UserRow.svelte
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
<script>
|
||||||
|
import { Input, Select, Button } from "@budibase/bbui"
|
||||||
|
export let user
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="inputs">
|
||||||
|
<Input thin bind:value={user.username} name="Name" placeholder="Username" />
|
||||||
|
<Select bind:value={user.accessLevelId} thin>
|
||||||
|
<option value="ADMIN">Admin</option>
|
||||||
|
<option value="POWER_USER">Power User</option>
|
||||||
|
</Select>
|
||||||
|
<Button on:click>Edit</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.inputs {
|
||||||
|
display: grid;
|
||||||
|
justify-items: stretch;
|
||||||
|
grid-gap: 18px;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,64 +1,122 @@
|
||||||
<script>
|
<script>
|
||||||
import { Input, Select, Button } from "@budibase/bbui"
|
import { Input, Select, Button } from "@budibase/bbui"
|
||||||
import Title from "../TabTitle.svelte"
|
import Title from "../TabTitle.svelte"
|
||||||
|
import UserRow from "../UserRow.svelte"
|
||||||
|
|
||||||
|
import { store, backendUiStore } from "builderStore"
|
||||||
|
import api from "builderStore/api"
|
||||||
|
// import * as api from "../api"
|
||||||
|
|
||||||
|
let username = ""
|
||||||
|
let password = ""
|
||||||
|
let accessLevelId
|
||||||
|
|
||||||
|
$: valid = username && password && accessLevelId
|
||||||
|
$: appId = $store.appId
|
||||||
|
|
||||||
|
// Create user!
|
||||||
|
async function createUser() {
|
||||||
|
if (valid) {
|
||||||
|
const user = { name: username, username, password, accessLevelId }
|
||||||
|
const response = await api.post(`/api/users`, user)
|
||||||
|
const json = await response.json()
|
||||||
|
backendUiStore.actions.users.create(json)
|
||||||
|
fetchUsersPromise = fetchUsers()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get users
|
||||||
|
async function fetchUsers() {
|
||||||
|
const response = await api.get(`/api/users`)
|
||||||
|
const users = await response.json()
|
||||||
|
backendUiStore.update(state => {
|
||||||
|
state.users = users
|
||||||
|
return state
|
||||||
|
})
|
||||||
|
return users
|
||||||
|
}
|
||||||
|
|
||||||
|
let fetchUsersPromise = fetchUsers()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Title>Users</Title>
|
<Title>Users</Title>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="background">
|
<div class="background create">
|
||||||
<div class="title">Create new user</div>
|
<div class="title">Create new user</div>
|
||||||
<Input thin placeholder="Enter name" label="Name" />
|
<div class="inputs">
|
||||||
<Input thin placeholder="Enter Password" label="Password" />
|
<Input thin bind:value={username} name="Name" placeholder="Username" />
|
||||||
<div>
|
<Input
|
||||||
<label>Access Level</label>
|
thin
|
||||||
<Select>
|
bind:value={password}
|
||||||
<option value="admin">Admin</option>
|
name="Password"
|
||||||
<option value="poweruser">Power User</option>
|
placeholder="Password" />
|
||||||
|
<Select bind:value={accessLevelId} thin>
|
||||||
|
<option value="ADMIN">Admin</option>
|
||||||
|
<option value="POWER_USER">Power User</option>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div class="create-button">
|
<div class="create-button">
|
||||||
<Button attention>Create</Button>
|
<Button on:click={createUser} small blue>Create</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="background">
|
||||||
|
<div class="title">Current Users</div>
|
||||||
|
{#await fetchUsersPromise}
|
||||||
|
Loading state!
|
||||||
|
{:then users}
|
||||||
|
<ul>
|
||||||
|
{#each users as user}
|
||||||
|
<li>
|
||||||
|
<UserRow {user} />
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li>No Users found</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:catch error}
|
||||||
|
err0r
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.17;
|
|
||||||
font: var(--ink);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: var(--space);
|
grid-gap: 14px;
|
||||||
}
|
}
|
||||||
.background {
|
.background {
|
||||||
display: grid;
|
|
||||||
grid-gap: var(--space-md);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 12px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: var(--light-grey);
|
background-color: var(--light-grey);
|
||||||
padding: 12px 12px 18px 12px;
|
padding: 12px 12px 18px 12px;
|
||||||
}
|
}
|
||||||
.background :global(select) {
|
.background.create {
|
||||||
min-width: 100%;
|
background-color: var(--blue-light);
|
||||||
|
}
|
||||||
|
.inputs :global(select) {
|
||||||
padding: 12px 9px;
|
padding: 12px 9px;
|
||||||
height: initial;
|
height: initial;
|
||||||
}
|
}
|
||||||
.create-button {
|
.create-button {
|
||||||
display: flex;
|
position: absolute;
|
||||||
justify-content: flex-end;
|
top: 12px;
|
||||||
|
right: 12px;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-stretch: normal;
|
}
|
||||||
font-style: normal;
|
.inputs {
|
||||||
line-height: 1.14;
|
display: grid;
|
||||||
letter-spacing: 0.14px;
|
grid-gap: 18px;
|
||||||
text-align: left;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
color: var(--font);
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue