Portal J.B #4
Description
html
<title>Liceu N°5104 En. João Beirão - Área do Aluno</title> <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body {
background: linear-gradient(135deg, #1a365d, #2c5282);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 400px;
padding: 30px;
}
.header {
text-align: center;
margin-bottom: 25px;
}
.header h1 {
color: #1a365d;
font-size: 1.5rem;
margin-bottom: 5px;
}
.header p {
color: #64748b;
font-size: 0.9rem;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #334155;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s;
}
.form-group input:focus {
outline: none;
border-color: #2c5282;
}
.btn {
width: 100%;
padding: 12px;
background: #d97706;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover {
background: #b45309;
}
.btn:disabled {
background: #9ca3af;
cursor: not-allowed;
}
.switch-form {
text-align: center;
margin-top: 20px;
color: #64748b;
}
.switch-form a {
color: #2c5282;
text-decoration: none;
font-weight: 600;
}
.user-info {
text-align: center;
padding: 20px;
}
.user-info h2 {
color: #1a365d;
margin-bottom: 15px;
}
.logout-btn {
background: #ef4444;
margin-top: 15px;
}
.logout-btn:hover {
background: #dc2626;
}
.error {
color: #ef4444;
font-size: 0.85rem;
margin-top: 5px;
}
.success {
color: #10b981;
font-size: 0.85rem;
margin-top: 5px;
}
</style>
<!-- Formulário de Registro -->
<div id="register-form" style="display: none;">
<div class="header">
<h1>Liceu N°5104 En. João Beirão</h1>
<p>Cadastro de Aluno</p>
</div>
<form id="registerForm">
<div class="form-group">
<label for="registerName">Nome Completo</label>
<input type="text" id="registerName" required placeholder="João Silva">
</div>
<div class="form-group">
<label for="registerEmail">Email</label>
<input type="email" id="registerEmail" required placeholder="seuemail@escola.ao">
</div>
<div class="form-group">
<label for="registerPassword">Senha</label>
<input type="password" id="registerPassword" required placeholder="••••••••">
</div>
<div class="form-group">
<label for="registerConfirmPassword">Confirmar Senha</label>
<input type="password" id="registerConfirmPassword" required placeholder="••••••••">
</div>
<div id="registerError" class="error"></div>
<div id="registerSuccess" class="success"></div>
<button type="submit" class="btn" id="registerBtn">Cadastrar</button>
</form>
<div class="switch-form">
<p>Já tem conta? <a href="#" id="showLogin">Faça login</a></p>
</div>
</div>
<!-- Área do Usuário (após login) -->
<div id="user-area" style="display: none;">
<div class="user-info">
<h2>Bem-vindo!</h2>
<p id="userName">Carregando...</p>
<p id="userEmail">Carregando...</p>
<button class="btn logout-btn" id="logoutBtn">Sair</button>
</div>
</div>
</div>
<script>
// Configuração do Firebase - VOCÊ PRECISA CRIAR SUA PRÓPRIA CONTA
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Inicializar Firebase
try {
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const db = firebase.firestore();
} catch (error) {
console.log("Firebase não configurado. Crie sua conta gratuita no Firebase Console.");
document.getElementById('auth-container').innerHTML = `
<div style="text-align: center; color: white; padding: 20px;">
<h3>⚙️ Configuração Necessária</h3>
<p>Para usar o sistema de login, você precisa:</p>
<ol style="text-align: left; margin: 20px auto; max-width: 400px;">
<li>Criar conta gratuita em <a href="https://console.firebase.google.com/" style="color: #d97706;">Firebase Console</a></li>
<li>Criar um novo projeto</li>
<li>Habilitar "Authentication" com email/senha</li>
<li>Copiar sua configuração para este código</li>
</ol>
<p>Seu portal informativo ainda funciona normalmente!</p>
</div>
`;
}
// Alternar entre formulários
document.getElementById('showRegister').addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'block';
});
document.getElementById('showLogin').addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('register-form').style.display = 'none';
document.getElementById('login-form').style.display = 'block';
});
// Funções de autenticação (só funcionam com Firebase configurado)
if (typeof firebase !== 'undefined') {
// Login
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
const loginBtn = document.getElementById('loginBtn');
const loginError = document.getElementById('loginError');
try {
loginBtn.disabled = true;
loginBtn.textContent = 'Entrando...';
loginError.textContent = '';
await auth.signInWithEmailAndPassword(email, password);
showUserArea();
} catch (error) {
loginError.textContent = getErrorMessage(error.code);
} finally {
loginBtn.disabled = false;
loginBtn.textContent = 'Entrar';
}
});
// Registro
document.getElementById('registerForm').addEventListener('submit', async (e) => {
e.preventDefault();
const name = document.getElementById('registerName').value;
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
const confirmPassword = document.getElementById('registerConfirmPassword').value;
const registerBtn = document.getElementById('registerBtn');
const registerError = document.getElementById('registerError');
const registerSuccess = document.getElementById('registerSuccess');
// Validar senhas
if (password !== confirmPassword) {
registerError.textContent = 'As senhas não coincidem';
return;
}
try {
registerBtn.disabled = true;
registerBtn.textContent = 'Cadastrando...';
registerError.textContent = '';
registerSuccess.textContent = '';
const userCredential = await auth.createUserWithEmailAndPassword(email, password);
await userCredential.user.updateProfile({ displayName: name });
// Salvar no banco de dados
await db.collection('users').doc(userCredential.user.uid).set({
name: name,
email: email,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
});
registerSuccess.textContent = 'Cadastro realizado com sucesso!';
setTimeout(() => {
document.getElementById('register-form').style.display = 'none';
document.getElementById('login-form').style.display = 'block';
}, 2000);
} catch (error) {
registerError.textContent = getErrorMessage(error.code);
} finally {
registerBtn.disabled = false;
registerBtn.textContent = 'Cadastrar';
}
});
// Logout
document.getElementById('logoutBtn').addEventListener('click', async () => {
try {
await auth.signOut();
document.getElementById('user-area').style.display = 'none';
document.getElementById('login-form').style.display = 'block';
} catch (error) {
console.error('Erro ao sair:', error);
}
});
// Mostrar área do usuário
function showUserArea() {
const user = auth.currentUser;
if (user) {
document.getElementById('userName').textContent = `Nome: ${user.displayName || 'Não informado'}`;
document.getElementById('userEmail').textContent = `Email: ${user.email}`;
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'none';
document.getElementById('user-area').style.display = 'block';
}
}
// Verificar estado de autenticação
auth.onAuthStateChanged((user) => {
if (user) {
showUserArea();
}
});
// Mensagens de erro amigáveis
function getErrorMessage(errorCode) {
const messages = {
'auth/invalid-email': 'Email inválido',
'auth/user-disabled': 'Usuário desativado',
'auth/user-not-found': 'Usuário não encontrado',
'auth/wrong-password': 'Senha incorreta',
'auth/email-already-in-use': 'Email já está em uso',
'auth/weak-password': 'Senha muito fraca (mínimo 6 caracteres)',
'auth/operation-not-allowed': 'Operação não permitida'
};
return messages[errorCode] || 'Erro desconhecido';
}
}
</script>