update: logic to verify hostname while maintaining backwards compatibility.

src/lib/layout/wizard.svelte

@@ -68,10 +68,12 @@
     }
 
     async function submit() {
+        let interceptorResponse = null;
+
         if ($wizard.interceptor) {
             $wizard.nextDisabled = true;
             try {
-                await $wizard.interceptor();
+                interceptorResponse = await $wizard.interceptor();
             } catch (error) {
                 if (!$wizard.interceptorNotificationEnabled) return;
                 addNotification({
@@ -84,6 +86,10 @@
             }
         }
 
+        // maintains backward compatibility.
+        // explicit boolean check as the return type can be undefined/void too!
+        if (typeof interceptorResponse === 'boolean' && interceptorResponse === false) return;
+
         wizard.setInterceptor(null);
         if (isLastStep) {
             if ($wizard.finalAction) {

src/lib/layout/wizardStep.svelte

@@ -4,9 +4,14 @@
     import { onDestroy } from 'svelte';
 
     /**
-     * Pass callback that is run before the Form submit, can be canceled with throwing an exception.
+     * Pass callback that is run before the Form submit,
+     * can be canceled by throwing an `Exception` or returning `false`.
+     *
+     * Example -
+     * 1. validate > throw Error > notification is shown
+     * 2. validate > return False > show your UI as no notification is shown.
      */
-    export let beforeSubmit: () => Promise<void> = null;
+    export let beforeSubmit: () => Promise<void> | Promise<boolean> = null;
     export let nextDisabled = false;
 
     $: wizard.setNextDisabled(nextDisabled);

src/lib/stores/wizard.ts

@@ -8,7 +8,7 @@ export type WizardStore = {
     media?: string;
     component?: typeof SvelteComponent<unknown>;
     cover?: typeof SvelteComponent<unknown>;
-    interceptor?: () => Promise<void>;
+    interceptor?: () => Promise<void> | Promise<boolean>;
     finalAction?: () => Promise<void>;
     nextDisabled: boolean;
     step: number;

src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
+    import { FormList, Helper, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
@@ -27,6 +27,8 @@
         ? $createPlatform.type
         : PlatformType.Flutterandroid;
 
+    let error = null;
+
     const projectId = $page.params.project;
     const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io'];
     const placeholder: Partial<
@@ -84,10 +86,13 @@
         [PlatformType.Flutterwindows]: 'Package Name'
     };
 
-    async function beforeSubmit() {
+    async function beforeSubmit(): Promise<boolean> {
+        error = null;
+
         // double-check the hostname value.
         if (platform === PlatformType.Flutterweb && !isHostnameValid($createPlatform.hostname)) {
-            throw new Error('Please enter a valid hostname');
+            error = 'Please enter a valid hostname';
+            return false;
         }
 
         if ($createPlatform.$id) {
@@ -119,13 +124,13 @@
         [PlatformType.Flutterwindows]: 'Package name',
         [PlatformType.Flutterweb]: 'Hostname'
     }[platform];
+
+    $: if (!$createPlatform.hostname && error) {
+        error = null;
+    }
 </script>
 
-<WizardStep
-    {beforeSubmit}
-    nextDisabled={platform === PlatformType.Flutterweb
-        ? !isHostnameValid($createPlatform.hostname)
-        : false}>
+<WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">{registee} registration</svelte:fragment>
     <svelte:fragment slot="subtitle">
         <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
@@ -185,6 +190,10 @@
                     required
                     bind:value={$createPlatform.hostname} />
 
+                {#if error}
+                    <Helper type="warning">{error}</Helper>
+                {/if}
+
                 <div class="u-flex u-gap-16 u-margin-block-start-8">
                     {#each suggestions as suggestion}
                         <Pill

src/routes/(console)/project-[project]/overview/platforms/wizard/web/step1.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { Alert } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import { FormList, InputText } from '$lib/elements/forms';
+    import { FormList, Helper, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
@@ -10,13 +10,17 @@
     import { PlatformType } from '@appwrite.io/console';
     import { isHostnameValid } from '$lib/helpers/string';
 
+    let error = null;
     const projectId = $page.params.project;
     const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io'];
 
-    async function beforeSubmit() {
+    async function beforeSubmit(): Promise<boolean> {
+        error = null;
+
         // double-check the hostname value.
         if (!isHostnameValid($createPlatform.hostname)) {
-            throw new Error('Please enter a valid hostname');
+            error = 'Please enter a valid hostname';
+            return false;
         }
 
         if ($createPlatform.$id) {
@@ -47,9 +51,13 @@
 
         $createPlatform.$id = platform.$id;
     }
+
+    $: if (!$createPlatform.hostname && error) {
+        error = null;
+    }
 </script>
 
-<WizardStep {beforeSubmit} nextDisabled={!isHostnameValid($createPlatform.hostname)}>
+<WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Hostname registration</svelte:fragment>
     <FormList>
         <InputText
@@ -66,6 +74,11 @@
                 tooltip="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
                 required
                 bind:value={$createPlatform.hostname} />
+
+            {#if error}
+                <Helper type="warning">{error}</Helper>
+            {/if}
+
             <div class="u-flex u-gap-16 u-margin-block-start-8">
                 {#each suggestions as suggestion}
                     <Pill