Add a brand new charming installation (for version 0.9) (#144)

* Add a brand new charming installation

* Fix alert position in setup requirements validation

* Add some missing definitions

* A distinction between bootstrap CSS classes and myaac classes

For CSS-styled messages

* Remove unused functions for messages

Co-authored-by: slawkens <slawkens@gmail.com>

admin/index.php

@@ -2,6 +2,9 @@
 // few things we'll need
 require '../common.php';
 
+define('ADMIN_PANEL', true);
+define('MYAAC_ADMIN', true);
+
 if(file_exists(BASE . 'config.local.php')) {
 	require_once BASE . 'config.local.php';
 }
@@ -12,8 +15,6 @@ if(file_exists(BASE . 'install') && (!isset($config['installed']) || !$config['i
 	throw new RuntimeException('Setup detected that <b>install/</b> directory exists. Please visit <a href="' . BASE_URL . 'install">this</a> url to start MyAAC Installation.<br/>Delete <b>install/</b> directory if you already installed MyAAC.<br/>Remember to REFRESH this page when you\'re done!');
 }
 
-define('ADMIN_PANEL', true);
-
 $content = '';
 
 // validate page

admin/tools/phpinfo.php

@@ -1,4 +1,6 @@
 <?php
+define('MYAAC_ADMIN', true);
+
 require '../../common.php';
 require SYSTEM . 'functions.php';
 require SYSTEM . 'init.php';

admin/tools/reload_data.php

@@ -22,6 +22,7 @@
  * @copyright 2020 MyAAC
  * @link      https://my-aac.org
  */
+define('MYAAC_ADMIN', true);
 
 require '../../common.php';
 require SYSTEM . 'functions.php';
@@ -42,4 +43,4 @@ require LOCALE . 'en/main.php';
 require LOCALE . 'en/install.php';
 
 DataLoader::setLocale($locale);
-DataLoader::load();
+DataLoader::load();

admin/tools/status.php

@@ -1,4 +1,6 @@
 <?php
+define('MYAAC_ADMIN', true);
+
 require '../../common.php';
 require SYSTEM . 'init.php';
 require SYSTEM . 'functions.php';

install/includes/database.php

@@ -6,12 +6,18 @@ $ots = POT::getInstance();
 require SYSTEM . 'database.php';
 
 if(!isset($db)) {
-	$database_error = $locale['step_database_error_mysql_connect'] . '<br/>' .
+	$database_error = '<p class="lead">' . $locale['step_database_error_mysql_connect'] . '</p>';
-			$locale['step_database_error_mysql_connect_2'] .
+	
-			'<ul>' .
+	$database_error .= '<p>' . $locale['step_database_error_mysql_connect_2'] . '</p>';
-				'<li>' . $locale['step_database_error_mysql_connect_3'] . '</li>' .
+
-				'<li>' . $locale['step_database_error_mysql_connect_4'] . '</li>' .
+	$database_error .= '<ul class="list-group">' .
-			'</ul>' . '<br/>' . $error;
+							'<li class="list-group-item list-group-item-warning">' . $locale['step_database_error_mysql_connect_3'] . '</li>' .
+							'<li class="list-group-item list-group-item-warning">' . $locale['step_database_error_mysql_connect_4'] . '</li>' .
+						'</ul>';
+
+	$database_error .= '<div class="alert alert-danger mt-4">
+							<span>' . $error . '</span>
+						</div>';
 }
 else {
 	if($db->hasTable('accounts'))

install/includes/functions.php

@@ -62,9 +62,9 @@ function next_buttons($previous = true, $next = true)
 		$ret .= '<input class="button" type="submit" onclick="document.getElementById(\'step\').value=\'' . $steps[$i + 1] . '\';" value="' . $locale['next'] . '" />';
 */
 	if($previous)
-		$ret .= '<input type="button" class="button" onclick="document.getElementById(\'step\').value=\'' . $steps[$i - 1] . '\'; this.form.submit();" value="&laquo; ' . $locale['previous'] . '" />';
+		$ret .= '<input type="button" class="button btn btn-primary m-2" onclick="document.getElementById(\'step\').value=\'' . $steps[$i - 1] . '\'; this.form.submit();" value="&laquo; ' . $locale['previous'] . '" />';
 	if($next)
-		$ret .= '<input type="button" class="button" onclick="document.getElementById(\'step\').value=\'' . $steps[$i + 1] . '\'; this.form.submit(); " value="' . $locale['next'] . ' &raquo;" />';
+		$ret .= '<input type="button" class="button btn btn-primary m-2" onclick="document.getElementById(\'step\').value=\'' . $steps[$i + 1] . '\'; this.form.submit(); " value="' . $locale['next'] . ' &raquo;" />';
 
 	$ret .= '</div>';
 	return $ret;

install/steps/1-welcome.php

@@ -1,7 +1,7 @@
 <?php
 defined('MYAAC') or die('Direct access not allowed!');
 if(isset($config['installed']) && $config['installed'] && !isset($_SESSION['saved'])) {
-	echo '<p class="warning">' . $locale['already_installed'] . '</p>';
+	echo '<div class="alert alert-warning"><span>' . $locale['already_installed'] . '</span></div>';
 }
 else {
 	unset($_SESSION['saved']);

install/steps/3-requirements.php

@@ -26,11 +26,11 @@ $extensions_optional = [
 function version_check($name, $ok, $info = '', $warning = false)
 {
 	global $failed;
-	echo '<p class="' . ($ok ? 'success' : ($warning ? 'warning' : 'error')) . '">' . $name;
+	echo '<div class="alert alert-' . ($ok ? 'success' : ($warning ? 'warning' : 'danger')) . '">' . $name;
 	if(!empty($info))
 		echo ': <b>' . $info . '</b>';
 
-	echo '</p>';
+	echo '</div>';
 	if(!$ok && !$warning)
 		$failed = true;
 }
@@ -67,11 +67,14 @@ foreach ($extensions_optional as $ext => $errorMsg) {
 	version_check(str_replace('$EXTENSION$', strtoupper($ext), $locale['step_requirements_extension']) , $loaded, $loaded ? $locale['loaded'] : $locale['not_loaded'] . '. ' . $errorMsg, true);
 }
 
-if($failed)
+echo '<div class="text-center m-3">';
-{
+
-	echo '<br/><b>' . $locale['step_requirements_failed'];
+if($failed) {
+	echo '<div class="alert alert-warning"><span>' . $locale['step_requirements_failed'] . '</span></div>';
 	echo next_form(true, false);
-}
+}else {
-else
 	echo next_form(true, true);
+}
+
+echo '</div>';
 ?>

install/steps/5-database.php

@@ -95,8 +95,10 @@ if(!$error) {
 }
 ?>
 
-<form action="<?php echo BASE_URL; ?>install/" method="post">
+<div class="text-center m-3">
-	<input type="hidden" name="step" id="step" value="admin" />
+	<form action="<?php echo BASE_URL; ?>install/" method="post">
-	<?php echo next_buttons(true, $error ? false : true);
+		<input type="hidden" name="step" id="step" value="admin" />
-	?>
+		<?php echo next_buttons(true, $error ? false : true);
-</form>
+		?>
+	</form>
+</div>

install/template/style.css

@@ -1,299 +1,13 @@
-* {
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
-	margin: 0; padding: 0;
+
-}
 body {
-	text-align: center;
+    font-family: 'Roboto', sans-serif;
-	font: 12px Verdana;
-	color: #000000;
-	background-color: #000000;
-}
-img {
-	border: 0;
 }
 
-.break {
+h1{
-	font-size: 0;
+    font-weight: 100 !important;
-	width: 0; height: 0;
-	clear: both;
-}
-.alignleft {
-	float: left;
-	margin: 4px 10px 5px 0;
-}
-.alignright {
-	float: right;
-	margin: 4px 0 5px 10px;
-}
-.aligncenter {
-	text-align: center;
 }
 
-/** BEGIN wrapper **/
+h3 {
-#wrapper {
+    font-weight: 300 !important;
-	background: #ffffff url(images/background.jpg) repeat-x 0 0;
+}
-	width: 980px;
-}
-
-#header {
-	margin-bottom: 10px;
-	border-bottom: 1px solid #eee;
-	padding-bottom: 15px;
-}
-
-#footer {
-	padding-top: 15px;
-	border-top: 1px solid #eee;
-	margin-top: 10px;
-	text-align: right;
-	color: #555;
-}
-
-#header h1 {
-	font-weight: bold;
-	margin: 0;
-	padding: 0;
-}
-
-#header span {
-	font-size: 25px;
-	color: #000;
-	font-weight: bold;
-	padding-left: 40px;
-	line-height: 80px;
-}
-
-#version {
-	float: right;
-	color: #000;
-	font-size: 17px;
-	padding-top: 25px;
-	padding-right: 5px;
-}
-
-/** BEGIN body **/
-#body {
-	background: url(images/wrapper.gif) repeat-y 0 0;
-}
-/** END body **/
-
-/** BEGIN content **/
-#content {
-	width: 642px;
-	float: left;
-	padding: 20px 18px 20px 20px;
-	color: #434242;
-}
-
-	/** begin headers **/
-	h1, h2, h3, h4, h5, h6 {
-		font-family: Tahoma;
-		margin-bottom: 10px;
-	}
-	h2, h3, h4, h5, h6 {
-		margin-top: 30px;
-	}
-	h1 { font-size: 2em; }
-	h2 { font-size: 1.6em; }
-	h3 { font-size: 1.3em; }
-	h4, h5, h6 { font-size: 1em; }
-	/** end headers **/
-	
-	/** begin messages **/
-	.error, .success, .note, .warning {
-		font-weight: bold;
-		font-size: 0.9em;
-		padding: 4px 10px 4px 24px;
-		background-repeat: no-repeat;
-		background-position: 5px 6px;
-		border-style: solid;
-		border-width: 1px;
-		line-height: 1.6em;
-		margin-bottom: 10px;
-	}
-	.error {
-		background-color: #FDD9D9;
-		background-image: url(images/error.gif);
-		border-color: #FBA3A3;
-		color: #D80303;
-	}
-	.success {
-		background-color: #E4FCD9;
-		background-image: url(images/success.gif);
-		border-color: #BFFDA3;
-		color: #35A502;
-	}
-	.note {
-		background-color: #DDEAFA;
-		background-image: url(images/note.gif);
-		border-color: #A3D8FD;
-		color: #026DA5;
-	}
-	.warning {
-		background-color: #FBF0B3;
-		background-image: url(images/warning.gif);
-		border-color: #FBBB95;
-		color: #FD6002;
-	}
-	/** end messages **/
-	
-	/** begin form **/
-	form {
-		border: 1px solid #DDDDDD;
-		padding: 16px;
-	}
-		form .input {
-			padding-top: 12px;
-			clear: both;
-		}
-		form .first { 
-			padding-top: 0;
-		}
-		form .input p {
-			margin-bottom: 7px !important;
-		}
-		form input {
-			margin-right: 5px;
-		}
-		form label {
-			margin-right: 10px;
-			color: #8B8B8B;
-		}
-		form input.text, form textarea {
-			border: 1px solid #BEBDBD;
-			font-size: 1em;
-			font-family: Verdana;
-			background-color: #F3F3F3;
-			color: #808080;
-			padding: 2px;
-			max-width: 100%;
-		}
-		.positive, .negative {
-			font-size: 0.9em;
-			font-weight: bold;
-			padding: 1px 0 0 20px;
-			background-repeat: no-repeat;
-			background-position: 0 0;
-			display: inline;
-			margin-top: 2px;
-		}
-		.positive {
-			background-image: url(images/positive.gif);
-			color: #35A502;
-		}
-		.negative {
-			background-image: url(images/negative.gif);
-			color: #D80303;
-		}
-		form textarea {
-			line-height: 1.6em;
-		}
-		form button, form input.button {
-			font-size: 0.9em;
-			font-family: Verdana;
-			font-weight: bold;
-			color: #ffffff;
-			background: #B6B4B4 url(images/button.gif) repeat-x 0 0;
-			border: 1px solid #B6B4B4;
-			padding: 5px 10px;
-		}
-	/** end form **/
-	
-	/** begin table **/
-	table {
-		
-	}
-		table th {
-			font-size: 0.9em;
-			color: #ffffff;
-			background-color: #679BC5;
-			padding: 2px 4px;
-			line-height: 1.6em;
-		}
-		table td {
-			line-height: 1.6em;
-			padding: 2px 4px;
-		}
-		table tr.odd td { background-color: #EEEEEE; }
-		table tr.even td { background-color: #E5E5E5; }
-		
-	/** end table **/
-	
-	/** begin paragraphs, lists, etc. **/
-	#content p {
-		line-height: 1.6em;
-		margin-bottom: 10px;
-	}
-	#content ul, #content ol {
-		list-style-position: inside;
-	}
-	#content li {
-		line-height: 1.6em;
-		padding: 2px 0 2px 0;
-	}
-	a {
-		color: #679BC5;
-	}
-	a:hover {
-		color: #ff0000;
-		text-decoration: none;
-	}
-	blockquote {
-		padding: 10px;
-		background-color: #eeeeee;
-		line-height: 1.6em;
-		border-width: 2px 0 1px;
-		border-style: solid;
-		border-color: #e0e0e0;
-	}
-	/** end paragraphs, lists, etc. **/
-
-/** END content **/
-
-/** BEGIN sidebar **/
-#sidebar {
-	width: 300px;
-	float: right;
-	padding: 10px 0;
-}
-	#sidebar h2 {
-		background: green url(images/sidehead.gif) no-repeat 0 0;
-		margin: 0 10px;
-		font-size: 1em;
-		color: #ffffff;
-		padding: 7px 10px;
-	}
-	#sidebar ul {
-		list-style-type: none;
-		background: #E0E0E0 url(images/sidebody.gif) no-repeat 0 bottom;
-		padding: 10px;
-		margin: 0 10px 10px;
-	}
-	#sidebar ul li {
-		padding: 4px 0 4px 14px;
-		background: none;
-		line-height: 1.6em;
-		font-size: 0.9em;
-		font-weight: bold;
-	}
-	#sidebar ul li a {
-		color: #000000;
-		text-decoration: none;
-	}
-	#sidebar ul li a:hover {
-		text-decoration: none;
-		color: #ff0000;
-	}
-	
-	#sidebar ul li a:active {
-		text-decoration: none;
-		color: #ff0000;
-	}
-	
-	#sidebar ul li current {
-		text-decoration: none;
-		color: #ff0000;
-	}
-	.current {
-		text-decoration: none;
-		color: #ff0000;
-	}

install/template/template.php

@@ -1,48 +1,74 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $locale['direction']; ?>" lang="<?php echo $locale['lang']; ?>" xml:lang="<?php echo $locale['lang']; ?>">
+<html dir="<?php echo $locale['direction']; ?>" lang="<?php echo $locale['lang']; ?>" xml:lang="<?php echo $locale['lang']; ?>">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $locale['encoding']; ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>MyAAC - <?php echo $locale['installation']; ?></title>
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 	<link rel="stylesheet" type="text/css" href="template/style.css" />
 	<script type="text/javascript" src="<?php echo BASE_URL; ?>tools/js/jquery.min.js"></script>
 </head>
 <body>
-	<div id="wrapper">
-		<!--div class="buffer"-->
-			<div id="header">
-				<h1>MyAAC <?php echo $locale['installation']; ?></h1>
-			</div>
 
-			<div id="body">
+	<div id="body" class="container">
+	
+		<header id="header" class="pt-5 pb-4 pb-sm-5">
+			<h1>MyAAC <?php echo $locale['installation']; ?></h1>
+		</header>
 
-				<div id="sidebar">
+		<div class="row">
-					<h2><?php echo $locale['steps']; ?></h2>
-					<ul>
-						<?php
-							$i = 0;
-							foreach($steps as $key => $value)
-								echo '<li' . ($step == $value ? ' class="current"' : '') . '>' . ++$i . '. ' . $locale['step_' . $value] . '</li>';
-						?>
-					</ul>
-				</div>
 
-				<div id="content">
+			<div id="sidebar" class="col-md-3">
+				<h3><?php echo $locale['steps']; ?></h3>
+				<ul class="list-group mt-4">
 					<?php
-						if(isset($locale['step_' . $step . '_title']))
+						$i = 0;
-							echo '<h1>' . $locale['step_' . $step . '_title'] . '</h1>';
+						foreach($steps as $key => $value){
-						else
+
-							echo '<h1>' . $locale['step_' . $step] . '</h1>';
+							if ($step == $value) {
-						echo $content;
+								$progress = ($i == 6) ? 100 : $i * 16;
+							}
+							
+							echo '<li' . ($step == $value ? ' class="list-group-item active"' : ' class="list-group-item"') . '>' . ++$i . '. ' . $locale['step_' . $value] . '</li>';
+						}
+							
 					?>
-				</div>
+				</ul>
-
-				<div class="break"></div>
 			</div>
-		<!--/div-->
+
+			<div id="content" class="col-md-9">
+
+				<?php
+					if(isset($locale['step_' . $step . '_title']))
+						echo '<h3 class="mb-4 mt-4 mt-md-0">' . $locale['step_' . $step . '_title'] . '</h3>';
+					else
+						echo '<h3 class="mb-4 mt-4 mt-md-0">' . $locale['step_' . $step] . '</h3>';
+				?>
+
+				<?php
+				if(!isset($config['installed'])):
+				?>
+				<div class="row">
+					<div class="col-md-12">
+						<div class="progress mb-2">
+							<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: <?php echo $progress; ?>%" role="progressbar" aria-valuenow="<?php echo $progress; ?>" aria-valuemin="0" aria-valuemax="100"></div>
+						</div>
+					</div>
+				</div>
+				<?php endif; ?>
+
+				<?php echo $content; ?>
+
+			</div>
+
+		</div>
+
+		<hr />
+
 	</div>
 
-	<div id="footer">
+	<footer id="footer" class="p-4">
 		<p style="text-align: center;"><?php echo base64_decode('UG93ZXJlZCBieSA8YSBocmVmPSJodHRwOi8vbXktYWFjLm9yZyIgdGFyZ2V0PSJfYmxhbmsiPk15QUFDLjwvYT4='); ?></p>
-	</div>
+	</footer>
 </body>
 </html>

install/tools/5-database.php

@@ -1,4 +1,6 @@
 <?php
+define('MYAAC_INSTALL', true);
+
 require_once '../../common.php';
 
 require SYSTEM . 'functions.php';
@@ -246,4 +248,4 @@ if($db->hasTable('z_forum')) {
 			success($locale['step_database_adding_field'] . ' z_forum.closed...');
 		}
 	}
-}
+}

install/tools/7-finish.php

@@ -1,4 +1,6 @@
 <?php
+define('MYAAC_INSTALL', true);
+
 require_once '../../common.php';
 
 require SYSTEM . 'functions.php';
@@ -68,4 +70,4 @@ $locale['step_finish_desc'] = str_replace('$ADMIN_PANEL$', generateLink(str_repl
 $locale['step_finish_desc'] = str_replace('$HOMEPAGE$', generateLink(str_replace('tools/', '', BASE_URL), $locale['step_finish_homepage'], true), $locale['step_finish_desc']);
 $locale['step_finish_desc'] = str_replace('$LINK$', generateLink('https://my-aac.org', 'https://my-aac.org', true), $locale['step_finish_desc']);
 
-success($locale['step_finish_desc']);
+success($locale['step_finish_desc']);

system/functions.php

@@ -23,10 +23,12 @@ function message($message, $type, $return)
 		return true;
 	}
 
-	if($return)
+	if($return) {
-		return '<div class="' . $type . '" style="margin-bottom:10px;">' . $message . '</div>';
+		// for install and admin pages use bootstrap classes
+		return '<div class="' . ((defined('MYAAC_INSTALL') || defined('MYAAC_ADMIN')) ? 'alert alert-' : '') . $type . '" style="margin-bottom:10px;">' . $message . '</div>';
+	}
 
-	echo '<div class="' . $type . '" style="margin-bottom:10px;">' . $message . '</div>';
+	echo '<div class="' . ((defined('MYAAC_INSTALL') || defined('MYAAC_ADMIN')) ? 'alert alert-' : '') . $type . '" style="margin-bottom:10px;">' . $message . '</div>';
 	return true;
 }
 function success($message, $return = false) {
@@ -39,28 +41,9 @@ function note($message, $return = false) {
     return message($message, 'note', $return);
 }
 function error($message, $return = false) {
-    return message($message, 'error', $return);
+    return message($message, ((defined('MYAAC_INSTALL') || defined('MYAAC_ADMIN')) ? 'danger' : 'error'), $return);
 }
-function message1($head, $message, $type, $icon , $return)
-{//return '<div class="' . $type . '">' . $message . '</div>';
-    if($return)
-        return '<div class="alert alert-'.$type.' alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h4><i class="icon fa fa-'.$icon.'"></i>  '.$head.':</h4>'.$message.'</div>';
 
-    echo '<div class="alert alert-'.$type.' alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><h4><i class="icon fa fa-'.$icon.'"></i> '.$head.':</h4>'.$message.'</div>';
-    return true;
-}
-function success1($message, $return = false) {
-    return message('Info', $message, 'success','success', $return);
-}
-function warning1($message, $return = false) {
-    return message('Warning',$message, 'warning','ban', $return);
-}
-function note1($message, $return = false) {
-    return message('Info',$message, 'info','info', $return);
-}
-function error1($message, $return = false) {
-    return message("Alert", $message, 'danger','check', $return);
-}
 function longToIp($ip)
 {
 	$exp = explode(".", long2ip($ip));

system/locale/en/install.php

@@ -20,7 +20,7 @@ $locale['not_loaded'] = 'Not loaded';
 $locale['loading_spinner'] = 'Please wait, installing...';
 $locale['importing_spinner'] = 'Please wait, importing data...';
 $locale['please_fill_all'] = 'Please fill all inputs!';
-$locale['already_installed'] = 'MyAAC has been already installed. Please delete <b>install/<b/> directory. If you want to reinstall MyAAC - please delete <strong>config.local.php</strong> file from the main directory and refresh the page.';
+$locale['already_installed'] = 'MyAAC has been already installed. Please delete <b>install/</b> directory. If you want to reinstall MyAAC - please delete <strong>config.local.php</strong> file from the main directory and refresh the page.';
 
 // welcome
 $locale['step_welcome'] = 'Welcome';

system/templates/install.admin.html.twig

@@ -1,32 +1,26 @@
-<style>
+{% if errors is not empty %}
-	tr, td {
+<div class="alert alert-danger">
-		border-bottom: 1px solid #ddd;
+	{% for error in errors %}
-		padding: 15px;
+		<span>{{ error }}</span>
-	}
+	{% endfor %}
-</style>
+</div>
+{% endif %}
+
 <form action="{{ constant('BASE_URL') }}install/" method="post" autocomplete="off">
 	<input type="hidden" name="step" id="step" value="finish" />
-	<table>
+	
-		{% for value in ['email', account, 'password', 'player_name'] %}
+	{% for value in ['email', account, 'password', 'player_name'] %}
-		<tr>
+	
-			<td>
+	<div class="form-group mb-2">
-				<label for="vars_{{ value }}">
+		<label for="vars_{{ value }}">{{ locale['step_admin_' ~ value] }}</label>
-					<span>{{ locale['step_admin_' ~ value] }}</span>
+		<input class="form-control" type="text" name="vars[{{ value }}]" id="vars_{{ value }}"{% if session['var_' ~ value] is not null %} value="{{ session['var_' ~ value] }}"{% endif %}/>
-				</label>
+		<small class="form-text text-muted">{{ locale['step_admin_' ~ value ~ '_desc']|raw }}</small>
-				<br/>
+	</div>
-				<input type="text" name="vars[{{ value }}]" id="vars_{{ value }}"{% if session['var_' ~ value] is not null %} value="{{ session['var_' ~ value] }}"{% endif %}/>
-			</td>
-			<td>
-				<em>{{ locale['step_admin_' ~ value ~ '_desc']|raw }}</em>
-			</td>
-		</tr>
-		{% endfor %}
-	</table>
 
-	{% if errors is defined %}
+	{% endfor %}
-		{% for error in errors %}
+
-			<p class="error">{{ error }}</p>
+	<div class="text-center m-3">
-		{% endfor %}
-	{% endif %}
 	{{ buttons|raw }}
+	</div>
+
 </form>

system/templates/install.config.html.twig

@@ -1,71 +1,51 @@
+{% if errors is not empty %}
+<div class="alert alert-danger">
+	{% for error in errors %}
+		<span>{{ error }}</span>
+	{% endfor %}
+</div>
+{% endif %}
+
 <form action="{{ constant('BASE_URL') }}install/" method="post" autocomplete="off">
 	<input type="hidden" name="step" id="step" value="database" />
-	<table>
-		{% for value in ['server_path', 'mail_admin'] %}
-		<tr>
-			<td>
-				<label for="vars_{{ value }}">
-					<span>{{ locale['step_config_' ~ value]  }}</span>
-				</label>
-				<br>
-				<input type="text" name="vars[{{ value }}]" id="vars_{{ value }}"{% if session['var_' ~ value] is not null %} value="{{ session['var_' ~ value] }}"{% endif %}/>
-			</td>
-			<td>
-				<em>{{ locale['step_config_' ~ value ~ '_desc'] }}</em>
-			</td>
-		</tr>
-		{% endfor %}
-		<tr>
-			<td>
-				<label for="vars_date_timezone">
-					<span>{{ locale.step_config_timezone }}</span>
-				</label>
-				<br/>
-				<select name="vars[date_timezone]" id="vars_date_timezone">
-					{% for timezone in timezones %}
-					<option value="{{ timezone }}"{% if (session['var_date_timezone'] is not null and session['var_date_timezone'] == timezone) or (session['var_date_timezone'] is null and timezone == 'Europe/Berlin') %} selected{% endif %}>{{ timezone }}</option>
-					{% endfor %}
-				</select>
-			</td>
-			<td>
-				<em>{{ locale.step_config_timezone_desc }}</em>
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<label for="vars_client">
-					<span>{{ locale.step_config_client }}</span>
-				</label>
-				<br/>
-				<select name="vars[client]" id="vars_client">
-					{% for id, version in clients %}
-					<option value="{{ id }}"{% if session['var_client'] is not null and session['var_client'] == id %} selected{% endif %}>{{ version }}</option>
-					{% endfor %}
-				</select>
-			</td>
-			<td>
-				<em>{{ locale.step_config_client_desc }}</em>
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<label for="vars_usage">
-					<span>{{ locale.step_config_usage }}</span>
-				</label>
-				<br/>
-				<input type="hidden" value="0" name="vars[usage]">
-				<input type="checkbox" name="vars[usage]" id="vars_usage" value="1"{% if session['var_usage'] is null or session['var_usage'] == 1 %} checked{% endif %}/>
-			</td>
-			<td>
-				<em>{{ locale.step_config_usage_desc }}</em>
-			</td>
-		</tr>
-	</table>
 
-	{% if errors is defined %}
+	{% for value in ['server_path', 'mail_admin'] %}
-		{% for error in errors %}
+	<div class="form-group mb-2">
-			<p class="error">{{ error }}</p>
+		<label for="vars_{{ value }}">{{ locale['step_config_' ~ value]  }}</label>
-		{% endfor %}
+		<input class="form-control" type="text" name="vars[{{ value }}]" id="vars_{{ value }}"{% if session['var_' ~ value] is not null %} value="{{ session['var_' ~ value] }}"{% endif %}/>
-	{% endif %}
+		<small class="form-text text-muted">{{ locale['step_config_' ~ value ~ '_desc'] }}</small>
+	</div>
+	{% endfor %}
+
+	<div class="form-group mb-2">
+		<label for="vars_date_timezone">{{ locale.step_config_timezone }}</label>
+		<select class="form-control" name="vars[date_timezone]" id="vars_date_timezone">
+			{% for timezone in timezones %}
+			<option value="{{ timezone }}"{% if (session['var_date_timezone'] is not null and session['var_date_timezone'] == timezone) or (session['var_date_timezone'] is null and timezone == 'Europe/Berlin') %} selected{% endif %}>{{ timezone }}</option>
+			{% endfor %}
+		</select>
+		<small class="form-text text-muted">{{ locale.step_config_timezone_desc }}</small>
+	</div>
+
+	<div class="form-group mb-2">
+		<label for="vars_client">{{ locale.step_config_client }}</label>
+		<select class="form-control" name="vars[client]" id="vars_client">
+			{% for id, version in clients %}
+			<option value="{{ id }}"{% if session['var_client'] is not null and session['var_client'] == id %} selected{% endif %}>{{ version }}</option>
+			{% endfor %}
+		</select>
+		<small class="form-text text-muted">{{ locale.step_config_client_desc }}</small>
+	</div>
+
+	<div class="form-group mb-2">
+		<label for="vars_usage">{{ locale.step_config_usage }}</label>
+		<input type="hidden" value="0" name="vars[usage]">
+		<input type="checkbox" name="vars[usage]" id="vars_usage" value="1"{% if session['var_usage'] is null or session['var_usage'] == 1 %} checked{% endif %}/>
+		<small class="form-text text-muted d-block">{{ locale.step_config_usage_desc }}</small>
+	</div>
+	
+	<div class="text-center m-3">
 	{{ buttons|raw }}
+	</div>
+
 </form>

system/templates/install.license.html.twig

@@ -1,6 +1,8 @@
 <form action="{{ constant('BASE_URL') }}install/" method="post">
 	<input type="hidden" name="step" id="step" value="requirements" />
-	<textarea rows="10" cols="80" readonly="1">{{ license }}</textarea>
+		<textarea rows="11" cols="80" readonly="1" class="form-control">{{ license }}</textarea>
 
+	<div class="text-center m-3">
 	{{ buttons|raw }}
+	</div>
 </form>

system/templates/install.welcome.html.twig

@@ -1,12 +1,17 @@
+<p class="lead">{{ locale.step_welcome_desc }}:</p>
+
 <form action="{{ constant('BASE_URL') }}install/" method="post">
 	<input type="hidden" name="step" id="step" value="license" />
-	<div class="input"><p>{{ locale.step_welcome_desc }}</p>
+	
-		<select name="lang">
+	<div class="input">
+		<select name="lang" class="form-control">
 			{% for locale_ in locales %}
 				<option value="{{ locale_.id }}"{% if (detected_locale is not null and locale_.id == detected_locale) or cookie_locale == locale_.id %} selected{% endif %}>{{ locale_.name }}</option>
 			{% endfor %}
 		</select>
 	</div>
 
+	<div class="text-center m-3">
 	{{ buttons|raw }}
+	</div>
 </form>