Wizard: Add theme picker page

Clean up configui.js
CSS cleanups for new page TODO
Gitlab #335

apps/routerconsole/java/src/net/i2p/router/web/helpers/WizardHelper.java

@@ -23,11 +23,12 @@ public class WizardHelper extends HelperBase {
     public static final float BW_SCALE = 0.75f;
     // pages
     public static final int PAGE_LANG = 1;
-    public static final int PAGE_CHECK = 2;
-    public static final int PAGE_TEST = 3;
-    public static final int PAGE_RESULTS = 4;
-    public static final int PAGE_BROWSER = 5;
-    public static final int PAGE_DONE = 6;
+    public static final int PAGE_THEME = 2;
+    public static final int PAGE_CHECK = 3;
+    public static final int PAGE_TEST = 4;
+    public static final int PAGE_RESULTS = 5;
+    public static final int PAGE_BROWSER = 6;
+    public static final int PAGE_DONE = 7;
 
     // KBps
     private static final float MIN_DOWN_BW = 32.0f;

apps/routerconsole/jsp/js/configui.js

@@ -4,17 +4,8 @@
 // as a formal dedication to the public domain and in circumstances where
 // a public domain is not usable.
 
-var prefersDarkTheme = false;
 var oldTheme = "light";
 
-function detectDark() {
-    // https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        // dark mode
-        prefersDarkTheme = true;
-    }
-}
-
 function swapStyleSheet(theme) {
     // https://stackoverflow.com/questions/14292997/changing-style-sheet-javascript
     document.getElementById("pagestyle").setAttribute("href", "/themes/console/" + theme + "/console.css");
@@ -34,6 +25,9 @@ function resetStyleSheet() {
 
 function initThemeSwitcher() {
     var dark = document.getElementById("dark");
+    if (dark == null) {
+        return;
+    }
     dark.onclick = function() {
         swapStyleSheet("dark");
         disableButtons(false);
@@ -56,8 +50,6 @@ function initThemeSwitcher() {
     document.getElementById("themebox1").onclick = function() { disableButtons(false); }
     document.getElementById("themebox2").onclick = function() { disableButtons(false); }
     document.getElementById("themebox3").onclick = function() { disableButtons(false); }
-    // unused for now
-    detectDark();
 }
 
 document.addEventListener("DOMContentLoaded", function() {

apps/routerconsole/jsp/js/welcomeui.js

@@ -0,0 +1,34 @@
+/* @license http://creativecommons.org/publicdomain/zero/1.0/legalcode CC0-1.0 */
+
+// This component is dedicated to the public domain. It uses the CC0
+// as a formal dedication to the public domain and in circumstances where
+// a public domain is not usable.
+
+function swapStyleSheet(theme) {
+    // https://stackoverflow.com/questions/14292997/changing-style-sheet-javascript
+    document.getElementById("pagestyle").setAttribute("href", "/themes/console/" + theme + "/console.css");
+}
+
+function initThemeSwitcher() {
+    var dark = document.getElementById("dark");
+    dark.onclick = function() {
+        swapStyleSheet("dark");
+    }
+    var light = document.getElementById("light");
+    light.onclick = function() {
+        swapStyleSheet("light");
+    }
+    // https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        // dark mode
+        swapStyleSheet("dark");
+        dark.checked = true;
+        light.checked = false;
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    initThemeSwitcher();
+}, true);
+
+/* @license-end */

apps/routerconsole/jsp/welcome.jsp

@@ -11,6 +11,7 @@
     // 5: Browser setup
     // 6: Done
     final int PAGE_LANG = net.i2p.router.web.helpers.WizardHelper.PAGE_LANG;
+    final int PAGE_THEME = net.i2p.router.web.helpers.WizardHelper.PAGE_THEME;
     final int PAGE_CHECK = net.i2p.router.web.helpers.WizardHelper.PAGE_CHECK;
     final int PAGE_TEST = net.i2p.router.web.helpers.WizardHelper.PAGE_TEST;
     final int PAGE_RESULTS = net.i2p.router.web.helpers.WizardHelper.PAGE_RESULTS;
@@ -98,6 +99,10 @@
 
 /* @license-end */
 </script>
+<%
+    } else if (ipg == PAGE_THEME) {
+%>
+<script src="/js/welcomeui.js?<%=net.i2p.CoreVersion.VERSION%>" type="text/javascript"></script>
 <%
     }  // ipg == PAGE_TEST
 %>
@@ -131,13 +136,17 @@
 <input type="hidden" name="action" value="blah" >
 <input type="hidden" name="page" value="<%=(ipg + 1)%>" >
 <%
+    if (ipg == PAGE_LANG || ipg == PAGE_THEME) {
+%>
+<%-- needed for CSS: --%><div id="config_ui">
+<%-- needed for lang setting in css.jsi: --%><input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
+<%
+    }
     if (ipg == PAGE_LANG) {
         // language selection
 %>
 <jsp:useBean class="net.i2p.router.web.helpers.ConfigUIHelper" id="uihelper" scope="request" />
 <jsp:setProperty name="uihelper" property="contextId" value="<%=i2pcontextId%>" />
-<%-- needed for CSS: --%><div id="config_ui">
-<%-- needed for lang setting in css.jsi: --%><input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
 <h3 id="wizardheading" class="wizard"><%=uihelper._t("Select Language")%></h3>
 <img class="wizardimg" src="/themes/console/images/wizard/step-0.png">
 <div id="wizlangsettings" class="wizard">
@@ -156,6 +165,24 @@
 </p>
 </div>
 </div>
+<%
+
+    } else if (ipg == PAGE_THEME) {
+        // Theme picker
+%>
+<jsp:useBean class="net.i2p.router.web.helpers.ConfigUIHelper" id="uihelper2" scope="request" />
+<jsp:setProperty name="uihelper2" property="contextId" value="<%=i2pcontextId%>" />
+<h3 id="wizardheading" class="wizard"><%=uihelper2._t("Select Theme")%></h3>
+<img class="wizardimg" src="/themes/console/images/wizard/step-1.png">
+<div id="wizlangsettings" class="wizard">
+<jsp:getProperty name="uihelper2" property="settings" />
+</div>
+<div class="wizardtext">
+<p>
+<%=intl._t("Please select your preferred theme:")%>
+</p>
+</div>
+</div>
 <%
 
     } else if (ipg == PAGE_CHECK) {