89 lines
4.4 KiB
HTML
89 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Login — TeleAuto V2</title>
|
|
<link rel="stylesheet" href="/src/presentation/styles.css">
|
|
<script type="module" src="/src/presentation/auth.js" defer></script>
|
|
</head>
|
|
|
|
<body class="min-h-screen bg-base-300 flex items-center justify-center p-4">
|
|
<main class="w-full max-w-2xl mx-auto">
|
|
|
|
<img src="/assets/logo-light.png" alt="TeleAuto V2" class="not-dark:hidden xs:hidden mb-10 mx-auto w-3/4" />
|
|
<img src="/assets/logo-dark.png" alt="TeleAuto V2" class="dark:hidden xs:hidden mb-10 mx-auto w-3/4" />
|
|
|
|
<div class="card bg-base-100 transition-all duration-200 w-full
|
|
xs:card-side xs:rounded-xl xs:shadow-xl" x-data="authForm()" x-cloak>
|
|
<figure class="relative hidden xs:flex xs:w-1/2 items-center justify-center bg-primary text-primary-content"
|
|
aria-hidden="true">
|
|
<img src="/assets/hero.jpg" alt="Teleauto hero" class="w-lg h-128 object-cover " />
|
|
<img src="assets/logo-light.png" alt="TeleAuto V2"
|
|
class="absolute top-52 w-48 sm:w-64 h-fit object-cover" />
|
|
</figure>
|
|
|
|
<div class="card-body p-6 xs:w-1/2 flex flex-col justify-center">
|
|
<h1 class="text-2xl text-center font-bold mb-4">Sign In!</h1>
|
|
<form @submit.prevent="handleSubmit" class="space-y-4" novalidate>
|
|
<div class="form-control">
|
|
<input x-model="email" type="email" inputmode="email" placeholder="Your email" required
|
|
autocomplete="email" autofocus class="input input-bordered w-full" />
|
|
<p x-show="errors.email" class="text-sm text-error mt-1" x-text="errors.email"
|
|
aria-live="polite"></p>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<div class="relative">
|
|
<input x-model="password" :type="showPassword ? 'text' : 'password'"
|
|
placeholder="Your password" required autocomplete="current-password"
|
|
class="input input-bordered w-full pr-12" />
|
|
|
|
<button type="button" @click="showPassword = !showPassword"
|
|
:title="showPassword ? 'Hide password' : 'Show password'"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm"
|
|
aria-pressed="false">
|
|
<i :class="showPassword ? 'ti ti-eye' : 'ti ti-eye-off' " class="text-base"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<p x-show="errors.password" class="text-sm text-error mt-1" x-text="errors.password"
|
|
aria-live="polite"></p>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label cursor-pointer">
|
|
<span class="flex items-center gap-3">
|
|
<input x-model="remember" type="checkbox" class="checkbox checkbox-sm" />
|
|
<span class="label-text">Remember me</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div x-show="errors.form" class="alert alert-error shadow-sm" role="alert" aria-live="assertive">
|
|
<div class="flex items-center gap-3">
|
|
<i class="ti ti-alert-circle"></i>
|
|
<div x-text="errors.form"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<button type="submit" :disabled="loading" class="btn btn-primary w-full"
|
|
:class="{ 'opacity-70 cursor-not-allowed': loading }">
|
|
<span x-show="!loading">Sign in</span>
|
|
|
|
<span x-show="loading" class="flex items-center justify-center gap-2">
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
Signing in...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|