From b299554a923addecd71dcd349dca61bc5a04d54b Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 19 Mar 2025 16:13:31 +0100
Subject: [PATCH] fix: guest forms

---
 .../(public)/(guest)/login/+page.svelte       | 45 +++++-----
 .../(public)/(guest)/register/+page.svelte    | 84 ++++++++++---------
 .../register/invite/[slug]/+page.svelte       | 81 +++++++++---------
 src/routes/(public)/invite/+page.svelte       | 56 +++++++------
 src/routes/(public)/recover/+page.svelte      | 48 ++++++-----
 5 files changed, 166 insertions(+), 148 deletions(-)

diff --git a/src/routes/(public)/(guest)/login/+page.svelte b/src/routes/(public)/(guest)/login/+page.svelte
index 74c765077..207d91927 100644
--- a/src/routes/(public)/(guest)/login/+page.svelte
+++ b/src/routes/(public)/(guest)/login/+page.svelte
@@ -12,6 +12,7 @@
     import { OAuthProvider } from '@appwrite.io/console';
     import { redirectTo } from '$routes/store';
     import { user } from '$lib/stores/user';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     let mail: string, pass: string, disabled: boolean;
 
@@ -83,27 +84,29 @@
     <svelte:fragment slot="title">Sign in</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={login}>
-            <InputEmail
-                id="email"
-                label="Email"
-                placeholder="Email"
-                autofocus={true}
-                required={true}
-                bind:value={mail} />
-            <InputPassword
-                id="password"
-                label="Password"
-                placeholder="Password"
-                required={true}
-                bind:value={pass} />
-            <Button fullWidth submit {disabled}>Sign in</Button>
-            {#if isCloud}
-                <span class="with-separators eyebrow-heading-3">or</span>
-                <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
-                    <span class="icon-github" aria-hidden="true" />
-                    <span class="text">Sign in with GitHub</span>
-                </Button>
-            {/if}
+            <Layout.Stack>
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Email"
+                    autofocus={true}
+                    required={true}
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Password"
+                    required={true}
+                    bind:value={pass} />
+                <Button fullWidth submit {disabled}>Sign in</Button>
+                {#if isCloud}
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                        <span class="icon-github" aria-hidden="true" />
+                        <span class="text">Sign in with GitHub</span>
+                    </Button>
+                {/if}
+            </Layout.Stack>
         </Form>
     </svelte:fragment>
     <svelte:fragment slot="links">
diff --git a/src/routes/(public)/(guest)/register/+page.svelte b/src/routes/(public)/(guest)/register/+page.svelte
index ef2772b3b..4a9302016 100644
--- a/src/routes/(public)/(guest)/register/+page.svelte
+++ b/src/routes/(public)/(guest)/register/+page.svelte
@@ -19,7 +19,7 @@
     import { page } from '$app/stores';
     import { redirectTo } from '$routes/store';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
-    import { Link, Typography } from '@appwrite.io/pink-svelte';
+    import { Layout, Link, Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -88,46 +88,48 @@
     <svelte:fragment slot="title">Sign up</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={register}>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Your name"
-                autofocus
-                required
-                bind:value={name} />
-            <InputEmail
-                id="email"
-                label="Email"
-                placeholder="Your email"
-                required
-                bind:value={mail} />
-            <InputPassword
-                id="password"
-                label="Password"
-                placeholder="Your password"
-                helper="Password must be at least 8 characters long"
-                required
-                bind:value={pass} />
-            <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
-                By registering, you agree that you have read, understand, and acknowledge our <Link.Anchor
-                    href="https://appwrite.io/privacy"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    Privacy Policy</Link.Anchor>
-                and accept our
-                <Link.Anchor
-                    href="https://appwrite.io/terms"
-                    target="_blank"
-                    rel="noopener noreferrer">General Terms of Use</Link.Anchor
-                >.</InputChoice>
-            <Button fullWidth submit {disabled}>Sign up</Button>
-            {#if isCloud}
-                <span class="with-separators eyebrow-heading-3">or</span>
-                <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
-                    <span class="icon-github" aria-hidden="true" />
-                    <span class="text">Sign up with GitHub</span>
-                </Button>
-            {/if}
+            <Layout.Stack>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Your name"
+                    autofocus
+                    required
+                    bind:value={name} />
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Your email"
+                    required
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Your password"
+                    helper="Password must be at least 8 characters long"
+                    required
+                    bind:value={pass} />
+                <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
+                    By registering, you agree that you have read, understand, and acknowledge our <Link.Anchor
+                        href="https://appwrite.io/privacy"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Privacy Policy</Link.Anchor>
+                    and accept our
+                    <Link.Anchor
+                        href="https://appwrite.io/terms"
+                        target="_blank"
+                        rel="noopener noreferrer">General Terms of Use</Link.Anchor
+                    >.</InputChoice>
+                <Button fullWidth submit {disabled}>Sign up</Button>
+                {#if isCloud}
+                    <span class="with-separators eyebrow-heading-3">or</span>
+                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                        <span class="icon-github" aria-hidden="true" />
+                        <span class="text">Sign up with GitHub</span>
+                    </Button>
+                {/if}
+            </Layout.Stack>
         </Form>
     </svelte:fragment>
     <svelte:fragment slot="links">
diff --git a/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte b/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
index 0b16a5f33..92308df14 100644
--- a/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
+++ b/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
@@ -19,6 +19,7 @@
     import LoginLight from '$lib/images/login/login-light-mode.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.svg';
     import { isCloud } from '$lib/system';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     let slug = $page.params.slug;
     let imgLight = LoginLight;
@@ -95,45 +96,47 @@
     <svelte:fragment slot="title">{title}</svelte:fragment>
     <svelte:fragment>
         <Form onSubmit={invite}>
-            <InputText
-                id="name"
-                label="Name"
-                placeholder="Your name"
-                autofocus={true}
-                bind:value={name} />
-            <InputEmail
-                id="email"
-                label="Email"
-                placeholder="Your email"
-                required={true}
-                bind:value={mail} />
-            <InputPassword
-                id="password"
-                label="Password"
-                placeholder="Your password"
-                required={true}
-                bind:value={pass} />
-            <InputText
-                id="Code"
-                label="Code"
-                placeholder="Your code"
-                required={true}
-                bind:value={code} />
-            <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
-                By registering, you agree that you have read, understand, and acknowledge our <a
-                    class="link"
-                    href="https://appwrite.io/privacy"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    Privacy Policy</a>
-                and accept our
-                <a
-                    class="link"
-                    href="https://appwrite.io/terms"
-                    target="_blank"
-                    rel="noopener noreferrer">General Terms of Use</a
-                >.</InputChoice>
-            <Button fullWidth submit>Sign up</Button>
+            <Layout.Stack>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Your name"
+                    autofocus={true}
+                    bind:value={name} />
+                <InputEmail
+                    id="email"
+                    label="Email"
+                    placeholder="Your email"
+                    required={true}
+                    bind:value={mail} />
+                <InputPassword
+                    id="password"
+                    label="Password"
+                    placeholder="Your password"
+                    required={true}
+                    bind:value={pass} />
+                <InputText
+                    id="Code"
+                    label="Code"
+                    placeholder="Your code"
+                    required={true}
+                    bind:value={code} />
+                <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
+                    By registering, you agree that you have read, understand, and acknowledge our <a
+                        class="link"
+                        href="https://appwrite.io/privacy"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Privacy Policy</a>
+                    and accept our
+                    <a
+                        class="link"
+                        href="https://appwrite.io/terms"
+                        target="_blank"
+                        rel="noopener noreferrer">General Terms of Use</a
+                    >.</InputChoice>
+                <Button fullWidth submit>Sign up</Button>
+            </Layout.Stack>
         </Form>
     </svelte:fragment>
     <svelte:fragment slot="links">
diff --git a/src/routes/(public)/invite/+page.svelte b/src/routes/(public)/invite/+page.svelte
index e99653b02..21e043c7f 100644
--- a/src/routes/(public)/invite/+page.svelte
+++ b/src/routes/(public)/invite/+page.svelte
@@ -53,38 +53,44 @@
     </svelte:fragment>
     <svelte:fragment>
         {#if !userId || !secret || !membershipId || !teamId}
-            <Alert.Inline status="warning" title="The invite link is not valid">
-                Please ask the project owner to send you a new invite.
-            </Alert.Inline>
-            <Button href={`${base}/register`}>Sign up to Appwrite</Button>
+            <Layout.Stack>
+                <Alert.Inline status="warning" title="The invite link is not valid">
+                    Please ask the project owner to send you a new invite.
+                </Alert.Inline>
+                <div>
+                    <Button href={`${base}/register`}>Sign up to Appwrite</Button>
+                </div>
+            </Layout.Stack>
         {:else}
             <Layout.Stack>
                 <Typography.Text>
                     You have been invited to join an organization on Appwrite
                 </Typography.Text>
                 <Form onSubmit={acceptInvite}>
-                    <InputChoice
-                        required
-                        bind:value={terms}
-                        id="terms"
-                        label="terms"
-                        showLabel={false}>
-                        By accepting the invitation, you agree to the <Link.Anchor
-                            href="https://appwrite.io/terms"
-                            target="_blank"
-                            rel="noopener noreferrer">Terms and Conditions</Link.Anchor>
-                        and
-                        <Link.Anchor
-                            href="https://appwrite.io/privacy"
-                            target="_blank"
-                            rel="noopener noreferrer">
-                            Privacy Policy</Link.Anchor
-                        >.</InputChoice>
+                    <Layout.Stack>
+                        <InputChoice
+                            required
+                            bind:value={terms}
+                            id="terms"
+                            label="terms"
+                            showLabel={false}>
+                            By accepting the invitation, you agree to the <Link.Anchor
+                                href="https://appwrite.io/terms"
+                                target="_blank"
+                                rel="noopener noreferrer">Terms and Conditions</Link.Anchor>
+                            and
+                            <Link.Anchor
+                                href="https://appwrite.io/privacy"
+                                target="_blank"
+                                rel="noopener noreferrer">
+                                Privacy Policy</Link.Anchor
+                            >.</InputChoice>
 
-                    <div class="u-flex u-main-end u-gap-12">
-                        <Button secondary href={`${base}/login`}>Cancel</Button>
-                        <Button submit disabled={!terms}>Accept</Button>
-                    </div>
+                        <Layout.Stack direction="row">
+                            <Button secondary href={`${base}/login`}>Cancel</Button>
+                            <Button submit disabled={!terms}>Accept</Button>
+                        </Layout.Stack>
+                    </Layout.Stack>
                 </Form>
             </Layout.Stack>
         {/if}
diff --git a/src/routes/(public)/recover/+page.svelte b/src/routes/(public)/recover/+page.svelte
index 49636b78f..a125f1a83 100644
--- a/src/routes/(public)/recover/+page.svelte
+++ b/src/routes/(public)/recover/+page.svelte
@@ -68,33 +68,37 @@
     <svelte:fragment>
         {#if userId && secret}
             <Form onSubmit={setPassword}>
-                <InputPassword
-                    label="New password"
-                    placeholder="Enter password"
-                    id="password"
-                    autofocus={true}
-                    required={true}
-                    bind:value={password} />
-                <InputPassword
-                    label="Confirm password"
-                    placeholder="Confirm password"
-                    id="confirm-password"
-                    required={true}
-                    bind:value={confirmPassword} />
+                <Layout.Stack>
+                    <InputPassword
+                        label="New password"
+                        placeholder="Enter password"
+                        id="password"
+                        autofocus={true}
+                        required={true}
+                        bind:value={password} />
+                    <InputPassword
+                        label="Confirm password"
+                        placeholder="Confirm password"
+                        id="confirm-password"
+                        required={true}
+                        bind:value={confirmPassword} />
 
-                <Button fullWidth submit>Update</Button>
+                    <Button fullWidth submit>Update</Button>
+                </Layout.Stack>
             </Form>
         {:else}
             <Form onSubmit={recover}>
-                <InputEmail
-                    id="email"
-                    label="Email"
-                    placeholder="Email"
-                    autofocus={true}
-                    required={true}
-                    bind:value={email} />
+                <Layout.Stack>
+                    <InputEmail
+                        id="email"
+                        label="Email"
+                        placeholder="Email"
+                        autofocus={true}
+                        required={true}
+                        bind:value={email} />
 
-                <Button fullWidth submit>Recover</Button>
+                    <Button fullWidth submit>Recover</Button>
+                </Layout.Stack>
             </Form>
         {/if}
     </svelte:fragment>