646164c85d
Prompt: use 'https://app.clockify.me/signup' design to make login and register buttons link to acutal login and register pages on the project. We don't need "Continue with X" social buttons, only method of authentiction for now will be email/password Stats: Context: 88,970 tokens Time: 37m 48s
120 lines
4.2 KiB
Vue
120 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import { Form, Head } from '@inertiajs/vue3';
|
|
import InputError from '@/components/InputError.vue';
|
|
import PasswordInput from '@/components/PasswordInput.vue';
|
|
import TextLink from '@/components/TextLink.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Spinner } from '@/components/ui/spinner';
|
|
import { register } from '@/routes';
|
|
import { store } from '@/routes/login';
|
|
import { request } from '@/routes/password';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
title: 'Log in to your account',
|
|
description: 'Enter your email and password below to log in',
|
|
},
|
|
});
|
|
|
|
defineProps<{
|
|
status?: string;
|
|
canResetPassword: boolean;
|
|
canRegister: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Log in" />
|
|
|
|
<div
|
|
v-if="status"
|
|
class="mb-2 text-center text-sm font-medium text-green-600"
|
|
>
|
|
{{ status }}
|
|
</div>
|
|
|
|
<Form
|
|
v-bind="store.form()"
|
|
:reset-on-success="['password']"
|
|
v-slot="{ errors, processing }"
|
|
class="flex flex-col gap-5"
|
|
>
|
|
<div class="grid gap-5">
|
|
<div class="grid gap-2">
|
|
<Label for="email" class="text-sm font-medium text-[#333]">Email address</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
required
|
|
autofocus
|
|
tabindex="1"
|
|
autocomplete="email"
|
|
placeholder="email@example.com"
|
|
class="h-11 bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<InputError :message="errors.email" />
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<Label for="password" class="text-sm font-medium text-[#333]">Password</Label>
|
|
<TextLink
|
|
v-if="canResetPassword"
|
|
:href="request()"
|
|
class="text-sm text-[#03a9f4] hover:text-[#0288d1]"
|
|
tabindex="5"
|
|
>
|
|
Forgot password?
|
|
</TextLink>
|
|
</div>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
required
|
|
tabindex="2"
|
|
autocomplete="current-password"
|
|
placeholder="Password"
|
|
class="bg-[#f2f6f8] border-[#e9e9ed] text-[#0a0e10] placeholder:text-[#9ba8b0] focus:bg-white focus:border-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<InputError :message="errors.password" />
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<Label for="remember" class="flex items-center space-x-2 cursor-pointer">
|
|
<Checkbox
|
|
id="remember"
|
|
name="remember"
|
|
tabindex="3"
|
|
class="border-[#e9e9ed] data-[checked]:border-[#03a9f4] data-[checked]:bg-[#03a9f4] focus:ring-[#03a9f4]"
|
|
/>
|
|
<span class="text-sm text-[#546e7a]">Remember me</span>
|
|
</Label>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
class="h-11 w-full bg-[#03a9f4] hover:bg-[#0298dd] text-base font-medium"
|
|
tabindex="4"
|
|
:disabled="processing"
|
|
data-test="login-button"
|
|
>
|
|
<Spinner v-if="processing" />
|
|
<span v-else>Log in</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="text-center text-sm text-[#607d8b]">
|
|
Don't have an account?
|
|
<TextLink
|
|
:href="register()"
|
|
tabindex="5"
|
|
class="text-[#03a9f4] hover:text-[#0288d1] decoration-transparent hover:decoration-current underline-offset-4"
|
|
>Sign up</TextLink>
|
|
</div>
|
|
</Form>
|
|
</template>
|