127 lines
4.4 KiB
Vue
127 lines
4.4 KiB
Vue
<template>
|
|
<HeaderPublic />
|
|
<div class="login-container d-flex align-items-center justify-content-center min-vh-100 p-3">
|
|
|
|
<div class="login-card p-5 shadow-lg rounded-4 bg-white">
|
|
|
|
<div class="text-center mb-4">
|
|
<img src="@/assets/CtrlCash-blue.png" alt="CtrlCash Logo" width="150" class="mb-3">
|
|
<h2 class="fw-bold text-primary-dark">Login</h2>
|
|
<p class="text-secondary-dark">Insira seus dados para continuar o controle.</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleLogin">
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label fw-medium text-primary-dark">E-mail</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
|
|
<input type="email" class="form-control" id="email" v-model="loginForm.email" required placeholder="seu.email@exemplo.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="password" class="form-label fw-medium text-primary-dark">Senha</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
|
|
<input type="password" class="form-control" id="password" v-model="loginForm.password" required placeholder="********">
|
|
</div>
|
|
<div class="text-end mt-2">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mensagem de erro -->
|
|
<div v-if="error" class="alert alert-danger">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm" :disabled="loading">
|
|
<span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
|
|
{{ loading ? 'Entrando...' : 'Acessar Minha Conta' }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import HeaderPublic from '@/components/HeaderPublic.vue';
|
|
|
|
const router = useRouter();
|
|
const loading = ref(false);
|
|
const error = ref('');
|
|
|
|
const loginForm = ref({
|
|
email: '',
|
|
password: ''
|
|
});
|
|
|
|
const handleLogin = async () => {
|
|
loading.value = true;
|
|
error.value = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(loginForm.value)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Salvar usuário no localStorage
|
|
localStorage.setItem('user', JSON.stringify(data.user));
|
|
localStorage.setItem('isAuthenticated', 'true');
|
|
|
|
// Redirecionar para dashboard
|
|
router.push('/dashboard');
|
|
} else {
|
|
error.value = data.error || 'Erro ao fazer login';
|
|
}
|
|
} catch (err) {
|
|
console.error('Erro:', err);
|
|
error.value = 'Erro de conexão com o servidor';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-primary-dark { color: #1A3B5E !important; }
|
|
.text-secondary-dark { color: #6c757d !important; }
|
|
|
|
.login-container { background-color: #F8F9FA; }
|
|
.login-card { max-width: 420px; width: 100%; }
|
|
|
|
.btn-primary-feature {
|
|
background-color: #1A3B5E;
|
|
border-color: #1A3B5E;
|
|
color: white;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.btn-primary-feature:hover:not(:disabled) {
|
|
background-color: #29517b;
|
|
border-color: #29517b;
|
|
}
|
|
.btn-primary-feature:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #1A3B5E;
|
|
box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
|
|
}
|
|
.input-group-text {
|
|
background-color: #e9ecef;
|
|
border-right: none;
|
|
color: #1A3B5E;
|
|
}
|
|
|
|
.hover-link:hover { text-decoration: underline !important; }
|
|
</style> |