{"name":"login-01","type":"registry:block","description":"A simple login form.","meta":{"description":"A simple login form.","iframeHeight":"870px"},"files":[{"type":"registry:page","target":"routes/login-01/+page.svelte","highlightedContent":"

<script lang=\"ts\">\n  import LoginForm from '$lib/components/login-form.svelte';\n</script>\n\n<div class=\"flex min-h-svh w-full items-center justify-center bg-(--bg) p-6 md:p-10\">\n  <div class=\"w-full max-w-sm\">\n    <LoginForm />\n  </div>\n</div>\n

"},{"type":"registry:component","target":"components/login-form.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Button } from '$lib/components/ui/button/index.js';\n  import * as Card from '$lib/components/ui/card/index.js';\n  import { Input } from '$lib/components/ui/input/index.js';\n  import { Password } from '$lib/components/ui/password/index.js';\n  import { Field, FieldGroup, FieldLabel, FieldDescription } from '$lib/components/ui/field/index.js';\n\n  const id = $props.id();\n</script>\n\n<Card.Root>\n  <Card.Header>\n    <Card.Title class=\"text-xl\">Welcome back</Card.Title>\n    <Card.Description>Enter your email below to login to your account</Card.Description>\n  </Card.Header>\n  <Card.Content>\n    <form>\n      <FieldGroup>\n        <Field>\n          <FieldLabel for=\"email-{id}\">Email</FieldLabel>\n          <Input id=\"email-{id}\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div class=\"flex items-center\">\n            <FieldLabel for=\"password-{id}\">Password</FieldLabel>\n            <a\n              href=\"##\"\n              class=\"ms-auto inline-block text-sm text-(--text)/56 transition-colors duration-150 hover:text-(--text)\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Password id=\"password-{id}\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\" class=\"w-full\">Login</Button>\n          <Button variant=\"ghost\" class=\"w-full\">\n            <svg class=\"me-2 size-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                fill=\"#4285F4\"\n                d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n              />\n              <path\n                fill=\"#34A853\"\n                d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n              />\n              <path\n                fill=\"#FBBC05\"\n                d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n              />\n              <path\n                fill=\"#EA4335\"\n                d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n              />\n            </svg>\n            Login with Google\n          </Button>\n          <FieldDescription class=\"text-center\">\n            Don't have an account?\n            <a\n              href=\"##\"\n              class=\"text-(--text) underline underline-offset-4 transition-colors duration-150\"\n            >\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  </Card.Content>\n</Card.Root>\n

"}]}

Blocks