Feat: Functions G4

package.json

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

src/lib/components/cardGrid.svelte

@@ -14,7 +14,7 @@
         </div>
     </div>
     {#if $$slots.actions}
-        <div class="common-section card-separator u-flex u-main-end">
+        <div class="common-section card-separator u-flex u-main-end u-gap-8">
             <slot name="actions" />
         </div>
     {/if}

src/lib/components/code.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
     import { Pill } from '$lib/elements';
     import Prism from 'prismjs';
+    import 'prismjs/components/prism-ruby';
     import 'prismjs/components/prism-dart';
     import 'prismjs/components/prism-kotlin';
+    import 'prismjs/components/prism-python';
+    import 'prismjs/components/prism-javascript';
     import 'prismjs/components/prism-json';
     import 'prismjs/components/prism-bash';
     import 'prismjs/components/prism-yaml';
@@ -16,7 +19,18 @@
     export let label: string = null;
     export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
+    export let language:
+        | 'js'
+        | 'html'
+        | 'dart'
+        | 'ruby'
+        | 'python'
+        | 'php'
+        | 'kotlin'
+        | 'json'
+        | 'sh'
+        | 'yml'
+        | 'swift';
     export let withLineNumbers = false;
     export let withCopy = false;
     export let noMargin = false;

src/routes/console/project-[project]/settings/domains/create.svelte → src/lib/components/domains/create.svelte

@@ -3,7 +3,7 @@
     import { beforeNavigate, invalidate } from '$app/navigation';
     import { wizard } from '$lib/stores/wizard';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-    import { domain } from './wizard/store';
+    import { rule, ruleResource } from './wizard/store';
     import Step1 from './wizard/step1.svelte';
     import Step2 from './wizard/step2.svelte';
     import Step3 from './wizard/step3.svelte';
@@ -12,15 +12,16 @@
     import { Dependencies } from '$lib/constants';
 
     onDestroy(() => {
-        domain.set({ $id: '', domain: '' });
+        rule.set({ $id: '', domain: '' });
+        ruleResource.set({ type: '', id: '' });
     });
 
     beforeNavigate(() => {
         wizard.hide();
     });
 
     function onFinish() {
-        invalidate(Dependencies.DOMAINS);
+        invalidate(Dependencies.RULES);
         wizard.hide();
     }
 

src/routes/console/project-[project]/settings/domains/delete.svelte → src/lib/components/domains/delete.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import { project } from '../../store';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
+    import { sdkForProject } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { trackEvent } from '$lib/actions/analytics';
 
     export let showDelete = false;
-    export let selectedDomain: Models.Domain;
+    export let selectedRule: Models.ProxyRule = null;
 
-    const deleteDomain = async () => {
+    const handleSubmit = async () => {
         try {
-            await sdkForConsole.projects.deleteDomain($project.$id, selectedDomain.$id);
-            invalidate(Dependencies.DOMAINS);
+            await sdkForProject.proxy.deleteRule(selectedRule.$id);
+            await invalidate(Dependencies.RULES);
             showDelete = false;
             addNotification({
                 type: 'success',
-                message: `${selectedDomain.domain} has been deleted`
+                message: `Domain has been deleted`
             });
-            trackEvent('submit_domain_delete');
+            trackEvent('submit_rule_delete');
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -31,13 +30,9 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteDomain} warning>
+<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Domain</svelte:fragment>
-    {#if selectedDomain}
-        <p>
-            Are you sure you want to delete <b>{selectedDomain.domain}</b> from '{$project.name}'?
-        </p>
-    {/if}
+    <p>Are you sure you want to delete this domain?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit>Delete</Button>

src/routes/console/project-[project]/settings/domains/[[page]]/+page.svelte → src/lib/components/domains/domainContainer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import { Empty, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
@@ -12,114 +11,142 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
+    import { sdkForProject } from '$lib/stores/sdk';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import type { Models } from '@aw-labs/appwrite-console';
-    import type { PageData } from './$types';
-    import Create from '../create.svelte';
-    import Delete from '../delete.svelte';
+    import Create from './create.svelte';
+    import Delete from './delete.svelte';
     import { trackEvent } from '$lib/actions/analytics';
+    import { ruleResource } from './wizard/store';
+    import Logs from './logs.svelte';
 
-    export let data: PageData;
+    export let rules: Models.ProxyRuleList;
+    export let resourceType: string;
+    export let resourceId: string;
 
-    const projectId = $page.params.project;
-    const target = window?.location.hostname ?? '';
     let showDelete = false;
-    let selectedDomain: Models.Domain;
+    let showLogs = false;
+    let selectedRule: Models.ProxyRule;
     let isVerifying = {};
 
     const openWizard = () => {
+        $ruleResource = {
+            type: resourceType,
+            id: resourceId
+        };
+
         wizard.start(Create);
     };
 
-    const refreshDomain = async (domain: Models.Domain) => {
-        const domainId = domain.$id;
+    const refreshDomain = async (rule: Models.ProxyRule) => {
+        const ruleId = rule.$id;
         try {
-            isVerifying[domainId] = true;
+            isVerifying[ruleId] = true;
 
-            if (domain.verification) {
-                invalidate(Dependencies.DOMAINS);
+            if (rule.status === 'verified') {
+                invalidate(Dependencies.RULES);
                 return;
             }
-            await sdkForConsole.projects.updateDomainVerification(projectId, domainId);
-            invalidate(Dependencies.DOMAINS);
+
+            await sdkForProject.proxy.updateRuleVerification(ruleId);
+            invalidate(Dependencies.RULES);
             trackEvent('submit_domain_update_verification');
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
         } finally {
-            isVerifying[domainId] = false;
+            isVerifying[ruleId] = false;
         }
     };
 </script>
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Custom Domains</Heading>
+        <Heading tag="h2" size="5">Domains</Heading>
 
         <Button on:click={openWizard}>
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create domain</span>
         </Button>
     </div>
-    {#if data.domains.total}
+    {#if rules.total}
         <TableScroll>
             <TableHeader>
-                <TableCellHead width={150}>Domain Name</TableCellHead>
-                <TableCellHead width={100} />
-                <TableCellHead width={60}>Type</TableCellHead>
-                <TableCellHead width={90}>Name</TableCellHead>
-                <TableCellHead width={90}>Value</TableCellHead>
-                <TableCellHead width={40} />
+                <TableCellHead width={300}>Domain Name</TableCellHead>
+                <TableCellHead width={100}>Status</TableCellHead>
+                <TableCellHead width={150} />
+                <TableCellHead width={40}>Actions</TableCellHead>
             </TableHeader>
             <TableBody>
-                {#each data.domains.domains as domain}
+                {#each rules.rules as rule}
                     <TableRow>
                         <TableCellText title="Domain">
-                            {domain.domain}
+                            <div class="u-flex u-flex-horizontal u-cross-center u-gap-4">
+                                <p>{rule.domain}</p>
+                                <div style="--p-button-size: var(--button-size, 2.0rem);">
+                                    <a
+                                        class="is-text is-only-icon button"
+                                        href={`//${rule.domain}`}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        ><span class="icon-external-link" aria-hidden="true" /></a>
+                                </div>
+                            </div>
                         </TableCellText>
                         <TableCellText title="Status">
-                            <Pill warning={!domain.verification} success={domain.verification}>
-                                {domain.verification ? 'verified' : 'unverified'}
+                            <Pill
+                                danger={rule.status === 'unverified'}
+                                success={rule.status === 'verified'}
+                                info={rule.status === 'created' || rule.status === 'verifying'}>
+                                {rule.status}
                             </Pill>
                         </TableCellText>
-                        <TableCellText title="Type">CNAME</TableCellText>
-                        <TableCellText title="Name">
-                            {domain.domain}
-                        </TableCellText>
-                        <TableCellText title="Name">
-                            {target}
-                        </TableCellText>
+                        <TableCell />
+
                         <TableCell title="Actions">
                             <div class="u-flex u-gap-8 u-cross-center u-main-end">
-                                {#if isVerifying[domain.$id]}
+                                {#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 !domain.certificateId}
+                                {:else if rule.status === 'unverified' || rule.status === 'created'}
                                     <!-- TODO: remove inline styles -->
                                     <button
                                         class="button is-text is-only-icon u-padding-inline-0"
                                         style="--p-button-size: var(--button-size, 2.0rem);"
                                         aria-label="Verify item"
-                                        on:click={() => refreshDomain(domain)}>
-                                        <span class="icon-refresh" aria-hidden="true" />
+                                        on:click={() => refreshDomain(rule)}>
+                                        <span class="icon-key" aria-hidden="true" />
                                     </button>
                                 {/if}
+                                {#if rule.status === 'unverified' || rule.status === 'verified'}
+                                    <!-- TODO: remove inline styles -->
+                                    <button
+                                        class="button is-text is-only-icon u-padding-inline-0"
+                                        style="--p-button-size: var(--button-size, 2.0rem);"
+                                        aria-label="Verify item"
+                                        on:click={() => {
+                                            showLogs = true;
+                                            selectedRule = rule;
+                                        }}>
+                                        <span class="icon-terminal" aria-hidden="true" />
+                                    </button>
+                                {/if}
+
                                 <!-- TODO: remove inline styles -->
                                 <button
                                     class="button tooltip is-text is-only-icon u-padding-inline-0"
                                     style="--p-button-size: var(--button-size, 2.0rem);"
                                     aria-label="Delete item"
                                     on:click={async () => {
                                         showDelete = true;
-                                        selectedDomain = domain;
+                                        selectedRule = rule;
                                     }}>
                                     <span class="icon-trash" aria-hidden="true" />
                                     <span class="tooltip-popup is-bottom" role="tooltip">
@@ -141,4 +168,6 @@
     {/if}
 </Container>
 
-<Delete bind:showDelete bind:selectedDomain />
+<Delete bind:showDelete bind:selectedRule />
+
+<Logs bind:showLogs logs={selectedRule?.logs ? selectedRule?.logs : 'No logs recorded.'} />

src/lib/components/domains/logs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import Code from '$lib/components/code.svelte';
+    import { Button } from '$lib/elements/forms';
+
+    export let showLogs = false;
+    export let logs: string;
+</script>
+
+<Modal bind:show={showLogs}>
+    <svelte:fragment slot="header">Certificate Logs</svelte:fragment>
+    <p>Logs from the process of certificate generation with LetsEncrypt and Certbot.</p>
+
+    <Code withLineNumbers withCopy language="sh" code={logs} />
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showLogs = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>