Function domains

package-lock.json

@@ -9,7 +9,7 @@
             "version": "0.0.1",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.6",
+                "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.8",
                 "@aw-labs/icons": "0.0.0-77",
                 "@aw-labs/ui": "0.0.0-77",
                 "@popperjs/core": "^2.11.6",
@@ -146,9 +146,9 @@
         },
         "node_modules/@aw-labs/appwrite-console": {
             "name": "matej-appwrite-console",
-            "version": "7.1.6",
-            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.6.tgz",
-            "integrity": "sha512-4CP/KACjZgxXFGROxQnrtHc5gNvkexx3daVLR+N1cnc03/cd+QCt7Jcl3nBuWjirX7U4T2Yx78MrKdYusNCxHQ==",
+            "version": "7.1.8",
+            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.8.tgz",
+            "integrity": "sha512-OhhxzcX0mZAjVSlS5A9U8AOw4LEQ8cPTFLsY86LQTqBqBTjEm+qT5MBTkeaeiEPXdL1+MzoqQgZOL+XXQ+RPJQ==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -7741,9 +7741,9 @@
             "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
         },
         "@aw-labs/appwrite-console": {
-            "version": "npm:matej-appwrite-console@7.1.6",
-            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.6.tgz",
-            "integrity": "sha512-4CP/KACjZgxXFGROxQnrtHc5gNvkexx3daVLR+N1cnc03/cd+QCt7Jcl3nBuWjirX7U4T2Yx78MrKdYusNCxHQ==",
+            "version": "npm:matej-appwrite-console@7.1.8",
+            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.8.tgz",
+            "integrity": "sha512-OhhxzcX0mZAjVSlS5A9U8AOw4LEQ8cPTFLsY86LQTqBqBTjEm+qT5MBTkeaeiEPXdL1+MzoqQgZOL+XXQ+RPJQ==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"

package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "analytics": "^0.8.1",
-        "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.6",
+        "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.8",
         "@aw-labs/icons": "0.0.0-77",
         "@aw-labs/ui": "0.0.0-77",
         "@popperjs/core": "^2.11.6",

src/routes/console/project-[project]/functions/function-[function]/domains/+page.svelte

@@ -11,6 +11,7 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
+    import { sdkForProject } from '$lib/stores/sdk';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
@@ -41,7 +42,8 @@
                 invalidate(Dependencies.RULES);
                 return;
             }
-            // await sdkForConsole.projects.updateDomainVerification(projectId, ruleId);
+
+            await sdkForProject.proxy.updateRuleVerification(ruleId);
             invalidate(Dependencies.RULES);
             trackEvent('submit_domain_update_verification');
         } catch (error) {
@@ -88,12 +90,12 @@
 
                         <TableCell title="Actions">
                             <div class="u-flex u-gap-8 u-cross-center u-main-end">
-                                {#if (rule.status === 'created') | (rule.status === 'verifying')}
+                                {#if rule.status === 'verifying' || isVerifying[rule.$id]}
                                     <!-- TODO: remove inline styles -->
                                     <div
                                         class="loader"
                                         style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
-                                {:else if rule.status === 'failed'}
+                                {:else if rule.status === 'failed' || rule.status === 'created'}
                                     <!-- TODO: remove inline styles -->
                                     <button
                                         class="button is-text is-only-icon u-padding-inline-0"

src/routes/console/project-[project]/functions/function-[function]/domains/+page.ts

@@ -1,5 +1,6 @@
 import { Dependencies } from '$lib/constants';
 import { sdkForProject } from '$lib/stores/sdk';
+import { Query } from '@aw-labs/appwrite-console';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, parent, depends }) => {
@@ -7,6 +8,9 @@ export const load: PageLoad = async ({ params, parent, depends }) => {
     depends(Dependencies.RULES);
 
     return {
-        rules: await sdkForProject.proxy.listRules()
+        rules: await sdkForProject.proxy.listRules([
+            Query.equal('resourceType', 'function'),
+            Query.equal('resourceId', params.function)
+        ])
     };
 };

src/routes/console/project-[project]/functions/function-[function]/domains/wizard/step1.svelte

@@ -5,6 +5,10 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { func } from '../store';
     import { rule } from './store';
+    import { wizard } from '$lib/stores/wizard';
+    import { addNotification } from '$lib/stores/notifications';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     const createDomain = async () => {
         if ($rule.$id) {
@@ -13,7 +17,18 @@
 
         const newRule = await sdkForProject.proxy.createRule($rule.domain, 'function', $func.$id);
         $rule = newRule;
+
+        invalidate(Dependencies.RULES);
         trackEvent('submit_rule_create');
+
+        addNotification({
+            type: 'success',
+            message: `Domain has been created.`
+        });
+
+        if (newRule.status === 'verified') {
+            wizard.hide();
+        }
     };
 </script>
 

src/routes/console/project-[project]/functions/function-[function]/domains/wizard/step3.svelte

@@ -2,8 +2,8 @@
     import { WizardStep } from '$lib/layout';
     import CnameTable from './cnameTable.svelte';
     import VerificationBox from './verificationBox.svelte';
+    import { rule } from './store';
 
-    let isVerifying = false;
     let isVerified = false;
 </script>
 
@@ -19,7 +19,7 @@
         <p>Changes may take some time to take effect depending on your provider.</p>
 
         <div class="container u-padding-inline-0">
-            <VerificationBox {isVerifying} bind:isVerified />
+            <VerificationBox bind:isVerified />
         </div>
     </div>
 </WizardStep>

src/routes/console/project-[project]/functions/function-[function]/domains/wizard/step4.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { sdkForProject } from '$lib/stores/sdk';
     import { rule } from './store';
     import { project } from '../../../../store';
     import CnameTable from './cnameTable.svelte';
@@ -8,15 +8,15 @@
 
     const projectId = $project.$id;
 
-    let certificate = false;
+    let status = 'verifying';
     const checkCertificate = () => {
         setTimeout(async () => {
-            const result = await sdkForConsole.projects.getDomain(projectId, $rule.$id);
-            if (!result.certificateId) {
+            const result = await sdkForProject.proxy.getRule($rule.$id);
+            status = result.status;
+
+            if (result.status === 'verifying') {
                 checkCertificate();
-                return;
             }
-            certificate = true;
         }, 2000);
     };
     checkCertificate();
@@ -34,19 +34,24 @@
         <VerificationBox isVerifying={false} isVerified={true} />
         <div class="box">
             <div class="u-flex u-gap-16 u-cross-center">
-                {#if !certificate}
+                {#if status === 'verifying'}
                     <div
                         class="loader"
                         style="color: hsl(var(--color-neutral-50)); inline-size: 1.25rem; block-size: 1.25rem" />
+                    <p class="u-stretch">Generating SSL certificate</p>
+                {:else if status === 'failed'}
+                    <span
+                        class="icon-x"
+                        aria-hidden="true"
+                        style="color: hsl(var(--color-neutral-50))" />
+                    <p class="u-stretch">Generation of SSL certificate failed</p>
                 {:else}
                     <span
                         class="icon-check"
                         aria-hidden="true"
                         style="color: hsl(var(--color-neutral-50))" />
+                    <p class="u-stretch">Generated SSL certificate</p>
                 {/if}
-                <p class="u-stretch">
-                    {!certificate ? 'Generating SSL certificate' : 'Generated SSL certificate'}
-                </p>
             </div>
         </div>
     </div>

src/routes/console/project-[project]/functions/function-[function]/domains/wizard/verificationBox.svelte

@@ -5,27 +5,34 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Pill } from '$lib/elements';
 
+    export let isVerifying = false;
+    export let isVerified = false;
+
     const verifyDomain = async () => {
         try {
+            isVerifying = true;
             const newRule = await sdkForProject.proxy.updateRuleVerification($rule.$id);
             $rule = newRule;
+            isVerified = true;
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
+        } finally {
+            isVerifying = false;
         }
     };
 </script>
 
 <div class="box u-flex u-gap-16 u-cross-center">
-    {#if $rule.status === 'verified'}
+    {#if isVerified}
         <Pill success>
             <span class="icon-check-circle" style="font-size: var(--icon-size-small);" />verified
         </Pill>
         <p class="u-stretch">Domain has been verified</p>
     {:else}
-        {#if $rule.status === 'created' || $rule.status === 'verifying'}
+        {#if isVerifying}
             <div
                 class="loader"
                 style="color: hsl(var(--color-neutral-50)); inline-size: 1.5rem; block-size: 1.5rem" />
@@ -37,10 +44,8 @@
             </Pill>
         {/if}
 
-        <Button
-            secondary
-            disabled={$rule.status === 'failed' || $rule.status === 'created'}
-            on:click={verifyDomain}>Verify</Button>
+        <Button secondary disabled={isVerified || isVerifying} on:click={verifyDomain}
+            >Verify</Button>
         <p class="u-stretch">Domain is pending verification</p>
     {/if}
 </div>