all accessible and nice, also added icons

html_orig/_pages.php

@@ -4,34 +4,40 @@ $pages = [];
 
 if (! function_exists('pg')) {
 	/** Add a page */
-	function pg($key, $bc, $path, $titleKey = null)
+	function pg($key, $bc, $icon, $path, $titleKey = null)
 	{
 		global $pages;
 		$pages[$key] = (object) [
 			'key' => $key,
 			'bodyclass' => $bc,
 			'path' => $path,
+			'icon' => $icon ? "icn-$icon" : '',
 			'label' => tr("menu.$key"),
 			'title' => $titleKey ? tr($titleKey) : tr("menu.$key"),
 		];
 	}
 }
 
-pg('cfg_wifi',        'cfg', '/cfg/wifi');
-pg('cfg_wifi_conn',   '',    '/cfg/wifi/connecting');
-pg('wifi_connstatus', 'api', '/cfg/wifi/connstatus');
-pg('wifi_set',        'api', '/cfg/wifi/set');
-pg('wifi_scan',       'api', '/cfg/wifi/scan');
+pg('cfg_wifi',        'cfg', 'wifi', '/cfg/wifi');
+pg('cfg_wifi_conn',   '',    '', '/cfg/wifi/connecting');
+pg('wifi_connstatus', 'api', '', '/cfg/wifi/connstatus');
+pg('wifi_set',        'api', '', '/cfg/wifi/set');
+pg('wifi_scan',       'api', '', '/cfg/wifi/scan');
 
-pg('cfg_network',     'cfg', '/cfg/network');
-pg('network_set',     'api', '/cfg/network/set');
+pg('cfg_network',     'cfg', 'network', '/cfg/network');
+pg('network_set',     'api', '', '/cfg/network/set');
 
-pg('cfg_app',        'cfg', '/cfg/app');
-pg('app_set',        'api', '/cfg/app/set');
+pg('cfg_app',         'cfg', 'terminal', '/cfg/app');
+pg('app_set',         'api', '', '/cfg/app/set');
 
-pg('help',  'cfg page-help',  '/help');
-pg('about', 'cfg page-about', '/about');
-pg('term',  'term',           '/', 'title.term');
+pg('cfg_admin',        'cfg', 'persist', '/cfg/admin');
+pg('write_defaults',   'api', '', '/cfg/admin/write_defaults');
+pg('restore_defaults', 'api', '', '/cfg/admin/restore_defaults');
+pg('restore_hard',     'api', '', '/cfg/admin/restore_hard');
+
+pg('help',  'cfg page-help',  'help', '/help');
+pg('about', 'cfg page-about', 'about', '/about');
+pg('term',  'term',           '', '/', 'title.term');
 
 // ajax API
 

html_orig/js/app.js

@@ -715,6 +715,19 @@ function bool(x) {
 	return (x === 1 || x === '1' || x === true || x === 'true');
 }
 
+/**
+ * Filter 'spacebar' and 'return' from keypress handler,
+ * and when they're pressed, fire the callback.
+ * use $(...).on('keypress', cr(handler))
+ */
+function cr(hdl) {
+	return function(e) {
+		if (e.which == 10 || e.which == 13 || e.which == 32) {
+			hdl();
+		}
+	};
+}
+
 /** Extend an objects with options */
 function extend(defaults, options) {
 	var target = {};
@@ -893,18 +906,30 @@ $.ready(function () {
 
 		$(box).toggleClass('checked', inp.value);
 
-		$(x).on('click', function() {
+		var hdl = function() {
 			inp.value = 1 - inp.value;
 			$(box).toggleClass('checked', inp.value)
-		});
+		};
+
+		$(x).on('click', hdl).on('keypress', cr(hdl));
 	});
 
 	// Expanding boxes on mobile
 	$('.Box.mobcol').forEach(function(x) {
 		var h = x.querySelector('h2');
-		$(h).on('click', function() {
+
+		var hdl = function() {
 			$(x).toggleClass('expanded');
-		});
+		};
+		$(h).on('click', hdl).on('keypress', cr(hdl));
+	});
+
+	qsa('form').forEach(function(x) {
+		$(x).on('keypress', function(e) {
+			if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
+				x.submit();
+			}
+		})
 	});
 
 	// loader dots...
@@ -967,6 +992,15 @@ $.ready(function () {
 
 	Modal.init();
 	Notify.init();
+
+	// remove tabindixes from h2 if wide
+	if (window.innerWidth > 550) {
+		qsa('.Box h2').forEach(function (x) {
+			x.removeAttribute('tabindex');
+		});
+
+		qs('#brand').removeAttribute('tabindex');
+	}
 });
 
 $._loader = function(vis) {

html_orig/jssrc/appcommon.js

@@ -7,18 +7,30 @@ $.ready(function () {
 
 		$(box).toggleClass('checked', inp.value);
 
-		$(x).on('click', function() {
+		var hdl = function() {
 			inp.value = 1 - inp.value;
 			$(box).toggleClass('checked', inp.value)
-		});
+		};
+
+		$(x).on('click', hdl).on('keypress', cr(hdl));
 	});
 
 	// Expanding boxes on mobile
 	$('.Box.mobcol').forEach(function(x) {
 		var h = x.querySelector('h2');
-		$(h).on('click', function() {
+
+		var hdl = function() {
 			$(x).toggleClass('expanded');
-		});
+		};
+		$(h).on('click', hdl).on('keypress', cr(hdl));
+	});
+
+	qsa('form').forEach(function(x) {
+		$(x).on('keypress', function(e) {
+			if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
+				x.submit();
+			}
+		})
 	});
 
 	// loader dots...
@@ -81,6 +93,15 @@ $.ready(function () {
 
 	Modal.init();
 	Notify.init();
+
+	// remove tabindixes from h2 if wide
+	if (window.innerWidth > 550) {
+		qsa('.Box h2').forEach(function (x) {
+			x.removeAttribute('tabindex');
+		});
+
+		qs('#brand').removeAttribute('tabindex');
+	}
 });
 
 $._loader = function(vis) {

html_orig/jssrc/utils.js

@@ -12,6 +12,19 @@ function bool(x) {
 	return (x === 1 || x === '1' || x === true || x === 'true');
 }
 
+/**
+ * Filter 'spacebar' and 'return' from keypress handler,
+ * and when they're pressed, fire the callback.
+ * use $(...).on('keypress', cr(handler))
+ */
+function cr(hdl) {
+	return function(e) {
+		if (e.which == 10 || e.which == 13 || e.which == 32) {
+			hdl();
+		}
+	};
+}
+
 /** Extend an objects with options */
 function extend(defaults, options) {
 	var target = {};

html_orig/lang/en.php

@@ -9,6 +9,7 @@ return [
 	'menu.about' => 'About ESPTerm',
 	'menu.help' => 'Quick Reference',
 	'menu.term' => 'Back to Terminal',
+	'menu.cfg_admin' => 'Reset & Restore',
 	'menu.cfg_wifi_conn' => 'Connecting to External Network',
 
 	'title.term' => 'Terminal',
@@ -93,6 +94,7 @@ return [
 	'wifi.sta_active_pw' => '🔒',
 	'wifi.sta_active_nopw' => '🔓 Open access',
 	'wifi.connected_ip_is' => 'Connected, IP is ',
+	'wifi.sta_password' => 'Password:',
 
 	'wifi.scanning' => 'Scanning',
 	'wifi.scan_now' => 'Start scanning!',
@@ -109,6 +111,23 @@ return [
 	'wifi.conn.working' => "Connecting to selected AP",
 	'wifi.conn.fail' => "Connection failed, check settings & try again. Cause: ",
 
+	'admin.confirm_restore' => 'Restore all settings to their default values?',
+	'admin.confirm_restore_hard' =>
+		'Restore to firmware default settings? This will reset ' .
+		'all active settings and switch to AP mode with the default SSID.',
+	'admin.confirm_store_defaults' =>
+		'Enter admin password to confirm you want to store the current settings as defaults.',
+	'admin.password' => 'Admin password:',
+	'admin.restore_defaults' => 'Reset to default settings',
+	'admin.write_defaults' => 'Save current settings as default',
+	'admin.restore_hard' => 'Reset to firmware default settings',
+	'admin.explain' => '
+		ESPTerm contains two persistent memory banks, one for default and 
+		one for active settings. Active settings can be stored as defaults 
+		by the administrator. Use the following button to revert all 
+		active settings to their stored default values.  
+		',
+
 	'apply' => 'Apply!',
 	'enabled' => 'Enabled',
 	'disabled' => 'Disabled',

html_orig/pages/_cfg_menu.php

@@ -1,16 +1,19 @@
-
 <nav id="menu">
-	<div id="brand" onclick="$('#menu').toggleClass('expanded')"><?= tr('appname') ?></div>
+	<div id="brand" tabindex=0><?= tr('appname') ?></div>
 	<?php
 	// generate the menu
-	foreach($_pages as $k => $page) {
+	foreach ($_pages as $k => $page) {
 		if (strpos($page->bodyclass, 'cfg') === false) continue;
 
-		$sel = ($_GET['page'] == $k) ? ' class="selected"' : '';
+		$sel = ($_GET['page'] == $k) ? 'selected' : '';
 		$text = $page->label;
 		$url = e(url($k));
-		echo "<a href=\"$url\"$sel>$text</a>";
+		echo "<a href=\"$url\" class=\"$page->icon $sel\">$text</a>";
 	}
-	?><a href="<?= e(url('term')) ?>"><?= tr('menu.term') ?></a>
-
+	?><a href="<?= e(url('term')) ?>" class="icn-back"><?= tr('menu.term') ?></a>
 </nav>
+
+<script>
+	function menuOpen() { $('#menu').toggleClass('expanded') }
+	$('#brand').on('click', menuOpen).on('keypress', cr(menuOpen));
+</script>

html_orig/pages/cfg_admin.php

@@ -0,0 +1,34 @@
+<div class="Box">
+	<div class="Row explain">
+		<?= tr('admin.explain') ?>
+	</div>
+
+	<div class="Row buttons">
+		<a class="button icn-restore"
+		   onclick="return confirm('<?= tr('admin.confirm_restore') ?>');"
+		   href="<?= e(url('restore_defaults')) ?>"
+		>
+			<?= tr('admin.restore_defaults') ?>
+		</a>
+	</div>
+
+	<div class="Row buttons">
+		<a onclick="writeDefaults(); return false;" href="#"><?= tr('admin.write_defaults') ?></a>
+	</div>
+
+	<div class="Row buttons">
+		<a onclick="return confirm('<?= tr('admin.confirm_restore_hard') ?>');"
+		   href="<?= e(url('restore_hard')) ?>"
+		>
+			<?= tr('admin.restore_hard') ?>
+		</a>
+	</div>
+</div>
+
+<script>
+	function writeDefaults() {
+		var pw = prompt('<?= tr('admin.confirm_store_defaults') ?>');
+		if (!pw) return;
+		location.href = <?=json_encode(url('write_defaults')) ?> + '?pw=' + pw;
+	}
+</script>

html_orig/pages/cfg_app.php

@@ -1,10 +1,6 @@
-<form class="Box mobopen str" action="<?= e(url('app_set')) ?>" method="GET">
+<form class="Box mobopen str" action="<?= e(url('app_set')) ?>" method="GET" id='form-1'>
 	<h2><?= tr('app.defaults') ?></h2>
 
-	<div class="Row buttons">
-		<input type="submit" value="<?= tr('apply') ?>">
-	</div>
-
 	<div class="Row explain">
 		<?= tr('app.explain_initials') ?>
 	</div>
@@ -68,4 +64,8 @@
 		<label for="btn5"><?= tr("app.btn5") ?></label>
 		<input class="short" type="text" name="btn5" id="btn5" value="%btn5%">
 	</div>
+
+	<div class="Row buttons">
+		<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()"><?= tr('apply') ?></a>
+	</div>
 </form>

html_orig/pages/cfg_network.php

@@ -2,12 +2,8 @@
 $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 ?>
 
-<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET">
-	<h2><?= tr('net.ap') ?></h2>
-
-	<div class="Row buttons">
-		<input type="submit" value="<?= tr('apply') ?>">
-	</div>
+<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET" id="form-1">
+	<h2 tabindex=0><?= tr('net.ap') ?></h2>
 
 	<div class="Row explain">
 		<?= tr('net.explain_ap') ?>
@@ -38,14 +34,14 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 		<label for="ap_addr_mask"><?= tr('net.ap_addr_mask') ?></label>
 		<input type="text" name="ap_addr_mask" id="ap_addr_mask" value="%ap_addr_mask%" <?=$ipmask?> required>
 	</div>
-</form>
-
-<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET">
-	<h2><?= tr('net.sta') ?></h2>
 
 	<div class="Row buttons">
-		<input type="submit" value="<?= tr('apply') ?>">
+		<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()"><?= tr('apply') ?></a>
 	</div>
+</form>
+
+<form class="Box str mobcol" action="<?= e(url('network_set')) ?>" method="GET" id="form-2">
+	<h2 tabindex=0><?= tr('net.sta') ?></h2>
 
 	<div class="Row explain">
 		<?= tr('net.explain_sta') ?>
@@ -53,7 +49,7 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 
 	<div class="Row checkbox">
 		<label><?= tr('net.sta_dhcp_enable') ?></label><!--
-		--><span class="box"></span>
+		--><span class="box" tabindex=0 role=checkbox></span>
 		<input type="hidden" name="sta_dhcp_enable" value="%sta_dhcp_enable%">
 	</div>
 
@@ -71,6 +67,10 @@ $ipmask='pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$"';
 		<label for="sta_addr_gw"><?= tr('net.sta_addr_gw') ?></label>
 		<input type="text" name="sta_addr_gw" id="sta_addr_gw" value="%sta_addr_gw%" <?=$ipmask?> required>
 	</div>
+
+	<div class="Row buttons">
+		<a class="button icn-ok" href="#" onclick="qs('#form-2').submit()"><?= tr('apply') ?></a>
+	</div>
 </form>
 
 <div class="Box mobcol">

html_orig/pages/cfg_wifi.php

@@ -1,13 +1,9 @@
-<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET">
-	<h2><?= tr('wifi.ap') ?></h2>
-
-	<div class="Row buttons">
-		<input type="submit" value="<?= tr('apply') ?>">
-	</div>
+<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET" id="form-1">
+	<h2 tabindex=0><?= tr('wifi.ap') ?></h2>
 
 	<div class="Row checkbox">
 		<label><?= tr('wifi.enable') ?></label><!--
-		--><span class="box"></span>
+		--><span class="box" tabindex=0></span>
 		<input type="hidden" name="ap_enable" value="%ap_enable%">
 	</div>
 
@@ -37,21 +33,21 @@
 
 	<div class="Row checkbox">
 		<label><?= tr('wifi.ap_hidden') ?></label><!--
-		--><span class="box"></span>
+		--><span class="box" tabindex=0></span>
 		<input type="hidden" name="ap_hidden" value="%ap_hidden%">
 	</div>
-</form>
-
-<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET">
-	<h2><?= tr('wifi.sta') ?></h2>
 
 	<div class="Row buttons">
-		<input type="submit" value="<?= tr('apply') ?>">
+		<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()"><?= tr('apply') ?></a>
 	</div>
+</form>
+
+<form class="Box str mobcol" action="<?= e(url('wifi_set')) ?>" method="GET" id="form-2">
+	<h2 tabindex=0><?= tr('wifi.sta') ?></h2>
 
 	<div class="Row checkbox">
 		<label><?= tr('wifi.enable') ?></label><!--
-		--><span class="box"></span>
+		--><span class="box" tabindex=0></span>
 		<input type="hidden" name="sta_enable" value="%sta_enable%">
 	</div>
 
@@ -68,7 +64,7 @@
 					<div class="nopasswd"><?= tr('wifi.sta_active_nopw') ?></div>
 					<div class="ip"></div>
 				</div>
-				<a class="forget" id="forget-sta">×</a>
+				<a class="forget" href="#" id="forget-sta">×</a>
 			</div>
 		</div>
 		<div class="AP-preview-nil" id="sta-nw-nil">
@@ -78,11 +74,15 @@
 
 	<div id="ap-box">
 		<label><?= tr('wifi.select_ssid') ?></label>
-		<div id="ap-scan"><a onclick="startScanning(); return false"><?= tr('wifi.scan_now') ?></a></div>
+		<div id="ap-scan"><a href="#" onclick="startScanning(); return false"><?= tr('wifi.scan_now') ?></a></div>
 		<div id="ap-loader" class="hidden"><?= tr('wifi.scanning') ?><span class="anim-dots">.</span></div>
 		<div id="ap-noscan" class="hidden"><?= tr('wifi.cant_scan_no_sta') ?></div>
 		<div id="ap-list" class="hidden"></div>
 	</div>
+
+	<div class="Row buttons">
+		<a class="button icn-ok" href="#" onclick="qs('#form-2').submit()"><?= tr('apply') ?></a>
+	</div>
 </form>
 
 <div class="Modal hidden" id="psk-modal">
@@ -120,6 +120,7 @@
 	// Forget STA credentials
 	$('#forget-sta').on('click', function() {
 		selectSta('', '', '');
+		return false;
 	});
 
 	// Display selected STA SSID etc
@@ -194,11 +195,12 @@
 
 			if (ap.enc > 4) return; // hide unsupported auths
 
-			var item = document.createElement('div');
+			var item = mk('div');
 
 			var $item = $(item)
 				.data('ssid', ap.essid)
 				.data('pwd', ap.enc)
+				.attr('tabindex', 0)
 				.addClass('AP');
 
 			// mark current SSID
@@ -206,7 +208,7 @@
 				$item.addClass('selected');
 			}
 
-			var inner = document.createElement('div');
+			var inner = mk('div');
 			$(inner).addClass('inner')
 				.htmlAppend('<div class="rssi">{0}</div>'.format(ap.rssi_perc))
 				.htmlAppend('<div class="essid" title="{0}">{0}</div>'.format($.htmlEscape(ap.essid)))

html_orig/sass/app.scss

@@ -1,4 +1,5 @@
 @import "normalize";
+@import "fontello-embedded";
 @import "lib/bourbon/bourbon";
 
 @import "grid-settings";
@@ -10,6 +11,7 @@ $form-label-w: 160px;
 $form-label-gap: 8px;
 $form-field-w: 250px;
 
+$c-red-outline: #ff0099;
 $c-form-label-fg: white;
 $c-form-field-bg: #3c3c3c;
 $c-form-field-fg: white;

html_orig/sass/form/_buttons.scss

@@ -31,9 +31,18 @@ button, input[type=submit], .button {
 		min-width: initial;
 	}
 
-	text-shadow: 1.5px 1.5px 2px rgba(black, 0.6);
+	&::before {
+		vertical-align: -1px;
+		margin-left: 0;
+	}
+
+	text-shadow: 1.5px 1.5px 2px rgba(black, 0.4);
 
 	@include fancy-btn-colors($btn-blue-f, $btn-blue-b, $btn-blue-fa, $btn-blue-ba);
+
+	&:focus {
+		outline-color: $c-red-outline;
+	}
 }
 
 //input[type="submit"], .btn-green {

html_orig/sass/form/_fancy_button_mixins.scss

@@ -7,7 +7,7 @@
 	border-radius: 2px;
 	padding: 0 0.6em;
 	border: 0 none;
-	outline: 0 none !important;
+	//outline: 0 none !important;
 	line-height: 1.8em;
 	font-size: 1.1em;
 	margin-bottom: 3px;

html_orig/sass/form/_form_elements.scss

@@ -7,8 +7,8 @@
 	color: $c-form-field-fg;
 	padding: 6px;
 	line-height: 1em;
-	outline: 0 none !important;
-	-moz-outline: 0 none !important;
+	//outline: 0 none !important;
+	//-moz-outline: 0 none !important;
 	font-weight: normal;
 
 	&:focus, &:hover {
@@ -21,6 +21,7 @@
 	line-height: $h;
 
 	.box {
+		overflow: hidden;
 		width: $h;
 		height: $h;
 		border: 1px solid #808080;

html_orig/sass/layout/_box.scss

@@ -9,6 +9,10 @@
 		margin-top: dist(-1);
 	}
 
+	h1, h2 {
+		overflow: hidden;
+	}
+
 	h1 + & {
 		margin-top: 0;
 	}
@@ -45,6 +49,7 @@
 
 			@include media($phone) {
 				right: dist(0);
+				top: 1.8em;
 				margin: 1rem auto;
 			}
 

html_orig/sass/layout/_menu.scss

@@ -69,15 +69,27 @@
 			box-shadow: 0 0 5px rgba(black, .5);
 		}
 
+		&:focus {
+			outline-color: $c-red-outline;
+		}
+
+		//&::before {
+		//	content: "▸";
+		//	padding-right: .5rem;
+		//	position: relative;
+		//	top: -0.1rem;
+		//}
+
+		// Fontello
 		&::before {
-			content: "▸";
-			padding-right: .5rem;
-			position: relative;
-			top: -0.1rem;
+			vertical-align: -2px;
+			margin-left: 0;
+			margin-right: 15px;
 		}
 
 		@include media($phone) {
 			display: none;
+			&::before {margin-left: 10px;}
 		}
 	}
 

html_orig/sass/layout/_modal.scss

@@ -27,7 +27,9 @@
 	background: #1c1c1e;
 	border-left: 6px solid $c-form-highlight;
 	border-right: 6px solid $c-form-highlight;
-	box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black;
+	border-top: 1px solid $c-form-highlight;
+	border-bottom: 1px solid $c-form-highlight;
+	box-shadow: 0 0 6px 0 black;
 
 	border-radius: 6px;