Merge pull request #1753 from appwrite/feat-add-hostname-to-web-create-flow

Feat add hostname to web create flow

src/lib/elements/forms/inputText.svelte

@@ -15,7 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
 
-    let error: string;
+    export let error: string;
 
     const handleInvalid = (event: Event) => {
         event.preventDefault();

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`;

src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte

@@ -11,9 +11,11 @@
         Fieldset,
         InlineCode,
         Card,
-        Button
+        Button,
+        Input,
+        Tooltip
     } from '@appwrite.io/pink-svelte';
-    import { Form } from '$lib/elements/forms';
+    import { Form, InputText } from '$lib/elements/forms';
     import {
         IconVue,
         IconAppwrite,
@@ -44,6 +46,7 @@
         AngularFrameworkIcon,
         JavascriptFrameworkIcon
     } from './components/index';
+    import { hostnameRegex } from '$lib/helpers/string';
 
     export let key;
 
@@ -69,6 +72,8 @@ ${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> = [
         {
@@ -140,6 +145,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(
@@ -148,7 +158,7 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
                 `${selectedFramework.label} app`,
                 selectedFrameworkKey,
                 undefined,
-                undefined
+                hostname
             );
 
             isPlatformCreated = true;
@@ -211,20 +221,38 @@ ${prefix}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">
+                        <InputText
+                            id="hostname"
+                            label="Hostname"
+                            placeholder="localhost"
+                            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
+                        ></Layout.Stack>
+                {/if}
             {:else}
                 <Card.Base padding="s"
                     ><Layout.Stack