update: domain badges and verification consistency with errors.

Author: ItzNotABug

src/lib/components/domains/cnameTable.svelte

@@ -26,7 +26,7 @@
             {#if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
             {:else if verified === false}
-                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+                <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">

src/lib/components/domains/recordTable.svelte

@@ -40,7 +40,7 @@
             {#if verified === true}
                 <Badge variant="secondary" type="success" size="xs" content="Verified" />
             {:else if verified === false}
-                <Badge variant="secondary" type="error" size="xs" content="Verification failed" />
+                <Badge variant="secondary" type="warning" size="xs" content="Verification failed" />
             {/if}
         </Layout.Stack>
         <Typography.Text variant="m-400">

src/routes/(console)/organization-[organization]/domains/recordsCard.svelte

@@ -76,7 +76,7 @@
                 {#if verified === false}
                     <Badge
                         variant="secondary"
-                        type="error"
+                        type="warning"
                         size="xs"
                         content="Verification failed" />
                 {:else if verified === true}

src/routes/(console)/organization-[organization]/domains/retryDomainModal.svelte

@@ -11,29 +11,33 @@
     import { consoleVariables } from '$routes/(console)/store';
     import type { Models } from '@appwrite.io/console';
 
-    export let show = false;
-    export let selectedDomain: Models.Domain;
+    let {
+        show = $bindable(),
+        selectedDomain
+    }: {
+        show: boolean;
+        selectedDomain: Models.ProxyRule;
+    } = $props();
+
     const nameservers = $consoleVariables?._APP_DOMAINS_NAMESERVERS.split(',') ?? [
         'ns1.appwrite.io',
         'ns2.appwrite.io'
     ];
 
-    let error = null;
+    let error = $state(null);
+
     async function retryDomain() {
         try {
             const domain = await sdk.forConsole.domains.updateNameservers(selectedDomain.$id);
-            show = false;
             if (domain.nameservers.toLowerCase() === 'appwrite') {
+                show = false;
                 addNotification({
                     type: 'success',
                     message: `${selectedDomain.domain} has been verified`
                 });
             } else {
-                addNotification({
-                    type: 'error',
-                    message:
-                        'Domain verification failed. Please check your domain settings or try again later'
-                });
+                error =
+                    'Domain verification failed. Please check your domain settings or try again later';
             }
             await invalidate(Dependencies.DOMAINS);
             trackEvent(Submit.DomainUpdateVerification);
@@ -43,9 +47,11 @@
         }
     }
 
-    $: if (!show) {
-        error = null;
-    }
+    $effect(() => {
+        if (!show) {
+            error = null;
+        }
+    });
 </script>
 
 <Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/retryDomainModal.svelte

@@ -10,10 +10,15 @@
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/state';
 
-    export let show = false;
-    export let selectedProxyRule: Models.ProxyRule;
+    let {
+        show = $bindable(false),
+        selectedProxyRule
+    }: {
+        show: boolean;
+        selectedProxyRule: Models.ProxyRule;
+    } = $props();
 
-    let error = null;
+    let error = $state(null);
     async function retryProxyRule() {
         try {
             await sdk
@@ -32,9 +37,11 @@
         }
     }
 
-    $: if (!show) {
-        error = null;
-    }
+    $effect(() => {
+        if (!show) {
+            error = null;
+        }
+    });
 </script>
 
 <Modal title="Retry verification" bind:show onSubmit={retryProxyRule} bind:error>

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/table.svelte

@@ -61,15 +61,11 @@
                                 </Typography.Text>
                             </Link>
                             {#if proxyRule.status === 'verifying'}
-                                <Badge
-                                    variant="secondary"
-                                    type="warning"
-                                    content="Verifying"
-                                    size="s" />
+                                <Badge variant="secondary" content="Verifying" size="s" />
                             {:else if proxyRule.status !== 'verified'}
                                 <Badge
                                     variant="secondary"
-                                    type="error"
+                                    type="warning"
                                     content="Verification failed"
                                     size="s" />
                             {/if}

src/routes/(console)/project-[region]-[project]/settings/domains/retryDomainModal.svelte

@@ -17,8 +17,8 @@
         show: boolean;
         selectedDomain: Models.ProxyRule;
     } = $props();
-    let error = $state(null);
 
+    let error = $state(null);
     async function retryDomain() {
         try {
             await sdk

src/routes/(console)/project-[region]-[project]/settings/domains/table.svelte

@@ -53,15 +53,11 @@
                                 </Typography.Text>
                             </Link>
                             {#if domain.status === 'verifying'}
-                                <Badge
-                                    variant="secondary"
-                                    type="warning"
-                                    content="Verifying"
-                                    size="s" />
+                                <Badge variant="secondary" content="Verifying" size="s" />
                             {:else if domain.status !== 'verified'}
                                 <Badge
                                     variant="secondary"
-                                    type="error"
+                                    type="warning"
                                     content="Verification failed"
                                     size="s" />
                             {/if}

src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/retryDomainModal.svelte

@@ -39,33 +39,39 @@
         }
     });
 
+    let error = $state(null);
     let verified = $state(false);
 
     async function retryDomain() {
         try {
             const domain = await sdk
                 .forProject(page.params.region, page.params.project)
                 .proxy.updateRuleVerification(selectedProxyRule.$id);
-            await invalidate(Dependencies.SITES_DOMAINS);
-            verified = domain.status === 'verified';
+
             show = false;
+            verified = domain.status === 'verified';
+            await invalidate(Dependencies.SITES_DOMAINS);
+
             addNotification({
                 type: 'success',
                 message: `${selectedProxyRule.domain} has been verified`
             });
             trackEvent(Submit.DomainUpdateVerification);
         } catch (e) {
-            addNotification({
-                type: 'error',
-                message:
-                    'Domain verification failed. Please check your domain settings or try again later'
-            });
+            error =
+                'Domain verification failed. Please check your domain settings or try again later';
             trackError(e, Submit.DomainUpdateVerification);
         }
     }
+
+    $effect(() => {
+        if (!show) {
+            error = null;
+        }
+    });
 </script>
 
-<Modal title="Retry verification" bind:show onSubmit={retryDomain}>
+<Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
     <div>
         <Tabs.Root variant="secondary" let:root>
             {#if isSubDomain && !!$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME && $regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME !== 'localhost'}

src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/table.svelte

@@ -62,15 +62,11 @@
                             </Link>
 
                             {#if rule.status === 'verifying'}
-                                <Badge
-                                    variant="secondary"
-                                    type="warning"
-                                    content="Verifying"
-                                    size="s" />
+                                <Badge variant="secondary" content="Verifying" size="s" />
                             {:else if rule.status !== 'verified'}
                                 <Badge
                                     variant="secondary"
-                                    type="error"
+                                    type="warning"
                                     content="Verification failed"
                                     size="s" />
                             {/if}