You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
4.3 KiB
153 lines
4.3 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Contrôleur Solaire - Connexion</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
max-width: 400px; |
|
margin: 100px auto; |
|
padding: 20px; |
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
min-height: 100vh; |
|
} |
|
|
|
.container { |
|
background: white; |
|
padding: 40px; |
|
border-radius: 10px; |
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
|
} |
|
|
|
h1 { |
|
color: #333; |
|
text-align: center; |
|
margin-bottom: 30px; |
|
font-size: 24px; |
|
} |
|
|
|
.form-group { |
|
margin-bottom: 20px; |
|
} |
|
|
|
label { |
|
display: block; |
|
margin-bottom: 5px; |
|
color: #555; |
|
font-weight: bold; |
|
} |
|
|
|
input[type="text"], |
|
input[type="password"] { |
|
width: 100%; |
|
padding: 10px; |
|
border: 2px solid #ddd; |
|
border-radius: 5px; |
|
font-size: 16px; |
|
box-sizing: border-box; |
|
} |
|
|
|
input[type="text"]:focus, |
|
input[type="password"]:focus { |
|
outline: none; |
|
border-color: #667eea; |
|
} |
|
|
|
button { |
|
width: 100%; |
|
padding: 12px 30px; |
|
background: #667eea; |
|
color: white; |
|
border: none; |
|
border-radius: 5px; |
|
font-size: 16px; |
|
font-weight: bold; |
|
cursor: pointer; |
|
transition: background 0.3s; |
|
} |
|
|
|
button:hover { |
|
background: #764ba2; |
|
} |
|
|
|
button:disabled { |
|
background: #ccc; |
|
cursor: not-allowed; |
|
} |
|
|
|
.error { |
|
background: #fee; |
|
color: #c33; |
|
padding: 10px; |
|
border-radius: 5px; |
|
margin-bottom: 20px; |
|
display: none; |
|
text-align: center; |
|
} |
|
|
|
.lock-icon { |
|
text-align: center; |
|
font-size: 48px; |
|
margin-bottom: 20px; |
|
} |
|
</style> |
|
</head> |
|
<body class="login-page"> |
|
<div class="container"> |
|
<div class="lock-icon">🔒</div> |
|
<h1>Connexion requise</h1> |
|
<div id="error" class="error"></div> |
|
<form id="loginForm"> |
|
<div class="form-group"> |
|
<label for="username">Nom d'utilisateur:</label> |
|
<input type="text" id="username" name="username" required autofocus> |
|
</div> |
|
<div class="form-group"> |
|
<label for="password">Mot de passe:</label> |
|
<input type="password" id="password" name="password" required> |
|
</div> |
|
<button type="submit">Se connecter</button> |
|
</form> |
|
</div> |
|
|
|
<script> |
|
document.getElementById('loginForm').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
|
|
const username = document.getElementById('username').value; |
|
const password = document.getElementById('password').value; |
|
const errorDiv = document.getElementById('error'); |
|
|
|
const formData = new URLSearchParams(); |
|
formData.append('username', username); |
|
formData.append('password', password); |
|
|
|
fetch('/login', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/x-www-form-urlencoded', |
|
}, |
|
body: formData |
|
}) |
|
.then(response => { |
|
if (response.ok) { |
|
// Délai pour s'assurer que le cookie est bien enregistré |
|
setTimeout(() => { |
|
window.location.href = '/'; |
|
}, 100); |
|
} else { |
|
errorDiv.textContent = 'Identifiants incorrects'; |
|
errorDiv.style.display = 'block'; |
|
document.getElementById('password').value = ''; |
|
} |
|
}) |
|
.catch(error => { |
|
errorDiv.textContent = 'Erreur de connexion'; |
|
errorDiv.style.display = 'block'; |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|