pmg-gui/js/mobile/loginscreen.js
Dominik Csapak 43f0b189d9 close #1671: implement mobile UI for quarantine
this patch implements a UI for the Quarantine, designed to
be looked at on mobile phones

for this we use Framework7 instead of extjs, since it has much more
features and looks more native on phones

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
2019-02-19 10:04:19 +01:00

115 lines
2.7 KiB
JavaScript

class LoginScreen extends Component {
constructor(config = {}) {
config.tpl = `
<div class="login-screen">
<div class="view">
<div class="page">
<div class="page-content login-screen-content">
<div class="login-screen-title">
<img class="logo" src="pve2/images/logo-128.png" />
Proxmox Mail Gateway
</div>
<form action="/api2/json/access/ticket" method="POST" class="form-ajax-submit">
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="{{gettext 'Username'}}" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="{{gettext 'Password'}}" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<input type="submit" class="button" value='{{gettext "Log In"}}'>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
`;
super(config);
var me = this;
me._screen = app.loginScreen.create({
content: me.getEl(),
});
let login = config.loginInfo;
me._form = me.getEl().find('form');
if (login.username && login.ticket) {
app.form.fillFromData(me._form, {
username: login.username,
password: login.ticket,
});
me._autoLogin = true;
} else if (PMG.Utils.authOK()) {
app.form.fillFromData(me._form, {
username: Proxmox.UserName,
password: decodeURIComponent(PMG.Utils.getCookie('PMGAuthCookie')),
});
me._autoLogin = true;
}
}
open(onLogin) {
var me = this;
return new Promise(function(resolve, reject) {
me._form.on('formajax:beforesend', (el, data, xhr) => {
me.loader = app.dialog.preloader();
});
me._form.on('formajax:success', (el, data, xhr) => {
let json;
try {
json = JSON.parse(xhr.responseText);
} catch (err) {
xhr.error = err;
PMG.Utils.showError(xhr);
return;
}
resolve(json);
});
me._form.on('formajax:error', (el, data, xhr) => {
me.loader.close();
PMG.Utils.showError(xhr);
});
if (me._autoLogin) {
delete me._autoLogin;
me._screen.on('open', () => {
me._form.trigger('submit');
})
}
me._screen.open();
});
}
close() {
var me = this;
if (me.loader) {
me.loader.close();
}
me._screen.close(false);
}
}