Split Screen Login and Register Form in HTML CSS and JS

18 0 Social Icons appbudu Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Split Screen Login and Register Form in HTML CSS and JS

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>saber – Connexion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="shell">
  <aside class="side">
    <p class="brand">saber</p>
    <p class="pitch">Un seul compte pour tout retrouver, où que vous soyez.</p>
  </aside>
  <main class="main">
    <div class="tabs" id="tabs" role="tablist">
      <button type="button" id="tab-login" role="tab" aria-selected="true">Connexion</button>
      <button type="button" id="tab-register" role="tab" aria-selected="false">Créer un compte</button>
    </div>

<section id="view-login">
      <h1>Connexion</h1>
      <p class="sub">Content de vous revoir.</p>
      <form id="login-form" novalidate>
        <label for="l-email">E-mail</label>
        <input id="l-email" type="email" autocomplete="email">
        <span class="error" id="l-email-err"></span>
        <label for="l-password">Mot de passe</label>
        <div class="pw"><input id="l-password" type="password" autocomplete="current-password"><button type="button">Afficher</button></div>
        <span class="error" id="l-password-err"></span>
        <button type="submit">Se connecter</button>
        <p id="l-msg" class="msg" role="alert"></p>
      </form>
    </section>

<section id="view-register" hidden>
      <h1>Créer un compte</h1>
      <p class="sub">Inscrivez-vous en quelques secondes.</p>
      <form id="register-form" novalidate>
        <label for="r-nom">Nom</label>
        <input id="r-nom" type="text" autocomplete="name">
        <span class="error" id="r-nom-err"></span>
        <label for="r-email">E-mail</label>
        <input id="r-email" type="email" autocomplete="email">
        <span class="error" id="r-email-err"></span>
        <label for="r-password">Mot de passe</label>
        <div class="pw"><input id="r-password" type="password" autocomplete="new-password"><button type="button">Afficher</button></div>
        <span class="error" id="r-password-err"></span>
        <label for="r-password2">Confirmer le mot de passe</label>
        <input id="r-password2" type="password" autocomplete="new-password">
        <span class="error" id="r-password2-err"></span>
        <button type="submit">Créer mon compte</button>
        <p id="r-msg" class="msg" role="alert"></p>
      </form>
    </section>

<section id="view-home" hidden>
      <h1 id="welcome">Bonjour !</h1>
      <p class="sub">Connecté avec <strong id="user-email"></strong>.</p>
      <button id="logout" type="button">Se déconnecter</button>
    </section>
  </main>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

:root{--ink:#1b1530;--plum:#3a2a6b;--lilac:#f3f0fa;--coral:#ff5d73;--coral-d:#e0435b;--muted:#6f6888;--line:#cfc8e4;--err:#c0213a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--lilac);color:var(--ink);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
.shell{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:880px;min-height:560px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(58,42,107,.18)}
.side{position:relative;padding:44px 38px;background:var(--plum);color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.side::before,.side::after{content:"";position:absolute;border-radius:50%}
.side::before{width:260px;height:260px;right:-90px;bottom:-70px;background:var(--coral);opacity:.9}
.side::after{width:150px;height:150px;right:70px;bottom:120px;border:22px solid rgba(255,255,255,.14)}
.brand{margin:0;font-size:2.6rem;font-weight:800;letter-spacing:-1px}
.pitch{position:relative;z-index:1;max-width:260px;font-size:1.15rem;line-height:1.5}
.main{padding:44px 42px;display:flex;flex-direction:column;justify-content:center}
.tabs{display:flex;gap:24px;margin-bottom:26px}
.tabs button{width:auto;margin:0;padding:0 0 6px;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--muted);font-size:1rem;font-weight:700;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--coral)}
.tabs button:hover{background:none;color:var(--ink)}
h1{margin:0 0 4px;font-size:1.7rem}
.sub{margin:0 0 6px;color:var(--muted)}
label{display:block;margin:16px 0 2px;font-size:.85rem;font-weight:700;color:var(--plum)}
input{width:100%;padding:9px 2px;border:0;border-bottom:2px solid var(--line);border-radius:0;font-size:1rem;color:var(--ink);background:transparent}
input:focus{outline:0;border-bottom-color:var(--coral)}
input.invalid{border-bottom-color:var(--err)}
button:focus-visible{outline:3px solid #b9a8f0;outline-offset:2px}
.error{display:block;min-height:1.1em;margin-top:3px;color:var(--err);font-size:.8rem}
.msg{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.9rem;display:none}
.msg.err{display:block;background:#fde8ec;color:var(--err)}
.msg.ok{display:block;background:#e9e4f8;color:var(--plum)}
form>button[type=submit],#logout{width:100%;margin-top:22px;padding:13px;border:0;border-radius:999px;background:var(--coral);color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
form>button[type=submit]:hover,#logout:hover{background:var(--coral-d)}
.pw{position:relative}
.pw button{position:absolute;right:0;top:6px;width:auto;margin:0;padding:4px 8px;border:0;border-radius:6px;background:none;color:var(--plum);font-size:.8rem;font-weight:700;cursor:pointer}
.pw button:hover{background:var(--lilac)}
[hidden]{display:none!important}
@media(max-width:700px){.shell{grid-template-columns:1fr}.side{padding:26px;min-height:150px}.side::before{width:150px;height:150px}.side::after{display:none}.brand{font-size:2rem}.pitch{font-size:1rem}.main{padding:30px 24px}}

function show(view){
  ['login','register','home'].forEach(v=>$('#view-'+v).hidden=v!==view);
  $('#tabs').hidden=view==='home';
  $('#tab-login').setAttribute('aria-selected',view==='login');
  $('#tab-register').setAttribute('aria-selected',view==='register');
  if(view==='home'){const s=read('session');$('#welcome').textContent='Bonjour '+s.nom+' !';$('#user-email').textContent=s.email}
}
$('#tab-login').onclick=()=>show('login');
$('#tab-register').onclick=()=>show('register');

document.querySelectorAll('.pw button').forEach(b=>b.addEventListener('click',()=>{
  const i=b.parentElement.querySelector('input');
  i.type=i.type==='password'?'text':'password';
  b.textContent=i.type==='password'?'Afficher':'Masquer';
}));

$('#register-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const nom=$('#r-nom').value.trim(),email=$('#r-email').value.trim().toLowerCase();
  const pw=$('#r-password').value,pw2=$('#r-password2').value;
  const ok=[
    setErr('r-nom',nom.length<2?'Entrez votre nom (2 caractères minimum).':''),
    setErr('r-email',emailOk(email)?'':'Entrez une adresse e-mail valide.'),
    setErr('r-password',pw.length<8?'8 caractères minimum.':''),
    setErr('r-password2',pw!==pw2?'Les mots de passe ne correspondent pas.':'')
  ].every(Boolean);
  if(!ok)return;
  const users=read('users')||[];
  if(users.some(u=>u.email===email))return banner('r-msg','Un compte existe déjà avec cet e-mail. Connectez-vous.','err');
  users.push({nom,email,hash:await hash(pw)});
  write('users',users);
  e.target.reset();
  $('#l-email').value=email;
  show('login');
  banner('l-msg','Compte créé. Vous pouvez vous connecter.','ok');
});

$('#login-form').addEventListener('submit',async e=>{
  e.preventDefault();
  const email=$('#l-email').value.trim().toLowerCase(),pw=$('#l-password').value;
  const ok=[setErr('l-email',emailOk(email)?'':'Entrez une adresse e-mail valide.'),
            setErr('l-password',pw?'':'Entrez votre mot de passe.')].every(Boolean);
  if(!ok)return;
  const user=(read('users')||[]).find(u=>u.email===email);
  if(!user||user.hash!==await hash(pw))return banner('l-msg','E-mail ou mot de passe incorrect.','err');
  write('session',{nom:user.nom,email:user.email});
  e.target.reset();$('#l-msg').className='msg';
  show('home');
});

$('#logout').onclick=()=>{localStorage.removeItem('session');show('login')};
show(read('session')?'home':'login');

Comments 0

…

Split Screen Login and Register Form in HTML CSS and JS

Recommended

Comments 0