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: '' + gettext('Only few recovery keys available. Please generate a new set!') + '', 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', }, ], });