Glassmorphism Login and Register Form with JavaScript

44 1 Animations appbudu Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Glassmorphism Login and Register Form with JavaScript

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>saberhammouti – Connexion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="orb o1"></div><div class="orb o2"></div><div class="orb o3"></div>
<main class="card">
  <p class="brand">saberhammouti</p>
  <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>
<script src="script.js"></script>
</body>
</html>

CSS

:root{--bg:#0b1020;--glass:rgba(255,255,255,.07);--line:rgba(255,255,255,.16);--ink:#eef1ff;--muted:#a3abc9;--a:#5eead4;--b:#a78bfa;--c:#f472b6;--err:#ff7b8f}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;overflow:hidden}
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0;animation:float 14s ease-in-out infinite}
.o1{width:380px;height:380px;background:var(--b);top:-100px;left:-80px}
.o2{width:320px;height:320px;background:var(--a);bottom:-90px;right:-60px;animation-delay:-5s;animation-duration:17s}
.o3{width:240px;height:240px;background:var(--c);top:45%;left:60%;animation-delay:-9s;animation-duration:20s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,40px) scale(1.12)}66%{transform:translate(-40px,70px) scale(.92)}}
.card{position:relative;z-index:1;width:100%;max-width:410px;padding:32px;background:var(--glass);border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:enter .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
.brand{margin:0 0 18px;font-size:1.6rem;font-weight:800;background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--a));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:300% 0}}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:22px;padding:4px;background:rgba(0,0,0,.25);border-radius:12px}
.tabs::after{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:rgba(255,255,255,.14);border-radius:9px;transition:transform .35s cubic-bezier(.5,1.4,.5,1)}
.tabs:has(#tab-register[aria-selected="true"])::after{transform:translateX(100%)}
.tabs button{position:relative;z-index:1;margin:0;padding:10px;border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer;transition:color .3s}
.tabs button[aria-selected="true"]{color:var(--ink)}
section{animation:swap .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes swap{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
h1{margin:0 0 4px;font-size:1.55rem}
.sub{margin:0 0 6px;color:var(--muted)}
label{display:block;margin:14px 0 6px;font-size:.88rem;font-weight:600;color:var(--muted)}
input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:1rem;color:var(--ink);background:rgba(0,0,0,.2);transition:border-color .25s,box-shadow .25s}
input:focus{outline:0;border-color:var(--a);box-shadow:0 0 0 4px rgba(94,234,212,.18)}
input.invalid{border-color:var(--err);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.error{display:block;min-height:1.1em;margin-top:4px;color:var(--err);font-size:.8rem}
.msg{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.9rem;display:none;animation:swap .4s both}
.msg.err{display:block;background:rgba(255,123,143,.15);color:var(--err)}
.msg.ok{display:block;background:rgba(94,234,212,.15);color:var(--a)}
form>button[type=submit],#logout{position:relative;overflow:hidden;width:100%;margin-top:22px;padding:13px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--b),var(--c));color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}
form>button[type=submit]:hover,#logout:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(167,139,250,.4)}
form>button[type=submit]:active,#logout:active{transform:scale(.98)}
form>button[type=submit]::after,#logout::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s}
form>button[type=submit]:hover::after,#logout:hover::after{left:130%}
button:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:7px;width:auto;margin:0;padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--a);font-size:.8rem;font-weight:600;cursor:pointer}
.pw button:hover{background:rgba(255,255,255,.08)}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

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 1

…

Glassmorphism Login and Register Form with JavaScript

Recommended

Comments 1