caio/CtrlCash
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Vue final feito pro site

Browse Source
This commit is contained in:
Caio1w
2025-10-29 19:49:42 -03:00
parent db0d1d4a3a
commit 18c36f366d
7 changed files with 1370 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/LoginView.vue
View File

@@ -3,116 +3,116 @@
<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="email" required placeholder="seu.email@exemplo.com">
<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="password" required placeholder="********">
<input type="password" class="form-control" id="password" v-model="loginForm.password" required placeholder="********">
</div>
<div class="text-end mt-2">
<a href="/recuperar-senha" class="text-secondary-dark small text-decoration-none hover-link">Esqueceu a senha?</a>
</div>
</div>
<button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm">
Acessar Minha Conta
<!-- 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 HeaderPublic from '@/components/HeaderPublic.vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import HeaderPublic from '@/components/HeaderPublic.vue';
const email = ref('');
const password = ref('');
const router = useRouter();
const loading = ref(false);
const error = ref('');
const handleLogin = () => {
console.log('Tentativa de Login:', email.value);
router.push('/dashboard');
const loginForm = ref({
email: '',
password: ''
});
const handleLogin = async () => {
loading.value = true;
error.value = '';
try {
const response = await fetch('http://localhost:5000/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; }
.text-primary-dark {
color: #1A3B5E !important;
}
.text-secondary-dark {
color: #6c757d !important;
}
.text-success-feature {
color: #2ECC71 !important;
}
.login-container { background-color: #F8F9FA; }
.login-card { max-width: 420px; width: 100%; }
.login-container {
background-color: #F8F9FA;
}
.login-card {
max-width: 420px;
width: 100%;
}
.btn-primary-feature {
background-color: #1A3B5E;
background-color: #1A3B5E;
border-color: #1A3B5E;
color: white;
transition: background-color 0.2s;
}
.btn-primary-feature:hover {
background-color: #29517b;
.btn-primary-feature:hover:not(:disabled) {
background-color: #29517b;
border-color: #29517b;
}
.btn-outline-primary-feature {
color: #1A3B5E;
border-color: #1A3B5E;
background-color: transparent;
transition: all 0.2s;
margin-top: 15px;
}
.btn-outline-primary-feature:hover {
background-color: #1A3B5E;
color: white;
.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);
@@ -123,7 +123,5 @@
color: #1A3B5E;
}
.hover-link:hover {
text-decoration: underline !important;
}
</style>
.hover-link:hover { text-decoration: underline !important; }
</style>