Untitled

document.addEventListener("DOMContentLoaded", () => {
    loadLoginForm();
});

function loadLoginForm() {
    document.getElementById("app").innerHTML = `
        <div id="message" class="hidden"></div>
        <h2>Login</h2>
        <form id="loginForm">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required/>
            <br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required/>
            <br>
            <button type="submit">Login</button>
        </form>
        <a href="#" onclick="loadRegisterForm()">Register</a>
    `;
    
    document.getElementById("loginForm").addEventListener("submit", loginUser);
}

function loginUser(event) {
    event.preventDefault();
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;
    const xhr=new XMLHttpRequest();
    xhr.open("POST","login",true);
    xhr.setRequestHeader("Content-Type","application/json");
    xhr.onreadystatechange=function(){ //controllo più granulare sul ciclo di vita della richiesta
		if(xhr.readyState===XMLHttpRequest.DONE){
			if(xhr.status===200){ //è riusciuto a inviare una risposta
				try{
					const result = JSON.parse(xhr.responseText);
					if(result.status==="success"){
						displayMessage("login succefully","success");
						loadHomePage(result.role);
					}else{
						displayMessage(result.message,"error");
					}
				}catch(error){
					console.error("parsing error",error);
					displayMessage("errore nel processare la risposta",error);
				}
			}else{
				console.error("server error",xhr.status);
				displayMessage("errore duerante il login", "error");
			}
		}
	};
	
	xhr.onerror=function(){
		console.error("request error",xhr.statusText);
		displayMessage("errore di rete durante il login", "error");
	};
	try{
		xhr.send(JSON.stringify({username,password}));
	}catch(error){
		console.error("send error,", error);
		displayMessage("error sendin request", "error");
	}
}


function displayMessage(message, type) {
    const messageDiv = document.getElementById("message");
    messageDiv.innerText = message;
    messageDiv.className = type === "success" ? "success" : "error";
    messageDiv.classList.remove("hidden");
    
    setTimeout(() => {
        messageDiv.classList.add("hidden");
    }, 3000);
}

function loadHomePage(role) {
    document.getElementById("app").innerHTML = `
        <h2>Welcome, ${role === "admin" ? "Admin" : "Member"}</h2>
        <a href="#" onclick="logoutUser()">Logout</a>
    `;
}

function logoutUser() {
    // Add logout logic here
    loadLoginForm();
}

function loadRegisterForm(){
	document.getElementById("app").innerHTML = `
        <div id="message" class="hidden">
        </div>
        
         <div class="register-container">
         
        <h2>Registration</h2>
        <form id="registerForm">
	        <div class="form-group">
	            <label for="username">Username:</label>
	            <input type="text" id="username" name="username" required/>
	         </div>
	         <div class="form-group">
	            <label for="email">Email:</label>
	            <input type="email" id="email" name="email" required/>
	         </div>
	         <div class="form-group">
	            <label for="password">Password:</label>
	            <input type="password" id="password" name="password" required/>
	         </div>
	         <div class="form-group">
	            <label for="firstName">First Name:</label>
	            <input type="text" id="firstName" name="firstName" required/>
	         </div>
	         <div class="form-group">
	            <label for="lastName">Last Name:</label>
	            <input type="text" id="lastName" name="lastName" required/>
	         </div>
	         <div class="form-group">
	            <label for="role">Role:</label>
	            <select id="role" name="role" required>
					<option value="admin">Admin</option>
					<option value="member">Member</option> 
			  	</select>
	         </div>
            <button type="submit">Register</button>
        </form>
        
        <a href="#" onclick="loadLoginForm()">Back to login</a>
        
        </div>
    `;
     document.getElementById("registerForm").addEventListener("submit", registerUser);
}

function registerUser(event) {
    event.preventDefault();
    const formData={ //coppie chiave-valore (è un oggetto)
		username: document.getElementById("username").value,
		email: document.getElementById("email").value,
		password: document.getElementById("password").value,
		firstName: document.getElementById("firstName").value,
		lastName: document.getElementById("lastName").value,
		role: document.getElementById("role").value
	
	};
	const submitButton=event.target.querySelector("button");
	submitButton.disabled=true;
	submitButton.textContent="Registering...";
	const xhr=new XMLHttpRequest();
	xhr.open("POST","register",true);
	xhr.setRequestHeader("Content-Type","application/json");
	xhr.onload=function(){ //quando la richiesta è stata completata con successo (ready state a done)
		if(xhr.status===200){
			const result=JSON.parse(xhr.responseText);
			if(result.status==="success"){
				displayMessage("Registration successful","success");
				setTimeout(()=> //arrow function in javascript
					loadLoginForm(),2000
				);
			}else{
				displayMessage(result.message || "Registration failed","error"); //or logico è usato come fall back
			}
		}else{
			displayMessage("Error during registration","error");
		}
		submitButton.disabled=false;
		submitButton.textContent="Register";
		
	};
	xhr.onerror=function(){
		displayMessage("Error during registration","error");
		submitButton.disabled=false;
		submitButton.textContent="Register";
	};
	xhr.send(JSON.stringify(formData));
}