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
@@ -9,7 +9,7 @@
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<section class={`alert is-${type} common-section`}>
|
||||
<section class={`alert is-${type} `}>
|
||||
<div class="alert-grid">
|
||||
{#if dismissible}
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import { Card } from '$lib/components';
|
||||
export let show = false;
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<Card>
|
||||
<header class="modal-header">
|
||||
<h4 class="modal-title"><slot name="header" /></h4>
|
||||
<button
|
||||
type="button"
|
||||
class="x-button"
|
||||
aria-label="Close"
|
||||
title="Close"
|
||||
on:click={() => (show = false)}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="modal-content">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</Card>
|
||||
{/if}
|
||||
@@ -2,6 +2,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 CardDrop } from './cardDrop.svelte';
|
||||
export { default as Tile } from './tile.svelte';
|
||||
export { default as Tiles } from './tiles.svelte';
|
||||
export { default as Back } from './back.svelte';
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
|
||||
|
||||
export let show = false;
|
||||
|
||||
export let size: 'small' | 'big' = null;
|
||||
export let warning = false;
|
||||
let browser = false;
|
||||
//TODO: explore other solutions compatible with testing library
|
||||
onMount(() => {
|
||||
@@ -51,9 +52,18 @@
|
||||
|
||||
{#if show}
|
||||
<div class="modal-curtain" data-curtain on:click={handleBLur} transition:fade={transitionFade}>
|
||||
<section class="modal" transition:fly={transitionFly}>
|
||||
<section
|
||||
class:is-small={size === 'small'}
|
||||
class:is-big={size === 'big'}
|
||||
class="modal"
|
||||
transition:fly={transitionFly}>
|
||||
<header class="modal-header">
|
||||
<h4 class="modal-title">
|
||||
{#if warning}
|
||||
<div class="avatar is-color-orange is-medium">
|
||||
<span class="icon-exclamation" aria-hidden="true" />
|
||||
</div>
|
||||
{/if}
|
||||
<h4 class="heading-level-5">
|
||||
<slot name="header" />
|
||||
</h4>
|
||||
<button
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={update}>
|
||||
<Modal bind:show={showModal}>
|
||||
<Modal size="big" bind:show={showModal}>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={update}>
|
||||
<Modal bind:show={showModal}>
|
||||
<Modal size="big" bind:show={showModal}>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Modal } from '$lib/components';
|
||||
import { Modal, CardDrop } from '$lib/components';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { InputText, Button, Form, FormList } from '$lib/elements/forms';
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { sdkForProject } from '$lib/stores/sdk';
|
||||
@@ -9,11 +10,12 @@
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let name: string;
|
||||
let name: string, id: string;
|
||||
let showDropdown = false;
|
||||
|
||||
const create = async () => {
|
||||
try {
|
||||
const team = await sdkForProject.teams.create('unique()', name);
|
||||
const team = await sdkForProject.teams.create(id ? id : 'unique()', name);
|
||||
name = '';
|
||||
showCreate = false;
|
||||
dispatch('created', team);
|
||||
@@ -27,7 +29,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={create}>
|
||||
<Modal bind:show={showCreate}>
|
||||
<Modal size="big" bind:show={showCreate}>
|
||||
<svelte:fragment slot="header">Create Team</svelte:fragment>
|
||||
<FormList>
|
||||
<InputText
|
||||
@@ -36,6 +38,33 @@
|
||||
placeholder="John Doe"
|
||||
autofocus={true}
|
||||
bind:value={name} />
|
||||
{#if !showDropdown}
|
||||
<div>
|
||||
<Pill button on:click={() => (showDropdown = !showDropdown)}
|
||||
>Team ID <i class="icon-pencil" /></Pill>
|
||||
</div>
|
||||
{:else}
|
||||
<CardDrop bind:show={showDropdown}>
|
||||
<svelte:fragment slot="header">Team ID</svelte:fragment>
|
||||
<p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
|
||||
<svelte:fragment slot="footer">
|
||||
<input
|
||||
class="input-text "
|
||||
type="text"
|
||||
name="id"
|
||||
id="id"
|
||||
placeholder="Enter ID"
|
||||
bind:value={id} />
|
||||
<div class="u-flex u-gap-12">
|
||||
<div class="icon-info u-block" />
|
||||
<p class="u-small">
|
||||
Allowed characters: alphanumeric, hyphen, non-leading underscore,
|
||||
period
|
||||
</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</CardDrop>
|
||||
{/if}
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Modal } from '$lib/components';
|
||||
import { Modal, CardDrop } from '$lib/components';
|
||||
import { Pill } from '$lib/elements/';
|
||||
import {
|
||||
Button,
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let idModal = false;
|
||||
let showDropdown = false;
|
||||
let name: string, mail: string, pass: string, id: string;
|
||||
|
||||
const create = async () => {
|
||||
@@ -36,7 +36,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={create}>
|
||||
<Modal bind:show={showCreate}>
|
||||
<Modal size="big" bind:show={showCreate}>
|
||||
<svelte:fragment slot="header">Create User</svelte:fragment>
|
||||
<FormList>
|
||||
<InputText
|
||||
@@ -58,15 +58,32 @@
|
||||
required={true}
|
||||
bind:value={pass} />
|
||||
|
||||
<div>
|
||||
<Pill button on:click={() => (idModal = !idModal)}
|
||||
>User ID <i class="icon-pencil" /></Pill>
|
||||
</div>
|
||||
{#if idModal}
|
||||
<div class="common-section">
|
||||
<p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
|
||||
<InputText id="id" label="" placeholder="" bind:value={id} />
|
||||
{#if !showDropdown}
|
||||
<div>
|
||||
<Pill button on:click={() => (showDropdown = !showDropdown)}
|
||||
>User ID <i class="icon-pencil" /></Pill>
|
||||
</div>
|
||||
{:else}
|
||||
<CardDrop bind:show={showDropdown}>
|
||||
<svelte:fragment slot="header">User ID</svelte:fragment>
|
||||
<p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
|
||||
<svelte:fragment slot="footer">
|
||||
<input
|
||||
class="input-text "
|
||||
type="text"
|
||||
name="id"
|
||||
id="id"
|
||||
placeholder="Enter ID"
|
||||
bind:value={id} />
|
||||
<div class="u-flex u-gap-12">
|
||||
<div class="icon-info u-block" />
|
||||
<p class="u-small">
|
||||
Allowed characters: alphanumeric, hyphen, non-leading underscore,
|
||||
period
|
||||
</p>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</CardDrop>
|
||||
{/if}
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={update}>
|
||||
<Modal bind:show={showModal}>
|
||||
<Modal size="big" bind:show={showModal}>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={update}>
|
||||
<Modal bind:show={showModal}>
|
||||
<Modal size="big" bind:show={showModal}>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={update}>
|
||||
<Modal bind:show={showModal}>
|
||||
<Modal size="big" bind:show={showModal}>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={create}>
|
||||
<Modal bind:show={showCreate}>
|
||||
<Modal warning={true} bind:show={showCreate}>
|
||||
<svelte:fragment slot="header">Create User</svelte:fragment>
|
||||
<FormList>
|
||||
<InputEmail
|
||||
|
||||
@@ -35,8 +35,8 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteMembership}>
|
||||
<Modal bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete member</svelte:fragment>
|
||||
<Modal warning={true} bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete Member</svelte:fragment>
|
||||
|
||||
<p>
|
||||
Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteTeam}>
|
||||
<Modal bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete member</svelte:fragment>
|
||||
<Modal warning={true} bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete Team</svelte:fragment>
|
||||
|
||||
<p>
|
||||
Are you sure you want to delete <b>{team.name}</b>?
|
||||
|
||||
@@ -37,23 +37,25 @@
|
||||
{#each response.logs as log}
|
||||
<TableRow>
|
||||
<TableCellText title="Client">
|
||||
<div class="image-item">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
|
||||
alt={log.clientName} />
|
||||
</div>
|
||||
<span class="">
|
||||
<p>
|
||||
{log.clientName}
|
||||
{log.clientVersion}
|
||||
</p>
|
||||
<span class="u-small">
|
||||
on {log.osName}
|
||||
{log.osVersion}
|
||||
<div class="u-flex u-cross-center u-gap-12">
|
||||
<div class="image-item">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
|
||||
alt={log.clientName} />
|
||||
</div>
|
||||
<span class="u-line-height-1-5">
|
||||
<p>
|
||||
{log.clientName}
|
||||
{log.clientVersion}
|
||||
</p>
|
||||
<span class="u-small">
|
||||
on {log.osName}
|
||||
{log.osVersion}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</TableCellText>
|
||||
<TableCellText title="Event">{log.event}</TableCellText>
|
||||
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteAllMemberships}>
|
||||
<Modal bind:show={showDeleteAll}>
|
||||
<svelte:fragment slot="header">Delete all memberships</svelte:fragment>
|
||||
<Modal warning={true} bind:show={showDeleteAll}>
|
||||
<svelte:fragment slot="header">Delete All Memberships</svelte:fragment>
|
||||
|
||||
<p>
|
||||
Are you sure you want to delete <b>{$user.response.name}'s</b> all memberships?
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteAllSessions}>
|
||||
<Modal bind:show={showDeleteAll}>
|
||||
<Modal warning={true} bind:show={showDeleteAll}>
|
||||
<svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
|
||||
|
||||
<p>
|
||||
|
||||
@@ -35,8 +35,8 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteMembership}>
|
||||
<Modal bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete member</svelte:fragment>
|
||||
<Modal warning={true} bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete Member</svelte:fragment>
|
||||
<p>
|
||||
Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
|
||||
</p>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteSession}>
|
||||
<Modal bind:show={showDelete}>
|
||||
<Modal warning={true} bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete Sessions</svelte:fragment>
|
||||
|
||||
<p>Are you sure you want to delete this session?</p>
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
</script>
|
||||
|
||||
<Form on:submit={deleteUser}>
|
||||
<Modal bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete user</svelte:fragment>
|
||||
<Modal warning={true} bind:show={showDelete}>
|
||||
<svelte:fragment slot="header">Delete User</svelte:fragment>
|
||||
<p>Are you sure you want to delete <b>{$user.response.name}</b> from '{$project.name}'?</p>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button text on:click={() => (showDelete = false)}>Cancel</Button>
|
||||
|
||||
@@ -37,19 +37,25 @@
|
||||
{#each response.logs as log}
|
||||
<TableRow>
|
||||
<TableCellText title="Client">
|
||||
<div class="image-item">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
|
||||
alt={log.clientName} />
|
||||
<div class="u-flex u-cross-center u-gap-12">
|
||||
<div class="image-item">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/color/${log?.clientName.toLocaleLowerCase()}.svg`}
|
||||
alt={log.clientName} />
|
||||
</div>
|
||||
<span class="u-line-height-1-5">
|
||||
<p>
|
||||
{log.clientName}
|
||||
{log.clientVersion}
|
||||
</p>
|
||||
<span class="u-small">
|
||||
on {log.osName}
|
||||
{log.osVersion}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<p>
|
||||
{log.clientName}
|
||||
{log.clientVersion}
|
||||
</p>
|
||||
on {log.osName}
|
||||
{log.osVersion}
|
||||
</TableCellText>
|
||||
<TableCellText title="Event">{log.event}</TableCellText>
|
||||
|
||||
|
||||
@@ -50,21 +50,20 @@
|
||||
{#each response.sessions as session}
|
||||
<TableRow>
|
||||
<TableCellText title="Client">
|
||||
<div class="image-item">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/color/${session?.clientName.toLocaleLowerCase()}.svg`}
|
||||
alt={session.clientName} />
|
||||
<div class="u-flex u-cross-center u-gap-12">
|
||||
<div class="image-item">
|
||||
<img
|
||||
height="20"
|
||||
width="20"
|
||||
src={`/icons/color/${session?.clientName.toLocaleLowerCase()}.svg`}
|
||||
alt={session.clientName} />
|
||||
</div>
|
||||
<span class="u-line-height-1-5">
|
||||
<p>{session.clientName}</p>
|
||||
<span class="u-small">
|
||||
Last activity: {toLocaleDateTime(session?.expire)}
|
||||
</span></span>
|
||||
</div>
|
||||
<span>
|
||||
<p>
|
||||
{session.clientName}
|
||||
</p>
|
||||
<span class="u-small">
|
||||
Last activity: {toLocaleDateTime(session?.expire)}
|
||||
</span>
|
||||
</span>
|
||||
</TableCellText>
|
||||
|
||||
<TableCellText title="IP">{session.ip}</TableCellText>
|
||||
|
||||
Reference in New Issue
Block a user