Build your own login page

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Staff inbox</title><script src="login.js" defer></script></head>
<body><main><h1>Staff inbox</h1><form id="staff-form" method="post" action="/__cloudauro/staff/login"><label>Email<input name="email" type="email" autocomplete="username" required></label><label>Password<input name="password" type="password" autocomplete="current-password" required maxlength="128"></label><button type="submit">Sign in</button></form><p id="status" role="status"></p><button id="sign-out" type="button" hidden>Sign out</button><div id="requests"></div></main></body></html>

"use strict";
// Manager creates the staff login for the contacts Form inbox first.
const form=document.querySelector('#staff-form'),status=document.querySelector('#status'),list=document.querySelector('#requests'),signOut=document.querySelector('#sign-out');
async function request(path,method='GET',data) {
  const response=await fetch(path,{method,credentials:'same-origin',cache:'no-store',headers:{'Content-Type':'application/json','X-CloudAuro-Staff':'1'},...(method==='GET'?{}:{body:JSON.stringify(data||{})})});
  const envelope=await response.json();
  if(!response.ok)throw new Error(envelope.error?.message||'Request failed.');
  return envelope.data;
}
form.addEventListener('submit',async event=>{
  event.preventDefault();if(!form.reportValidity())return;
  const button=form.querySelector('button');if(button.disabled)return;button.disabled=true;
  try{
    await request('/__cloudauro/staff/login','POST',Object.fromEntries(new FormData(form)));
    form.elements.password.value='';
    const page=await request('/__cloudauro/data/contacts/rows?limit=20&page=1');
    list.replaceChildren();
    for(const record of page.items){const message=document.createElement('p');message.textContent=JSON.stringify(record.values);list.append(message);}
    form.hidden=true;signOut.hidden=false;status.textContent=page.hasMore?'Showing the first 20 requests. Use the data API pagination for more.':'Your inbox is ready.';
  }catch(error){list.replaceChildren();status.textContent=error.message;}
  finally{button.disabled=false;}
});
signOut.addEventListener('click',async()=>{
  list.replaceChildren();form.hidden=false;signOut.disabled=true;
  try{await request('/__cloudauro/staff/logout','POST');signOut.hidden=true;status.textContent='Signed out.';}
  catch(error){status.textContent=error.message;}
  finally{signOut.disabled=false;}
});