cahier-de-bridge
Version:
Gestion d'un éditeur de mains de bridge
144 lines (136 loc) • 4.19 kB
HTML
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- https://www.youtube.com/watch?v=TUD1AWZVgQ8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />
<link rel="manifest" href="/images/site.webmanifest" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/status.css" />
<title>Se connecter</title>
<style>
.main {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: linear-gradient(rgba(211, 211, 211, 0.5), rgba(211, 211, 211, 0.5)), url("/images/Cards.png");
}
.login {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: auto;
max-width: 90%;
min-height: 200px;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #999;
background: -moz-linear-gradient(#000, #999);
background: -webkit-linear-gradient(#000, #999);
background: -o-linear-gradient(#000, #999);
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
color: antiquewhite;
}
.edbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: stretch;
margin-top: 10px;
margin-bottom: 10px;
}
.login button {
margin: 0.5em;
padding: 0.2em;
font-size: large;
}
#lk_forgot {
cursor: pointer;
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="login">
<h1>Accès protégé</h1>
<button id="btn_noname" hlp="Accès en lecture seulement">Entrer comme visiteur</button>
<p>OU, si déjà enregistré</p>
<div class="edbox">
Nom ou Email:
<input type="text" id="ed_login" />
</div>
<div class="edbox" id="box_pw">
Mot de passe:
<input type="password" id="ed_pw" />
</div>
<button id="btn_OK">Connexion</button>
<div id="lk_forgot">J'ai oublié mon mot de passe</div>
</div>
<div id="status"></div>
</div>
</body>
</html>
<script src="/socket.io/socket.io.min.js"></script>
<script src="/js/status.js"></script>
<script>
const ed_login = document.getElementById("ed_login");
const box_pw = document.getElementById("box_pw");
const btn_OK = document.getElementById("btn_OK");
const lk_forgot = document.getElementById("lk_forgot");
var io = io.connect(location.host);
io.on("connect", function () {
io.emit("session", (data) => {
session = data;
if (session.user) {
ed_login.value = session.user.nom;
onUser();
ed_pw.focus();
}
});
});
function onUser() {
io.emit("is_user", ed_login.value, (r) => {
console.log(r);
const b = r.startsWith("OK");
box_pw.style.opacity = b ? 1 : 0;
lk_forgot.style.opacity = b ? 1 : 0;
btn_OK.disabled = !b;
if (r.startsWith("NTBS")) Erreur(r);
});
}
ed_login.addEventListener("input", onUser);
document.getElementById("btn_noname").addEventListener("click", function () {
io.emit("connect_me", "Anonyme", "", (r) => {
if (r == "OK") window.location.href = "/";
else Erreur(r);
});
});
btn_OK.addEventListener("click", function () {
io.emit("connect_me", ed_login.value, document.getElementById("ed_pw").value, (r) => {
if (r == "OK") window.location.href = "/";
else Erreur(r);
});
});
lk_forgot.addEventListener("click", function () {
document.body.style.cursor = "wait";
io.emit("forgot", ed_login.value, (r) => {
document.body.style.cursor = "default";
if (r.err) {
Erreur(r.err);
if (r.contact && r.contact != "") alert("Contactez l'administrateur du site à " + r.contact); //
} else OK(r);
});
});
</script>