87 lines
5.9 KiB
JavaScript
87 lines
5.9 KiB
JavaScript
// Credential views use only the host's JSON API. Secrets leave the browser encrypted.
|
|
const credentialView=document.getElementById('credential-view');
|
|
const credentialNotice=document.getElementById('credential-notice');
|
|
document.getElementById('register-first').onclick=()=>{location.hash='passkeys';};
|
|
async function credentialGet(path){
|
|
const response=await fetch('/api/cred/'+path);
|
|
const value=await response.json();
|
|
if(!response.ok)throw new Error(value.message||value.error);
|
|
return value;
|
|
}
|
|
function credentialError(error){(document.getElementById('credential-status')||document.getElementById('error')).textContent=error.message;}
|
|
function credentialForm(action){
|
|
credentialView.querySelector('form').onsubmit=async event=>{
|
|
event.preventDefault();
|
|
const buttons=[...event.target.querySelectorAll('button')];
|
|
buttons.forEach(button=>button.disabled=true);
|
|
try{await action(new FormData(event.target),event.submitter.value);document.getElementById('credential-status').textContent='Complete.';await credentialState();}
|
|
catch(error){credentialError(error);}
|
|
finally{buttons.forEach(button=>button.disabled=false);}
|
|
};
|
|
}
|
|
async function credentialState(){
|
|
const passkeys=await credentialGet('passkeys');
|
|
credentialNotice.hidden=passkeys.length>0;
|
|
return passkeys;
|
|
}
|
|
async function credentialNavigate(){
|
|
const parts=location.hash.slice(1).split('/').map(decodeURIComponent);
|
|
credentialView.hidden=!['passkeys','approve','entry'].includes(parts[0]);
|
|
if(credentialView.hidden)return;
|
|
credentialView.innerHTML='<button type="button" id="credential-close">Return to chat</button><h2></h2><div id="credential-content"></div><p id="credential-status" role="status"></p>';
|
|
document.getElementById('credential-close').onclick=()=>{location.hash='';};
|
|
const content=document.getElementById('credential-content');
|
|
try{
|
|
if(parts[0]==='passkeys'){
|
|
credentialView.querySelector('h2').textContent='Passkeys';
|
|
const passkeys=await credentialState();
|
|
const list=document.createElement('ul');
|
|
for(const key of passkeys){const row=document.createElement('li');row.textContent=key.label;list.append(row);}
|
|
content.append(list);
|
|
const form=document.createElement('form');form.innerHTML='<label>Passkey label <input name="label" required></label><button>Register passkey</button>';content.append(form);
|
|
credentialForm(async data=>{
|
|
const label=data.get('label');let gate;
|
|
if((await credentialGet('passkeys')).length){const proof=await assertion(await post('/cred/passkeys/register/challenge',{label}));gate={id:proof.challenge_id,response:proof.assertion};}
|
|
const challenge=await post('/cred/passkeys/register/start',{label,gate});
|
|
const credential=await navigator.credentials.create(options(challenge));
|
|
await post('/cred/passkeys/register/finish',{challenge_id:challenge.id,response:serialize(credential)});
|
|
await credentialNavigate();
|
|
});
|
|
}else if(parts[0]==='approve'){
|
|
credentialView.querySelector('h2').textContent='Review credential request';
|
|
const id=parts[1],request=await credentialGet('requests/'+encodeURIComponent(id));
|
|
const summary=document.createElement('p'),details=document.createElement('pre');summary.textContent=request.summary;details.textContent=JSON.stringify(request,null,2);content.append(summary,details);
|
|
const grant=request.payload.grant_create||request.payload;
|
|
const limits=!!request.payload.grant_create||!!request.payload.items?.length;
|
|
const form=document.createElement('form');
|
|
form.innerHTML='<fieldset '+(limits?'':'hidden disabled')+'><legend>Limits</legend><label>Duration in seconds <input type="number" name="duration" min="1" required></label><label>Maximum uses <input type="number" name="uses" min="1" placeholder="Unlimited"></label></fieldset><button value="approve">Approve</button><button value="deny" formnovalidate>Deny</button>';
|
|
form.elements.duration.value=grant.duration_secs||(grant.exp?Math.max(1,grant.exp-Math.floor(Date.now()/1000)):3600);form.elements.uses.value=grant.max_uses||'';content.append(form);
|
|
credentialForm(async(data,decision)=>{
|
|
const path='/cred/requests/'+encodeURIComponent(id);
|
|
const overrides=decision==='deny'||!limits?{}:{duration_secs:Number(data.get('duration')),max_uses:data.get('uses')?Number(data.get('uses')):null};
|
|
const challenge=await post(path+'/challenge',{decision,overrides});
|
|
await post(path+'/decide',challenge.unlocked?{decision,overrides}:await assertion(challenge));
|
|
});
|
|
}else{
|
|
credentialView.querySelector('h2').textContent='Enter a credential secret';
|
|
const items=await credentialGet('items');
|
|
const form=document.createElement('form');form.innerHTML='<label>Secret field <select name="field" required></select></label><label>Secret <textarea name="secret" required></textarea></label><button>Encrypt and submit</button>';content.append(form);
|
|
for(const item of items)for(const field of item.fields.filter(field=>!field.public)){
|
|
const option=document.createElement('option');option.value=JSON.stringify([item.id,field.field_id]);option.textContent=item.name+' / '+field.name;form.elements.field.append(option);
|
|
if(item.id===parts[1]&&field.field_id===parts[2])option.selected=true;
|
|
}
|
|
credentialForm(async data=>{
|
|
const [item,field]=JSON.parse(data.get('field'));
|
|
const path='/cred/items/'+encodeURIComponent(item)+'/fields/'+encodeURIComponent(field);
|
|
const {public_key}=await credentialGet('entry/key');
|
|
const encrypted=await encrypt(public_key,data.get('secret'));form.elements.secret.value='';
|
|
const proof=await assertion(await post(path+'/challenge',{ciphertext_sha256:encrypted.ciphertext_sha256}));
|
|
await post(path,{...proof,envelope:encrypted.envelope});
|
|
});
|
|
}
|
|
}catch(error){credentialError(error);}
|
|
}
|
|
window.addEventListener('hashchange',credentialNavigate);
|
|
credentialNavigate();
|
|
credentialState().catch(credentialError);
|