74 lines
2.4 KiB
Vue
74 lines
2.4 KiB
Vue
<script lang="ts">
|
|
export const description
|
|
= 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
|
|
export const iframeHeight = '800px'
|
|
export const containerClass = 'w-full h-full p-4 lg:p-0'
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { Button } from '@/lib/registry/default/ui/button'
|
|
import { Input } from '@/lib/registry/default/ui/input'
|
|
import { Label } from '@/lib/registry/default/ui/label'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
|
|
<div class="flex items-center justify-center py-12">
|
|
<div class="mx-auto grid w-[350px] gap-6">
|
|
<div class="grid gap-2 text-center">
|
|
<h1 class="text-3xl font-bold">
|
|
Login
|
|
</h1>
|
|
<p class="text-balance text-muted-foreground">
|
|
Enter your email below to login to your account
|
|
</p>
|
|
</div>
|
|
<div class="grid gap-4">
|
|
<div class="grid gap-2">
|
|
<Label for="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="m@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<div class="flex items-center">
|
|
<Label for="password">Password</Label>
|
|
<a
|
|
href="/forgot-password"
|
|
class="ml-auto inline-block text-sm underline"
|
|
>
|
|
Forgot your password?
|
|
</a>
|
|
</div>
|
|
<Input id="password" type="password" required />
|
|
</div>
|
|
<Button type="submit" class="w-full">
|
|
Login
|
|
</Button>
|
|
<Button variant="outline" class="w-full">
|
|
Login with Google
|
|
</Button>
|
|
</div>
|
|
<div class="mt-4 text-center text-sm">
|
|
Don't have an account?
|
|
<a href="#" class="underline">
|
|
Sign up
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden bg-muted lg:block">
|
|
<img
|
|
src="/placeholder.svg"
|
|
alt="Image"
|
|
width="1920"
|
|
height="1080"
|
|
class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|