Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #74 from appwrite/usability-v3

Browse Source 
feat: usability v3
This commit is contained in:
Torsten Dittmann
2022-10-13 13:04:31 +02:00
committed by GitHub
parent e3aed6257c f0612ae754
commit d8fcd2bbd7
22 changed files with 222 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/project-[project]/authentication/_appleOAuth.svelte
+28 -10
View File
@@ -12,23 +12,37 @@
import { addNotification } from '$lib/stores/notifications';
import { sdkForConsole } from '$lib/stores/sdk';
import type { Provider } from '$lib/stores/oauth-providers';
import { onMount } from 'svelte';
export let showModal = false;
export let provider: Provider;
let { keyID, teamID, p8 } = JSON.parse(provider.secret);
let id: string = null;
let active = false;
let keyID: string = null;
let teamID: string = null;
let p8: string = null;
onMount(() => {
id ??= provider.id;
active ??= provider.active;
if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
});
let error: string;
const projectId = $page.params.project;
const update = async () => {
try {
const secret = JSON.stringify({ keyID, teamID, p8 });
await sdkForConsole.projects.updateOAuth2(
projectId,
provider.name.toLowerCase(),
provider.id,
id,
secret
);
provider.active = active;
provider.id = id;
provider.secret = secret;
showModal = false;
addNotification({
type: 'success',
@@ -40,9 +54,11 @@
error = message;
}
};
$: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
</script>
<Form on:submit={update}>
<Form noMargin on:submit={update}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
@@ -53,16 +69,13 @@
visit the docs.
</a>
</p>
<InputSwitch
id="state"
bind:value={provider.active}
label={provider.active ? 'Enabled' : 'Disabled'} />
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
<InputText
id="bundleID"
label="Bundle ID"
autofocus={true}
placeholder="com.company.appname"
bind:value={provider.id} />
bind:value={id} />
<InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} />
<InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} />
<InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} />
@@ -79,7 +92,12 @@
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
<Button submit>Update</Button>
<Button
disabled={(secret === provider.secret &&
active === provider.active &&
id === provider.id) ||
!(id && keyID && teamID && p8)}
submit>Update</Button>
</svelte:fragment>
</Modal>
</Form>
src/routes/console/project-[project]/authentication/_auth0OAuth.svelte
+30 -10
View File
@@ -12,23 +12,35 @@
import { sdkForConsole } from '$lib/stores/sdk';
import type { Provider } from '$lib/stores/oauth-providers';
import { addNotification } from '$lib/stores/notifications';
import { onMount } from 'svelte';
export let showModal = false;
export let provider: Provider;
let { clientSecret, auth0Domain } = JSON.parse(provider.secret);
let id: string = null;
let active = false;
let clientSecret: string = null;
let auth0Domain: string = null;
let error: string;
onMount(() => {
id ??= provider.id;
active ??= provider.active;
if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
});
const projectId = $page.params.project;
const update = async () => {
try {
const secret = JSON.stringify({ clientSecret, auth0Domain });
await sdkForConsole.projects.updateOAuth2(
projectId,
provider.name.toLowerCase(),
provider.id,
id,
secret
);
provider.active = active;
provider.id = id;
provider.secret = secret;
showModal = false;
addNotification({
type: 'success',
@@ -40,9 +52,14 @@
error = message;
}
};
$: secret =
clientSecret && auth0Domain
? JSON.stringify({ clientSecret, auth0Domain })
: provider.secret;
</script>
<Form on:submit={update}>
<Form noMargin on:submit={update}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
@@ -52,20 +69,18 @@
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
>visit the docs.</a>
</p>
<InputSwitch
id="state"
bind:value={provider.active}
label={provider.active ? 'Enabled' : 'Disabled'} />
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
<InputText
id="clientID"
label="Client ID"
autofocus={true}
placeholder="Enter ID"
bind:value={provider.id} />
bind:value={id} />
<InputPassword
id="secret"
label="Client Secret"
placeholder="Enter Client Secret"
minlength={0}
showPasswordButton
bind:value={clientSecret} />
<InputText
@@ -86,7 +101,12 @@
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
<Button submit>Update</Button>
<Button
disabled={(secret === provider.secret &&
active === provider.active &&
id === provider.id) ||
!(id && clientSecret && auth0Domain)}
submit>Update</Button>
</svelte:fragment>
</Modal>
</Form>
src/routes/console/project-[project]/authentication/_mainOAuth.svelte
+27 -10
View File
@@ -12,12 +12,22 @@
import { sdkForConsole } from '$lib/stores/sdk';
import type { Provider } from '$lib/stores/oauth-providers';
import { addNotification } from '$lib/stores/notifications';
import { onMount } from 'svelte';
export let showModal = false;
export let provider: Provider;
const projectId = $page.params.project;
let active = false;
let id: string = null;
let secret: string = null;
onMount(() => {
active ??= provider.active;
id ??= provider.id;
secret ??= provider.secret;
});
let error: string;
const update = async () => {
@@ -25,9 +35,12 @@
await sdkForConsole.projects.updateOAuth2(
projectId,
provider.name.toLowerCase(),
provider.id,
provider.secret
id,
secret
);
provider.active = active;
provider.id = id;
provider.secret = secret;
showModal = false;
addNotification({
type: 'success',
@@ -41,7 +54,7 @@
};
</script>
<Form on:submit={update}>
<Form noMargin on:submit={update}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
@@ -51,22 +64,20 @@
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
>visit the docs.</a>
</p>
<InputSwitch
id="state"
bind:value={provider.active}
label={provider.active ? 'Enabled' : 'Disabled'} />
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
<InputText
id="appID"
label="App ID"
autofocus={true}
placeholder="Enter ID"
bind:value={provider.id} />
bind:value={id} />
<InputPassword
id="secret"
label="App Secret"
placeholder="Enter App Secret"
minlength={0}
showPasswordButton
bind:value={provider.secret} />
bind:value={secret} />
<Alert type="info">
To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
</Alert>
@@ -80,7 +91,13 @@
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
<Button submit>Update</Button>
<Button
disabled={!id ||
!secret ||
(id === provider.id &&
secret === provider.secret &&
active === provider.active)}
submit>Update</Button>
</svelte:fragment>
</Modal>
</Form>
src/routes/console/project-[project]/authentication/_microsoftOAuth.svelte
+28 -10
View File
@@ -12,24 +12,36 @@
import { sdkForConsole } from '$lib/stores/sdk';
import type { Provider } from '$lib/stores/oauth-providers';
import { addNotification } from '$lib/stores/notifications';
import { onMount } from 'svelte';
export let showModal = false;
export let provider: Provider;
let { clientSecret, tenantID } = JSON.parse(provider.secret);
let id: string = null;
let active = false;
let clientSecret: string = null;
let tenantID: string = null;
let error: string;
onMount(() => {
id ??= provider.id;
active ??= provider.active;
if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
});
const projectId = $page.params.project;
const update = async () => {
try {
const secret = JSON.stringify({ clientSecret, tenantID });
await sdkForConsole.projects.updateOAuth2(
projectId,
provider.name.toLowerCase(),
provider.id,
id,
secret
);
provider.active = active;
provider.id = id;
provider.secret = secret;
showModal = false;
addNotification({
@@ -42,9 +54,12 @@
error = message;
}
};
$: secret =
clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
</script>
<Form on:submit={update}>
<Form noMargin on:submit={update}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
@@ -55,21 +70,19 @@
visit the docs.
</a>
</p>
<InputSwitch
id="state"
bind:value={provider.active}
label={provider.active ? 'Enabled' : 'Disabled'} />
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
<InputText
id="appID"
label="Application (client) ID"
autofocus={true}
placeholder="Enter ID"
bind:value={provider.id} />
bind:value={id} />
<InputPassword
id="secret"
label="Client Secret"
placeholder="Enter Client Secret"
showPasswordButton
minlength={0}
bind:value={clientSecret} />
<InputText
id="tenant"
@@ -89,7 +102,12 @@
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
<Button submit>Update</Button>
<Button
disabled={(secret === provider.secret &&
active === provider.active &&
id === provider.id) ||
!(id && clientSecret && tenantID)}
submit>Update</Button>
</svelte:fragment>
</Modal>
</Form>
src/routes/console/project-[project]/authentication/_oktaOAuth.svelte
+33 -10
View File
@@ -12,24 +12,39 @@
import { sdkForConsole } from '$lib/stores/sdk';
import type { Provider } from '$lib/stores/oauth-providers';
import { addNotification } from '$lib/stores/notifications';
import { onMount } from 'svelte';
export let showModal = false;
export let provider: Provider;
let { clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret);
let id: string = null;
let active = false;
let clientSecret: string = null;
let oktaDomain: string = null;
let authorizationServerId: string = null;
onMount(() => {
id ??= provider.id;
active ??= provider.active;
if (provider.secret)
({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
});
let error: string;
const projectId = $page.params.project;
const update = async () => {
try {
const secret = JSON.stringify({ clientSecret, oktaDomain, authorizationServerId });
await sdkForConsole.projects.updateOAuth2(
projectId,
provider.name.toLowerCase(),
provider.id,
id,
secret
);
provider.active = active;
provider.id = id;
provider.secret = secret;
showModal = false;
addNotification({
type: 'success',
@@ -41,9 +56,14 @@
error = message;
}
};
$: secret =
clientSecret && oktaDomain && authorizationServerId
? JSON.stringify({ clientSecret, oktaDomain, authorizationServerId })
: provider.secret;
</script>
<Form on:submit={update}>
<Form noMargin on:submit={update}>
<Modal {error} size="big" bind:show={showModal}>
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
<FormList>
@@ -53,20 +73,18 @@
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
>visit the docs.</a>
</p>
<InputSwitch
id="state"
bind:value={provider.active}
label={provider.active ? 'Enabled' : 'Disabled'} />
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
<InputText
id="appID"
label="Client ID"
autofocus={true}
placeholder="Enter ID"
bind:value={provider.id} />
bind:value={id} />
<InputPassword
id="secret"
label="Client Secret"
placeholder="Enter Client Secret"
minlength={0}
showPasswordButton
bind:value={clientSecret} />
<InputText
@@ -93,7 +111,12 @@
</FormList>
<svelte:fragment slot="footer">
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
<Button submit>Update</Button>
<Button
disabled={(secret === provider.secret &&
active === provider.active &&
id === provider.id) ||
!(id && clientSecret && oktaDomain && authorizationServerId)}
submit>Update</Button>
</svelte:fragment>
</Modal>
</Form>
src/routes/console/project-[project]/authentication/settings/+page.svelte
+2 -2
View File
@@ -70,6 +70,7 @@
<ul class="grid-box common-section">
{#each $OAuthProviders.providers as provider}
<button
class="card u-flex u-flex-vertical u-cross-center"
on:click={() => {
selectedProvider = provider;
showModal = true;
@@ -81,8 +82,7 @@
parameters: {
provider: provider.name
}
}}
class="card u-flex u-flex-vertical u-cross-center">
}}>
<div class="image-item">
<img
height="20"
src/routes/console/project-[project]/databases/+page.svelte
+8 -1
View File
@@ -65,7 +65,14 @@
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Create your first Database to get started</p>
<div class="u-text-center">
<p class="text u-line-height-1-5">Create your first Database to get started</p>
<p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
</div>
<div class="u-flex u-gap-12">
<Button external href="#/" text>Documentation</Button>
<Button secondary>Create Database</Button>
</div>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+8 -1
View File
@@ -78,7 +78,14 @@
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Create your first collection to get started</p>
<div class="u-text-center">
<p class="text u-line-height-1-5">Create your first collection to get started</p>
<p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
</div>
<div class="u-flex u-gap-12 ">
<Button external href="#/" text>Documentation</Button>
<Button secondary>Create Collection</Button>
</div>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/boolean.svelte
+4
View File
@@ -49,6 +49,10 @@
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
//TODO: refactor to use context module instead of submitted
</script>
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/createAttribute.svelte
+6
View File
@@ -19,6 +19,12 @@
$: if (selectedOption) {
$option = options.find((option) => option.name === selectedOption);
}
$: if (!showCreate) {
key = null;
selectedOption = null;
submitted = false;
}
</script>
<Form on:submit={() => (submitted = true)}>
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/email.svelte
+4
View File
@@ -51,6 +51,10 @@
({ required, array } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputText
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/enum.svelte
+3
View File
@@ -58,6 +58,9 @@
({ required, array, elements } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputTags
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/float.svelte
+4
View File
@@ -55,6 +55,10 @@
({ required, array, min, max } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/integer.svelte
+3
View File
@@ -55,6 +55,9 @@
({ required, array, min, max } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/ip.svelte
+3
View File
@@ -51,6 +51,9 @@
({ required, array } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputText
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/string.svelte
+3
View File
@@ -53,6 +53,9 @@
({ required, array, size } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/url.svelte
+3
View File
@@ -51,6 +51,9 @@
({ required, array } = selectedAttribute);
xdefault = selectedAttribute.default;
}
$: if (required) {
xdefault = null;
}
</script>
<InputText
src/routes/console/project-[project]/databases/database/[database]/settings/+page.svelte
+3 -2
View File
@@ -8,6 +8,7 @@
import { database } from '../store';
import Delete from '../_delete.svelte';
import { onMount } from 'svelte';
import { toLocaleDateTime } from '$lib/helpers/date';
const databaseId = $page.params.database;
const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
@@ -54,8 +55,8 @@
</div>
</div>
<div class="grid-1-2-col-2">
<p>Created: TO IMPLEMENT</p>
<p>Last Updated: TO IMPLEMENT</p>
<p>Created: {toLocaleDateTime($database.$createdAt)}</p>
<p>Last Updated: {toLocaleDateTime($database.$updatedAt)}</p>
</div>
</div>
</Card>
src/routes/console/project-[project]/storage/+page.svelte
+8 -1
View File
@@ -95,7 +95,14 @@
</div>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Add your first bucket to get started</p>
<div class="u-text-center">
<p class="text u-line-height-1-5">Create your first bucket to get started</p>
<p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
</div>
<div class="u-flex u-gap-12">
<Button external href="#/" text>Documentation</Button>
<Button secondary>Create bucket</Button>
</div>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte
+8 -1
View File
@@ -197,7 +197,14 @@
</EmptySearch>
{:else}
<Empty isButton single on:click={() => (showCreate = true)}>
<p>Upload some files to get started</p>
<div class="u-text-center">
<p class="text u-line-height-1-5">Upload some files to get started</p>
<p class="text u-line-height-1-5">Need a hand? Check out our documentation.</p>
</div>
<div class="u-flex u-gap-12 ">
<Button external href="#/" text>Documentation</Button>
<Button secondary>Add file</Button>
</div>
</Empty>
{/if}
</Container>
src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
+1 -1
View File
@@ -85,7 +85,7 @@
<div class="u-grid u-gap-16">
<p>Drag and drop files here to upload</p>
<div>
<Button secondary on:click={input.click}>
<Button secondary on:click={() => input.click()}>
<span class="icon-upload" aria-hidden="true" />
<span class="text">Choose File</span>
</Button>
src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte
+5 -5
View File
@@ -257,8 +257,8 @@
will be ignored.
</p>
<svelte:fragment slot="aside">
<ul class="u-flex u-gap-12 common-section">
<li>
<ul class="checkboxes-list">
<li class="checkboxes-item">
<label class="label">
<input
type="radio"
@@ -269,7 +269,7 @@
<span>Bucket Level</span>
</label>
</li>
<li>
<li class="checkboxes-item">
<label class="label">
<input
type="radio"
@@ -295,8 +295,8 @@
<CardGrid>
<h2 class="heading-level-7">Update Security Settings</h2>
<p>
Enable or disable security services for the bucket including <b> Ecryption</b>
and <b> Antivirus scanning.</b>
Enable or disable security services for the bucket including <b>Ecryption</b>
and <b>Antivirus scanning.</b>
</p>
<svelte:fragment slot="aside">
<ul class="form-list">