mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: implemented new cards
This commit is contained in:
Arman
@@ -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,31 @@
|
||||
{#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">
|
||||
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<h6 class="heading-level-7">Update Name</h6>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputText
|
||||
id="name"
|
||||
@@ -75,42 +81,47 @@
|
||||
<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">
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<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">
|
||||
|
||||
<p>
|
||||
The team will be permanently deleted, including all data associated with this
|
||||
team. This action is irreversible.
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
<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';
|
||||
@@ -169,13 +169,11 @@
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
<Card>
|
||||
<div class="u-flex u-gap-12 common-section">
|
||||
<div class="user-profile-button">
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<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,12 +181,15 @@
|
||||
>{$user.response.emailVerification ? 'Verified' : 'Unverified'}</Pill>
|
||||
{/if}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="right">
|
||||
<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">
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button
|
||||
text={$user.response.status}
|
||||
secondary={!$user.response.status}
|
||||
@@ -198,11 +199,14 @@
|
||||
<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>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<h6 class="heading-level-7">Update Name</h6>
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputText
|
||||
id="name"
|
||||
@@ -214,18 +218,21 @@
|
||||
<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={!userName}
|
||||
on:click={() => {
|
||||
updateName();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<h6 class="heading-level-7">Update Email</h6>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputEmail
|
||||
id="email"
|
||||
@@ -237,24 +244,27 @@
|
||||
<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={!userEmail}
|
||||
on:click={() => {
|
||||
updateEmail();
|
||||
}}>Update</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="u-flex u-main-space-between u-gap-12 common-section">
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<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>
|
||||
|
||||
<p>
|
||||
Enter a new password. A password must contain <b> at least 8 characters.</b>
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="right">
|
||||
<ul>
|
||||
<InputPassword
|
||||
id="newPassword"
|
||||
@@ -267,93 +277,103 @@
|
||||
<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={!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>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
<CardGrid>
|
||||
<svelte:fragment slot="left">
|
||||
<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>
|
||||
<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}
|
||||
{/if}
|
||||
|
||||
</ul>
|
||||
<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>
|
||||
</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>
|
||||
<svelte:fragment slot="left">
|
||||
<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">
|
||||
<p>
|
||||
The user will be permanently deleted, including all data associated with this user.
|
||||
This action is irreversible.
|
||||
</p>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="right">
|
||||
<Box>
|
||||
<svelte:fragment slot="image">
|
||||
<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">
|
||||
</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>
|
||||
</div>
|
||||
</Card>
|
||||
</svelte:fragment>
|
||||
</CardGrid>
|
||||
</Container>
|
||||
|
||||
<DeleteUser bind:showDelete />
|
||||
|
||||
Reference in New Issue
Block a user