luci-theme-bootstrap: overhaul styles

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(backported from commit 8055acc9be)

themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css

@@ -174,19 +174,23 @@ header h3 a, header .brand {
 		font-weight: bold;
 	}
 
-	.cbi-value-field, .cbi-dropdown {
+	.cbi-value-field, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button) {
 		width: 100%;
 		margin: 0;
 	}
 
 	input, textarea, select,
-	.cbi-dropdown > ul > li input[type="text"] {
+	.cbi-dropdown > ul > li {
 		font-size: 16px !important;
-		line-height: 28px;
 		height: auto;
 	}
 
-	select, input[type="text"], input[type="password"] {
+	.cbi-dropdown > ul > li input[type="text"] {
+		line-height: 28px;
+	}
+
+	select, input[type="text"], input[type="password"],
+	.cbi-dropdown > ul > li input[type="text"] {
 		width: 100%;
 		height: 30px;
 	}
@@ -270,11 +274,12 @@ header h3 a, header .brand {
 	}
 
 	header .pull-right {
-		flex: 1 1 20%;
+		flex: 0 1 20%;
 		display: flex;
 		flex-direction: column;
 		padding: 0;
 		justify-content: space-around;
+		margin: .2em 5px .2em auto;
 	}
 
 	.menu-dropdown, .dropdown-menu {

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() {}
+});

themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm

@@ -1,20 +1,21 @@
 <%#
- Copyright 2008 Steven Barth <steven@midlink.org>
+	Copyright 2008 Steven Barth <steven@midlink.org>
- Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+	Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
- Copyright 2012 David Menting <david@nut-bolt.nl>
+	Copyright 2012 David Menting <david@nut-bolt.nl>
- Licensed to the public under the Apache License 2.0.
+	Licensed to the public under the Apache License 2.0.
 -%>
 
-<% local ver = require "luci.version" %>
+		<% if not blank_page then %>
-
+		<%   local ver = require "luci.version" %>
-   <footer>
+		</div>
-    <span>
+		<footer>
-      <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
+			<span>
-    </span>
+				<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
-    <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
+			</span>
-   </footer>
+			<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
-  </div>
+		</footer>
-  <script type="text/javascript">L.require('menu-bootstrap')</script>
+		<script type="text/javascript">L.require('menu-bootstrap')</script>
- </body>
+		<% end %>
+	</body>
 </html>
 

themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm

@@ -56,6 +56,7 @@
 	</head>
 
 	<body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
+		<% if not blank_page then %>
 		<header>
 			<a class="brand" href="/"><%=striptags(boardinfo.hostname or "?")%></a>
 			<ul class="nav" id="topmenu" style="display:none"></ul>
@@ -81,3 +82,4 @@
 			</noscript>
 
 			<div id="tabmenu" style="display:none"></div>
+		<% end %>

themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/sysauth.htm

@@ -0,0 +1,24 @@
+<%#
+ Copyright 2021 Jo-Philipp Wich <jo@mein.io>
+ Licensed to the public under the Apache License 2.0.
+-%>
+
+<%
+	-- tell bootstrap's templates to not render header and footer
+	blank_page = true
+%>
+
+<%+header%>
+
+<div id="view">
+	<div class="spinning"><%:Loading view…%></div>
+	<script type="text/javascript">
+		L.env.default_login_user = <%=luci.http.write_json(duser) %>;
+
+		L.require('ui').then(function(ui) {
+			ui.instantiateView('bootstrap.sysauth');
+		});
+	</script>
+</div>
+
+<%+footer%>