From 3ac1ef3fad157f3e8d200e5beffbb012f2a3363b Mon Sep 17 00:00:00 2001
From: 64j <64j@mail.ru>
Date: Thu, 20 Jul 2017 04:08:09 +0300
Subject: [PATCH] fix issues #73 update login form

---
 manager/includes/accesscontrol.inc.php |   3 +-
 manager/media/style/default/login.tpl  | 125 ++++++++++---------------
 2 files changed, 54 insertions(+), 74 deletions(-)

diff --git a/manager/includes/accesscontrol.inc.php b/manager/includes/accesscontrol.inc.php
index 6f239b41c9..653500619d 100644
--- a/manager/includes/accesscontrol.inc.php
+++ b/manager/includes/accesscontrol.inc.php
@@ -81,6 +81,7 @@
 	$modx->setPlaceholder('login_message', $_lang["login_message"]);
 	$modx->setPlaceholder('manager_theme_url', MODX_MANAGER_URL . 'media/style/' . $modx->config['manager_theme'] . '/');
 	$modx->setPlaceholder('year', date('Y'));
+	$modx->setPlaceholder('manager_theme_style', (isset($_COOKIE['MODX_themeColor']) ? $_COOKIE['MODX_themeColor'] : ''));
 
 	// andrazk 20070416 - notify user of install/update
 	if(isset($_GET['installGoingOn'])) {
@@ -188,4 +189,4 @@
 			, session_id(), $modx->getLoginUserID(), $_SESSION['mgrShortname'], $lasthittime, (string) $action, $itemid == null ? var_export(null, true) : $itemid);
 		$modx->db->query($sql);
 	}
-}
\ No newline at end of file
+}
diff --git a/manager/media/style/default/login.tpl b/manager/media/style/default/login.tpl
index 8a06d39aa0..220c3db9ee 100644
--- a/manager/media/style/default/login.tpl
+++ b/manager/media/style/default/login.tpl
@@ -6,85 +6,63 @@
 	<meta name="robots" content="noindex, nofollow" />
 	<meta name="viewport" content="width=device-width">
 	<link rel="icon" type="image/ico" href="media/style/[(manager_theme)]/images/favicon.ico" />
-	<style type="text/css">
-		html { font-size: 16px; height: 100% }
-		body { margin: 0; padding: 0 1rem; height: 100%; font-family: sans-serif; font-size: 0.8rem; line-height: 1.5; color: #666; background-color: #F2F2F2; }
-		html, body, #mx_loginbox { height: 100%; }
-		* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
-		a { color: #999; text-decoration: underline; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; }
-		a:hover { color: #444; text-decoration: none }
-		p { margin: 0; }
-		img { display: inline-block; max-width: 100% }
-		.text-center { text-align: center }
-		.clear { clear: both; width: 100%; }
-		#mx_loginbox { height: auto; min-height: 100%; width: 19rem; margin: 0 auto; padding-top: 7%; }
-		#mx_loginbox::before, #mx_loginbox::after { content: ""; display: table; width: 100% }
-		.logo { display: inline-block; width: 100%; padding-bottom: 1rem }
-		fieldset { display: block; margin: 0 0 2rem; padding: 1.5rem; background-color: #fff; border: none; border-radius: 0.15rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); }
-		label { display: block; font-size: 0.8rem; margin: 0 0 0.375rem; }
-		input.text, input[type=text] { font-family: inherit; border: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff; margin: 0 0 1rem; padding: 0 0.5rem; width: 100%; height: 2.2rem; line-height: 2.2rem; font-size: 1.2rem; border-radius: 0.15rem; box-shadow: 0 0 5px rgba(188, 188, 188, 0.15); outline: none; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; }
-		input.text:focus, input[type=text]:focus { border-color: #5b9bda }
-		input.checkbox { margin: 0.5rem 0 0 0.25rem; display: inline-block; width: 1rem; height: 1rem; vertical-align: text-bottom }
-		label.remtext, .caption { display: inline-block; font-size: 0.75rem; color: #999 }
-		#submitButton, #FMP-email_button { display: block; width: 100%; padding: 0 1rem; margin: 0; min-width: 6rem; height: 2.2rem; line-height: 2.2rem; outline: none; font-size: 0.8rem; color: #fff; cursor: pointer; background-color: #32AB9A; border: none; border-radius: 0.15rem; box-shadow: 0 0 5px rgba(188, 188, 188, 0.15); -webkit-transition-duration: 0.15s; transition-duration: 0.15s; }
-		#submitButton:hover, #FMP-email_button:hover { background-color: #35baa8; }
-		#submitButton:active, #FMP-email_button:active { background-color: #32AB9A; }
-		#FMP-email_button { margin-top: 0 }
-		.loginCaptcha { display: block; padding: 0.7rem 0 0.5rem; }
-		.caption { display: block }
-		.form-footer { }
-		#onManagerLoginFormRender > a:first-child, #onManagerLoginFormRender > label:first-child { display: inline-block; padding-top: 1rem; }
-		.loginCaptcha img { height: 60px }
-		.gpl { float: right; color: #B2B2B2; margin: -2em 0.5em 0.5em; font-size: 0.85em; }
-		.gpl a, .loginLicense a { color: #B2B2B2; }
-		/* animate */
-		.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
-		.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
-		.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
-		.scaleX { -webkit-animation: scaleX 3s ease-in-out infinite; animation: scaleX 3s ease-in-out infinite; }
-		@keyframes scaleX {
-			50% { -webkit-transform: scaleX(0.9); transform: scaleX(0.9) }
-			100% { -webkit-transform: scaleX(1); transform: scaleX(1) }
-			}
-		.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
-		@-webkit-keyframes zoomIn {
-			0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
-			50% { opacity: 1; }
-			}
-		@keyframes zoomIn {
-			0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
-			50% { opacity: 1; }
+	<link rel="stylesheet" type="text/css" href="media/style/[(manager_theme)]/style.css" />
+	<style>
+		html, body { min-height: 100%; height: 100%; }
+		.page { height: 100%; padding-top: 7%; }
+		.loginbox { width: 90%; max-width: 25rem; margin: 0 auto; }
+		.copyrights { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem 1rem; font-size: .675rem; color: #aaa; text-align: right }
+		.copyrights a { color: #777 }
+		#submitButton { float: right; }
+		#FMP-email_label { color: #818a91 }
+		#FMP-email { margin-bottom: 1rem }
+		#FMP-email_button { float: right; }
+		/* mainloader */
+		#mainloader { position: absolute; z-index: 50000; top: 0; left: 0; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 15% 0 0 0; background-color: rgba(255, 255, 255, 0.64); opacity: 0; visibility: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s }
+		#mainloader.show { opacity: 0.75; visibility: visible; -webkit-transition-duration: 0.1s; transition-duration: 0.1s }
+		#mainloader::before { content: ""; display: block; position: absolute; z-index: 1; left: 50%; top: 30%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; animation: rotate 2s linear infinite; box-shadow: 5px 5px 0 0 rgb(234, 132, 82), 14px -7px 0 0 rgba(111, 163, 219, 0.7), -7px 11px 0 0 rgba(112, 193, 92, 0.74), -11px -7px 0 0 rgba(147, 205, 99, 0.78); }
+		@keyframes rotate {
+			to { transform: rotate(360deg) }
 			}
 	</style>
 </head>
-<body>
-<div id="mx_loginbox">
-	<form method="post" name="loginfrm" id="loginfrm" action="processors/login.processor.php">
-		[+OnManagerLoginFormPrerender+]
-		<fieldset>
-			<div class="text-center">
+<body class="[+manager_theme_style+]">
+<div class="page">
+	<div class="tab-page loginbox">
+		<form method="post" name="loginfrm" id="loginfrm" class="container container-body" action="processors/login.processor.php">
+			[+OnManagerLoginFormPrerender+]
+			<div class="form-group text-center">
 				<a class="logo" href="../" title="[(site_name)]">
 					<img src="media/style/[(manager_theme)]/images/misc/login-logo.png" alt="[(site_name)]" id="logo" />
 				</a>
 			</div>
-			<label for="username">[+username+]</label>
-			<input type="text" class="text" name="username" id="username" tabindex="1" value="[+uid+]" />
-			<label for="password">[+password+]</label>
-			<input type="password" class="text" name="password" id="password" tabindex="2" value="" />
-			<p class="caption">[+login_captcha_message+]</p>
-			<p>[+captcha_image+]</p>
-			[+captcha_input+]
-			<div class="clear"></div>
-			<div class="form-footer">
-				<button type="submit" name="submitButton" class="login" id="submitButton">[+login_button+]</button>
+			<div class="form-group">
+				<label for="username" class="text-muted">[+username+]</label>
+				<input type="text" class="form-control" name="username" id="username" tabindex="1" value="[+uid+]" />
+			</div>
+			<div class="form-group">
+				<label for="password" class="text-muted">[+password+]</label>
+				<input type="password" class="form-control" name="password" id="password" tabindex="2" value="" />
+			</div>
+			<div class="clearfix">
+				<div class="caption">[+login_captcha_message+]</div>
+				<p>[+captcha_image+]</p>
+				[+captcha_input+]
+			</div>
+			<div class="form-group">
+				<label for="rememberme" class="text-muted">
+					<input type="checkbox" id="rememberme" name="rememberme" value="1" class="checkbox" [+remember_me+] /> [+remember_username+]</label>
+				<button type="submit" name="submitButton" class="btn btn-success float-xs-right" id="submitButton">[+login_button+]</button>
 			</div>
 			[+OnManagerLoginFormRender+]
-		</fieldset>
-	</form>
+		</form>
+	</div>
+	<div class="copyrights">
+		<p class="loginLicense"></p>
+		<div class="gpl">&copy; 2005-2017 by the <a href="http://evo.im/" target="_blank">EVO</a>. <strong>EVO</strong>&trade; is licensed under the GPL.</div>
+	</div>
 </div>
-<p class="loginLicense"></p>
-<div class="gpl">&copy; 2005-2017 by the <a href="http://evo.im/" target="_blank">EVO</a>. <strong>EVO</strong>&trade; is licensed under the GPL.</div>
-</body>
+<div id="mainloader"></div>
 <script type="text/javascript">
 	/* <![CDATA[ */
 	if(window.frames.length) {
@@ -97,7 +75,7 @@
 		form.username.focus()
 	}
 	form.onsubmit = function(e) {
-		form.submitButton.classList.add('scaleX');
+		document.getElementById('mainloader').classList.add('show');
 		var xhr = new XMLHttpRequest();
 		xhr.open('POST', 'processors/login.processor.php', true);
 		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
@@ -109,14 +87,15 @@
 				} else {
 					var cimg = document.getElementById('captcha_image');
 					if(cimg) cimg.src = 'includes/veriword.php?rand=' + Math.random();
-					form.submitButton.classList.remove('scaleX');
+					document.getElementById('mainloader').classList.remove('show');
 					alert(this.response);
 				}
 			}
 		};
-		xhr.send('ajax=1&username=' + encodeURIComponent(form.username.value) + '&password=' + encodeURIComponent(form.password.value) + (form.captcha_code ? '&captcha_code=' + encodeURIComponent(form.captcha_code.value) : ''));
+		xhr.send('ajax=1&username=' + encodeURIComponent(form.username.value) + '&password=' + encodeURIComponent(form.password.value) + (form.captcha_code ? '&captcha_code=' + encodeURIComponent(form.captcha_code.value) : '') + '&rememberme=' + form.rememberme.value);
 		e.preventDefault();
 	}
 	/* ]]> */
 </script>
-</html>
+</body>
+</html>
\ No newline at end of file