505 lines
11 KiB
JavaScript
505 lines
11 KiB
JavaScript
Ext.define('PBS.LoginView', {
|
|
extend: 'Ext.container.Container',
|
|
xtype: 'loginview',
|
|
|
|
controller: {
|
|
xclass: 'Ext.app.ViewController',
|
|
|
|
submitForm: async function() {
|
|
var me = this;
|
|
var loginForm = me.lookupReference('loginForm');
|
|
var unField = me.lookupReference('usernameField');
|
|
var saveunField = me.lookupReference('saveunField');
|
|
|
|
if (!loginForm.isValid()) {
|
|
return;
|
|
}
|
|
|
|
let params = loginForm.getValues();
|
|
|
|
params.username = params.username + '@' + params.realm;
|
|
delete params.realm;
|
|
|
|
if (loginForm.isVisible()) {
|
|
loginForm.mask(gettext('Please wait...'), 'x-mask-loading');
|
|
}
|
|
|
|
// set or clear username
|
|
var sp = Ext.state.Manager.getProvider();
|
|
if (saveunField.getValue() === true) {
|
|
sp.set(unField.getStateId(), unField.getValue());
|
|
} else {
|
|
sp.clear(unField.getStateId());
|
|
}
|
|
sp.set(saveunField.getStateId(), saveunField.getValue());
|
|
|
|
try {
|
|
let resp = await PBS.Async.api2({
|
|
url: '/api2/extjs/access/ticket',
|
|
params: params,
|
|
method: 'POST',
|
|
});
|
|
|
|
let data = resp.result.data;
|
|
if (data.ticket.startsWith("PBS:!tfa!")) {
|
|
data = await me.performTFAChallenge(data);
|
|
}
|
|
|
|
PBS.Utils.updateLoginData(data);
|
|
PBS.app.changeView('mainview');
|
|
} catch (error) {
|
|
console.error(error); // for debugging
|
|
Proxmox.Utils.authClear();
|
|
loginForm.unmask();
|
|
Ext.MessageBox.alert(
|
|
gettext('Error'),
|
|
gettext('Login failed. Please try again'),
|
|
);
|
|
}
|
|
},
|
|
|
|
performTFAChallenge: async function(data) {
|
|
let me = this;
|
|
|
|
let userid = data.username;
|
|
let ticket = data.ticket;
|
|
let challenge = JSON.parse(decodeURIComponent(
|
|
ticket.split(':')[1].slice("!tfa!".length),
|
|
));
|
|
|
|
let resp = await new Promise((resolve, reject) => {
|
|
Ext.create('PBS.login.TfaWindow', {
|
|
userid,
|
|
ticket,
|
|
challenge,
|
|
onResolve: value => resolve(value),
|
|
onReject: reject,
|
|
}).show();
|
|
});
|
|
|
|
return resp.result.data;
|
|
},
|
|
|
|
control: {
|
|
'field[name=username]': {
|
|
specialkey: function(f, e) {
|
|
if (e.getKey() === e.ENTER) {
|
|
var pf = this.lookupReference('passwordField');
|
|
if (!pf.getValue()) {
|
|
pf.focus(false);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
'field[name=lang]': {
|
|
change: function(f, value) {
|
|
var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
|
|
Ext.util.Cookies.set('PBSLangCookie', value, dt);
|
|
this.getView().mask(gettext('Please wait...'), 'x-mask-loading');
|
|
window.location.reload();
|
|
},
|
|
},
|
|
'button[reference=loginButton]': {
|
|
click: 'submitForm',
|
|
},
|
|
'window[reference=loginwindow]': {
|
|
show: function() {
|
|
var sp = Ext.state.Manager.getProvider();
|
|
var checkboxField = this.lookupReference('saveunField');
|
|
var unField = this.lookupReference('usernameField');
|
|
|
|
var checked = sp.get(checkboxField.getStateId());
|
|
checkboxField.setValue(checked);
|
|
|
|
if (checked === true) {
|
|
var username = sp.get(unField.getStateId());
|
|
unField.setValue(username);
|
|
var pwField = this.lookupReference('passwordField');
|
|
pwField.focus();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
plugins: 'viewport',
|
|
|
|
layout: {
|
|
type: 'border',
|
|
},
|
|
|
|
items: [
|
|
{
|
|
region: 'north',
|
|
xtype: 'container',
|
|
layout: {
|
|
type: 'hbox',
|
|
align: 'middle',
|
|
},
|
|
margin: '2 5 2 5',
|
|
height: 38,
|
|
items: [
|
|
{
|
|
xtype: 'proxmoxlogo',
|
|
prefix: '',
|
|
},
|
|
{
|
|
xtype: 'versioninfo',
|
|
makeApiCall: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
region: 'center',
|
|
},
|
|
{
|
|
xtype: 'window',
|
|
closable: false,
|
|
resizable: false,
|
|
reference: 'loginwindow',
|
|
autoShow: true,
|
|
modal: true,
|
|
width: 400,
|
|
|
|
defaultFocus: 'usernameField',
|
|
|
|
layout: {
|
|
type: 'auto',
|
|
},
|
|
|
|
title: gettext('Proxmox Backup Server Login'),
|
|
|
|
items: [
|
|
{
|
|
xtype: 'form',
|
|
layout: {
|
|
type: 'form',
|
|
},
|
|
defaultButton: 'loginButton',
|
|
url: '/api2/extjs/access/ticket',
|
|
reference: 'loginForm',
|
|
|
|
fieldDefaults: {
|
|
labelAlign: 'right',
|
|
allowBlank: false,
|
|
},
|
|
|
|
items: [
|
|
{
|
|
xtype: 'textfield',
|
|
fieldLabel: gettext('User name'),
|
|
name: 'username',
|
|
itemId: 'usernameField',
|
|
reference: 'usernameField',
|
|
stateId: 'login-username',
|
|
},
|
|
{
|
|
xtype: 'textfield',
|
|
inputType: 'password',
|
|
fieldLabel: gettext('Password'),
|
|
name: 'password',
|
|
itemId: 'passwordField',
|
|
reference: 'passwordField',
|
|
},
|
|
{
|
|
xtype: 'pmxRealmComboBox',
|
|
name: 'realm',
|
|
},
|
|
{
|
|
xtype: 'proxmoxLanguageSelector',
|
|
fieldLabel: gettext('Language'),
|
|
value: Ext.util.Cookies.get('PBSLangCookie') || Proxmox.defaultLang || 'en',
|
|
name: 'lang',
|
|
reference: 'langField',
|
|
submitValue: false,
|
|
},
|
|
],
|
|
buttons: [
|
|
{
|
|
xtype: 'checkbox',
|
|
fieldLabel: gettext('Save User name'),
|
|
name: 'saveusername',
|
|
reference: 'saveunField',
|
|
stateId: 'login-saveusername',
|
|
labelWidth: 250,
|
|
labelAlign: 'right',
|
|
submitValue: false,
|
|
},
|
|
{
|
|
text: gettext('Login'),
|
|
reference: 'loginButton',
|
|
formBind: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
|
|
Ext.define('PBS.login.TfaWindow', {
|
|
extend: 'Ext.window.Window',
|
|
mixins: ['Proxmox.Mixin.CBind'],
|
|
|
|
modal: true,
|
|
resizable: false,
|
|
title: gettext("Second login factor required"),
|
|
|
|
cancelled: true,
|
|
|
|
width: 512,
|
|
layout: {
|
|
type: 'vbox',
|
|
align: 'stretch',
|
|
},
|
|
|
|
defaultButton: 'totpButton',
|
|
|
|
controller: {
|
|
xclass: 'Ext.app.ViewController',
|
|
|
|
init: function(view) {
|
|
let me = this;
|
|
|
|
if (!view.userid) {
|
|
throw "no userid given";
|
|
}
|
|
|
|
if (!view.ticket) {
|
|
throw "no ticket given";
|
|
}
|
|
|
|
if (!view.challenge) {
|
|
throw "no challenge given";
|
|
}
|
|
|
|
if (!view.challenge.webauthn) {
|
|
me.lookup('webauthnButton').setVisible(false);
|
|
}
|
|
|
|
if (!view.challenge.totp) {
|
|
me.lookup('totpButton').setVisible(false);
|
|
}
|
|
|
|
if (!view.challenge.recovery || !view.challenge.recovery.length) {
|
|
me.lookup('recoveryButton').setVisible(false);
|
|
} else if (view.challenge.recovery.length <= 3) {
|
|
me.lookup('recoveryButton')
|
|
.setIconCls('fa fa-fw fa-exclamation-triangle');
|
|
}
|
|
|
|
|
|
if (!view.challenge.totp && !view.challenge.recovery) {
|
|
// only webauthn tokens available, maybe skip ahead?
|
|
me.lookup('totp').setVisible(false);
|
|
me.lookup('waiting').setVisible(true);
|
|
let _promise = me.loginWebauthn();
|
|
}
|
|
},
|
|
|
|
onClose: function() {
|
|
let me = this;
|
|
let view = me.getView();
|
|
|
|
if (!view.cancelled) {
|
|
return;
|
|
}
|
|
|
|
view.onReject();
|
|
},
|
|
|
|
cancel: function() {
|
|
this.getView().close();
|
|
},
|
|
|
|
loginTotp: function() {
|
|
let me = this;
|
|
|
|
let _promise = me.finishChallenge('totp:' + me.lookup('totp').value);
|
|
},
|
|
|
|
loginWebauthn: async function() {
|
|
let me = this;
|
|
let view = me.getView();
|
|
|
|
// avoid this window ending up above the tfa popup if we got triggered from init().
|
|
await PBS.Async.sleep(100);
|
|
|
|
// FIXME: With webauthn the browser provides a popup (since it doesn't necessarily need
|
|
// to require pressing a button, but eg. use a fingerprint scanner or face detection
|
|
// etc., so should we just trust that that happens and skip the popup?)
|
|
let msg = Ext.Msg.show({
|
|
title: `Webauthn: ${gettext('Login')}`,
|
|
message: gettext('Please press the button on your Authenticator Device'),
|
|
buttons: [],
|
|
});
|
|
|
|
let challenge = view.challenge.webauthn;
|
|
|
|
// Byte array fixup, keep challenge string:
|
|
let challenge_str = challenge.publicKey.challenge;
|
|
challenge.publicKey.challenge = PBS.Utils.base64url_to_bytes(challenge_str);
|
|
for (const cred of challenge.publicKey.allowCredentials) {
|
|
cred.id = PBS.Utils.base64url_to_bytes(cred.id);
|
|
}
|
|
|
|
let hwrsp;
|
|
try {
|
|
hwrsp = await navigator.credentials.get(challenge);
|
|
} catch (error) {
|
|
view.onReject(error);
|
|
return;
|
|
} finally {
|
|
msg.close();
|
|
}
|
|
|
|
let response = {
|
|
id: hwrsp.id,
|
|
type: hwrsp.type,
|
|
challenge: challenge_str,
|
|
rawId: PBS.Utils.bytes_to_base64url(hwrsp.rawId),
|
|
response: {
|
|
authenticatorData: PBS.Utils.bytes_to_base64url(
|
|
hwrsp.response.authenticatorData,
|
|
),
|
|
clientDataJSON: PBS.Utils.bytes_to_base64url(hwrsp.response.clientDataJSON),
|
|
signature: PBS.Utils.bytes_to_base64url(hwrsp.response.signature),
|
|
},
|
|
};
|
|
|
|
msg.close();
|
|
|
|
await me.finishChallenge("webauthn:" + JSON.stringify(response));
|
|
},
|
|
|
|
loginRecovery: function() {
|
|
let me = this;
|
|
let view = me.getView();
|
|
|
|
if (me.login_recovery_confirm) {
|
|
let _promise = me.finishChallenge('recovery:' + me.lookup('totp').value);
|
|
} else {
|
|
me.login_recovery_confirm = true;
|
|
me.lookup('totpButton').setVisible(false);
|
|
me.lookup('webauthnButton').setVisible(false);
|
|
me.lookup('recoveryButton').setText(gettext("Confirm"));
|
|
me.lookup('recoveryInfo').setVisible(true);
|
|
console.log("RECOVERY:", view.challenge.recovery);
|
|
me.lookup('availableRecovery').update(Ext.String.htmlEncode(
|
|
gettext('Available recovery keys: ') + view.challenge.recovery.join(', '),
|
|
));
|
|
me.lookup('availableRecovery').setVisible(true);
|
|
if (view.challenge.recovery.length <= 3) {
|
|
me.lookup('recoveryLow').setVisible(true);
|
|
}
|
|
}
|
|
},
|
|
|
|
finishChallenge: function(password) {
|
|
let me = this;
|
|
let view = me.getView();
|
|
view.cancelled = false;
|
|
|
|
let params = {
|
|
username: view.userid,
|
|
'tfa-challenge': view.ticket,
|
|
password,
|
|
};
|
|
|
|
let resolve = view.onResolve;
|
|
let reject = view.onReject;
|
|
view.close();
|
|
|
|
return PBS.Async.api2({
|
|
url: '/api2/extjs/access/ticket',
|
|
method: 'POST',
|
|
params,
|
|
})
|
|
.then(resolve)
|
|
.catch(reject);
|
|
},
|
|
},
|
|
|
|
listeners: {
|
|
close: 'onClose',
|
|
},
|
|
|
|
items: [
|
|
{
|
|
xtype: 'form',
|
|
layout: 'anchor',
|
|
border: false,
|
|
fieldDefaults: {
|
|
anchor: '100%',
|
|
padding: '0 5',
|
|
},
|
|
items: [
|
|
{
|
|
xtype: 'textfield',
|
|
fieldLabel: gettext('Please enter your OTP verification code:'),
|
|
labelWidth: '300px',
|
|
name: 'totp',
|
|
reference: 'totp',
|
|
allowBlank: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
xtype: 'box',
|
|
html: gettext('Waiting for second factor.'),
|
|
reference: 'waiting',
|
|
padding: '0 5',
|
|
hidden: true,
|
|
},
|
|
{
|
|
xtype: 'box',
|
|
padding: '0 5',
|
|
reference: 'recoveryInfo',
|
|
hidden: true,
|
|
html: gettext('Please note that each recovery code can only be used once!'),
|
|
style: {
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
{
|
|
xtype: 'box',
|
|
padding: '0 5',
|
|
reference: 'availableRecovery',
|
|
hidden: true,
|
|
style: {
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
{
|
|
xtype: 'box',
|
|
padding: '0 5',
|
|
reference: 'recoveryLow',
|
|
hidden: true,
|
|
html: '<i class="fa fa-exclamation-triangle warning"></i>'
|
|
+ gettext('Only few recovery keys available. Please generate a new set!')
|
|
+ '<i class="fa fa-exclamation-triangle warning"></i>',
|
|
style: {
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
],
|
|
|
|
buttons: [
|
|
{
|
|
text: gettext('Login with TOTP'),
|
|
handler: 'loginTotp',
|
|
reference: 'totpButton',
|
|
},
|
|
{
|
|
text: gettext('Login with a recovery key'),
|
|
handler: 'loginRecovery',
|
|
reference: 'recoveryButton',
|
|
},
|
|
{
|
|
text: gettext('Use a Webauthn token'),
|
|
handler: 'loginWebauthn',
|
|
reference: 'webauthnButton',
|
|
},
|
|
],
|
|
});
|