From 799075590a6f714d54282e65f9b7eb230149bb12 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 18 Mar 2025 10:24:51 +0100
Subject: [PATCH 1/3] Feat: add hostname WIP

---
 .../overview/platforms/createWeb.svelte       | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index a00301f73..b9f3039d8 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -11,7 +11,8 @@
         Fieldset,
         InlineCode,
         Card,
-        Button
+        Button,
+        Input
     } from '@appwrite.io/pink-svelte';
     import { Form } from '$lib/elements/forms';
     import {
@@ -63,6 +64,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
     };
     export let platform: PlatformType = PlatformType.Flutterandroid;
     export let selectedFrameworkKey: string | undefined = key ? key : undefined;
+    let hostname;
 
     let frameworks: Array<FrameworkType> = [
         {
@@ -184,20 +186,29 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                                     imageRadius="s" />
                             {/each}
                         </div>
-
                         <Layout.Stack direction="row" justifyContent="flex-end">
                             {#if isChangingFramework}
                                 <Button.Button
                                     disabled={!selectedFramework}
                                     on:click={() => (isChangingFramework = false)}>
                                     Save</Button.Button>
-                            {:else}
-                                <Button.Button type="submit" disabled={!selectedFramework}
-                                    >Create platform</Button.Button>
                             {/if}
                         </Layout.Stack>
                     </Layout.Stack>
                 </Fieldset>
+                {#if !isChangingFramework}
+                    <Fieldset legend="Details"
+                        ><Input.Text
+                            label="Hostname"
+                            helper="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
+                            placeholder="localhost"
+                            bind:value={hostname}
+                            required /></Fieldset>
+                    <Layout.Stack direction="row" justifyContent="flex-end"
+                        ><Button.Button type="submit" disabled={!selectedFramework || !hostname}
+                            >Create platform</Button.Button
+                        ></Layout.Stack>
+                {/if}
             {:else}
                 <Card.Base padding="s"
                     ><Layout.Stack

From 2031d6456f46cbcf1246e3657078b7f6e29e438a Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 18 Mar 2025 10:47:07 +0100
Subject: [PATCH 2/3] Feat: add hostname

---
 src/lib/helpers/string.ts                              |  5 +++++
 .../overview/platforms/createWeb.svelte                | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/lib/helpers/string.ts b/src/lib/helpers/string.ts
index 2ef6ac191..4ef014dd5 100644
--- a/src/lib/helpers/string.ts
+++ b/src/lib/helpers/string.ts
@@ -48,3 +48,8 @@ const formatter = Intl.NumberFormat('en', {
 export function formatNum(number: number): string {
     return formatter.format(number);
 }
+
+/**
+ * Returns a regex to check hostname validity. Supports wildcards too!
+ */
+export const hostnameRegex = String.raw`(\*)|(\*\.)?(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}|localhost`;
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index 0274f651b..a88afe901 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -45,6 +45,7 @@
         AngularFrameworkIcon,
         JavascriptFrameworkIcon
     } from './components/index';
+    import { hostnameRegex } from '$lib/helpers/string';
 
     export let key;
 
@@ -71,6 +72,7 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
     export let platform: PlatformType = PlatformType.Flutterandroid;
     export let selectedFrameworkKey: string | undefined = key ? key : undefined;
     let hostname;
+    let hostnameError = false;
 
     let frameworks: Array<FrameworkType> = [
         {
@@ -142,6 +144,11 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
     $: selectedFrameworkIcon = selectedFramework ? selectedFramework.icon : NoFrameworkIcon;
 
     async function createWebPlatform() {
+        hostnameError = !new RegExp(hostnameRegex).test(hostname);
+        if (hostnameError) {
+            return;
+        }
+
         try {
             isCreatingPlatform = true;
             await sdk.forConsole.projects.createPlatform(
@@ -150,7 +157,7 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                 `${selectedFramework.label} app`,
                 selectedFrameworkKey,
                 undefined,
-                undefined
+                hostname
             );
 
             isPlatformCreated = true;
@@ -230,6 +237,7 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                             helper="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
                             placeholder="localhost"
                             bind:value={hostname}
+                            state={hostnameError ? 'error' : 'default'}
                             required /></Fieldset>
                     <Layout.Stack direction="row" justifyContent="flex-end"
                         ><Button.Button type="submit" disabled={!selectedFramework || !hostname}

From d5f7969d6e43888b7b2db3c91641b72de1076c3c Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 18 Mar 2025 15:55:35 +0100
Subject: [PATCH 3/3] Copy change and use console component

---
 src/lib/elements/forms/inputText.svelte       |  2 +-
 .../overview/platforms/createWeb.svelte       | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 263622b62..5c24a2f34 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -14,7 +14,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
 
-    let error: string;
+    export let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();
diff --git a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
index a88afe901..cbcec9b40 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
@@ -12,9 +12,10 @@
         InlineCode,
         Card,
         Button,
-        Input
+        Input,
+        Tooltip
     } from '@appwrite.io/pink-svelte';
-    import { Form } from '$lib/elements/forms';
+    import { Form, InputText } from '$lib/elements/forms';
     import {
         IconVue,
         IconAppwrite,
@@ -231,14 +232,22 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                     </Layout.Stack>
                 </Fieldset>
                 {#if !isChangingFramework}
-                    <Fieldset legend="Details"
-                        ><Input.Text
+                    <Fieldset legend="Details">
+                        <InputText
+                            id="hostname"
                             label="Hostname"
-                            helper="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
                             placeholder="localhost"
-                            bind:value={hostname}
-                            state={hostnameError ? 'error' : 'default'}
-                            required /></Fieldset>
+                            error={hostnameError && 'Please enter a valid hostname'}
+                            bind:value={hostname}>
+                            <Tooltip slot="info">
+                                <Icon icon={IconInfo} size="s" />
+                                <span slot="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.
+                                </span>
+                            </Tooltip>
+                        </InputText></Fieldset>
                     <Layout.Stack direction="row" justifyContent="flex-end"
                         ><Button.Button type="submit" disabled={!selectedFramework || !hostname}
                             >Create platform</Button.Button