From aba9aeace3cd0f47baf5708bbfbafdef7b2df99d Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 31 May 2023 15:59:10 +0200 Subject: [PATCH] feat: reset modal, fix loading, design fixes, update sdk --- CONTRIBUTING.md | 3 ++ package-lock.json | 8 ++-- package.json | 2 +- .../auth/templates/+page.svelte | 40 ++++++++-------- .../auth/templates/emailInviteTemplate.svelte | 19 ++++---- .../templates/emailMagicUrlTemplate.svelte | 15 ++++-- .../templates/emailRecoveryTemplate.svelte | 15 ++++-- .../auth/templates/emailTemplate.svelte | 14 ++++-- .../emailVerificationTemplate.svelte | 11 +++-- .../auth/templates/localeOptions.svelte | 4 +- .../auth/templates/resetEmail.svelte | 17 ++++++- .../auth/templates/resetSms.svelte | 18 ++++++- .../templates/smsInvitationTemplate.svelte | 13 +++-- .../auth/templates/smsLoginTemplate.svelte | 15 ++++-- .../auth/templates/smsTemplate.svelte | 47 ++++++++++++------- .../templates/smsVerificationTemplate.svelte | 21 +++++++-- .../settings/smtp/+page.svelte | 36 +++++++++----- 17 files changed, 205 insertions(+), 93 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 607bb07f6..ad67fbd68 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -40,12 +40,15 @@ git clone https://github.com/appwrite/console.git appwrite-console ``` ### 2. Install dependencies with npm + Navigate to the Appwrite Console repository and install dependencies. + ```bash cd appwrite-console && npm install ``` ### 3. Install and run Appwrite locally + When you run the Appwrite Console locally, it needs to point to a backend as well. The easiest way to do this is to run an Appwrite instance locally. Follow the [install instructions](https://appwrite.io/docs/installation) in the Appwrite docs. diff --git a/package-lock.json b/package-lock.json index 2bb8c8272..9a706ba74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "name": "@appwrite/console", "dependencies": { "@analytics/google-analytics": "^1.0.5", - "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.0", + "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.1", "@appwrite.io/pink": "0.0.6-rc.12", "@popperjs/core": "^2.11.6", "@sentry/svelte": "^7.44.2", @@ -138,9 +138,9 @@ }, "node_modules/@appwrite.io/console": { "name": "@aw-labs/sdk-console-smtp", - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@aw-labs/sdk-console-smtp/-/sdk-console-smtp-0.1.0.tgz", - "integrity": "sha512-Nu59EdPqPDp9uImWFFwam3+sFgK3yunQfo/g1ORwHTGq23brxwSsa815O7TRZL8YUBvSA3sjjn55G2Ev1X5gTg==", + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@aw-labs/sdk-console-smtp/-/sdk-console-smtp-0.1.1.tgz", + "integrity": "sha512-Sf6PQTDQwD3iJN6dE85DvgLNdvl+3Iqdz6d2gLCPsWsGwJR+mM/betgYvfQcDwVfy7vI+VspnhTPXleQCsgbOQ==", "dependencies": { "cross-fetch": "3.1.5", "isomorphic-form-data": "2.0.0" diff --git a/package.json b/package.json index 5d41cc1f8..b6cc24377 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@analytics/google-analytics": "^1.0.5", - "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.0", + "@appwrite.io/console": "npm:@aw-labs/sdk-console-smtp@^0.1.1", "@appwrite.io/pink": "0.0.6-rc.12", "@popperjs/core": "^2.11.6", "@sentry/svelte": "^7.44.2", diff --git a/src/routes/console/project-[project]/auth/templates/+page.svelte b/src/routes/console/project-[project]/auth/templates/+page.svelte index 5303e411d..0e7bcf7fc 100644 --- a/src/routes/console/project-[project]/auth/templates/+page.svelte +++ b/src/routes/console/project-[project]/auth/templates/+page.svelte @@ -62,13 +62,13 @@ async function openEmail(type: string) { type === emailOpen ? (emailOpen = null) : (emailOpen = type); - $emailTemplate = await loadEmailTemplate(projectId, type, 'en-us'); + $emailTemplate = await loadEmailTemplate(projectId, type, 'en'); $baseEmailTemplate = { ...$emailTemplate }; } async function openSms(type: string) { type === smsOpen ? (smsOpen = null) : (smsOpen = type); - $smsTemplate = await loadSmsTemplate(projectId, type, 'en-us'); + $smsTemplate = await loadSmsTemplate(projectId, type, 'en'); $baseSmsTemplate = { ...$smsTemplate }; } @@ -82,24 +82,26 @@ {#if !$project.smtpEnabled} - { - goto(base + '/console/project-' + $project.$id + '/settings/smtp'); +
+ { + goto(base + '/console/project-' + $project.$id + '/settings/smtp'); + } } - } - ]}> - - Custom SMTP server is required for customizing emails - - Configure a custom SMTP server to enable custom email templates and prevent emails from being - labeled as spam. - + ]}> + + Custom SMTP server is required for customizing emails + + Configure a custom SMTP server to enable custom email templates and prevent emails from + being labeled as spam. + +
{/if} diff --git a/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte index ca89e5f88..5eb0966d9 100644 --- a/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/emailInviteTemplate.svelte @@ -1,22 +1,19 @@ - - -
+
{#if loading}
+ class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32" + style="inset-inline-start: 0;">

Loading template...

@@ -78,8 +83,9 @@

Click to copy variables for the fields below. Learn more herehere. +

diff --git a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte index cec1f5068..804de503c 100644 --- a/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/emailVerificationTemplate.svelte @@ -3,7 +3,7 @@ import LocaleOptions from './localeOptions.svelte'; import type { Models } from '@appwrite.io/console'; import { loadEmailTemplate } from './+page.svelte'; - import { emailTemplate } from './strote'; + import { baseEmailTemplate, emailTemplate } from './strote'; import { page } from '$app/stores'; import { Id } from '$lib/components'; import { addNotification } from '$lib/stores/notifications'; @@ -11,9 +11,9 @@ export let localeCodes: Models.LocaleCode[]; const projectId = $page.params.project; - let locale = 'en-us'; + let locale = 'en'; let loading = false; - let timeout: NodeJS.Timeout; + let timeout: ReturnType; async function onLocaleChange() { timeout = setTimeout(() => { @@ -23,6 +23,7 @@ const template = await loadEmailTemplate(projectId, 'verification', locale); clearTimeout(timeout); emailTemplate.set(template); + $baseEmailTemplate = { ...$emailTemplate }; } catch (error) { clearTimeout(timeout); addNotification({ @@ -39,7 +40,9 @@ - {'{{name}}'} + {'{{team}}'} + {'{{user}}'} {'{{project}}'} + {'{{redirect}}'}
diff --git a/src/routes/console/project-[project]/auth/templates/localeOptions.svelte b/src/routes/console/project-[project]/auth/templates/localeOptions.svelte index 45df574b2..7e7c5ae6a 100644 --- a/src/routes/console/project-[project]/auth/templates/localeOptions.svelte +++ b/src/routes/console/project-[project]/auth/templates/localeOptions.svelte @@ -3,9 +3,9 @@ import type { Models } from '@appwrite.io/console'; export let localeCodes: Models.LocaleCode[]; - export let value: string = 'en-us'; + export let value = 'en'; - let search: string = 'English'; + let search = 'English'; $: options = localeCodes diff --git a/src/routes/console/project-[project]/auth/templates/resetEmail.svelte b/src/routes/console/project-[project]/auth/templates/resetEmail.svelte index 872fc5968..e14308c56 100644 --- a/src/routes/console/project-[project]/auth/templates/resetEmail.svelte +++ b/src/routes/console/project-[project]/auth/templates/resetEmail.svelte @@ -2,6 +2,9 @@ import { Modal } from '$lib/components'; import { Button } from '$lib/elements/forms'; import { sdk } from '$lib/stores/sdk'; + import { project } from '../../store'; + import { loadEmailTemplate } from './+page.svelte'; + import { baseEmailTemplate, emailTemplate } from './strote'; export let show = false; @@ -9,7 +12,17 @@ async function reset() { try { - // await sdk.forConsole.projects.resetEmailTemplate() + await sdk.forConsole.projects.deleteEmailTemplate( + $project.$id, + $emailTemplate.type, + $emailTemplate.locale + ); + $emailTemplate = await loadEmailTemplate( + $project.$id, + $emailTemplate.type, + $emailTemplate.locale + ); + $baseEmailTemplate = { ...$emailTemplate }; show = false; } catch (e) { error = e.message; @@ -21,7 +34,7 @@ icon="exclamation" state="warning" onSubmit={reset} - size="small" + size="big" {error} bind:show headerDivider={false}> diff --git a/src/routes/console/project-[project]/auth/templates/resetSms.svelte b/src/routes/console/project-[project]/auth/templates/resetSms.svelte index 963dc6874..06554d6fd 100644 --- a/src/routes/console/project-[project]/auth/templates/resetSms.svelte +++ b/src/routes/console/project-[project]/auth/templates/resetSms.svelte @@ -2,6 +2,9 @@ import { Modal } from '$lib/components'; import { Button } from '$lib/elements/forms'; import { sdk } from '$lib/stores/sdk'; + import { project } from '../../store'; + import { loadSmsTemplate } from './+page.svelte'; + import { baseSmsTemplate, smsTemplate } from './strote'; export let show = false; @@ -9,7 +12,18 @@ async function reset() { try { - // await sdk.forConsole.projects.resetSmsTemplate() + await sdk.forConsole.projects.deleteSmsTemplate( + $project.$id, + $smsTemplate.type, + $smsTemplate.locale + ); + + $smsTemplate = await loadSmsTemplate( + $project.$id, + $smsTemplate.type, + $smsTemplate.locale + ); + $baseSmsTemplate = { ...$smsTemplate }; show = false; } catch (e) { error = e.message; @@ -21,7 +35,7 @@ icon="exclamation" state="warning" onSubmit={reset} - size="small" + size="big" {error} bind:show headerDivider={false}> diff --git a/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte index 1f9b4aaba..4d02de5cc 100644 --- a/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/smsInvitationTemplate.svelte @@ -2,17 +2,18 @@ import SmsTemplate from './smsTemplate.svelte'; import LocaleOptions from './localeOptions.svelte'; import type { Models } from '@appwrite.io/console'; - import { smsTemplate } from './strote'; + import { baseSmsTemplate, smsTemplate } from './strote'; import { page } from '$app/stores'; import { loadSmsTemplate } from './+page.svelte'; import { addNotification } from '$lib/stores/notifications'; + import { Id } from '$lib/components'; export let localeCodes: Models.LocaleCode[]; const projectId = $page.params.project; let locale = 'en-us'; let loading = false; - let timeout: NodeJS.Timeout; + let timeout: ReturnType; async function onLocaleChange() { timeout = setTimeout(() => { @@ -22,6 +23,7 @@ const template = await loadSmsTemplate(projectId, 'invitation', locale); clearTimeout(timeout); smsTemplate.set(template); + $baseSmsTemplate = { ...$smsTemplate }; } catch (error) { clearTimeout(timeout); addNotification({ @@ -36,5 +38,10 @@
- + + {'{{team}}'} + {'{{user}}'} + {'{{project}}'} + {'{{redirect}}'} +
diff --git a/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte index b0d336f74..e3df041c5 100644 --- a/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/smsLoginTemplate.svelte @@ -4,15 +4,16 @@ import type { Models } from '@appwrite.io/console'; import { page } from '$app/stores'; import { loadSmsTemplate } from './+page.svelte'; - import { smsTemplate } from './strote'; + import { baseSmsTemplate, smsTemplate } from './strote'; import { addNotification } from '$lib/stores/notifications'; + import { Id } from '$lib/components'; export let localeCodes: Models.LocaleCode[]; const projectId = $page.params.project; - let locale = 'en-us'; + let locale = 'en'; let loading = false; - let timeout: NodeJS.Timeout; + let timeout: ReturnType; async function onLocaleChange() { timeout = setTimeout(() => { @@ -22,6 +23,7 @@ const template = await loadSmsTemplate(projectId, 'login', locale); clearTimeout(timeout); smsTemplate.set(template); + $baseSmsTemplate = { ...$smsTemplate }; } catch (error) { clearTimeout(timeout); addNotification({ @@ -36,5 +38,10 @@
- + + {'{{team}}'} + {'{{user}}'} + {'{{project}}'} + {'{{redirect}}'} +
diff --git a/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte index b99c839a7..80e9c5c71 100644 --- a/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/smsTemplate.svelte @@ -7,6 +7,7 @@ import { sdk } from '$lib/stores/sdk'; import { deepEqual } from '$lib/helpers/object'; + export let loading = false; const projectId = $page.params.project; let openResetModal = false; @@ -25,6 +26,10 @@ $smsTemplate.locale, $smsTemplate.message ); + + $baseSmsTemplate = { + ...$smsTemplate + }; addNotification({ type: 'success', message: `SMS ${$smsTemplate.type} template for ${$smsTemplate.locale} updated` @@ -40,22 +45,32 @@ $: isButtonDisabled = deepEqual($smsTemplate, $baseSmsTemplate); -
-
- - - - -
- -
- - +
+ {#if loading} +
+
+

Loading template...

- + {/if} +
+
+ + + + +
+ +
+ + +
+ +
diff --git a/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte b/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte index 191e4c1fa..295502c81 100644 --- a/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte +++ b/src/routes/console/project-[project]/auth/templates/smsVerificationTemplate.svelte @@ -4,14 +4,16 @@ import type { Models } from '@appwrite.io/console'; import { page } from '$app/stores'; import { loadSmsTemplate } from './+page.svelte'; - import { smsTemplate } from './strote'; + import { baseSmsTemplate, smsTemplate } from './strote'; + import { Id } from '$lib/components'; + import { addNotification } from '$lib/stores/notifications'; export let localeCodes: Models.LocaleCode[]; const projectId = $page.params.project; - let locale = 'en-us'; + let locale = 'en'; let loading = false; - let timeout: NodeJS.Timeout; + let timeout: ReturnType; async function onLocaleChange() { timeout = setTimeout(() => { @@ -21,9 +23,13 @@ const template = await loadSmsTemplate(projectId, 'verification', locale); clearTimeout(timeout); smsTemplate.set(template); + $baseSmsTemplate = { ...$smsTemplate }; } catch (error) { clearTimeout(timeout); - console.log(error); + addNotification({ + type: 'error', + message: error.message + }); } finally { loading = false; } @@ -32,5 +38,10 @@
- + + {'{{team}}'} + {'{{user}}'} + {'{{project}}'} + {'{{redirect}}'} +
diff --git a/src/routes/console/project-[project]/settings/smtp/+page.svelte b/src/routes/console/project-[project]/settings/smtp/+page.svelte index bc9eb5bad..87f837a32 100644 --- a/src/routes/console/project-[project]/settings/smtp/+page.svelte +++ b/src/routes/console/project-[project]/settings/smtp/+page.svelte @@ -1,13 +1,6 @@ @@ -133,7 +147,7 @@ - +