agent: mask OAuth code input + reveal toggle on login screen (closes #568)
The login-in-progress screen's OAuth-code input was a plain text field — anyone shoulder-surfing or capturing a screenshot of the agent web UI would see the code in cleartext. Same risk applies to dashboard share-screens during live demos. Changes: - input switches to type='password' so the pasted code renders as bullets by default. Placeholder updated to '(hidden)' so the operator knows the masking is intentional, not a browser quirk. - new 'reveal' button (👁) next to the input flips the type back to text on press, so the operator can sanity-check the paste before submitting if she wants. aria-pressed reflects state. - CSS for the reveal button mirrors the existing .btn-login amber family — quiet by default, amber border/glow when pressed. - spellcheck='false' on the input so browsers don't try to underline the random-looking string as a typo. The on-screen OAuth URL stays visible (the operator needs to click it). The code is the secret leg — only the operator's browser holds it, the URL is what was posted publicly to claude's OAuth provider.
This commit is contained in:
parent
5f8bc5315a
commit
3b597ea028
2 changed files with 57 additions and 5 deletions
|
|
@ -351,11 +351,33 @@ window.marked = marked;
|
|||
const code = el('form', {
|
||||
action: '/login/code', method: 'POST', class: 'loginform', 'data-async': '',
|
||||
});
|
||||
// #568: OAuth code is a sensitive secret — mask the input with
|
||||
// type="password" so a shoulder-surfer / screenshot doesn't
|
||||
// capture it. The reveal button flips it back to text on press
|
||||
// so the operator can sanity-check the paste before submit.
|
||||
const codeInput = el('input', {
|
||||
name: 'code',
|
||||
type: 'password',
|
||||
placeholder: 'paste OAuth code here (hidden)',
|
||||
required: '',
|
||||
autocomplete: 'off',
|
||||
spellcheck: 'false',
|
||||
});
|
||||
const reveal = el('button', {
|
||||
type: 'button',
|
||||
class: 'loginform-reveal',
|
||||
title: 'show / hide pasted code',
|
||||
'aria-label': 'show / hide pasted OAuth code',
|
||||
'aria-pressed': 'false',
|
||||
}, '👁');
|
||||
reveal.addEventListener('click', () => {
|
||||
const showing = codeInput.getAttribute('type') === 'text';
|
||||
codeInput.setAttribute('type', showing ? 'password' : 'text');
|
||||
reveal.setAttribute('aria-pressed', showing ? 'false' : 'true');
|
||||
});
|
||||
code.append(
|
||||
el('input', {
|
||||
name: 'code', placeholder: 'paste OAuth code here',
|
||||
required: '', autocomplete: 'off',
|
||||
}),
|
||||
codeInput,
|
||||
reveal,
|
||||
el('button', { type: 'submit', class: 'btn btn-login' }, '◆ S3ND C0DE'),
|
||||
);
|
||||
root.append(code);
|
||||
|
|
|
|||
Loading…
Reference in a new issue