67ea1ef22a
Update all 26 Vue files (3 layouts, 4 components, 19 pages) and the Blade root template to use a dark color scheme: gray-950 backgrounds, gray-900 cards, gray-800 borders, light text, and adjusted status badges/flash messages for dark backgrounds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
70 lines
2.6 KiB
Vue
70 lines
2.6 KiB
Vue
<script setup>
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import AuthLayout from '@/Layouts/AuthLayout.vue';
|
|
|
|
defineOptions({ layout: AuthLayout });
|
|
|
|
const form = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const submit = () => {
|
|
form.post('/login', {
|
|
onFinish: () => form.reset('password'),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<h2 class="text-xl font-semibold text-white mb-6">Sign in to your account</h2>
|
|
|
|
<form @submit.prevent="submit" class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-300">Email</label>
|
|
<input
|
|
id="email"
|
|
v-model="form.email"
|
|
type="email"
|
|
required
|
|
autofocus
|
|
class="mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2 border"
|
|
/>
|
|
<p v-if="form.errors.email" class="mt-1 text-sm text-red-400">{{ form.errors.email }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-300">Password</label>
|
|
<input
|
|
id="password"
|
|
v-model="form.password"
|
|
type="password"
|
|
required
|
|
class="mt-1 block w-full rounded-md bg-gray-800 border-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2 border"
|
|
/>
|
|
<p v-if="form.errors.password" class="mt-1 text-sm text-red-400">{{ form.errors.password }}</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<label class="flex items-center">
|
|
<input v-model="form.remember" type="checkbox" class="rounded bg-gray-800 border-gray-700 text-blue-600" />
|
|
<span class="ml-2 text-sm text-gray-400">Remember me</span>
|
|
</label>
|
|
<a href="/forgot-password" class="text-sm text-blue-400 hover:text-blue-300">Forgot password?</a>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="form.processing"
|
|
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500 disabled:opacity-50"
|
|
>
|
|
Sign in
|
|
</button>
|
|
|
|
<p class="text-center text-sm text-gray-400">
|
|
Don't have an account? <a href="/register" class="text-blue-400 hover:text-blue-300">Sign up</a>
|
|
</p>
|
|
</form>
|
|
</template>
|