ahmido
eeb5c98450
## Summary - rebuild `apps/website` on the pinned ScrewFast Astro foundation - replace the legacy page/content/component structure with the new section and UI architecture - add Starlight-based docs and the new public route set for platform, pricing, trust, legal, and guides - refresh website tooling, dependencies, and Playwright smoke coverage for the new site shell ## Scope - touches `apps/website` and the matching spec artifacts for feature 402 - does not modify `apps/platform` ## Testing - not run in this step Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #393
84 lines
3.3 KiB
Plaintext
84 lines
3.3 KiB
Plaintext
---
|
|
// Import necessary components from their individual files
|
|
import EmailInput from './input/EmailInput.astro';
|
|
import PasswordInput from './input/PasswordInput.astro';
|
|
import Checkbox from './input/Checkbox.astro';
|
|
import AuthBtn from '@components/ui/buttons/AuthBtn.astro';
|
|
import GoogleBtn from '@components/ui/buttons/GoogleBtn.astro';
|
|
|
|
// Variables for customization of the LoginModal Component
|
|
|
|
const config = {
|
|
id: 'hs-toggle-between-modals-login-modal', // Modal IDENTIFIER
|
|
title: 'Sign in', // Main HEADING
|
|
subTitle: "Don't have an account yet?", // Sub-Heading TEXT
|
|
registerBtn: 'Sign up here', // Text for REGISTRATION BUTTON
|
|
registerBtnDataHS: '#hs-toggle-between-modals-register-modal', // TARGET LINK for registration button
|
|
};
|
|
---
|
|
|
|
<div
|
|
id={config.id}
|
|
class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
|
|
>
|
|
<div
|
|
class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 m-3 mt-0 opacity-0 transition-all ease-out sm:mx-auto sm:w-full sm:max-w-lg"
|
|
>
|
|
<div class="mx-auto w-full max-w-md p-6">
|
|
<div
|
|
class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-xs dark:border-neutral-700 dark:bg-neutral-800"
|
|
>
|
|
<div class="p-4 sm:p-7">
|
|
<div class="text-center">
|
|
<div
|
|
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
|
role="heading"
|
|
aria-level="1"
|
|
aria-label={config.title}
|
|
>
|
|
{config.title}
|
|
</div>
|
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
|
{config.subTitle}
|
|
<button
|
|
class="rounded-lg p-1 font-medium text-orange-400 decoration-2 ring-zinc-500 outline-hidden hover:underline focus-visible:ring-3 dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-hidden"
|
|
data-hs-overlay={config.registerBtnDataHS}
|
|
>
|
|
{config.registerBtn}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<div class="mt-5">
|
|
<GoogleBtn title="Sign in with Google" />
|
|
|
|
<div
|
|
class="flex items-center py-3 text-xs text-neutral-400 uppercase before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
|
|
>
|
|
Or
|
|
</div>
|
|
{/* The container for the form */}
|
|
<form>
|
|
{/* A grid layout for the form fields */}
|
|
<div class="grid gap-y-4">
|
|
{/* The email input field */}
|
|
<EmailInput id="login-email" errorId="login-email-error" />
|
|
{/* The password input field */}
|
|
<PasswordInput
|
|
forgot={true}
|
|
id="password"
|
|
errorId="login-password-error"
|
|
content="8+ characters required"
|
|
/>
|
|
{/* The remember-me checkbox */}
|
|
<Checkbox id="remember-me" />
|
|
{/* The sign-in button */}
|
|
<AuthBtn title="Sign in" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|