fixx

luci-theme-bootstrap/Makefile

@@ -0,0 +1,26 @@
+#
+# Copyright (C) 2008-2014 The LuCI Team <luci@lists.subsignal.org>
+#
+# This is free software, licensed under the Apache License, Version 2.0 .
+#
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=Bootstrap Theme (default)
+LUCI_DEPENDS:=
+
+PKG_LICENSE:=Apache-2.0
+
+define Package/luci-theme-bootstrap/postrm
+#!/bin/sh
+[ -n "$${IPKG_INSTROOT}" ] || {
+	uci -q delete luci.themes.Bootstrap
+	uci -q delete luci.themes.BootstrapDark
+	uci -q delete luci.themes.BootstrapLight
+	uci commit luci
+}
+endef
+
+include ../../luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark

@@ -0,0 +1 @@
+bootstrap

luci-theme-bootstrap/htdocs/luci-static/bootstrap-light

@@ -0,0 +1 @@
+bootstrap

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

@@ -0,0 +1,428 @@
+header h3 a, header .brand {
+	display:none !important;
+}
+
+@media screen and (max-device-width: 600px) {
+	.modal {
+		margin: 1.5em auto;
+	}
+
+	.tabs, .cbi-tabmenu {
+		background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%);
+		background-size: 1px 34px;
+		margin-bottom: 10px;
+	}
+
+	.tabs > li, .cbi-tabmenu > li {
+		height: 30px;
+	}
+
+	.tabs > li > a, .cbi-tabmenu > li > a {
+		padding: 0 8px;
+		line-height: 30px;
+	}
+
+	.table {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.tr {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		border-top: 1px solid var(--border-color-medium);
+		padding: 5px 0;
+		margin: 0 -3px;
+	}
+
+	.table .th,
+	.table .td,
+	.table .tr::before {
+		flex: 1 1 50%;
+		align-self: flex-start;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		display: inline-block;
+		border-top: none;
+		padding: 3px;
+		box-sizing: border-box;
+	}
+
+	.table .td.cbi-dropdown-open {
+		overflow: visible;
+	}
+
+	.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
+	.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
+	.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
+	.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
+	.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
+	.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
+	.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
+	.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
+	.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
+	.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
+
+	.td select {
+		word-wrap: normal;
+	}
+
+	.td[data-widget="button"],
+	.td[data-widget="fvalue"] {
+		flex: 1 1 17%;
+		text-align: left;
+	}
+
+	.td.cbi-value-field {
+		align-self: flex-start;
+		flex-basis: 100%;
+		margin-bottom: .3em;
+	}
+
+	.td.cbi-value-field .cbi-button {
+		width: 100%;
+	}
+
+	.table.cbi-section-table {
+		border: none;
+		background: none;
+		margin: 0;
+	}
+
+	.tr.table-titles,
+	.cbi-section-table-titles,
+	.cbi-section-table-descr {
+		display: none;
+	}
+
+	.cbi-section-table-row {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin: 0 0 .5em 0;
+	}
+
+	.cbi-section-table + .cbi-section-create {
+		padding-top: 0;
+	}
+
+	.tr[data-title]::before {
+		display: block;
+		flex: 1 1 100%;
+		background: var(--background-color-low) !important;
+		font-size: 16px;
+		border-bottom: 1px solid var(--border-color-medium);
+	}
+
+	.td[data-title]::before {
+		content: attr(data-title);
+		font-weight: bold;
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: pre-line;
+	}
+
+	.td[data-description]::after {
+		display: block;
+	}
+
+	.td[data-title] ~ .td.cbi-section-actions {
+		align-self: flex-start;
+	}
+
+	.td.cbi-section-actions {
+		overflow: initial;
+		max-width: 100%;
+		padding: 3px 2px;
+		flex-basis: 100%;
+	}
+
+	.hide-sm,
+	.hide-xs {
+		display: none !important;
+	}
+
+	.td.cbi-value-field[data-widget="CBI.DummyValue"],
+	.td.cbi-value-field[data-widget="CBI.Button"],
+	.td.cbi-value-field[data-widget="CBI.FlagValue"],
+	.td.cbi-value-field[data-widget="dvalue"],
+	.td.cbi-value-field[data-widget="button"],
+	.td.cbi-value-field[data-widget="fvalue"] {
+		flex-basis: 50%;
+		text-align: left;
+	}
+
+	.cbi-section-table .tr:hover .td,
+	.cbi-section-table .tr:hover .th,
+	.cbi-section-table .tr:hover::before {
+		background-color: transparent;
+	}
+
+	.cbi-tab-descr {
+		margin: 0 0 .5em 0;
+	}
+
+	.cbi-value {
+		padding-bottom: .5em;
+		border-bottom: 1px solid var(--border-color-high);
+		margin-bottom: .5em;
+		display: block;
+	}
+
+	.cbi-value.hidden {
+		display: none;
+	}
+
+	.cbi-value .cbi-value:last-child {
+		border-bottom: none;
+		padding-bottom: inherit;
+		margin-bottom: inherit;
+	}
+
+	.cbi-value label.cbi-value-title {
+		font-weight: bold;
+	}
+
+	.cbi-value-field, .cbi-select, .cbi-dynlist, .cbi-dropdown:not(.btn):not(.cbi-button) {
+		width: 100%;
+		margin: 0;
+	}
+
+	.cbi-dynlist > .item {
+		min-height: 30px;
+		display: flex;
+		align-items: center;
+	}
+
+	input, textarea, select,
+	.cbi-dropdown > ul > li {
+		font-size: 16px !important;
+		height: auto;
+	}
+
+	.cbi-dropdown > ul > li input[type="text"] {
+		line-height: 28px;
+	}
+
+	select, input[type="text"], input[type="password"],
+	.cbi-dropdown > ul > li input[type="text"],
+	.cbi-value-field .control-group {
+		width: 100%;
+		height: 30px;
+	}
+
+	input.cbi-input-password {
+		width: calc(100% - 25px);
+	}
+
+	input[type="text"] + .cbi-button,
+	input[type="password"] + .cbi-button,
+	select + .cbi-button {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.cbi-value-field input[type="checkbox"],
+	.cbi-value-field input[type="radio"] {
+		margin: 0;
+	}
+
+	button, .btn, .cbi-button {
+		font-size: 14px !important;
+		padding: 0 8px;
+	}
+
+	.actions,
+	.cbi-page-actions {
+		border-top: none;
+		margin-top: -.5em;
+		padding: 8px;
+	}
+
+	[data-page="admin-status-overview"] .td[width="33%"] {
+		flex-basis: 33%;
+	}
+
+	header .pull-right .label {
+		white-space: normal;
+		display: inline-block;
+		text-align: center;
+		line-height: 12px;
+		margin: 1px 0;
+	}
+
+	header > .fill {
+		padding: 1px;
+	}
+
+	header > .fill > .container {
+		display: flex;
+		flex-direction: row;
+	}
+
+	header .nav {
+		flex: 3 3 80%;
+		margin: 2px 5px 2px 0;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+
+	header .nav a {
+		padding: 2px 6px;
+	}
+
+	header .pull-right {
+		flex: 0 1 20%;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		justify-content: space-around;
+		margin: .2em 5px .2em auto;
+	}
+
+	.menu-dropdown, .dropdown-menu {
+		top: 23px;
+	}
+
+	.cbi-optionals,
+	.cbi-section-create {
+		padding: 0 0 14px 0;
+	}
+
+	#cbi-network-switch_vlan .th,
+	#cbi-network-switch_vlan .td {
+		flex-basis: 12%;
+	}
+
+	#cbi-network-switch_vlan .td.cbi-section-actions > * {
+		width: auto;
+		display: block;
+	}
+
+	#wifi_assoclist_table .td,
+	[data-page="admin-status-processes"] .td {
+		flex-basis: 50% !important;
+	}
+
+	[data-page="admin-status-processes"] .td[data-widget="button"] {
+		flex-basis: 33% !important;
+	}
+
+	[data-page="admin-status-processes"] .td[data-name="PID"],
+	[data-page="admin-status-processes"] .td[data-name="USER"] {
+		flex-basis: 25% !important;
+	}
+
+	[data-page="admin-system-fstab"] .td[data-widget="button"]::before,
+	[data-page="admin-system-startup"] .td[data-widget="button"]::before,
+	[data-page="admin-status-processes"] .td[data-widget="button"]::before {
+		display: none;
+	}
+
+	[data-name="bridge-vlan"] > div {
+		overflow: visible !important;
+	}
+
+	[data-name="bridge-vlan"] .td[data-title] {
+		flex-basis: 33%;
+	}
+
+	[data-name="bridge-vlan"] .td[data-title]::before {
+		content: attr(data-title);
+	}
+
+	[data-page="admin-network-network"] .td[data-name="_ifacebox"] {
+		flex-basis: 40%;
+	}
+
+	[data-page="admin-network-network"] .td[data-name="_ifacestat"] {
+		flex-basis: 60%;
+	}
+}
+
+@media screen and (max-device-width: 375px) {
+	.cbi-page-actions {
+		display: flex;
+		justify-content: space-between;
+		margin: 0 -1px;
+		padding: 0;
+	}
+
+	.cbi-page-actions button {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.cbi-page-actions .cbi-button {
+		flex: 1;
+		margin: 1px !important;
+		line-height: 2em;
+	}
+
+	.cbi-page-actions .cbi-button-negative,
+	.cbi-page-actions .cbi-button-primary,
+	.cbi-page-actions .cbi-button-apply {
+		flex: 3;
+	}
+
+	.cbi-section-actions .cbi-button {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin: 1px !important;
+	}
+
+	body[data-page="admin-network-wireless"] .td[data-name="_badge"] {
+		max-width: 50px;
+		align-self: center;
+	}
+
+	body[data-page="admin-network-wireless"] .td[data-name="_badge"] .ifacebadge {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	body[data-page="admin-network-wireless"] .td[data-name="_stat"] {
+		flex-basis: 60%;
+	}
+
+	body[data-page="admin-network-network"] .td.cbi-section-actions::before,
+	body[data-page="admin-network-wireless"] .td.cbi-section-actions::before {
+		content: none !important;
+	}
+
+	[data-page="admin-network-network"] .td[data-name="_ifacebox"],
+	[data-page="admin-network-network"] .td[data-name="_ifacestat"] {
+		flex-basis: 100%;
+	}
+
+	.td .ifacebox {
+		width: 100%;
+		margin: 0 !important;
+		flex-direction: row;
+	}
+
+	.td .ifacebox .ifacebox-head {
+		min-width: 25%;
+		justify-content: space-around;
+		border-radius: 4px 0 0 4px;
+	}
+
+	.td .ifacebox .ifacebox-head,
+	.td .ifacebox .ifacebox-body {
+		display: flex;
+		border-bottom: none;
+		align-items: center;
+	}
+
+	.td .ifacebox .ifacebox-head > *,
+	.ifacebox .ifacebox-body > * {
+		margin: .125em;
+	}
+}

luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js

@@ -0,0 +1,101 @@
+'use strict';
+'require baseclass';
+'require ui';
+
+return baseclass.extend({
+	__init__: function() {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	render: function(tree) {
+		var node = tree,
+		    url = '';
+
+		this.renderModeMenu(tree);
+
+		if (L.env.dispatchpath.length >= 3) {
+			for (var i = 0; i < 3 && node; i++) {
+				node = node.children[L.env.dispatchpath[i]];
+				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+			}
+
+			if (node)
+				this.renderTabMenu(node, url);
+		}
+	},
+
+	renderTabMenu: function(tree, url, level) {
+		var container = document.querySelector('#tabmenu'),
+		    ul = E('ul', { 'class': 'tabs' }),
+		    children = ui.menu.getChildren(tree),
+		    activeNode = null;
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[3 + (level || 0)] == children[i].name),
+			    activeClass = isActive ? ' active' : '',
+			    className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+			ul.appendChild(E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )]));
+
+			if (isActive)
+				activeNode = children[i];
+		}
+
+		if (ul.children.length == 0)
+			return E([]);
+
+		container.appendChild(ul);
+		container.style.display = '';
+
+		if (activeNode)
+			this.renderTabMenu(activeNode, url + '/' + activeNode.name, (level || 0) + 1);
+
+		return ul;
+	},
+
+	renderMainMenu: function(tree, url, level) {
+		var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'),
+		    children = ui.menu.getChildren(tree);
+
+		if (children.length == 0 || level > 1)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, (level || 0) + 1),
+			    subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null,
+			    linkclass = (!level && submenu.firstElementChild) ? 'menu' : null,
+			    linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name);
+
+			var li = E('li', { 'class': subclass }, [
+				E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]),
+				submenu
+			]);
+
+			ul.appendChild(li);
+		}
+
+		ul.style.display = '';
+
+		return ul;
+	},
+
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu'),
+		    children = ui.menu.getChildren(tree);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+			ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [
+				E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
+			]));
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+		}
+
+		if (ul.children.length > 1)
+			ul.style.display = '';
+	}
+});

luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js

@@ -0,0 +1,34 @@
+'use strict';
+'require ui';
+'require view';
+
+return view.extend({
+	render: function() {
+		var form = document.querySelector('form'),
+		    btn = document.querySelector('button');
+
+		var dlg = ui.showModal(
+			_('Authorization Required'),
+			[].slice.call(document.querySelectorAll('section > *')),
+			'login'
+		);
+
+		form.addEventListener('keypress', function(ev) {
+			if (ev.key == 'Enter')
+				btn.click();
+		});
+
+		btn.addEventListener('click', function() {
+			dlg.querySelectorAll('*').forEach(function(node) { node.style.display = 'none' });
+			dlg.appendChild(E('div', { 'class': 'spinning' }, _('Logging in…')));
+
+			form.submit()
+		});
+
+		document.querySelector('input[type="password"]').focus();
+
+		return '';
+	},
+
+	addFooter: function() {}
+});

luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap

@@ -0,0 +1,28 @@
+#!/bin/sh
+
+changed=0
+
+set_opt() {
+	local key=$1
+	local val=$2
+
+	if ! uci -q get "luci.$key" 2>/dev/null; then
+		uci set "luci.$key=$val"
+		changed=1
+	fi
+}
+
+set_opt themes.Bootstrap /luci-static/bootstrap
+
+if [ "$PKG_UPGRADE" != 1 ] && [ $changed = 1 ]; then
+	set_opt main.mediaurlbase /luci-static/bootstrap
+fi
+
+set_opt themes.BootstrapDark /luci-static/bootstrap-dark
+set_opt themes.BootstrapLight /luci-static/bootstrap-light
+
+if [ $changed = 1 ]; then
+	uci commit luci
+fi
+
+exit 0

luci-theme-bootstrap/ucode/template/themes/bootstrap-dark

@@ -0,0 +1 @@
+bootstrap

luci-theme-bootstrap/ucode/template/themes/bootstrap-light

@@ -0,0 +1 @@
+bootstrap

luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut

@@ -0,0 +1,20 @@
+		{% if (!blank_page): %}
+		</div>
+		<footer>
+			<span>
+				Powered by
+				<a href="https://github.com/openwrt/luci">
+					{{ version.luciname }} ({{ version.luciversion }})</a>
+				/
+				<a href="{{ entityencode(version.disturl ?? '#', true) }}">
+					{{ version.distname }} {{ version.distversion }} ({{ version.distrevision }})</a>
+				{% if (lua_active): %}
+					/ {{ _('Lua compatibility mode active') }}
+				{% endif %}
+			</span>
+			<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
+		</footer>
+		<script type="text/javascript">L.require('menu-bootstrap')</script>
+		{% endif %}
+	</body>
+</html>

luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut

@@ -0,0 +1,83 @@
+{#
+ Copyright 2008 Steven Barth <steven@midlink.org>
+ Copyright 2012 David Menting <david@nut-bolt.nl>
+ Copyright 2008-2022 Jo-Philipp Wich <jo@mein.io>
+ Licensed to the public under the Apache License 2.0.
+-#}
+
+{%
+	import { getuid, getspnam } from 'luci.core';
+
+	const boardinfo = ubus.call('system', 'board');
+	const darkpref = (theme == 'bootstrap-dark' ? 'true' : (theme == 'bootstrap-light' ? 'false' : null));
+
+	http.prepare_content('text/html; charset=UTF-8');
+-%}
+
+<!DOCTYPE html>
+<html lang="{{ dispatcher.lang }}" {{ darkpref ? `data-darkmode="${darkpref}"` : '' }}>
+	<head>
+		<meta charset="utf-8">
+		<title>{{ striptags(`${boardinfo.hostname ?? '?'}${node ? ` - ${node.title}` : ''}`) }} - LuCI</title>
+		{% if (!darkpref): %}
+			<script type="text/javascript">
+				var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'),
+				    rootElement = document.querySelector(':root'),
+				    setDarkMode = function(match) { rootElement.setAttribute('data-darkmode', match.matches) };
+
+				mediaQuery.addEventListener('change', setDarkMode);
+				setDarkMode(mediaQuery);
+			</script>
+		{% endif %}
+		<meta name="viewport" content="initial-scale=1.0">
+		<link rel="stylesheet" href="{{ media }}/cascade.css">
+		<link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="{{ media }}/mobile.css" type="text/css" />
+		<link rel="shortcut icon" href="{{ media }}/favicon.png">
+		{% if (node?.css): %}
+		<link rel="stylesheet" href="{{ resource }}/{{ node.css }}">
+		{% endif %}
+		{% if (css): %}
+		<style title="text/css">{{ css }}</style>
+		{% endif %}
+		<script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script>
+		<script src="{{ resource }}/cbi.js"></script>
+	</head>
+
+	<body class="lang_{{ dispatcher.lang }} {{ entityencode(striptags(node?.title ?? ''), true) }}" data-page="{{ entityencode(join('-', ctx.request_path), true) }}">
+		{% if (!blank_page): %}
+		<header>
+			<a class="brand" href="/">{{ striptags(boardinfo.hostname ?? '?') }}</a>
+			<ul class="nav" id="topmenu" style="display:none"></ul>
+			<div id="indicators" class="pull-right"></div>
+		</header>
+
+		<div id="maincontent" class="container">
+			{% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %}
+				<div class="alert-message warning">
+					<h4>{{ _('No password set!') }}</h4>
+					<p>{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}</p>
+					{% if (dispatcher.lookup("admin/system/admin")): %}
+					  <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/admin") }}">{{ _('Go to password configuration...') }}</a></div>
+					{% endif %}
+				</div>
+			{% endif %}
+
+			{% if (boardinfo.rootfs_type == "initramfs"): %}
+				<div class="alert-message warning">
+					<h4>{{ _('System running in recovery (initramfs) mode.') }}</h4>
+					<p>{{ _('No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade') }}</p>
+					{% if (dispatcher.lookup("admin/system/flash")): %}
+					  <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div>
+					{% endif %}
+				</div>
+			{% endif %}
+
+			<noscript>
+				<div class="alert-message warning">
+					<h4>{{ _('JavaScript required!') }}</h4>
+					<p>{{ _('You must enable JavaScript in your browser or LuCI will not work properly.') }}</p>
+				</div>
+			</noscript>
+
+			<div id="tabmenu" style="display:none"></div>
+		{% endif %}

luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut

@@ -0,0 +1,48 @@
+{#
+ Copyright 2022 Jo-Philipp Wich <jo@mein.io>
+ Licensed to the public under the Apache License 2.0.
+-#}
+
+{% include('header', { blank_page: true }) %}
+
+<section hidden>
+	<form method="post" class="cbi-map">
+		<div class="cbi-section">
+			<div class="cbi-section-node">
+				<div class="cbi-value">
+					<label class="cbi-value-title" for="luci_username">{{ _('Username') }}</label>
+					<div class="cbi-value-field">
+						<input name="luci_username" id="luci_username" type="text" autocomplete="username" value="{{ entityencode(duser, true) }}">
+					</div>
+				</div>
+				<div class="cbi-value">
+					<label class="cbi-value-title" for="luci_password">{{ _('Password') }}</label>
+					<div class="cbi-value-field">
+						<input name="luci_password" id="luci_password" type="password" autocomplete="current-password">
+					</div>
+				</div>
+			</div>
+		</div>
+	</form>
+
+	<hr>
+
+	{% if (fuser): %}
+	<div class="alert-message error">
+		{{ _('Invalid username and/or password! Please try again.') }}
+	</div>
+	{% endif %}
+
+	<button class="btn cbi-button-positive important">{{ _('Login') }}</button>
+</section>
+
+<div id="view">
+	<div class="spinning">{{ _('Loading view…') }}</div>
+	<script type="text/javascript">
+		L.require('ui').then(function(ui) {
+			ui.instantiateView('bootstrap.sysauth');
+		});
+	</script>
+</div>
+
+{% include('footer', { blank_page: true }) %}

luci-theme-openwrt/Makefile

@@ -0,0 +1,22 @@
+#
+# Copyright (C) 2008-2014 The LuCI Team <luci@lists.subsignal.org>
+#
+# This is free software, licensed under the Apache License, Version 2.0 .
+#
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=LuCI OpenWrt.org theme
+LUCI_DEPENDS:=
+
+define Package/luci-theme-openwrt/postrm
+#!/bin/sh
+[ -n "$${IPKG_INSTROOT}" ] || {
+	uci -q delete luci.themes.OpenWrt
+	uci commit luci
+}
+endef
+
+include ../../luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js

@@ -0,0 +1,133 @@
+'use strict';
+'require baseclass';
+'require ui';
+
+return baseclass.extend({
+	__init__: function() {
+		ui.menu.load().then(L.bind(this.render, this));
+	},
+
+	render: function(tree) {
+		var node = tree,
+		    url = '';
+
+		this.renderModeMenu(tree);
+
+		if (L.env.dispatchpath.length >= 3) {
+			for (var i = 0; i < 3 && node; i++) {
+				node = node.children[L.env.dispatchpath[i]];
+				url = url + (url ? '/' : '') + L.env.dispatchpath[i];
+			}
+
+			if (node)
+				this.renderTabMenu(node, url);
+		}
+	},
+
+	handleMenuExpand: function(ev) {
+		var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
+
+		document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
+			if (li !== a.parentNode)
+				li.classList.remove('active');
+		});
+
+		if (!ul2)
+			return;
+
+		if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
+			ul2.classList.add('align-left');
+
+		ul1.classList.add('active');
+		a.parentNode.classList.add('active');
+		a.blur();
+
+		ev.preventDefault();
+		ev.stopPropagation();
+	},
+
+	renderMainMenu: function(tree, url, level) {
+		var l = (level || 0) + 1,
+		    ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
+		    children = ui.menu.getChildren(tree);
+
+		if (children.length == 0 || l > 2)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[l] == children[i].name),
+			    activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
+
+			ul.appendChild(E('li', { 'class': activeClass }, [
+				E('a', {
+					'href': L.url(url, children[i].name),
+					'click': (l == 1) ? this.handleMenuExpand : null,
+				}, [ _(children[i].title) ]),
+				this.renderMainMenu(children[i], url + '/' + children[i].name, l)
+			]));
+		}
+
+		if (l == 1) {
+			var container = document.querySelector('#mainmenu');
+
+			container.appendChild(ul);
+			container.style.display = '';
+		}
+
+		return ul;
+	},
+
+	renderModeMenu: function(tree) {
+		var ul = document.querySelector('#modemenu'),
+		    children = ui.menu.getChildren(tree);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+
+			ul.appendChild(E('li', {}, [
+				E('a', {
+					'href': L.url(children[i].name),
+					'class': isActive ? 'active' : null
+				}, [ _(children[i].title) ])
+			]));
+
+			if (isActive)
+				this.renderMainMenu(children[i], children[i].name);
+		}
+
+		if (ul.children.length > 1)
+			ul.style.display = '';
+	},
+
+	renderTabMenu: function(tree, url, level) {
+		var container = document.querySelector('#tabmenu'),
+		    l = (level || 0) + 1,
+		    ul = E('ul', { 'class': 'cbi-tabmenu' }),
+		    children = ui.menu.getChildren(tree),
+		    activeNode = null;
+
+		if (children.length == 0)
+			return E([]);
+
+		for (var i = 0; i < children.length; i++) {
+			var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
+			    activeClass = isActive ? ' cbi-tab' : '',
+			    className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+
+			ul.appendChild(E('li', { 'class': className }, [
+				E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+			]));
+
+			if (isActive)
+				activeNode = children[i];
+		}
+
+		container.appendChild(ul);
+		container.style.display = '';
+
+		if (activeNode)
+			container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l));
+
+		return ul;
+	}
+});

luci-theme-openwrt/luasrc/view/themes/openwrt.org/footer.htm

@@ -0,0 +1,19 @@
+<%#
+ Copyright 2008 Steven Barth <steven@midlink.org>
+ Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+ Licensed to the public under the Apache License 2.0.
+-%>
+
+<div class="clear"></div>
+</div>
+</div>
+
+<p class="luci">
+	<% local ver = require "luci.version" -%>
+	Powered by <%= ver.luciname %> (<%= ver.luciversion %>)
+</p>
+
+<script type="text/javascript">L.require('menu-openwrt')</script>
+
+</body>
+</html>

luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm

@@ -0,0 +1,95 @@
+<%#
+ Copyright 2008 Steven Barth <steven@midlink.org>
+ Copyright 2008-2010 Jo-Philipp Wich <jow@openwrt.org>
+ Licensed to the public under the Apache License 2.0.
+-%>
+
+<%
+	local sys  = require "luci.sys"
+	local util = require "luci.util"
+	local http = require "luci.http"
+	local disp = require "luci.dispatcher"
+	local ver  = require "luci.version"
+
+	local sysinfo = util.ubus("system", "info") or { }
+	local loadinfo = sysinfo.load or { 0, 0, 0 }
+	local boardinfo = util.ubus("system", "board") or { }
+
+	local node = disp.context.dispatched
+
+	http.prepare_content("application/xhtml+xml")
+-%>
+
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta http-equiv="Content-Script-Type" content="text/javascript" />
+<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
+<% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
+<% end -%>
+<% if css then %><style title="text/css">
+<%= css %>
+</style>
+<% end -%>
+<script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+
+<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
+</head>
+<body class="lang_<%=luci.i18n.context.lang%>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
+
+<p class="skiplink">
+<span id="skiplink1"><a href="#navigation"><%:Skip to navigation%></a></span>
+<span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
+</p>
+
+<div id="menubar">
+<h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>
+
+<div class="hostinfo">
+	<%=striptags(boardinfo.hostname or "?")%> | <%=ver.distversion%> |
+	<%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%>
+</div>
+
+<div id="indicators"></div>
+
+<ul id="modemenu" style="display:none"></ul>
+
+<div class="clear"></div>
+</div>
+
+<div id="maincontainer">
+	<div id="mainmenu" style="display:none"></div>
+
+	<div id="maincontent">
+		<div id="tabmenu" style="display:none"></div>
+
+		<noscript>
+			<div class="alert-message warning">
+				<h4><%:JavaScript required!%></h4>
+				<p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
+			</div>
+		</noscript>
+
+		<%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
+		<div class="alert-message warning">
+			<h4><%:No password set!%></h4>
+			<p><%:There is no password set on this router. Please configure a root password to protect the web interface.%></p>
+			<% if disp.lookup("admin/system/admin") then %>
+				<div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
+			<% end %>
+		</div>
+		<%- end -%>
+
+		<%- if boardinfo.rootfs_type == "initramfs" then -%>
+		<div class="alert-message warning">
+			<h4><%:System running in recovery (initramfs) mode.%></h4>
+			<p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p>
+			<% if disp.lookup("admin/system/flash") then %>
+			  <div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div>
+			<% end %>
+		</div>
+		<%- end -%>

luci-theme-openwrt/root/etc/uci-defaults/30_luci-theme-openwrt

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+if [ "$PKG_UPGRADE" != 1 ]; then
+	uci get luci.themes.OpenWrt >/dev/null 2>&1 || \
+	uci batch <<-EOF
+		set luci.themes.OpenWrt=/luci-static/openwrt.org
+		set luci.main.mediaurlbase=/luci-static/openwrt.org
+		commit luci
+	EOF
+fi
+
+exit 0