wizard: somewhat restyle and improve UX

This commit is contained in:
Franco Fichtner 2017-02-13 09:20:14 +01:00
parent 0327622cf6
commit 7b6ab76964
5 changed files with 76 additions and 112 deletions

View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8" ?>
<opnsensewizard>
<wizard>
<copyright>
/*
Copyright (C) 2014 Deciso B.V.
@ -32,9 +32,7 @@
<totalsteps>12</totalsteps>
<step>
<id>1</id>
<title>OpenVPN Wizard: Authentication Type Selection</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Authentication Type Selection</title>
<fields>
<field>
<type>listtopic</type>
@ -70,9 +68,7 @@
</step>
<step>
<id>2</id>
<title>OpenVPN Wizard: LDAP Server Selection</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>LDAP Server Selection</title>
<fields>
<field>
<type>listtopic</type>
@ -105,9 +101,7 @@
</step>
<step>
<id>3</id>
<title>OpenVPN Wizard: Add LDAP Server</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Add LDAP Server</title>
<fields>
<field>
<type>listtopic</type>
@ -231,9 +225,7 @@
</step>
<step>
<id>4</id>
<title>OpenVPN Wizard: RADIUS Server Selection</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>RADIUS Server Selection</title>
<fields>
<field>
<type>listtopic</type>
@ -266,9 +258,7 @@
</step>
<step>
<id>5</id>
<title>OpenVPN Wizard: Add RADIUS Server</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Add RADIUS Server</title>
<fields>
<field>
<type>listtopic</type>
@ -314,9 +304,7 @@
</step>
<step>
<id>6</id>
<title>OpenVPN Wizard: Certificate Authority Selection</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Certificate Authority Selection</title>
<fields>
<field>
<name>Choose a Certificate Authority (CA)</name>
@ -342,9 +330,7 @@
</step>
<step>
<id>7</id>
<title>OpenVPN Wizard: Add Certificate Authority</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Add Certificate Authority</title>
<fields>
<field>
<name>Create a New Certificate Authority (CA) Certificate</name>
@ -443,9 +429,7 @@
</step>
<step>
<id>8</id>
<title>OpenVPN Wizard: Server Certificate Selection</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Server Certificate Selection</title>
<fields>
<field>
<name>Choose a Server Certificate</name>
@ -471,9 +455,7 @@
</step>
<step>
<id>9</id>
<title>OpenVPN Wizard: Add a Server Certificate</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Add a Server Certificate</title>
<fields>
<field>
<name>Create a New Server Certificate</name>
@ -572,9 +554,7 @@
</step>
<step>
<id>10</id>
<title>OpenVPN Wizard: Server Setup</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Server Setup</title>
<fields>
<field>
<type>listtopic</type>
@ -906,9 +886,7 @@
</step>
<step>
<id>11</id>
<title>OpenVPN Wizard: Firewall Rule Configuration</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Firewall Rule Configuration</title>
<fields>
<field>
<type>listtopic</type>
@ -948,14 +926,8 @@
</step>
<step>
<id>12</id>
<title>OpenVPN Wizard: Finished!</title>
<description>OpenVPN Remote Access Server Setup Wizard</description>
<disableheader>on</disableheader>
<title>Finished!</title>
<fields>
<field>
<type>listtopic</type>
<name>Configuration Complete!</name>
</field>
<field>
<type>text</type>
<description>Your configuration is now complete.</description>
@ -967,4 +939,4 @@
</fields>
<stepsubmitphpaction>step12_submitphpaction();</stepsubmitphpaction>
</step>
</opnsensewizard>
</wizard>

View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8" ?>
<opnsensewizard>
<wizard>
<copyright>
/*
Copyright (C) 2014 Deciso B.V.
@ -31,10 +31,12 @@
<totalsteps>9</totalsteps>
<step>
<id>1</id>
<title>OPNsense Setup Wizard</title>
<disableheader>true</disableheader>
<description>This wizard will guide you through the initial configuration of OPNsense.&lt;br/&gt;&lt;br/&gt; The wizard may be stopped at any time by clicking the logo image at the top of the screen.</description>
<title>General Setup</title>
<fields>
<field>
<type>text</type>
<description>This wizard will guide you through the initial system configuration. The wizard may be stopped at any time by clicking the logo image at the top of the screen.</description>
</field>
<field>
<name>Next</name>
<type>submit</type>
@ -50,7 +52,6 @@
<step>
<id>2</id>
<title>General Information</title>
<description>On this screen you will set the general OPNsense parameters.</description>
<fields>
<field>
<name>Hostname</name>
@ -134,7 +135,6 @@
<step>
<id>3</id>
<title>Time Server Information</title>
<description>Please enter the time, date and time zone.</description>
<fields>
<field>
<name>Time server hostname</name>
@ -167,7 +167,6 @@
<id>4</id>
<disableallfieldsbydefault>true</disableallfieldsbydefault>
<title>Configure WAN Interface</title>
<description>On this screen we will configure the Wide Area Network information.</description>
<javascriptafterformdisplay>
var selectedItem = 0;
if(jQuery('#ipaddress').val() == 'dhcp') {
@ -544,8 +543,7 @@
</step>
<step>
<id>6</id>
<title>Set Admin WebGUI Password</title>
<description>On this screen we will set the admin password, which is used to access the WebGUI and also SSH services if you wish to enable them.</description>
<title>Set Admin Web GUI Password</title>
<fields>
<field>
<name>Admin Password</name>
@ -576,10 +574,12 @@
</step>
<step>
<id>7</id>
<title>Reload configuration</title>
<disableheader>true</disableheader>
<description>Click 'Reload' to reload OPNsense with new changes.</description>
<title>Reload Configuration</title>
<fields>
<field>
<type>text</type>
<description>Click 'Reload' to reload to apply the changes.</description>
</field>
<field>
<name>Reload</name>
<type>submit</type>
@ -629,27 +629,21 @@
<step>
<id>8</id>
<title>Reload in progress</title>
<description>
&lt;p&gt;A reload is now in progress. Please wait.&lt;/p&gt;
&lt;meta http-equiv="refresh" content="5;url=wizard.php?xml=system&amp;stepid=8"&gt;
&lt;p&gt;The wizard will redirect to the next step once the reload is completed.&lt;/p&gt;
</description>
<fields>
<field>
<type>text</type>
<description>A reload is now in progress. The wizard will redirect you to the dashboard once the reload is completed.</description>
</field>
<field>
<type>refresh</type>
<!-- XXX use $myurl -->
<content>5;/index.php?wizard_done</content>
</field>
</fields>
<stepafterformdisplay>
<![CDATA[
configd_run('service reload delay', true);
]]>
</stepafterformdisplay>
</step>
<step>
<id>9</id>
<title>Wizard completed.</title>
<description>
<![CDATA[
Congratulations! OPNsense is now configured.<p/>
Please consider donating to the project to help us with our overhead costs.<p/>
See <a target='_new' href='https://opnsense.org/'>OPNsense.org</a> to donate or purchase services offered by the OPNsense team.<p/>
Click <a href='$myurl'>here</a> to continue on to OPNsense web GUI.
]]>
</description>
</step>
</opnsensewizard>
</wizard>

View File

@ -15,18 +15,18 @@ function system_get_language_code() {
// link menu system
$menu = new OPNsense\Base\Menu\MenuSystem();
/* XXX generating breadcrumbs requires getItems() call */
$menuSystem = $menu->getItems($_SERVER['REQUEST_URI']);
$menuBreadcrumbs = $menu->getBreadcrumbs();
/* XXX workaround for dashboard */
if (!isset($menuBreadcrumbs)) {
/* XXX generating breadcrumbs requires getItems() call */
$menuBreadcrumbs = $menu->getBreadcrumbs();
if (isset($extraBreadcrumb)) {
$menuBreadcrumbs[] = array('name' => $extraBreadcrumb);
}
$themename = htmlspecialchars(get_current_theme());
$themename = html_safe(get_current_theme());
$pagetitle = gentitle(array_reverse($menuBreadcrumbs), ' | ');
$pagetitle .= sprintf(' | %s.%s', $config['system']['hostname'], $config['system']['domain']);
$pagetitle .= html_safe(sprintf(' | %s.%s', $config['system']['hostname'], $config['system']['domain']));
?><!doctype html>
<!--[if IE 8 ]><html lang="<?=system_get_language_code();?>" class="ie ie8 lte9 lte8 no-js"><![endif]-->

View File

@ -100,7 +100,9 @@ include("head.inc");
include("fbegin.inc");?>
<?php
if (isset($config['trigger_initial_wizard'])) :?>
?>
<?php
if (isset($config['trigger_initial_wizard']) || isset($_GET['wizard_done'])): ?>
<script type="text/javascript">
$( document ).ready(function() {
$(".page-content-head:first").hide();
@ -121,10 +123,18 @@ include("fbegin.inc");?>
<br />
<div class="content-box-main">
<?php
echo sprintf(gettext("Welcome to %s!"), $g['product_name']) . "<p>\n";
echo gettext("One moment while we start the initial setup wizard.") . "<p>\n";
echo gettext("Embedded platform users: Please be patient, the wizard takes a little longer to run than the normal GUI.") . "<p>\n";
echo gettext("To bypass the wizard, click on the logo in the upper left corner.") . "\n";
if (isset($config['trigger_initial_wizard'])) {
echo '<p>' . sprintf(gettext('Welcome to %s!'), $g['product_name']) . "</p>\n";
echo '<p>' . gettext('One moment while we start the initial setup wizard.') . "</p>\n";
echo '<p class="__nomb">' . gettext('To bypass the wizard, click on the logo in the upper left corner.') . "</p>\n";
} else {
echo '<p>' . sprintf(gettext('Congratulations! %s is now configured.'), $g['product_name']) . "</p>\n";
echo '<p>' . sprintf(gettext(
'Please consider donating to the project to help us with our overhead costs. ' .
'See %sour website%s to donate or purchase available %s support services.'),
'<a target="_new" href="' . $g['product_website'] . '">', '</a>', $g['product_name']) . "</p>\n";
echo '<p class="__nomb">' . sprintf(gettext('Click to %scontinue to the dashboard%s.'), '<a href="/">', '</a>') . "</p>\n";
}
?>
</div>
<div>
@ -133,7 +143,11 @@ include("fbegin.inc");?>
</div>
</div>
</section>
<meta http-equiv="refresh" content="3;url=wizard.php?xml=system">
<?php
if (isset($config['trigger_initial_wizard'])): ?>
<meta http-equiv="refresh" content="5;url=/wizard.php?xml=system">
<?php
endif ?>
<?php
// normal dashboard
else:?>

View File

@ -119,7 +119,7 @@ $listtags = array_flip(array(
'template',
));
$pkg = parse_xml_config_raw("/usr/local/wizard/{$xml}.xml", 'opnsensewizard', false);
$pkg = parse_xml_config_raw("/usr/local/wizard/{$xml}.xml", 'wizard', false);
if (!is_array($pkg)) {
print_info_box(sprintf(gettext("ERROR: Could not parse %s wizard file."), $xml));
die;
@ -172,8 +172,7 @@ if ($_POST && !$input_errors) {
}
}
$description = gettext($pkg['step'][$stepid]['description']);
$title = gettext($pkg['step'][$stepid]['title']);
$extraBreadcrumb = $pkg['step'][$stepid]['title'];
function update_config_field($field, $updatetext, $unset, $arraynum, $field_type) {
global $config;
@ -353,7 +352,7 @@ function showchange() {
<?php
if($title == "Reload in progress") {
if($extraBreadcrumbs == "Reload in progress") {
$ip = fixup_string("\$myurl");
} else {
$ip = "/";
@ -362,8 +361,7 @@ function showchange() {
<section class="page-content-main">
<div class="container-fluid col-xs-12 col-sm-10 col-md-9">
<div class="row">
<div class="container-fluid">
<?php
if (isset($input_errors) && count($input_errors) > 0)
@ -382,23 +380,8 @@ function showchange() {
<form method="post" name="iform" id="iform">
<input type="hidden" name="xml" value="<?= htmlspecialchars($xml) ?>" />
<input type="hidden" name="stepid" value="<?= htmlspecialchars($stepid) ?>" />
<?php if(!$pkg['step'][$stepid]['disableheader']): ?>
<header class="content-box-head container-fluid">
<h3><?= fixup_string($title) ?></h3>
</header>
<?php endif; ?>
<div class="content-box-main">
<div style="padding:20px !important;">
<p><br /><?=fixup_string($description) ?></p>
</div>
<div class="table-responsive">
<table class="table table-striped">
<?php
$inputaliases = array();
if($pkg['step'][$stepid]['fields']['field'] <> "") {
@ -455,6 +438,12 @@ function showchange() {
echo "<br /> " . gettext($field['description']);
}
break;
case "refresh":
echo "<td colspan=\"2\" align=\"center\" class=\"vncell\">\n";
if($field['content'] <> "") {
echo '<meta http-equiv="refresh" content="' . $field['content'] . '">';
}
break;
case "text":
echo "<td colspan=\"2\" align=\"center\" class=\"vncell\">\n";
if($field['description'] <> "") {
@ -702,8 +691,7 @@ function showchange() {
break;
case "submit":
echo "<td colspan=\"2\">&nbsp;</td></tr>";
echo "<tr><td colspan=\"2\" align=\"center\">";
echo "<td colspan=\"2\" align=\"center\">";
echo "<input type='submit' class=\"btn btn-primary\" name='" . $name . "' value=\"" . htmlspecialchars(gettext($field['name'])) . "\" />\n";
if($field['description'] <> "") {
@ -712,8 +700,7 @@ function showchange() {
break;
case "listtopic":
echo "<td colspan=\"2\">&nbsp;</td></tr>";
echo "<tr><td colspan=\"2\" class=\"listtopic\">" . gettext($field['name']) . "<br />\n";
echo "<td colspan=\"2\" class=\"listtopic\">" . gettext($field['name']) . "<br />\n";
break;
case "subnet_select":
@ -856,14 +843,11 @@ function showchange() {
?>
</table>
<br /><br /><br />
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</section>