129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { router } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
const email = ref('');
|
|
const password = ref('');
|
|
const remember = ref(false);
|
|
|
|
async function handleLogin() {
|
|
const success = await authStore.login({
|
|
email: email.value,
|
|
password: password.value,
|
|
remember: remember.value,
|
|
});
|
|
|
|
if (success) {
|
|
// Redirect to dashboard on successful login
|
|
router.get('/dashboard');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-form">
|
|
<h2>Login</h2>
|
|
|
|
<div v-if="authStore.error" class="error-message">
|
|
{{ authStore.error }}
|
|
</div>
|
|
|
|
<form @submit.prevent="handleLogin">
|
|
<div class="form-group">
|
|
<label for="email">Email:</label>
|
|
<input
|
|
id="email"
|
|
v-model="email"
|
|
type="email"
|
|
required
|
|
placeholder="email@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Password:</label>
|
|
<input
|
|
id="password"
|
|
v-model="password"
|
|
type="password"
|
|
required
|
|
placeholder="Password"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input v-model="remember" type="checkbox" />
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" :disabled="authStore.loading">
|
|
{{ authStore.loading ? 'Logging in...' : 'Login' }}
|
|
</button>
|
|
</form>
|
|
|
|
<div v-if="authStore.isAuthenticated" class="user-info">
|
|
<p>Logged in as: {{ authStore.currentUser?.name }}</p>
|
|
<button @click="authStore.logout">Logout</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.login-form {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-group input[type='email'],
|
|
.form-group input[type='password'] {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.error-message {
|
|
color: red;
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
background-color: #fee;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.user-info {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background-color: #e7f3ff;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|