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>
2025-10-14 01:34:55 +02:00 · 2020-12-22 03:47:47 -03:00
parent 3beedc1747
commit 6f42a60e59
19 changed files with 195 additions and 470 deletions
--- a/install/includes/database.php
+++ b/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/>' .
-			$locale['step_database_error_mysql_connect_2'] .
-			'<ul>' .
-				'<li>' . $locale['step_database_error_mysql_connect_3'] . '</li>' .
-				'<li>' . $locale['step_database_error_mysql_connect_4'] . '</li>' .
-			'</ul>' . '<br/>' . $error;
+	$database_error = '<p class="lead">' . $locale['step_database_error_mysql_connect'] . '</p>';
+	
+	$database_error .= '<p>' . $locale['step_database_error_mysql_connect_2'] . '</p>';
+
+	$database_error .= '<ul class="list-group">' .
+							'<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'))
--- a/install/includes/functions.php
+++ b/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;
--- a/install/steps/1-welcome.php
+++ b/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']);
--- a/install/steps/3-requirements.php
+++ b/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 '<br/><b>' . $locale['step_requirements_failed'];
+echo '<div class="text-center m-3">';
+
+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>';
 ?>
--- a/install/steps/5-database.php
+++ b/install/steps/5-database.php
@@ -95,8 +95,10 @@ if(!$error) {
 }
 ?>

-<form action="<?php echo BASE_URL; ?>install/" method="post">
-	<input type="hidden" name="step" id="step" value="admin" />
-	<?php echo next_buttons(true, $error ? false : true);
-	?>
-</form>
+<div class="text-center m-3">
+	<form action="<?php echo BASE_URL; ?>install/" method="post">
+		<input type="hidden" name="step" id="step" value="admin" />
+		<?php echo next_buttons(true, $error ? false : true);
+		?>
+	</form>
+</div>
--- a/install/template/style.css
+++ b/install/template/style.css
@@ -1,299 +1,13 @@
-* {
-	margin: 0; padding: 0;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
+
 body {
-	text-align: center;
-	font: 12px Verdana;
-	color: #000000;
-	background-color: #000000;
-}
-img {
-	border: 0;
+    font-family: 'Roboto', sans-serif;
 }

-.break {
-	font-size: 0;
-	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;
+h1{
+    font-weight: 100 !important;
 }

-/** BEGIN wrapper **/
-#wrapper {
-	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;
-	}
+h3 {
+    font-weight: 300 !important;
+}
--- a/install/template/template.php
+++ b/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">
-<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $locale['direction']; ?>" lang="<?php echo $locale['lang']; ?>" xml:lang="<?php echo $locale['lang']; ?>">
+<!DOCTYPE html>
+<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">
-					<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 class="row">

-				<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']))
-							echo '<h1>' . $locale['step_' . $step . '_title'] . '</h1>';
-						else
-							echo '<h1>' . $locale['step_' . $step] . '</h1>';
-						echo $content;
+						$i = 0;
+						foreach($steps as $key => $value){
+
+							if ($step == $value) {
+								$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>
-
-				<div class="break"></div>
+				</ul>
 			</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>
--- a/install/tools/5-database.php
+++ b/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...');
 		}
 	}
-}
+}
--- a/install/tools/7-finish.php
+++ b/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']);