`public/account.html`

60 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Account · Sublease Marketplace</title>
<style>
  :root{--ink:#14181d;--mut:#6b7480;--line:#e7e9ee;--bg:#fbfbfc;--accent:#1a5f3c}
  *{box-sizing:border-box}body{margin:0;font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--ink);background:var(--bg)}
  a{color:var(--accent);text-decoration:none}.wrap{max-width:460px;margin:0 auto;padding:0 22px}
  header.top{border-bottom:1px solid var(--line);background:#fff}.top .wrap{display:flex;align-items:center;height:60px;max-width:1200px}
  .top a{color:var(--mut);font-size:14px}
  .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;margin:34px auto}
  h1{font-size:22px;margin:0 0 4px}.sub{color:var(--mut);margin:0 0 20px;font-size:14px}
  .tabs{display:flex;gap:6px;margin-bottom:18px}
  .tabs button{flex:1;padding:9px;border:1px solid var(--line);background:#fff;border-radius:8px;font:inherit;cursor:pointer;color:var(--mut)}
  .tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  label{display:block;font-size:12.5px;color:var(--mut);margin:12px 0 4px}
  input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit}
  .btn{width:100%;margin-top:18px;background:var(--accent);color:#fff;border:0;padding:11px;border-radius:9px;font:600 15px system-ui;cursor:pointer}
  .msg{margin-top:12px;font-size:13.5px}.err{color:#b3261e}.ok{color:#1a7a44}
  .claim{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:8px;font-size:13.5px}
  .muted{color:var(--mut)}
</style></head><body>
<header class="top"><div class="wrap"><a href="/">← marketplace</a></div></header>
<div class="wrap"><div class="card" id="card"></div></div>
<script>
const $=s=>document.querySelector(s);
async function me(){ return (await fetch('/api/auth/me').then(r=>r.json()).catch(()=>({}))).user; }
async function render(){
  const u=await me();
  if(u){
    $('#card').innerHTML=`<h1>My account</h1><p class="sub">${u.name?u.name+' · ':''}${u.email}</p>
      <b style="font-size:14px">Profiles you've claimed</b>
      ${(u.claims&&u.claims.length)?u.claims.map(id=>`<div class="claim">Broker <a href="/brokers/${id}">#${id}</a> <span class="muted">— pending review</span></div>`).join(''):'<p class="muted" style="font-size:13.5px">None yet. Open your broker profile and click <b>Claim this profile</b>.</p>'}
      <button class="btn" id="logout" style="background:#eef2f7;color:#41505f;margin-top:20px">Log out</button>`;
    $('#logout').onclick=async()=>{await fetch('/api/auth/logout',{method:'POST'});render();};
    return;
  }
  $('#card').innerHTML=`<h1>Sign in</h1><p class="sub">Create an account to claim and manage your broker profile.</p>
    <div class="tabs"><button id="tLogin" class="on">Log in</button><button id="tSignup">Sign up</button></div>
    <form id="form">
      <div id="nameWrap" style="display:none"><label>Name</label><input name="name" placeholder="Your name"></div>
      <label>Email</label><input name="email" type="email" required>
      <label>Password</label><input name="password" type="password" required minlength="8" placeholder="8+ characters">
      <button class="btn" type="submit" id="submit">Log in</button>
      <div class="msg" id="msg"></div>
    </form>`;
  let mode='login';
  const setMode=m=>{mode=m;$('#tLogin').classList.toggle('on',m==='login');$('#tSignup').classList.toggle('on',m==='signup');
    $('#nameWrap').style.display=m==='signup'?'block':'none';$('#submit').textContent=m==='signup'?'Create account':'Log in';};
  $('#tLogin').onclick=()=>setMode('login'); $('#tSignup').onclick=()=>setMode('signup');
  $('#form').onsubmit=async(e)=>{
    e.preventDefault(); const fd=Object.fromEntries(new FormData(e.target).entries());
    $('#msg').textContent='…';$('#msg').className='msg';
    const r=await fetch('/api/auth/'+mode,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(fd)}).then(r=>r.json());
    if(r.ok){render();} else {$('#msg').className='msg err';$('#msg').textContent=r.error||'Failed';}
  };
}
render();
</script></body></html>