From 5e7f0fffac14366edc9d9630d84f0b6ec743e418 Mon Sep 17 00:00:00 2001
From: Tealk <tealk@anzah.email>
Date: Fri, 19 Mar 2021 10:13:23 +0100
Subject: [PATCH] redesign install.php

---
 css/main.css |   9 +-
 install.php  | 282 +++++++++++++++++++++++++++++++++------------------
 2 files changed, 186 insertions(+), 105 deletions(-)

diff --git a/css/main.css b/css/main.css
index 4a21b50..4264129 100644
--- a/css/main.css
+++ b/css/main.css
@@ -45,6 +45,11 @@ a:focus {
   margin-right: auto;
 }
 
+#install .install,
+#install form .card:not(:first-child) {
+  margin-top: 30px;
+}
+
 #status-container .input-group:last-child {
   margin-bottom: 0px !important;
 }
@@ -245,10 +250,6 @@ article.card textarea {
   padding-bottom: 25px;
 }
 
-.install .btn {
-  margin-top: 30px;
-}
-
 #footerwrap .dropdown-menu {
   background: gray;
 }
diff --git a/install.php b/install.php
index 55a177a..d458fe4 100644
--- a/install.php
+++ b/install.php
@@ -169,15 +169,10 @@ if (isset($_POST['server']) && empty($message)) {
 	}
 }
 Template::render_header(_("Install"));
-?>
-<h1 class="text-center"><?php echo _("Prerequisite"); ?></h1>
-<summary><?php echo _("If any of the following prerequisites are shown as failed (red X), please correct the issue and reload the page before proceeding with the installation."); ?></summary>
-<?php
-
 
 $php_version_req = sprintf(_("Minimum PHP version %s"), MINIMUM_PHP_VERSION);
-$preq_fail = array("remove", "danger");
-$preq_ok   = array("ok", "success");
+$preq_fail = array("times", "danger");
+$preq_ok   = array("check", "success");
 
 $preq_phpver = $preq_fail;
 $preq_mysqlnd = $preq_fail;
@@ -202,108 +197,193 @@ if (is_writable(__DIR__)) {
 }
 
 ?>
-<section class="prereq-section clearfix">
-	<div class="container-fluid">
-		<div class="row ">
-			<div class="col-md-6 text-right"><label for="php version"><?php echo $php_version_req; ?></div>
-			<div class="col-md-6"><a href="#" class="btn btn-<?php echo $preq_phpver[1]; ?>"><span class="glyphicon glyphicon-<?php echo $preq_phpver[0]; ?>"></span></a></div>
+<div id="install">
+	<div class="card">
+		<div class="card-header text-center">
+			<?php echo _("Prerequisite"); ?>
 		</div>
-		<div class="row ">
-			<div class="col-md-6 text-right"><label for="mysqlnd Library installed"><?php echo _('PHP mysqlnd library installed'); ?></div>
-			<div class="col-md-6"><a href="#" class="btn btn-<?php echo $preq_mysqlnd[1]; ?>"><span class="glyphicon glyphicon-<?php echo $preq_mysqlnd[0]; ?>"></span></a></div>
-		</div>
-		<div class="row">
-			<div class="col-md-6 text-right"><label for="write_access"><?php echo _('Write access to web directory'); ?></div>
-			<div class="col-md-6"><a href="#" class="btn btn-<?php echo $preq_writedir[1]; ?>"><span class="glyphicon glyphicon-<?php echo $preq_writedir[0]; ?>"></span></a></div>
+		<div class="card-body">
+			<span class="card-title"><?php echo _("If any of the following prerequisites are shown as failed (red X), please correct the issue and reload the page before proceeding with the installation."); ?></span>
+			<p class="card-text">
+			<div class="container">
+				<div class="row">
+					<div class="col text-center"><?php echo $php_version_req; ?></div>
+					<div class="col text-center"><a class="btn btn-<?php echo $preq_phpver[1]; ?>"><i class="fas fa-<?php echo $preq_phpver[0]; ?>"></i></a></div>
+				</div>
+				<div class="row mt-1">
+					<div class="col text-center"><?php echo _('PHP mysqlnd library installed'); ?></div>
+					<div class="col text-center"><a class="btn btn-<?php echo $preq_mysqlnd[1]; ?>"><i class="fas fa-<?php echo $preq_mysqlnd[0]; ?>"></i></a></div>
+				</div>
+				<div class="row mt-1">
+					<div class="col text-center"><?php echo _('Write access to web directory'); ?></div>
+					<div class="col text-center"><a class="btn btn-<?php echo $preq_writedir[1]; ?>"><i class="fas fa-<?php echo $preq_writedir[0]; ?>"></i></a></div>
+				</div>
+			</div>
+			</p>
 		</div>
 	</div>
 
-</section>
+	<div class="install">
+		<h1 class="text-center"><?php echo _("Installation"); ?></h1>
+		<?php
+		if (!empty($message)) {
+		?>
+			<p class="alert alert-danger"><?php echo $message; ?></p>
+		<?php
+		}
+		?>
+		<span><?php echo _("We will ask you some basic questions about your website. Most of the settings can be later edited in the config.php file."); ?></span>
 
-<h1 class="text-center"><?php echo _("Installation"); ?></h1>
-<?php
-if (!empty($message)) {
-?>
-	<p class="alert alert-danger"><?php echo $message; ?></p>
-<?php
-}
-?>
-<summary><?php echo _("We will ask you some basic questions about your website. Most of the settings can be later edited in the config.php file."); ?></summary>
-
-<form method="post" action="." class="clearfix install">
-	<section class="install-section clearfix">
-		<h2><?php echo _("Website details"); ?></h2>
-		<summary><?php echo _("We need a name for your status page (shown behind page title after the dash) and a url of your server status installation (i.e. <a href='#'>https://example.com/status</a> - without the trailing slash), so we can mail users link for forgotten password etc..."); ?></summary>
-
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="servername"><?php echo _("Name"); ?>: </label><input type="text" name="servername" value="<?php echo ((isset($_POST['servername'])) ? htmlspecialchars($_POST['servername'], ENT_QUOTES) : ''); ?>" id="servername" placeholder="<?php echo _("Name"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="url"><?php echo _("Url"); ?>: </label><input type="url" name="url" value="<?php echo ((isset($_POST['url'])) ? htmlspecialchars($_POST['url'], ENT_QUOTES) : ''); ?>" id="url" placeholder="<?php echo _("Url"); ?>" class="form-control" required></div>
-		</div>
-		<summary><?php echo _("A title that you want to be shown on the top of the page."); ?></summary>
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="title"><?php echo _("Title"); ?>: </label><input type="text" name="title" value="<?php echo ((isset($_POST['title'])) ? htmlspecialchars($_POST['title'], ENT_QUOTES) : 'Server Status'); ?>" id="title" placeholder="<?php echo _("Title"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"></div>
-		</div>
-		<summary><?php echo _("Also an email address for mailer would be nice :)"); ?></summary>
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="mailer"><?php echo _("Name"); ?>: </label><input type="text" name="mailer" value="<?php echo ((isset($_POST['mailer'])) ? htmlspecialchars($_POST['mailer'], ENT_QUOTES) : ''); ?>" id="mailer" placeholder="<?php echo _("Name"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="mailer_email"><?php echo _("Email"); ?>: </label><input type="email" name="mailer_email" value="<?php echo ((isset($_POST['mailer_email'])) ? htmlspecialchars($_POST['mailer_email'], ENT_QUOTES) : ''); ?>" id="mailer_email" placeholder="<?php echo _("Email"); ?>" class="form-control" required></div>
-		</div>
-	</section>
-	<section class="install-section clearfix">
-		<h2><?php echo _("Database connection"); ?></h2>
-		<summary><?php echo _("We need database connection to be able to create tables. Please check that your account has the permission needed to do that."); ?></summary>
-
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="server"><?php echo _("Server"); ?>: </label><input type="text" name="server" value="<?php echo ((isset($_POST['server'])) ? htmlspecialchars($_POST['server'], ENT_QUOTES) : ''); ?>" id="server" placeholder="<?php echo _("Server"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="database"><?php echo _("Database"); ?>: </label><input type="text" name="database" value="<?php echo ((isset($_POST['database'])) ? htmlspecialchars($_POST['database'], ENT_QUOTES) : ''); ?>" id="database" placeholder="<?php echo _("Database"); ?>" class="form-control" required></div>
-		</div>
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="dbuser"><?php echo _("User"); ?>: </label><input type="text" name="dbuser" value="<?php echo ((isset($_POST['dbuser'])) ? htmlspecialchars($_POST['dbuser'], ENT_QUOTES) : ''); ?>" id="dbuser" placeholder="<?php echo _("User"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="dbpassword"><?php echo _("Password"); ?>: </label><input type="password" name="dbpassword" value="<?php echo ((isset($_POST['dbpassword'])) ? htmlspecialchars($_POST['dbpassword'], ENT_QUOTES) : ''); ?>" id="dbpassword" placeholder="<?php echo _("Password"); ?>" class="form-control" required></div>
-		</div>
-	</section>
-	<section class="install-section clearfix">
-		<h2><?php echo _("Privacy Policy"); ?></h2>
-		<summary><?php echo _("Since you are collecting personal information, the GDPR needs you to have a privacy policy. Enter the details below."); ?></summary>
-
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="policy_name"><?php echo _("Name"); ?>: </label><input type="text" name="policy_name" value="<?php echo ((isset($_POST['policy_name'])) ? htmlspecialchars($_POST['policy_name'], ENT_QUOTES) : ''); ?>" id="policy_name" placeholder="<?php echo _("Company name"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="address"><?php echo _("Address"); ?>: </label><input type="text" name="address" value="<?php echo ((isset($_POST['address'])) ? htmlspecialchars($_POST['address'], ENT_QUOTES) : ''); ?>" id="address" placeholder="<?php echo _("Full address"); ?>" class="form-control" required></div>
-		</div>
-		<div class="form-group clearfix">
-			<div class="col-sm-6"><label for="policy_mail"><?php echo _("E-Mail"); ?>: </label><input type="text" name="policy_mail" value="<?php echo ((isset($_POST['policy_mail'])) ? htmlspecialchars($_POST['policy_mail'], ENT_QUOTES) : ''); ?>" id="policy_mail" placeholder="<?php echo _("E-Mail"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="policy_phone"><?php echo _("Phone"); ?>: </label><input type="text" name="policy_phone" value="<?php echo ((isset($_POST['policy_phone'])) ? htmlspecialchars($_POST['policy_phone'], ENT_QUOTES) : ''); ?>" id="policy_phone" placeholder="<?php echo _("Phone number"); ?>" class="form-control"></div>
-		</div>
-		<div class="form-group clearfix">
-			<div class=""><label for="who_we_are"><?php echo _("Who we are"); ?>: </label><textarea class="form-control" id="who_we_are" rows="3" name="who_we_are" placeholder="<?php echo _("Some info about yourself"); ?>" value="<?php echo ((isset($_POST['who_we_are'])) ? htmlspecialchars($_POST['who_we_are'], ENT_QUOTES) : ''); ?>"></textarea></div>
-		</div>
-		<div class="form-group clearfix">
-			<div class="col-sm-12"><label for="url"><?php echo _("External Policy Url"); ?>: </label>
-				<summary><?php echo _("If you alredy have an existing Policy published, please provide the full Url to override the local policy definition. Leave blank to use the local definition"); ?></summary>
-				<input type="policy_url" name="policy_url" value="<?php echo ((isset($_POST['policy_url'])) ? htmlspecialchars($_POST['policy_url'], ENT_QUOTES) : ''); ?>" id="policy_url" placeholder="<?php echo _("External Policy Url"); ?>" class="form-control">
+		<form method="post" action=".">
+			<div class="card">
+				<div class="card-header text-center">
+					<?php echo _("Website details"); ?>
+				</div>
+				<div class="card-body">
+					<span class="card-title"><?php echo _("We need a name for your status page (shown behind page title after the dash) and a url of your server status installation (i.e. <a href='#'>https://example.com/status</a> - without the trailing slash), so we can mail users link for forgotten password etc..."); ?></span>
+					<p class="card-text">
+					<div class="row">
+						<div class="col form-floating">
+							<input type="text" name="servername" value="<?php echo ((isset($_POST['servername'])) ? htmlspecialchars($_POST['servername'], ENT_QUOTES) : ''); ?>" id="servername" placeholder="<?php echo _("Servername"); ?>" class="form-control" required>
+							<label for="servername"><?php echo _("Servername"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="url" name="url" value="<?php echo ((isset($_POST['url'])) ? htmlspecialchars($_POST['url'], ENT_QUOTES) : ''); ?>" id="url" placeholder="<?php echo _("Url"); ?>" class="form-control" required>
+							<label for="url"><?php echo _("Url"); ?>: </label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="col form-floating">
+							<input type="text" name="mailer" value="<?php echo ((isset($_POST['mailer'])) ? htmlspecialchars($_POST['mailer'], ENT_QUOTES) : ''); ?>" id="mailer" placeholder="<?php echo _("Mail-Name"); ?>" class="form-control" required>
+							<label for="mailer"><?php echo _("Mail-Name"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="email" name="mailer_email" value="<?php echo ((isset($_POST['mailer_email'])) ? htmlspecialchars($_POST['mailer_email'], ENT_QUOTES) : ''); ?>" id="mailer_email" placeholder="<?php echo _("Email"); ?>" class="form-control" required>
+							<label for="mailer_email"><?php echo _("Email"); ?>: </label>
+						</div>
+					</div>
+					</p>
+				</div>
 			</div>
-		</div>
-	</section>
-	<section class="install-section clearfix">
-		<h2><?php echo _("User"); ?></h2>
-		<summary><?php echo _("And finally, we need info to create a new user. You don't have to provide it, but then... No status page admin..."); ?></summary>
-		<div class="form-group">
-			<div class="col-sm-6"><label for="name"><?php echo _("Name"); ?>: </label><input type="text" maxlength="50" name="name" value="<?php echo ((isset($_POST['name'])) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''); ?>" id="name" placeholder="<?php echo _("Name"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="surname"><?php echo _("Surname"); ?>: </label><input type="text" maxlength="50" name="surname" value="<?php echo ((isset($_POST['surname'])) ? htmlspecialchars($_POST['surname'], ENT_QUOTES) : ''); ?>" id="surname" placeholder="<?php echo _("Surname"); ?>" class="form-control" required></div>
-		</div>
-		<div class="form-group">
-			<div class="col-sm-6"><label for="username"><?php echo _("Username"); ?>:</label><input type="text" maxlength="50" name="username" value="<?php echo ((isset($_POST['username'])) ? htmlspecialchars($_POST['username'], ENT_QUOTES) : ''); ?>" id="username" placeholder="<?php echo _("Username"); ?>" class="form-control" required></div>
-			<div class="col-sm-6"><label for="email"><?php echo _("Email"); ?>:</label><input type="email" maxlength="60" name="email" value="<?php echo ((isset($_POST['email'])) ? htmlspecialchars($_POST['email'], ENT_QUOTES) : ''); ?>" id="email" placeholder="<?php echo _("Email"); ?>" class="form-control" required><input type="hidden" name="permission" value="0"></div>
-		</div>
-		<div class="form-group">
-			<div class="col-sm-6"><label for="password"><?php echo _("Password"); ?>:</label><input type="password" name="password" value="<?php echo ((isset($_POST['password'])) ? htmlspecialchars($_POST['password'], ENT_QUOTES) : ''); ?>" id="password" placeholder="<?php echo _("Password"); ?>" class="form-control" required></div>
-			<div class="col-sm-6">
+
+			<div class="card">
+				<div class="card-header text-center">
+					<?php echo _("Database connection"); ?>
+				</div>
+				<div class="card-body">
+					<span class="card-title"><?php echo _("We need database connection to be able to create tables. Please check that your account has the permission needed to do that."); ?></span>
+					<p class="card-text">
+					<div class="row">
+						<div class="col form-floating">
+							<input type="text" name="server" value="<?php echo ((isset($_POST['server'])) ? htmlspecialchars($_POST['server'], ENT_QUOTES) : ''); ?>" id="server" placeholder="<?php echo _("Server"); ?>" class="form-control" required>
+							<label for="server"><?php echo _("Server"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="text" name="database" value="<?php echo ((isset($_POST['database'])) ? htmlspecialchars($_POST['database'], ENT_QUOTES) : ''); ?>" id="database" placeholder="<?php echo _("Database"); ?>" class="form-control" required>
+							<label for="database"><?php echo _("Database"); ?>: </label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="col form-floating">
+							<input type="text" name="dbuser" value="<?php echo ((isset($_POST['dbuser'])) ? htmlspecialchars($_POST['dbuser'], ENT_QUOTES) : ''); ?>" id="dbuser" placeholder="<?php echo _("User"); ?>" class="form-control" required>
+							<label for="dbuser"><?php echo _("User"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="password" name="dbpassword" value="<?php echo ((isset($_POST['dbpassword'])) ? htmlspecialchars($_POST['dbpassword'], ENT_QUOTES) : ''); ?>" id="dbpassword" placeholder="<?php echo _("Password"); ?>" class="form-control" required>
+							<label for="dbpassword"><?php echo _("Password"); ?>: </label>
+						</div>
+					</div>
+					</p>
+				</div>
+			</div>
+
+			<div class="card">
+				<div class="card-header text-center">
+					<?php echo _("Privacy Policy"); ?>
+				</div>
+				<div class="card-body">
+					<span class="card-title"><?php echo _("Since you are collecting personal information, the GDPR needs you to have a privacy policy. Enter the details below."); ?></span>
+					<p class="card-text">
+					<div class="row">
+						<div class="col form-floating">
+							<input type="text" name="policy_name" value="<?php echo ((isset($_POST['policy_name'])) ? htmlspecialchars($_POST['policy_name'], ENT_QUOTES) : ''); ?>" id="policy_name" placeholder="<?php echo _("Company name"); ?>" class="form-control" required>
+							<label for="policy_name"><?php echo _("Name"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="text" name="address" value="<?php echo ((isset($_POST['address'])) ? htmlspecialchars($_POST['address'], ENT_QUOTES) : ''); ?>" id="address" placeholder="<?php echo _("Full address"); ?>" class="form-control" required>
+							<label for="address"><?php echo _("Address"); ?>: </label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="col form-floating">
+							<input type="text" name="policy_mail" value="<?php echo ((isset($_POST['policy_mail'])) ? htmlspecialchars($_POST['policy_mail'], ENT_QUOTES) : ''); ?>" id="policy_mail" placeholder="<?php echo _("E-Mail"); ?>" class="form-control" required>
+							<label for="policy_mail"><?php echo _("E-Mail"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="text" name="policy_phone" value="<?php echo ((isset($_POST['policy_phone'])) ? htmlspecialchars($_POST['policy_phone'], ENT_QUOTES) : ''); ?>" id="policy_phone" placeholder="<?php echo _("Phone number"); ?>" class="form-control">
+							<label for="policy_phone"><?php echo _("Phone"); ?>: </label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="col form-floating">
+							<textarea class="form-control" id="who_we_are" rows="3" name="who_we_are" placeholder="<?php echo _("Some info about yourself"); ?>" value="<?php echo ((isset($_POST['who_we_are'])) ? htmlspecialchars($_POST['who_we_are'], ENT_QUOTES) : ''); ?>"></textarea>
+							<label for="who_we_are"><?php echo _("Who we are"); ?>: </label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<span><?php echo _("If you alredy have an existing Policy published, please provide the full Url to override the local policy definition. Leave blank to use the local definition"); ?></span>
+						<div class="col form-floating">
+							<input type="policy_url" name="policy_url" value="<?php echo ((isset($_POST['policy_url'])) ? htmlspecialchars($_POST['policy_url'], ENT_QUOTES) : ''); ?>" id="policy_url" placeholder="<?php echo _("External Policy Url"); ?>" class="form-control">
+							<label for="url"><?php echo _("External Policy Url"); ?>: </label>
+						</div>
+					</div>
+					</p>
+				</div>
+			</div>
+
+			<div class="card">
+				<div class="card-header text-center">
+					<?php echo _("User"); ?>
+				</div>
+				<div class="card-body">
+					<span class="card-title"><?php echo _("And finally, we need info to create a new user. You don't have to provide it, but then... No status page admin..."); ?></span>
+					<p class="card-text">
+					<div class="row">
+						<div class="col form-floating">
+							<input type="text" maxlength="50" name="name" value="<?php echo ((isset($_POST['name'])) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''); ?>" id="name" placeholder="<?php echo _("Name"); ?>" class="form-control" required>
+							<label for="name"><?php echo _("Name"); ?>: </label>
+						</div>
+						<div class="col form-floating">
+							<input type="text" maxlength="50" name="surname" value="<?php echo ((isset($_POST['surname'])) ? htmlspecialchars($_POST['surname'], ENT_QUOTES) : ''); ?>" id="surname" placeholder="<?php echo _("Surname"); ?>" class="form-control" required>
+							<label for="surname"><?php echo _("Surname"); ?>: </label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="col form-floating">
+							<input type="text" maxlength="50" name="username" value="<?php echo ((isset($_POST['username'])) ? htmlspecialchars($_POST['username'], ENT_QUOTES) : ''); ?>" id="username" placeholder="<?php echo _("Username"); ?>" class="form-control" required>
+							<label for="username"><?php echo _("Username"); ?>:</label>
+						</div>
+						<div class="col form-floating">
+							<input type="email" maxlength="60" name="email" value="<?php echo ((isset($_POST['email'])) ? htmlspecialchars($_POST['email'], ENT_QUOTES) : ''); ?>" id="email" placeholder="<?php echo _("Email"); ?>" class="form-control" required><input type="hidden" name="permission" value="0">
+							<label for="email"><?php echo _("Email"); ?>:</label>
+						</div>
+					</div>
+					<div class="row mt-3">
+						<div class="col form-floating">
+							<input type="password" name="password" value="<?php echo ((isset($_POST['password'])) ? htmlspecialchars($_POST['password'], ENT_QUOTES) : ''); ?>" id="password" placeholder="<?php echo _("Password"); ?>" class="form-control" required>
+							<label for="password"><?php echo _("Password"); ?>:</label>
+						</div>
+					</div>
+					</p>
+				</div>
+			</div>
+
+			<div class="card" style="border: none;">
 				<input type="hidden" value="0" name="permission">
 				<button type="submit" class="btn btn-success float-end"><?php echo _("Run install!"); ?></button>
 			</div>
-		</div>
-	</section>
-</form>
+		</form>
+	</div>
+</div>
 <?php
 Template::render_footer();