You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
2 years ago
|
import { startAuthentication } from '@simplewebauthn/browser';
|
||
|
import $ from 'jquery';
|
||
|
import { ActionDialog } from 'vj/components/dialog';
|
||
|
import Notification from 'vj/components/notification';
|
||
|
import { AutoloadPage } from 'vj/misc/Page';
|
||
|
import {
|
||
|
api, gql, i18n, request, tpl,
|
||
|
} from 'vj/utils';
|
||
|
|
||
|
async function verifywebauthn($form) {
|
||
|
if (!window.isSecureContext || !('credentials' in navigator)) {
|
||
|
Notification.error(i18n('Your browser does not support WebAuthn or you are not in secure context.'));
|
||
|
return null;
|
||
|
}
|
||
|
let uname = '';
|
||
|
if ($form['uname']) uname = $form['uname'].value;
|
||
|
const authnInfo = await request.get('/user/webauthn', uname ? { uname } : undefined);
|
||
|
if (!authnInfo.authOptions) {
|
||
|
Notification.error(i18n('Failed to fetch registration data.'));
|
||
|
return null;
|
||
|
}
|
||
|
Notification.info(i18n('Please follow the instructions on your device to complete the verification.'));
|
||
|
const result = await startAuthentication(authnInfo.authOptions)
|
||
|
.catch((e) => {
|
||
|
Notification.error(i18n('Failed to get credential: {0}', e));
|
||
|
return null;
|
||
|
});
|
||
|
if (!result) return null;
|
||
|
try {
|
||
|
const authn = await request.post('/user/webauthn', {
|
||
|
result,
|
||
|
});
|
||
|
if (!authn.error) return authnInfo.authOptions.challenge;
|
||
|
} catch (err) {
|
||
|
Notification.error(err.message);
|
||
|
console.error(err);
|
||
|
}
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
async function chooseAction(authn?: boolean) {
|
||
|
return await new ActionDialog({
|
||
|
$body: tpl`
|
||
|
<div class="typo">
|
||
|
<h3>${i18n('Two Factor Authentication')}</h3>
|
||
|
<p>${i18n('Your account has two factor authentication enabled. Please choose an authenticator to verify.')}</p>
|
||
|
<div style="${authn ? '' : 'display:none;'}">
|
||
|
<input value="${i18n('Use Authenticator')}" class="expanded rounded primary button" data-action="webauthn" autofocus>
|
||
|
</div>
|
||
|
<div>
|
||
|
<label>${i18n('6-Digit Code')}
|
||
|
<div class="textbox-container">
|
||
|
<input class="textbox" type="text" name="tfa_code" autocomplete="off" autofocus>
|
||
|
</div>
|
||
|
</label>
|
||
|
<input value="${i18n('Use TFA Code')}" class="expanded rounded primary button" data-action="tfa">
|
||
|
</div>
|
||
|
</div>
|
||
|
`,
|
||
|
$action: [],
|
||
|
canCancel: false,
|
||
|
onDispatch(action) {
|
||
|
if (action === 'tfa' && $('[name="tfa_code"]').val() === null) {
|
||
|
$('[name="tfa_code"]').focus();
|
||
|
return false;
|
||
|
}
|
||
|
return true;
|
||
|
},
|
||
|
}).open();
|
||
|
}
|
||
|
|
||
|
export default new AutoloadPage('user_verify', () => {
|
||
|
$(document).on('click', '[name="login_submit"]', async (ev) => {
|
||
|
ev.preventDefault();
|
||
|
const $form = ev.currentTarget.form;
|
||
|
const uname = $('[name="uname"]').val() as string;
|
||
|
const { tfa, authn } = await api(gql`
|
||
|
user(uname:${uname}){
|
||
|
tfa
|
||
|
authn
|
||
|
}
|
||
|
`, ['data', 'user']);
|
||
|
if (authn || tfa) {
|
||
|
let action = (authn && tfa) ? await chooseAction(true) : '';
|
||
|
if (!action) action = tfa ? await chooseAction(false) : 'webauthn';
|
||
|
if (action === 'webauthn') {
|
||
|
const challenge = await verifywebauthn($form);
|
||
|
if (challenge) $form['authnChallenge'].value = challenge;
|
||
|
else return;
|
||
|
} else $form['tfa'].value = $('[name="tfa_code"]').val() as string;
|
||
|
}
|
||
|
$form.submit();
|
||
|
});
|
||
|
$(document).on('click', '[name=webauthn_verify]', async (ev) => {
|
||
|
ev.preventDefault();
|
||
|
const $form = ev.currentTarget.form;
|
||
|
if (!$form) return;
|
||
|
const challenge = await verifywebauthn($form);
|
||
|
if (challenge) {
|
||
|
$form['authnChallenge'].value = challenge;
|
||
|
$form.submit();
|
||
|
}
|
||
|
});
|
||
|
});
|