Login

Okay, I will modify the HTML to include the ID number fields for students and teachers in both the login and signup sections. I'll also add basic JavaScript and CSS to handle the visibility of these fields based on the selected role. Login

Login

Don't have an account? Sign up

body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f4; } .form-container { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; } .form-container h2 { margin-bottom: 20px; color: #333; } .form-container input, .form-container select, .form-container button { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding in width */ } .form-container button { background-color: #007bff; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; } .form-container button:hover { background-color: #0056b3; } .form-container p { margin-top: 15px; font-size: 0.9em; color: #555; } .form-container a { color: #007bff; text-decoration: none; } .form-container a:hover { text-decoration: underline; } .hidden { display: none; } .error-message, .signup-message { color: red; font-size: 0.9em; margin-top: 10px; min-height: 1em; /* Prevent layout shift */ } .signup-message { color: green; } /* Ensure containers for IDs don't add extra margin when visible */ #teacherIdLoginContainer, #studentIdLoginContainer, #teacherIdSignupContainer, #studentIdSignupContainer { margin-bottom: 15px; /* Match other inputs */ } #teacherIdLoginContainer input, #studentIdLoginContainer input, #teacherIdSignupContainer input, #studentIdSignupContainer input { margin-bottom: 0; /* Input inside container doesn't need bottom margin */ } const loginContainer = document.getElementById('login-container'); const signupContainer = document.getElementById('signup-container'); // --- Role Specific Field Containers --- const teacherIdLoginContainer = document.getElementById('teacherIdLoginContainer'); const studentIdLoginContainer = document.getElementById('studentIdLoginContainer'); const teacherIdSignupContainer = document.getElementById('teacherIdSignupContainer'); const studentIdSignupContainer = document.getElementById('studentIdSignupContainer'); const fullNameContainer = document.getElementById('fullNameContainer'); // Already existed, added for consistency // --- Dropdowns --- const roleLoginSelect = document.getElementById('role'); const roleSignupSelect = document.getElementById('newRole'); function showSignup() { loginContainer.classList.add('hidden'); signupContainer.classList.remove('hidden'); // Reset signup form state when shown toggleSignupFields(); clearMessages(); } function showLogin() { signupContainer.classList.add('hidden'); loginContainer.classList.remove('hidden'); // Reset login form state when shown toggleLoginFields(); clearMessages(); } function toggleLoginFields() { const selectedRole = roleLoginSelect.value; teacherIdLoginContainer.classList.add('hidden'); studentIdLoginContainer.classList.add('hidden'); if (selectedRole === 'teacher') { teacherIdLoginContainer.classList.remove('hidden'); } else if (selectedRole === 'student') { studentIdLoginContainer.classList.remove('hidden'); } } function toggleSignupFields() { const selectedRole = roleSignupSelect.value; teacherIdSignupContainer.classList.add('hidden'); studentIdSignupContainer.classList.add('hidden'); // Keep Full Name always visible in signup for now // fullNameContainer.classList.add('hidden'); // Hide by default if needed if (selectedRole === 'teacher') { teacherIdSignupContainer.classList.remove('hidden'); // fullNameContainer.classList.remove('hidden'); // Show full name } else if (selectedRole === 'student') { studentIdSignupContainer.classList.remove('hidden'); // fullNameContainer.classList.remove('hidden'); // Show full name } else if (selectedRole === 'parent') { // fullNameContainer.classList.remove('hidden'); // Show full name } } function login() { const username = document.getElementById('username').value; const role = roleLoginSelect.value; const teacherId = document.getElementById('teacherIdLogin').value; const studentId = document.getElementById('studentIdLogin').value; const errorMessage = document.getElementById('errorMessage'); errorMessage.textContent = ''; // Clear previous errors console.log('Attempting login...'); console.log('Username:', username); console.log('Role:', role); if (role === 'teacher') console.log('Teacher ID:', teacherId); if (role === 'student') console.log('Student ID:', studentId); // Basic validation if (!username || !role) { errorMessage.textContent = 'Please enter username and select role.'; return; } if (role === 'teacher' && !teacherId) { errorMessage.textContent = 'Please enter Teacher ID.'; return; } if (role === 'student' && !studentId) { errorMessage.textContent = 'Please enter Student ID.'; return; } // Add actual login logic here (e.g., API call) console.log('Login successful (placeholder)'); // Example: Redirect or update UI after successful login } function signup() { const newUsername = document.getElementById('newUsername').value; const newRole = roleSignupSelect.value; const fullName = document.getElementById('fullName').value; const teacherId = document.getElementById('teacherIdSignup').value; const studentId = document.getElementById('studentIdSignup').value; const signupMessage = document.getElementById('signupMessage'); signupMessage.textContent = ''; // Clear previous messages signupMessage.style.color = 'red'; // Default to error color console.log('Attempting signup...'); console.log('Username:', newUsername); console.log('Role:', newRole); console.log('Full Name:', fullName); if (newRole === 'teacher') console.log('Teacher ID:', teacherId); if (newRole === 'student') console.log('Student ID:', studentId); // Basic validation if (!newUsername || !newRole || !fullName) { signupMessage.textContent = 'Please fill in username, role, and full name.'; return; } if (newRole === 'teacher' && !teacherId) { signupMessage.textContent = 'Please enter Teacher ID.'; return; } if (newRole === 'student' && !studentId) { signupMessage.textContent = 'Please enter Student ID.'; return; } // Add actual signup logic here (e.g., API call) console.log('Signup successful (placeholder)'); signupMessage.style.color = 'green'; signupMessage.textContent = 'Sign up successful! You can now log in.'; // Optionally clear form or switch to login view // showLogin(); } function clearMessages() { const errorMessage = document.getElementById('errorMessage'); const signupMessage = document.getElementById('signupMessage'); if(errorMessage) errorMessage.textContent = ''; if(signupMessage) signupMessage.textContent = ''; } // Initialize field visibility on page load document.addEventListener('DOMContentLoaded', () => { toggleLoginFields(); toggleSignupFields(); });

Login

Sign Up