luci-theme-bootstrap: overhaul styles

[project/luci.git] / themes / luci-theme-bootstrap / htdocs / luci-static / resources / view / bootstrap / sysauth.js

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js
new file mode 100644 (file)
index 0000000..344b043
--- /dev/null
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js
@@ -0,0 +1,99 @@
+'use strict';
+'require ui';
+'require dom';
+'require form';
+'require view';
+'require request';
+
+var data = { login: {} };
+
+return view.extend({
+       load: function() {
+               var m, s, o;
+
+               m = new form.JSONMap(data);
+               s = m.section(form.NamedSection, 'login');
+
+               o = s.option(form.Value, 'username', _('Username'));
+               o.default = L.env.default_login_user;
+
+               o = s.option(form.Value, 'password', _('Password'));
+               o.password = true;
+               o.validate = function(section_id, value) {
+                       var msg = document.querySelector('alert-message');
+
+                       if (msg && value.length)
+                               msg.parentNode.removeChild(msg);
+
+                       return true;
+               };
+
+               return m.render();
+       },
+
+       render: function(form) {
+               ui.showModal(_('Authorization Required'), [
+                       form,
+                       E('hr'),
+                       E('div', { 'class': 'alert-message error hidden' }, [
+                               _('Invalid username and/or password! Please try again.')
+                       ]),
+                       E('button', {
+                               'class': 'btn cbi-button-positive important',
+                               'click': ui.createHandlerFn(this, 'handleLogin', form)
+                       }, [ _('Login') ])
+               ], 'login');
+
+               document.querySelector('[id="widget.cbid.json.login.password"]').focus();
+
+               form.addEventListener('keyup', L.bind(function(form, ev) {
+                       if (ev.key === 'Enter' || ev.keyCode === 13)
+                               document.querySelector('.cbi-button-positive.important').click();
+               }, this, form));
+
+               return E('div', { 'class': 'spinning' }, _('Loading view…'));
+       },
+
+       handleLoginError: function(err) {
+               document.querySelectorAll('.alert-message.error').forEach(function(msg) {
+                       msg.firstChild.data = _('The login request failed with error: %h').format(err.message);
+                       msg.classList.remove('hidden');
+                       msg.classList.add('flash');
+               });
+       },
+
+       handleLoginReply: function(res) {
+               if (res.status != 403) {
+                       ui.hideModal();
+                       location.reload();
+
+                       return;
+               }
+
+               document.querySelectorAll('.alert-message.error').forEach(function(msg) {
+                       msg.firstChild.data = _('Invalid username and/or password! Please try again.');
+                       msg.classList.remove('hidden');
+                       msg.classList.add('flash');
+               });
+       },
+
+       handleLogin: function(form, ev) {
+               var fd = new FormData();
+
+               document.querySelectorAll('.alert-message.error').forEach(function(msg) {
+                       msg.classList.add('hidden');
+                       msg.classList.remove('flash');
+               });
+
+               dom.callClassMethod(form, 'save');
+
+               fd.append('luci_username', data.login.username != null ? data.login.username : '');
+               fd.append('luci_password', data.login.password != null ? data.login.password : '');
+
+               Object.getPrototypeOf(L).notifySessionExpiry = function() {};
+
+               return request.post(location.href, fd).then(this.handleLoginReply, this.handleLoginError);
+       },
+
+       addFooter: function() {}
+});