mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge branch 'users' of github.com:appwrite/appwrite-console-poc into storage
This commit is contained in:
Arman
Generated
+14
-14
@@ -8,8 +8,8 @@
|
||||
"name": "@appwrite/console",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@aw-labs/icons": "^0.0.0-13",
|
||||
"@aw-labs/ui": "^0.0.0-13"
|
||||
"@aw-labs/icons": "^0.0.0-14",
|
||||
"@aw-labs/ui": "^0.0.0-14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.22.2",
|
||||
@@ -57,14 +57,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@aw-labs/icons": {
|
||||
"version": "0.0.0-13",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-13.tgz",
|
||||
"integrity": "sha512-ZzCoaxfhcaE3j57xzpFsw+QQ79wpDSRN+vi9VGZJRBKpVTE1j3T860SrYsh6viNGXmq2molf79ICb4/hyK4t7Q=="
|
||||
"version": "0.0.0-14",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-14.tgz",
|
||||
"integrity": "sha512-cvh/SXMdxc07w3ygA/fGiIN8d0+7L4k5nhf5cn9tjgN2x1qFco4oaqxqRc6h4AB/ScPnlusDuKqcXfSQYnGiEA=="
|
||||
},
|
||||
"node_modules/@aw-labs/ui": {
|
||||
"version": "0.0.0-13",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-13.tgz",
|
||||
"integrity": "sha512-r00vTDAB72L1nCKgJWyqJIpA67eO9LEyezz5hBDwls02TOMmkungJaJidlmLDJHhzLpRpqNik8Ey1udp7Wve0Q==",
|
||||
"version": "0.0.0-14",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-14.tgz",
|
||||
"integrity": "sha512-IZhFmuFdM0Dkmse8q5lRPClhrlLIKhin231yV4weeujlIyd35B4cCR+J3TpsFZ6zs+2Sn2fV9PNDEBjiGwKanQ==",
|
||||
"dependencies": {
|
||||
"@aw-labs/icons": "*"
|
||||
}
|
||||
@@ -7779,14 +7779,14 @@
|
||||
}
|
||||
},
|
||||
"@aw-labs/icons": {
|
||||
"version": "0.0.0-13",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-13.tgz",
|
||||
"integrity": "sha512-ZzCoaxfhcaE3j57xzpFsw+QQ79wpDSRN+vi9VGZJRBKpVTE1j3T860SrYsh6viNGXmq2molf79ICb4/hyK4t7Q=="
|
||||
"version": "0.0.0-14",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-14.tgz",
|
||||
"integrity": "sha512-cvh/SXMdxc07w3ygA/fGiIN8d0+7L4k5nhf5cn9tjgN2x1qFco4oaqxqRc6h4AB/ScPnlusDuKqcXfSQYnGiEA=="
|
||||
},
|
||||
"@aw-labs/ui": {
|
||||
"version": "0.0.0-13",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-13.tgz",
|
||||
"integrity": "sha512-r00vTDAB72L1nCKgJWyqJIpA67eO9LEyezz5hBDwls02TOMmkungJaJidlmLDJHhzLpRpqNik8Ey1udp7Wve0Q==",
|
||||
"version": "0.0.0-14",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-14.tgz",
|
||||
"integrity": "sha512-IZhFmuFdM0Dkmse8q5lRPClhrlLIKhin231yV4weeujlIyd35B4cCR+J3TpsFZ6zs+2Sn2fV9PNDEBjiGwKanQ==",
|
||||
"requires": {
|
||||
"@aw-labs/icons": "*"
|
||||
}
|
||||
|
||||
+2
-2
@@ -19,8 +19,8 @@
|
||||
"e2e": "playwright test tests/e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@aw-labs/ui": "^0.0.0-13",
|
||||
"@aw-labs/icons": "^0.0.0-13"
|
||||
"@aw-labs/ui": "^0.0.0-14",
|
||||
"@aw-labs/icons": "^0.0.0-14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.22.2",
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="box">
|
||||
<div class="u-flex u-gap-16">
|
||||
<slot name="image" />
|
||||
<div class="u-cross-child-center u-line-height-1-5">
|
||||
<slot name="title" />
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import { Card } from './';
|
||||
</script>
|
||||
|
||||
<Card>
|
||||
<div class="common-section grid-1-2">
|
||||
<div class="grid-1-2-col-1">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="grid-1-2-col-2">
|
||||
<slot name="right" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="common-section card-separator u-flex u-main-end">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</Card>
|
||||
@@ -1,6 +1,7 @@
|
||||
export { default as Modal } from './modal.svelte';
|
||||
export { default as Pagination } from './pagination.svelte';
|
||||
export { default as Card } from './card.svelte';
|
||||
export { default as CardGrid } from './cardGrid.svelte';
|
||||
export { default as Tile } from './tile.svelte';
|
||||
export { default as Tiles } from './tiles.svelte';
|
||||
export { default as Back } from './back.svelte';
|
||||
@@ -20,3 +21,4 @@ export { default as Avatar } from './avatar.svelte';
|
||||
export { default as SwitchBox } from './switchBox.svelte';
|
||||
export { default as SwitchBoxes } from './switchBoxes.svelte';
|
||||
export { default as Alert } from './alert.svelte';
|
||||
export { default as Box } from './box.svelte';
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
<slot />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="u-flex u-main-space-end u-gap-12">
|
||||
<div class="u-flex u-main-end u-gap-12">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,8 +38,8 @@
|
||||
bind:value={name} />
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button submit>Create</Button>
|
||||
<Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
|
||||
<Button submit>Create</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
</Form>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Card } from '$lib/components';
|
||||
import { CardGrid } from '$lib/components';
|
||||
import { Pill } from '$lib/elements/';
|
||||
import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
|
||||
import { Container } from '$lib/layout';
|
||||
@@ -11,7 +11,6 @@
|
||||
let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
|
||||
let newLimit = $project.authLimit === 0 ? 100 : $project.authLimit;
|
||||
let btnActive = false;
|
||||
let first = true;
|
||||
|
||||
let options = [
|
||||
{ label: 'years', value: 'years' },
|
||||
@@ -21,8 +20,10 @@
|
||||
|
||||
$: {
|
||||
if (isLimited) {
|
||||
if (first) {
|
||||
first = false;
|
||||
if (isLimited === 'unlimited' && $project.authLimit === 0) {
|
||||
btnActive = false;
|
||||
} else if (isLimited === 'limited' && $project.authLimit === newLimit) {
|
||||
btnActive = false;
|
||||
} else {
|
||||
btnActive = true;
|
||||
}
|
||||
@@ -52,7 +53,7 @@
|
||||
}
|
||||
async function updateSessionLength() {
|
||||
try {
|
||||
//Some SDK call
|
||||
//TODO: implement correct SDK call
|
||||
|
||||
addNotification({
|
||||
type: 'success',
|
||||
@@ -68,18 +69,14 @@
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div>
|
||||
<h2 class="heading-level-6">Users Limit</h2>
|
||||
<p>
|
||||
This limits new users from signing up for your project, regardless of
|
||||
authentication method. You can still create users from your Appwrite
|
||||
console.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<CardGrid>
|
||||
<h2 class="heading-level-6">Users Limit</h2>
|
||||
<p>
|
||||
This limits new users from signing up for your project, regardless of authentication
|
||||
method. You can still create users from your Appwrite console.
|
||||
</p>
|
||||
|
||||
<svelte:fragment slot="right">
|
||||
<ul class="u-flex u-gap-12">
|
||||
<li>
|
||||
<div class="input-text-wrapper">
|
||||
@@ -112,38 +109,44 @@
|
||||
bind:value={newLimit} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
disabled={!btnActive}
|
||||
on:click={() => {
|
||||
updateLimit();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div>
|
||||
<h2 class="heading-level-6">Session Length</h2>
|
||||
<p>
|
||||
If you reduce the limit, users who are currently logged in will be logged
|
||||
out of the application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="u-flex u-gap-12">
|
||||
<InputNumber id="length" label="Length" value={1} />
|
||||
<InputSelect id="period" {options} label="Time Period" value={options[0].value} />
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<CardGrid>
|
||||
<h2 class="heading-level-6">Session Length</h2>
|
||||
<p>
|
||||
If you reduce the limit, users who are currently logged in will be logged out of the
|
||||
application.
|
||||
</p>
|
||||
<svelte:fragment slot="right">
|
||||
<form class="form u-grid u-gap-16">
|
||||
<ul class="form-list">
|
||||
<li class="form-item is-multiple">
|
||||
<InputNumber id="length" label="Length" value={1} />
|
||||
<InputSelect
|
||||
id="period"
|
||||
{options}
|
||||
label="Time Period"
|
||||
value={options[0].value} />
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
disabled={true}
|
||||
on:click={() => {
|
||||
updateSessionLength();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Container>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { Card, Avatar } from '$lib/components';
|
||||
import { Card, Avatar, CardGrid, Box } from '$lib/components';
|
||||
import { Container } from '$lib/layout';
|
||||
import { Button, InputText, Helper } from '$lib/elements/forms';
|
||||
import { sdkForProject } from '$lib/stores/sdk';
|
||||
@@ -45,25 +45,29 @@
|
||||
{#if $team.response}
|
||||
<Container>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div class="user-profile-button">
|
||||
<Avatar
|
||||
size={40}
|
||||
name={$team.response.name}
|
||||
src={getAvatar($team.response.name)} />
|
||||
<span class="user-profile-info">
|
||||
<h6 class="heading-level-7">{$team.response.name}</h6>
|
||||
<span class="title">{$team.response.total} Members</span>
|
||||
</span>
|
||||
<div class="common-section grid-1-2">
|
||||
<div class="grid-1-2-col-1">
|
||||
<div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
|
||||
<Avatar
|
||||
size={64}
|
||||
name={$team.response.name}
|
||||
src={getAvatar($team.response.name)} />
|
||||
<div>
|
||||
<h6 class="heading-level-7">{$team.response.name}</h6>
|
||||
<p>{$team.response.total} Members</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid-1-2-col-2">
|
||||
<p>Created on {toLocaleDate($team.response.dateCreated)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<h6 class="heading-level-7">Update Name</h6>
|
||||
|
||||
<CardGrid>
|
||||
<h6 class="heading-level-7">Update Name</h6>
|
||||
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputText
|
||||
id="name"
|
||||
@@ -75,42 +79,45 @@
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
disabled={!teamName}
|
||||
on:click={() => {
|
||||
updateName();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div>
|
||||
<h6 class="heading-level-7">Danger Zone</h6>
|
||||
<p>
|
||||
The team will be permanently deleted, including all data associated with
|
||||
this team. This action is irreversible.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-profile-button">
|
||||
<CardGrid>
|
||||
<div>
|
||||
<h6 class="heading-level-7">Danger Zone</h6>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
The team will be permanently deleted, including all data associated with this team.
|
||||
This action is irreversible.
|
||||
</p>
|
||||
<svelte:fragment slot="right">
|
||||
<Box>
|
||||
<svelte:fragment slot="image">
|
||||
<Avatar
|
||||
size={64}
|
||||
name={$team.response.name}
|
||||
src={getAvatar($team.response.name)} />
|
||||
<span class="user-profile-info">
|
||||
<h6 class="heading-level-7">{$team.response.name}</h6>
|
||||
<span class="title">{$team.response.total} Members</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="title">
|
||||
<h6 class="u-bold">{$team.response.name}</h6>
|
||||
<span>{$team.response.total} Members</span>
|
||||
</svelte:fragment>
|
||||
</Box>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button secondary on:click={() => (showDelete = true)}>Delete</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Container>
|
||||
<DeleteTeam team={$team.response} bind:showDelete />
|
||||
{/if}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { toLocaleDate } from '$lib/helpers/date';
|
||||
import { Avatar, Card } from '$lib/components';
|
||||
import { Avatar, CardGrid, Box } from '$lib/components';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { Button, InputText, InputEmail, InputPassword, Helper } from '$lib/elements/forms';
|
||||
import { Container } from '$lib/layout';
|
||||
@@ -168,14 +168,12 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Card>
|
||||
<div class="u-flex u-gap-12 common-section">
|
||||
<div class="user-profile-button">
|
||||
{#if $user.response}
|
||||
<Container>
|
||||
<CardGrid>
|
||||
<div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
|
||||
<Avatar size={64} name={$user.response.name} src={getAvatar($user.response.name)} />
|
||||
<span class="user-profile-info">
|
||||
<h6 class="heading-level-7">{$user.response.name}</h6>
|
||||
</span>
|
||||
<h6 class="heading-level-7">{$user.response.name}</h6>
|
||||
{#if !$user.response.status}
|
||||
<Pill danger>Blocked</Pill>
|
||||
{:else}
|
||||
@@ -183,177 +181,188 @@
|
||||
>{$user.response.emailVerification ? 'Verified' : 'Unverified'}</Pill>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">{$user.response.email}</span>
|
||||
<p>Joined: {toLocaleDate($user.response.registration)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end u-gap-12 common-section">
|
||||
<Button
|
||||
text={$user.response.status}
|
||||
secondary={!$user.response.status}
|
||||
on:click={() => updateStatus()}
|
||||
>{$user.response.status ? 'Block Account' : 'Unblock Accout'}</Button>
|
||||
{#if $user.response.status}
|
||||
<Button secondary on:click={() => updateVerification()}
|
||||
>{$user.response.emailVerification ? 'Unverify' : 'Verify'} Account</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<svelte:fragment slot="right">
|
||||
<div>
|
||||
<span class="title">{$user.response.email}</span>
|
||||
<p>Joined: {toLocaleDate($user.response.registration)}</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
text={$user.response.status}
|
||||
secondary={!$user.response.status}
|
||||
on:click={() => updateStatus()}
|
||||
>{$user.response.status ? 'Block Account' : 'Unblock Accout'}</Button>
|
||||
{#if $user.response.status}
|
||||
<Button secondary on:click={() => updateVerification()}
|
||||
>{$user.response.emailVerification ? 'Unverify' : 'Verify'} Account</Button>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<h6 class="heading-level-7">Update Name</h6>
|
||||
<ul>
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder={$user.response.name}
|
||||
autocomplete={false}
|
||||
bind:value={userName} />
|
||||
{#if showError === 'name'}
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<Button
|
||||
disabled={!userName}
|
||||
on:click={() => {
|
||||
updateName();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputText
|
||||
id="name"
|
||||
label="Name"
|
||||
placeholder={$user.response.name}
|
||||
autocomplete={false}
|
||||
bind:value={userName} />
|
||||
{#if showError === 'name'}
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
</ul>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
disabled={!userName}
|
||||
on:click={() => {
|
||||
updateName();
|
||||
}}>Update</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<h6 class="heading-level-7">Update Email</h6>
|
||||
<ul>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder={$user.response.email}
|
||||
autocomplete={false}
|
||||
bind:value={userEmail} />
|
||||
{#if showError === 'email'}
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<Button
|
||||
disabled={!userEmail}
|
||||
on:click={() => {
|
||||
updateEmail();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputEmail
|
||||
id="email"
|
||||
label="Email"
|
||||
placeholder={$user.response.email}
|
||||
autocomplete={false}
|
||||
bind:value={userEmail} />
|
||||
{#if showError === 'email'}
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
</ul>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
disabled={!userEmail}
|
||||
on:click={() => {
|
||||
updateEmail();
|
||||
}}>Update</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<div>
|
||||
<h6 class="heading-level-7">Update Password</h6>
|
||||
<p>
|
||||
Enter a new password. A password must contain <b> at least 8 characters.</b>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<InputPassword
|
||||
id="newPassword"
|
||||
label="New Password"
|
||||
placeholder="Enter new password"
|
||||
autocomplete={false}
|
||||
meter={false}
|
||||
bind:value={newPassword} />
|
||||
{#if showError === 'password'}
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<Button
|
||||
disabled={!newPassword}
|
||||
on:click={() => {
|
||||
updatePassword();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<div>
|
||||
<h6 class="heading-level-7">User Preferences</h6>
|
||||
<p>
|
||||
You can update your user preferences by storing information on the user's
|
||||
objects so they can easily be shared across devices and sessions.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{#if prefs}
|
||||
{#each prefs as [key, value]}
|
||||
<ul class="u-flex u-gap-12">
|
||||
<InputText id={`key-${key}`} label="Key" bind:value={key} />
|
||||
<InputText id={`value-${value}`} label="Value" bind:value />
|
||||
<Button text on:click={() => deletePref(key)}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</ul>
|
||||
{/each}
|
||||
{#if prefs.length === 0 || newPref}
|
||||
<ul class="u-flex u-gap-12">
|
||||
<InputText
|
||||
id="key"
|
||||
label="Key"
|
||||
placeholder="Enter Key"
|
||||
bind:value={newKey} />
|
||||
<InputText
|
||||
id="value"
|
||||
label="Value"
|
||||
placeholder="Enter Value"
|
||||
bind:value={newValue} />
|
||||
<Button
|
||||
text
|
||||
disabled={!prefs.length}
|
||||
on:click={() => (newPref = false)}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</ul>
|
||||
<p>
|
||||
Enter a new password. A password must contain <b> at least 8 characters.</b>
|
||||
</p>
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputPassword
|
||||
id="newPassword"
|
||||
label="New Password"
|
||||
placeholder="Enter new password"
|
||||
autocomplete={false}
|
||||
meter={false}
|
||||
bind:value={newPassword} />
|
||||
{#if showError === 'password'}
|
||||
<Helper type={errorType}>{errorMessage}</Helper>
|
||||
{/if}
|
||||
{/if}
|
||||
</ul>
|
||||
</svelte:fragment>
|
||||
|
||||
<Button text on:click={() => (newPref = true)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text"> Add Preferences </span></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<Button disabled={arePrefsDisabled} on:click={() => updatePrefs()}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
disabled={!newPassword}
|
||||
on:click={() => {
|
||||
updatePassword();
|
||||
}}>Update</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<h6 class="heading-level-7">User Preferences</h6>
|
||||
<p>
|
||||
You can update your user preferences by storing information on the user's objects so
|
||||
they can easily be shared across devices and sessions.
|
||||
</p>
|
||||
<svelte:fragment slot="right">
|
||||
<form class="form u-grid u-gap-16">
|
||||
<ul class="form-list">
|
||||
{#if prefs}
|
||||
{#each prefs as [key, value]}
|
||||
<li class="form-item is-multiple">
|
||||
<InputText id={`key-${key}`} label="Key" bind:value={key} />
|
||||
<InputText id={`value-${value}`} label="Value" bind:value />
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
<Button text on:click={() => deletePref(key)}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
{#if prefs.length === 0 || newPref}
|
||||
<li class="form-item is-multiple">
|
||||
<InputText
|
||||
id="key"
|
||||
label="Key"
|
||||
placeholder="Enter Key"
|
||||
bind:value={newKey} />
|
||||
<InputText
|
||||
id="value"
|
||||
label="Value"
|
||||
placeholder="Enter Value"
|
||||
bind:value={newValue} />
|
||||
<div class="form-item-part u-cross-child-end">
|
||||
<Button
|
||||
text
|
||||
disabled={!prefs.length}
|
||||
on:click={() => (newPref = false)}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
{/if}
|
||||
{/if}
|
||||
</ul>
|
||||
<Button text on:click={() => (newPref = true)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text"> Add Preferences </span></Button>
|
||||
</form>
|
||||
</svelte:fragment>
|
||||
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
<svelte:fragment slot="actions">
|
||||
<Button disabled={arePrefsDisabled} on:click={() => updatePrefs()}>Update</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
|
||||
<CardGrid>
|
||||
<div>
|
||||
<h6 class="heading-level-7">Danger Zone</h6>
|
||||
<p>
|
||||
The user will be permanently deleted, including all data associated with this
|
||||
user. This action is irreversible.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-profile-button">
|
||||
<Avatar
|
||||
size={64}
|
||||
name={$user.response.name}
|
||||
src={getAvatar($user.response.name)} />
|
||||
<span class="user-profile-info">
|
||||
<h6 class="heading-level-7">{$user.response.name}</h6>
|
||||
<span class="title">{$user.response.email}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<Button secondary on:click={() => (showDelete = true)}>Delete</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</Container>
|
||||
<p>
|
||||
The user will be permanently deleted, including all data associated with this user.
|
||||
This action is irreversible.
|
||||
</p>
|
||||
<svelte:fragment slot="right">
|
||||
<Box>
|
||||
<svelte:fragment slot="image">
|
||||
<Avatar
|
||||
size={64}
|
||||
name={$user.response.name}
|
||||
src={getAvatar($user.response.name)} />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="title">
|
||||
<h6 class="u-bold">{$user.response.name}</h6>
|
||||
</svelte:fragment>
|
||||
<p>{$user.response.email}</p>
|
||||
</Box>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button secondary on:click={() => (showDelete = true)}>Delete</Button>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Container>
|
||||
{/if}
|
||||
<DeleteUser bind:showDelete />
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<div aria-busy="true" />
|
||||
{:then response}
|
||||
{#if response.total}
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<div class="u-flex u-main-end common-section">
|
||||
<Button secondary on:click={() => (showDeleteAll = true)}>
|
||||
<span class="text">Delete All</span>
|
||||
</Button>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<div aria-busy="true" />
|
||||
{:then response}
|
||||
{#if response.total}
|
||||
<div class="u-flex u-main-space-end common-section">
|
||||
<div class="u-flex u-main-end common-section">
|
||||
<Button secondary on:click={() => (showDeleteAll = true)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Delete All</span>
|
||||
|
||||
Reference in New Issue
Block a user