Astro DB with Drizzle Adapter + Headless libSQL Turso DB

---
import wallpaper from "@assets/backgrounds/2.webp";
import Input from "@components/Input.astro";
import { authInstance } from "@lib/auth";
import { AlertService } from "@services/alerts";
import { uuid } from "@services/utils";
import Image from "astro/components/Image.astro";
import { APIError } from "better-auth";
import Layout, { type Props as LayoutProps } from "./Layout.astro";

interface Props extends LayoutProps {
    page: string
    action?: 'login' | 'logout' | 'register'
}
const { page, action, ...rest } = Astro.props;

if(Astro.request.method === "POST") {
    const prefix = "[Auth]";
    try {
        const form = await Astro.request.formData();
        if(action) {
            const name = form.get("name")?.toString();
            const email = form.get("email")?.toString();
            const password = form.get("password")?.toString();

            switch(action) {
                case 'login':
                    if(!email || !password)
                        throw `${prefix} Email and password are required for login action.`;

                    await authInstance.api.signInEmail({
                        body: {
                            email,
                            password,
                            callbackURL: Astro.url.origin,
                            rememberMe: form.get("remember") === "on"
                        }
                    }).then(response => {
                        if(response.token)
                            AlertService.add("Login has been successful.", "alert-success");
                    });
                    break;
                case 'logout':
                    await authInstance.api.signOut().then(() => {
                        AlertService.add("Logout has been successful.", "alert-success")
                        return Astro.redirect("/auth/login");
                    });
                    break;
                case 'register':
                    if(!name || !email || !password)
                        throw `${prefix} Name, email and password are required for register action.`;

                    await authInstance.api.signUpEmail({
                        body: {
                            name,
                            email,
                            password,
                            callbackURL: `${Astro.url.origin}/auth/login`,
                        }
                    }).then(() => AlertService.add("Registration successful.", "alert-success"));
                    break;
                default:
                    console.warn(`${prefix} Unknown action: `, action);
            }
        } else {
            throw `${prefix} No action specified for layout's form submission.`;
        }
    } catch (error: any) {
        console.error(`${prefix} Error: `, error);
        AlertService.add((error as APIError).message, "alert-error")
    }
}

const form = uuid();
---

<Layout center template={false} headline={false} page={page} {...rest}>
    <form method="post" enctype="application/x-www-form-urlencoded" class="p-4 z-10">
        <fieldset class="mx-4 my-8 fieldset flex flex-col content-center flex-wrap gap-1.5">
            <legend class="fieldset-legend text-center text-2xl md:text-3xl mb-6">
                {page}
            </legend>

            <slot name="controls">
                <Input 
                    label="E-Mail" 
                    name="email" 
                    required
                />
            </slot>
            
            <slot name="actions">
                <button class="btn btn-disabled" type="submit">
                    Submit
                    <i class="fas fa-paper-plane ml-1"></i>
                </button>
            </slot>
        </fieldset>
    </form>
</Layout>

---
import wallpaper from "@assets/backgrounds/2.webp";
import Input from "@components/Input.astro";
import { authInstance } from "@lib/auth";
import { AlertService } from "@services/alerts";
import { uuid } from "@services/utils";
import Image from "astro/components/Image.astro";
import { APIError } from "better-auth";
import Layout, { type Props as LayoutProps } from "./Layout.astro";

interface Props extends LayoutProps {
    page: string
    action?: 'login' | 'logout' | 'register'
}
const { page, action, ...rest } = Astro.props;

if(Astro.request.method === "POST") {
    const prefix = "[Auth]";
    try {
        const form = await Astro.request.formData();
        if(action) {
            const name = form.get("name")?.toString();
            const email = form.get("email")?.toString();
            const password = form.get("password")?.toString();

            switch(action) {
                case 'login':
                    if(!email || !password)
                        throw `${prefix} Email and password are required for login action.`;

                    await authInstance.api.signInEmail({
                        body: {
                            email,
                            password,
                            callbackURL: Astro.url.origin,
                            rememberMe: form.get("remember") === "on"
                        }
                    }).then(response => {
                        if(response.token)
                            AlertService.add("Login has been successful.", "alert-success");
                    });
                    break;
                case 'logout':
                    await authInstance.api.signOut().then(() => {
                        AlertService.add("Logout has been successful.", "alert-success")
                        return Astro.redirect("/auth/login");
                    });
                    break;
                case 'register':
                    if(!name || !email || !password)
                        throw `${prefix} Name, email and password are required for register action.`;

                    await authInstance.api.signUpEmail({
                        body: {
                            name,
                            email,
                            password,
                            callbackURL: `${Astro.url.origin}/auth/login`,
                        }
                    }).then(() => AlertService.add("Registration successful.", "alert-success"));
                    break;
                default:
                    console.warn(`${prefix} Unknown action: `, action);
            }
        } else {
            throw `${prefix} No action specified for layout's form submission.`;
        }
    } catch (error: any) {
        console.error(`${prefix} Error: `, error);
        AlertService.add((error as APIError).message, "alert-error")
    }
}

const form = uuid();
---

<Layout center template={false} headline={false} page={page} {...rest}>
    <form method="post" enctype="application/x-www-form-urlencoded" class="p-4 z-10">
        <fieldset class="mx-4 my-8 fieldset flex flex-col content-center flex-wrap gap-1.5">
            <legend class="fieldset-legend text-center text-2xl md:text-3xl mb-6">
                {page}
            </legend>

            <slot name="controls">
                <Input 
                    label="E-Mail" 
                    name="email" 
                    required
                />
            </slot>
            
            <slot name="actions">
                <button class="btn btn-disabled" type="submit">
                    Submit
                    <i class="fas fa-paper-plane ml-1"></i>
                </button>
            </slot>
        </fieldset>
    </form>
</Layout>

---
import Input from "@components/Input.astro";
import Auth from "@layouts/Auth.astro";
---

<Auth page="Login" icon="fas fa-fingerprint" action="login">
    <Fragment slot="controls">
        <Input 
            required 
            label="E-Mail" 
            name="email" 
            outline={false}
        />
        <Input 
            required 
            label="Password" 
            name="password" 
            type="password" 
            outline={false}
        />
    </Fragment>
    <Fragment slot="actions">
        <div class="flex flex-col w-full">
            <div class="flex gap-8 justify-between items-center">
                <!-- <div class="flex flex-col items-start *:text-left! gap-px"> -->
                    <!-- <a class="text-left!" href="/auth/password/forgot">Forgot password?</a> -->
                    <a class="text-left!" href="/auth/register">Not registered?</a>
                <!-- </div> -->
                <div class="flex items-center gap-1.5 self-end">
                    <input class="checkbox" type="checkbox" name="remember" id="remember" />
                    <label for="remember" class="text-sm text-base-content/70 select-none cursor-pointer">
                        Remember me
                    </label>
                </div>
            </div>
            <button class="mt-6 btn btn-disabled" type="submit">
                Login
                <i class="fas fa-arrow-right-to-bracket ml-1"></i>
            </button>
        </div>
    </Fragment>
</Auth>

---
import Input from "@components/Input.astro";
import Auth from "@layouts/Auth.astro";
---

<Auth page="Login" icon="fas fa-fingerprint" action="login">
    <Fragment slot="controls">
        <Input 
            required 
            label="E-Mail" 
            name="email" 
            outline={false}
        />
        <Input 
            required 
            label="Password" 
            name="password" 
            type="password" 
            outline={false}
        />
    </Fragment>
    <Fragment slot="actions">
        <div class="flex flex-col w-full">
            <div class="flex gap-8 justify-between items-center">
                <!-- <div class="flex flex-col items-start *:text-left! gap-px"> -->
                    <!-- <a class="text-left!" href="/auth/password/forgot">Forgot password?</a> -->
                    <a class="text-left!" href="/auth/register">Not registered?</a>
                <!-- </div> -->
                <div class="flex items-center gap-1.5 self-end">
                    <input class="checkbox" type="checkbox" name="remember" id="remember" />
                    <label for="remember" class="text-sm text-base-content/70 select-none cursor-pointer">
                        Remember me
                    </label>
                </div>
            </div>
            <button class="mt-6 btn btn-disabled" type="submit">
                Login
                <i class="fas fa-arrow-right-to-bracket ml-1"></i>
            </button>
        </div>
    </Fragment>
</Auth>