N°2311 - Login Page extensibility (CSS reworked)

2026-04-22 01:58:47 +02:00 · 2019-09-10 08:40:28 +02:00
parent cb772a9527
commit 19d9c69fb8
17 changed files with 342 additions and 194 deletions
--- a/application/loginform.class.inc.php
+++ b/application/loginform.class.inc.php
@@ -121,7 +121,7 @@ class LoginForm extends AbstractLoginFSMExtension implements iLoginDataExtension
 		);
 		$oLoginData->AddBlockData('login_input', new LoginBlockData('loginforminput.html.twig', $aData));
 		$oLoginData->AddBlockData('login_submit', new LoginBlockData('loginformsubmit.html.twig'));
-		$oLoginData->AddBlockData('login_footer', new LoginBlockData('loginformfooter.html.twig'));
+		$oLoginData->AddBlockData('login_form_footer', new LoginBlockData('loginformfooter.html.twig'));

 		$bEnableResetPassword = empty(MetaModel::GetConfig()->Get('forgot_password')) ? true : MetaModel::GetConfig()->Get('forgot_password');
 		$sResetPasswordUrl = utils::GetAbsoluteUrlAppRoot() . 'pages/UI.php?loginop=forgot_pwd';
--- a/css/login.css
+++ b/css/login.css
@@ -1,68 +1,193 @@
@CHARSET "UTF-8";
-body {
-	background: #eee;
-	margin: 0;
-	padding: 0;
+
+html,body {
+	height: 100%;
 }
-#login-logo {
-	margin-top: 150px;
-	width: 300px;
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	margin-left: auto;
-	margin-right: auto;
-	background: #f6f6f1;
-	height: 54px;
-	border-top: 1px solid #000;
-	border-left: 1px solid #000;
-	border-right: 1px solid #000;
-	border-bottom: 0;
-	text-align: center;
-}
-@media (max-height: 700px)
-{ 
-	#login-logo {
-		margin-top: 0;
-	} 
-	h1 {
-		margin-top: 0;
-	}
-}
-#login-logo img {
-	border: 0;
-}
-#login {
-	width: 300px;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 20px;
-	background-color: #fff;
-	border-bottom: 1px solid #000;
-	border-left: 1px solid #000;
-	border-right: 1px solid #000;
-	border-top: 0;
-	text-align: center;
-}
-#login table {
-	width: 100%;
-}
-#pwd, #user, #old_pwd, #new_pwd, #retype_new_pwd {
-	width: 10em;
-}
-.center {
-	text-align: center;
+
+#login-title {
+	width: 70%;
+	margin-left: 15%;
 }
+
 h1 {
 	color: #1C94C4;
 	font-size: 16pt;
 }
+
+a {
+	text-decoration: none;
+	color: #1c94c4;
+	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+}
+
+a:hover {
+	text-decoration: underline;
+	color: #ea7d1e;
+}
+
+#login-body {
+	background: #eee;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	position: relative;
+}
+
+#login-header {
+}
+
+#login-logo, #login-content {
+	width: 350px;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+}
+
+#login-logo {
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	height: 54px;
+	margin-top: 150px;
+}
+
+#login-content {
+	padding: 20px;
+	background-color: #fff;
+	border: 2px solid #CBD2D9;
+	border-radius: 4px;
+	margin-top: 224px;
+}
+
+@media (max-height: 700px)
+{
+	#login-logo {
+		margin-top: 0;
+	}
+	#login-content {
+		margin-top: 74px;
+	}
+	h1 {
+		margin-top: 0;
+	}
+}
+
+#login-logo img {
+	border: 0;
+}
+
+#login-form {
+	padding-top: 1em;
+}
+
+#login-additional-content {
+	position: absolute;
+	left: 0;
+	top: 0;
+	margin-top: 150px;
+}
+
+#login-form-content > div {
+	width: 70%;
+	margin-left: 15%;
+	color: #37322f;
+	font-size: 12px;
+	margin-top: 10px;
+}
+
+#login-form-content .divider {
+	margin-top: 17px;
+}
+
+#login-form-content .divider hr {
+	margin-left:auto;
+	margin-right:auto;
+	width:40%;
+	color: #eee;
+}
+
+#login-form-content .divider hr.left {
+	float:left;
+}
+
+#login-form-content .divider hr.right {
+	float:right;
+}
+
+#login-input > div {
+	text-align: left;
+	margin-top: 10px;
+}
+
+#login-input input {
+	background-color: #fff;
+	height: 2em;
+	padding: 0.1em 1em;
+	border: solid 2px #DDD;
+	border-radius: 0.25em;
+	width: calc(100% - 2em - 4px);
+}
+
+#login-submit.forgotpwd-submit input {
+	width: 49%;
+}
+
+#login-submit input.login-submit-secondary {
+	background-color: #e0e0e0;
+	color: #333a4bf5;
+}
+
+#login-submit input {
+	background-color: #333a4bf5;
+	padding: 0.1em 1em;
+	border-radius: 0.25em;
+	width: 100%;
+	color: #eee;
+	border: 0;
+	height: 2.2em;
+	margin-top: 10px;
+	cursor: pointer;
+}
+
+
+.center {
+	text-align: center;
+}
+
 .v-spacer {
 	padding-top: 1em;
 }
+
 .sso-button {
-	width: 100%;
-	margin-bottom: 0.5em;
+	margin: 5px 0px;
+	position: relative;
+	cursor: pointer;
+	padding: 0.7em 0.5em;
+	border-radius: 0.25em;
+
+	background-color: #E4E7EB;
+	filter: grayscale(1) opacity(0.8);
+	transition-duration: 750ms;
+}
+
+.sso-button:hover {
+	filter: grayscale(0) opacity(1);
+}
+
+.sso-image {
+	position: absolute;
+	left: 5%;
+	height: 1em;
+	margin-right: 1em;
+	top: 0;
+	bottom: 0;
+	margin-top: auto;
+	margin-bottom: auto;
 }

--- a/datamodels/2.x/authent-cas/view/cas_css.css.twig
+++ b/datamodels/2.x/authent-cas/view/cas_css.css.twig
@@ -1,18 +1,2 @@
 {# @copyright   Copyright (C) 2010-2019 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-
-.cas_button {
-	width: 19em;
-	cursor: pointer;
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0.5em;
-	background-color: #eee;
-	border-radius: 0.25em;
-}
-
-.cas_image {
-	height: 1em;
-	vertical-align: middle;
-	margin-right: 1em;
-}
--- a/datamodels/2.x/authent-cas/view/cas_sso_button.html.twig
+++ b/datamodels/2.x/authent-cas/view/cas_sso_button.html.twig
@@ -1,33 +1,27 @@
 {# @copyright   Copyright (C) 2010-2019 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

-<tr>
-	<td class="center" colspan="2">
-		<div class="sso-button">
-			<div class="cas_button" title="{{ aData.sTooltip }}" onclick="$('#login_mode').val('{{ aData.sLoginMode }}'); $('#login_form').submit(); return false;">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 336.82 167.83" class="logo cas_image">
-					<defs>
-						<style>
-							.cls-1 {
-								fill: #024d71;
-							}
-							.cls-2 {
-								fill: #74c163;
-							}
-						</style>
-					</defs>
-					<title>{{ aData.sTooltip }}</title>
-					<g id="Layer_2" data-name="Layer 2">
-						<path class="cls-1" d="M217.72,469.85c-17.68,1.31-38.31,1-54.18-7.87-12.59-7-23.71-18.52-28.72-32.14a82,82,0,0,1-4.49-27.49c0-36.26,16.11-64.23,40.29-80.34,16.59-11.38,36-16.83,58.54-16.83,17.3,0,30.34,4,35.08,6.64l-9.48,27.73c-4.5-2.38-15.17-5.22-28.92-5.22s-26.78,4.27-36.5,12.33c-13.27,11.13-22,29.39-22,51.66,0,25.6,14.46,42.67,42.43,42.67a161.48,161.48,0,0,0,22.38-1.19Z" transform="translate(-130.33 -305.18)"></path>
-						<path class="cls-1" d="M322.77,398.75l-2.72-30.4c-.71-8.76-1.42-21.56-2.14-31.28h-.71c-4,9.72-8.53,22-12.8,31.28l-13.69,30.08-13.53,33.43-17.33,38.41h-36.5l78-159.75h43.85l18.49,159.75H327.87l-3.05-38.12Z" transform="translate(-130.33 -305.18)"></path>
-						<path class="cls-1" d="M364.31,438.85c12.27,3.81,21.29,5.19,36.22,5.19,13,0,20.87-6.71,20.87-19,0-9.24-6.87-14.93-21.57-22.75-16.82-9-32.94-21.8-32.94-42.42,0-32.24,28-51.91,62.81-51.91,19.19,0,30.57,4.27,37.44,7.82l-10.66,28.44a62.94,62.94,0,0,0-29.63-6.87c-15.88,0-24.17,7.82-24.17,16.59,0,9.48,9.72,15.17,23.23,22.75,19.43,10.19,31.52,23.23,31.52,42.43,0,35.55-29.44,55.72-64.71,53.8a231.52,231.52,0,0,1-24.78-2.61Z" transform="translate(-130.33 -305.18)"></path>
-					</g>
-					<g id="swoosh">
-						<path class="cls-2" d="M257.45,432.24a41.64,41.64,0,0,1,13.11-.32,39.17,39.17,0,0,1,16.89,6.2l0,0c10.55-15,29.11-25,50.24-25,19.75,0,37.34,8.85,48.16,22.28l1-.77c-12.85-17.31-37.44-29-65.67-29-26.92,0-50.54,10.65-63.81,26.65Z" transform="translate(-130.33 -305.18)"></path>
-					</g>
-				</svg>
-				{{ aData.sLabel }}
-			</div>
-		</div>
-	</td>
-</tr>
+<div class="sso-button" title="{{ aData.sTooltip }}" onclick="$('#login_mode').val('{{ aData.sLoginMode }}'); $('#login_form').submit(); return false;">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 336.82 167.83" class="logo sso-image">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #024d71;
+				}
+				.cls-2 {
+					fill: #74c163;
+				}
+			</style>
+		</defs>
+		<title>{{ aData.sTooltip }}</title>
+		<g id="Layer_2" data-name="Layer 2">
+			<path class="cls-1" d="M217.72,469.85c-17.68,1.31-38.31,1-54.18-7.87-12.59-7-23.71-18.52-28.72-32.14a82,82,0,0,1-4.49-27.49c0-36.26,16.11-64.23,40.29-80.34,16.59-11.38,36-16.83,58.54-16.83,17.3,0,30.34,4,35.08,6.64l-9.48,27.73c-4.5-2.38-15.17-5.22-28.92-5.22s-26.78,4.27-36.5,12.33c-13.27,11.13-22,29.39-22,51.66,0,25.6,14.46,42.67,42.43,42.67a161.48,161.48,0,0,0,22.38-1.19Z" transform="translate(-130.33 -305.18)"></path>
+			<path class="cls-1" d="M322.77,398.75l-2.72-30.4c-.71-8.76-1.42-21.56-2.14-31.28h-.71c-4,9.72-8.53,22-12.8,31.28l-13.69,30.08-13.53,33.43-17.33,38.41h-36.5l78-159.75h43.85l18.49,159.75H327.87l-3.05-38.12Z" transform="translate(-130.33 -305.18)"></path>
+			<path class="cls-1" d="M364.31,438.85c12.27,3.81,21.29,5.19,36.22,5.19,13,0,20.87-6.71,20.87-19,0-9.24-6.87-14.93-21.57-22.75-16.82-9-32.94-21.8-32.94-42.42,0-32.24,28-51.91,62.81-51.91,19.19,0,30.57,4.27,37.44,7.82l-10.66,28.44a62.94,62.94,0,0,0-29.63-6.87c-15.88,0-24.17,7.82-24.17,16.59,0,9.48,9.72,15.17,23.23,22.75,19.43,10.19,31.52,23.23,31.52,42.43,0,35.55-29.44,55.72-64.71,53.8a231.52,231.52,0,0,1-24.78-2.61Z" transform="translate(-130.33 -305.18)"></path>
+		</g>
+		<g id="swoosh">
+			<path class="cls-2" d="M257.45,432.24a41.64,41.64,0,0,1,13.11-.32,39.17,39.17,0,0,1,16.89,6.2l0,0c10.55-15,29.11-25,50.24-25,19.75,0,37.34,8.85,48.16,22.28l1-.77c-12.85-17.31-37.44-29-65.67-29-26.92,0-50.54,10.65-63.81,26.65Z" transform="translate(-130.33 -305.18)"></path>
+		</g>
+	</svg>
+	{{ aData.sLabel }}
+</div>
--- a/dictionaries/en.dictionary.itop.ui.php
+++ b/dictionaries/en.dictionary.itop.ui.php
@@ -545,7 +545,7 @@ Dict::Add('EN US', 'English', 'English', array(
 	'UI:ResetPwd-Ready' => 'The password has been changed.',
 	'UI:ResetPwd-Login' => 'Click here to login...',

-	'UI:Login:About' => '',
+	'UI:Login:About' => 'Powered by iTop by Combodo',
 	'UI:Login:ChangeYourPassword' => 'Change Your Password',
 	'UI:Login:OldPasswordPrompt' => 'Old password',
 	'UI:Login:NewPasswordPrompt' => 'New password',
--- a/templates/login/base.html.twig
+++ b/templates/login/base.html.twig
@@ -4,20 +4,32 @@

 {% block body %}
 	{% import "macros.twig" as Macro %}
-	{% block login_logo %}
-		<div id="login-logo">
-			<a href="{{ sIconUrl }}">
-				<img title="{{ sVersionShort }}" src="{{ sDisplayIcon }}" alt="logo"/>
-			</a>
-		</div>
-	{% endblock login_logo %}
-	{% block login_content %}
-	{% endblock login_content %}
-	{% block login_footer %}
-		<div id="login-footer">
-		{{ Macro.BlockData(aPluginFormData, 'login_footer') }}
-		</div>
-	{% endblock login_footer %}
+	<div id="login-body">
+		{% block login_header %}
+			<div id="login-header">
+				{{ Macro.BlockData(aPluginFormData, 'login_header') }}
+			</div>
+		{% endblock login_header %}
+		{% block login_logo %}
+			<div id="login-logo">
+				<a href="{{ sIconUrl }}">
+					<img title="{{ sVersionShort }}" src="{{ sDisplayIcon }}" alt="logo"/>
+				</a>
+			</div>
+		{% endblock login_logo %}
+		{% block login_content %}
+		{% endblock login_content %}
+		{% block login_additional_content %}
+			<div id="login-additional-content">
+				{{ Macro.BlockData(aPluginFormData, 'login_additional_content') }}
+			</div>
+		{% endblock login_additional_content %}
+		{% block login_footer %}
+			<div id="login-footer">
+				{{ Macro.BlockData(aPluginFormData, 'login_footer') }}
+			</div>
+		{% endblock login_footer %}
+	</div>
 {% endblock body %}

 {% block script %}
--- a/templates/login/login.html.twig
+++ b/templates/login/login.html.twig
@@ -5,7 +5,7 @@

 {% block login_content %}
 	{% import "macros.twig" as Macro %}
-	<div id="login">
+	<div id="login-content">
 	{% block login_title %}
 		<div id="login-title">
 			<h1>{{ 'UI:Login:Welcome'|dict_s }}</h1>
@@ -19,23 +19,38 @@
 	{% block login_form %}
 		<div id="login-form">
 			<form id="login_form" method="post">
-				<table>
+				<div id="login-form-content">
 					{% block login_sso_buttons %}
-						{{ Macro.BlockData(aPluginFormData, 'login_sso_buttons', '<tr><td class="center" colspan="2">' ~ 'UI:Login:SeparatorOr'|dict_s ~ '</td></tr>') }}
+						<div id="login-sso-buttons">
+							{{ Macro.BlockData(aPluginFormData, 'login_sso_buttons', '<div class="divider"><hr class="left"/>' ~ 'UI:Login:SeparatorOr'|dict_s ~ '<hr class="right"/></div>') }}
+						</div>
 					{% endblock login_sso_buttons %}
 					{% block login_input %}
-						{{ Macro.BlockData(aPluginFormData, 'login_input') }}
+						<div id="login-input">
+							{{ Macro.BlockData(aPluginFormData, 'login_input') }}
+						</div>
 					{% endblock login_input %}
 					{% block login_submit %}
-						{{ Macro.BlockData(aPluginFormData, 'login_submit') }}
+						<div id="login-submit">
+							{{ Macro.BlockData(aPluginFormData, 'login_submit') }}
+						</div>
 					{% endblock login_submit %}
 					{% block login_additional_controls %}
-						{{ Macro.BlockData(aPluginFormData, 'login_additional_controls') }}
+						<div id="login-additional-controls">
+							{{ Macro.BlockData(aPluginFormData, 'login_additional_controls') }}
+						</div>
 					{% endblock login_additional_controls %}
 					{% block login_links %}
-						{{ Macro.BlockData(aPluginFormData, 'login_links') }}
+						<div id="login-links">
+							{{ Macro.BlockData(aPluginFormData, 'login_links') }}
+						</div>
 					{% endblock login_links %}
-				</table>
+					{% block login_form_footer %}
+						<div id="login-form-footer">
+							{{ Macro.BlockData(aPluginFormData, 'login_form_footer') }}
+						</div>
+					{% endblock login_form_footer %}
+				</div>
 				<input type="hidden" id="login_mode" name="login_mode" value="form" />
 				<input type="hidden" id="login_op" name="loginop" value="login" />
 				{% for sName, sValue in aPreviousPostedVars %}
--- a/templates/login/loginformfooter.html.twig
+++ b/templates/login/loginformfooter.html.twig
@@ -1,4 +1,6 @@
 {# @copyright   Copyright (C) 2010-2019 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

-{{ 'UI:Login:About'|dict_s }}
+<div>
+	{{ 'UI:Login:About'|dict_s }}
+</div>
--- a/templates/login/loginforminput.html.twig
+++ b/templates/login/loginforminput.html.twig
@@ -1,19 +1,11 @@
 {# @copyright   Copyright (C) 2010-2019 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

-<tr>
-	<td class="v-spacer" style="text-align:right">
+<div>
 		<label for="user">{{ 'UI:Login:UserNamePrompt'|dict_s }}</label>
-	</td>
-	<td style="text-align:left">
 		<input id="user" type="text" name="auth_user" value="{{ aData.sAuthUser }}" />
-	</td>
-</tr>
-<tr>
-	<td style="text-align:right">
+</div>
+<div>
 		<label for="pwd">{{ 'UI:Login:PasswordPrompt'|dict_s }}</label>
-	</td>
-	<td style="text-align:left">
 		<input id="pwd" type="password" name="auth_pwd" value="{{ aData.sAuthPwd }}" />
-	</td>
-</tr>
+</div>
--- a/templates/login/loginformlinks.html.twig
+++ b/templates/login/loginformlinks.html.twig
@@ -2,9 +2,7 @@
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

 {% if aData.bEnableResetPassword %}
-	<tr>
-		<td colspan="2" class="center v-spacer">
-			<a href="{{ aData.sResetPasswordUrl }}" target="_blank">{{ 'UI:Login:ForgotPwd'|dict_s }}</a>
-		</td>
-	</tr>
+	<div class="v-spacer">
+		<a href="{{ aData.sResetPasswordUrl }}" target="_blank">{{ 'UI:Login:ForgotPwd'|dict_s }}</a>
+	</div>
 {%  endif %}
--- a/templates/login/loginformsubmit.html.twig
+++ b/templates/login/loginformsubmit.html.twig
@@ -1,10 +1,6 @@
 {# @copyright   Copyright (C) 2010-2019 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}

-<tr>
-	<td colspan="2" class="center v-spacer">
-		<span class="btn_border">
-			<input type="submit" value="{{ 'UI:Button:Login'|dict_s }}" />
-		</span>
-	</td>
-</tr>
+<div>
+	<input type="submit" value="{{ 'UI:Button:Login'|dict_s }}" />
+</div>
--- a/templates/login/logout.html.twig
+++ b/templates/login/logout.html.twig
@@ -4,7 +4,7 @@
 {% extends "base.html.twig" %}

 {% block login_content %}
-	<div id="login">
+	<div id="login-content">
 		<div id="login-title">
 			<h1>{{ sTitle }}</h1>
 			<p><a href="{{ sUrl }}">{{ sMessage }}</a></p>
--- a/templates/login/password/changepwdform.html.twig
+++ b/templates/login/password/changepwdform.html.twig
@@ -4,19 +4,19 @@
 {% extends "base.html.twig" %}

 {% block login_content %}
-	<div id="login">
-	<h1>{{ 'UI:Login:ChangeYourPassword'|dict_s }}</h1>
-	{% if bFailedLogin %}
-		<p class="hilite">{{ 'UI:Login:IncorrectOldPassword'|dict_s }}</p>
-	{% endif %}
-	<form method="post">
-		<table>
-			<tr><td style="text-align:right"><label for="old_pwd">{{ 'UI:Login:OldPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="old_pwd" name="old_pwd" value="" /></td></tr>
-			<tr><td style="text-align:right"><label for="new_pwd">{{ 'UI:Login:NewPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="new_pwd" name="new_pwd" value="" /></td></tr>
-			<tr><td style="text-align:right"><label for="retype_new_pwd">{{ 'UI:Login:RetypeNewPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="retype_new_pwd" name="retype_new_pwd" value="" /></td></tr>
-			<tr><td colspan="2" class="center v-spacer"><span class="btn_border"><input type="button" onClick="GoBack();" value="{{ 'UI:Button:Cancel'|dict_s }}" /></span>&nbsp;&nbsp;<span class="btn_border"><input type="submit" onClick="return DoCheckPwd();" value="{{ 'UI:Button:ChangePassword'|dict_s }}" /></span></td></tr>
-			</table>
-		<input type="hidden" name="loginop" value="do_change_pwd" />
+	<div id="login-content">
+		<h1>{{ 'UI:Login:ChangeYourPassword'|dict_s }}</h1>
+		{% if bFailedLogin %}
+			<p class="hilite">{{ 'UI:Login:IncorrectOldPassword'|dict_s }}</p>
+		{% endif %}
+		<form method="post">
+			<div id="login-form-content">
+				<tr><td style="text-align:right"><label for="old_pwd">{{ 'UI:Login:OldPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="old_pwd" name="old_pwd" value="" /></td></tr>
+				<tr><td style="text-align:right"><label for="new_pwd">{{ 'UI:Login:NewPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="new_pwd" name="new_pwd" value="" /></td></tr>
+				<tr><td style="text-align:right"><label for="retype_new_pwd">{{ 'UI:Login:RetypeNewPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="retype_new_pwd" name="retype_new_pwd" value="" /></td></tr>
+				<tr><td colspan="2" class="center v-spacer"><span class="btn_border"><input type="button" onClick="GoBack();" value="{{ 'UI:Button:Cancel'|dict_s }}" /></span>&nbsp;&nbsp;<span class="btn_border"><input type="submit" onClick="return DoCheckPwd();" value="{{ 'UI:Button:ChangePassword'|dict_s }}" /></span></td></tr>
+				</div>
+			<input type="hidden" name="loginop" value="do_change_pwd" />
 		</form>
 	</div>
 {% endblock %}
--- a/templates/login/password/forgotpwdform.html.twig
+++ b/templates/login/password/forgotpwdform.html.twig
@@ -4,19 +4,33 @@
 {% extends "base.html.twig" %}

 {% block login_content %}
-	<div id="login">
-		<h1>{{ 'UI:Login:ForgotPwdForm'|dict_s }}</h1>
-		<p>{{ 'UI:Login:ForgotPwdForm+'|dict_s }}</p>
-		{% if bFailedToReset %}
-			<p class="hilite">{{ 'UI:Login:ResetPwdFailed'|dict_format(sFailureReason) }}</p>
-		{% endif %}
-		<form method="post">
-			<table>
-				<tr><td colspan="2" class="center"><label for="user">{{ 'UI:Login:UserNamePrompt'|dict_s }}:</label><input id="user" type="text" name="auth_user" value="{{ sAuthUser }}" /></td></tr>
-				<tr><td colspan="2" class="center v-spacer"><span class="btn_border"><input type="button" onClick="window.close();" value="{{ 'UI:Button:Cancel'|dict_s }}" /></span>&nbsp;&nbsp;<span class="btn_border"><input type="submit" value="{{ 'UI:Login:ResetPassword'|dict_s }}" /></span></td></tr>
-			</table>
-			<input type="hidden" name="loginop" value="forgot_pwd_go" />
-		</form>
+	<div id="login-content">
+		<div id="login-title">
+			<h1>{{ 'UI:Login:ForgotPwdForm'|dict_s }}</h1>
+			<p>{{ 'UI:Login:ForgotPwdForm+'|dict_s }}</p>
+			{% if bFailedToReset %}
+				<p class="hilite">{{ 'UI:Login:ResetPwdFailed'|dict_format(sFailureReason) }}</p>
+			{% endif %}
+		</div>
+		<div id="login-form">
+			<form method="post">
+				<div id="login-form-content">
+					<div id="login-input">
+						<div>
+							<label for="user">{{ 'UI:Login:UserNamePrompt'|dict_s }}:</label>
+							<input id="user" type="text" name="auth_user" value="{{ sAuthUser }}" />
+						</div>
+					</div>
+					<div id="login-submit" class="forgotpwd-submit">
+						<div>
+							<input class="login-submit-secondary" type="button" onClick="window.close();" value="{{ 'UI:Button:Cancel'|dict_s }}" />
+							<input type="submit" value="{{ 'UI:Login:ResetPassword'|dict_s }}" />
+						</div>
+					</div>
+				</div>
+				<input type="hidden" name="loginop" value="forgot_pwd_go" />
+			</form>
+		</div>
 	</div>
 {% endblock %}

--- a/templates/login/password/forgotpwdsent.html.twig
+++ b/templates/login/password/forgotpwdsent.html.twig
@@ -4,7 +4,7 @@
 {% extends "base.html.twig" %}

 {% block login_content %}
-<div id="login">
+<div id="login-content">
 	<h1>{{ 'UI:Login:ForgotPwdForm'|dict_s }}</h1>
 	<p>{{ 'UI:ResetPwd-EmailSent'|dict_s }}</p>
 	<form method="post">
--- a/templates/login/password/resetpwddone.html.twig
+++ b/templates/login/password/resetpwddone.html.twig
@@ -4,7 +4,7 @@
 {% extends "base.html.twig" %}

 {% block login_content %}
-	<div id="login">
+	<div id="login-content">
 		<h1>{{ 'UI:ResetPwd-Title'|dict_s }}</h1>
 		{% if bNoUser %}
 			<p>{{ 'UI:ResetPwd-Error-WrongLogin'|dict_format(sAuthUser) }}</p>
--- a/templates/login/password/resetpwdform.html.twig
+++ b/templates/login/password/resetpwdform.html.twig
@@ -4,26 +4,42 @@
 {% extends "base.html.twig" %}

 {% block login_content %}
-	<div id="login">
-		<h1>{{ 'UI:ResetPwd-Title'|dict_s }}</h1>
-		{% if bNoUser %}
-			<p>{{ 'UI:ResetPwd-Error-WrongLogin'|dict_format(sAuthUser) }}</p>
-		{% elseif bBadToken %}
-			<p>{{ 'UI:ResetPwd-Error-InvalidToken'|dict_s }}</p>
-		{% else %}
+	<div id="login-content">
+		<div id="login-title">
+			<h1>{{ 'UI:ResetPwd-Title'|dict_s }}</h1>
+			{% if bNoUser %}
+				<p>{{ 'UI:ResetPwd-Error-WrongLogin'|dict_format(sAuthUser) }}</p>
+			{% elseif bBadToken %}
+				<p>{{ 'UI:ResetPwd-Error-InvalidToken'|dict_s }}</p>
+			{% else %}
 			<p>{{ 'UI:ResetPwd-Error-EnterPassword'|dict_format(sUserName) }}</p>
-			<form method="post">
-				<table>
-					<tr><td style="text-align:right"><label for="new_pwd">{{ 'UI:Login:NewPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="new_pwd" name="new_pwd" value="" /></td></tr>
-					<tr><td style="text-align:right"><label for="retype_new_pwd">{{ 'UI:Login:RetypeNewPasswordPrompt'|dict_s }}:</label></td><td style="text-align:left"><input type="password" id="retype_new_pwd" name="retype_new_pwd" value="" /></td></tr>
-					<tr><td colspan="2" class="center v-spacer"><span class="btn_border"><input type="submit" onClick="return DoCheckPwd();" value="{{ 'UI:Button:ChangePassword'|dict_s }}" /></span></td></tr>
-				</table>
+		</div>
+		<div id="login-form">
+				<form method="post">
+					<div id="login-form-content">
+						<div id="login-input">
+							<div>
+								<label for="new_pwd">{{ 'UI:Login:NewPasswordPrompt'|dict_s }}:</label>
+								<input type="password" id="new_pwd" name="new_pwd" value="" />
+							</div>
+							<div>
+								<label for="retype_new_pwd">{{ 'UI:Login:RetypeNewPasswordPrompt'|dict_s }}:</label>
+								<input type="password" id="retype_new_pwd" name="retype_new_pwd" value="" />
+							</div>
+						</div>
+						<div id="login-submit">
+							<div>
+								<input type="submit" onClick="return DoCheckPwd();" value="{{ 'UI:Button:ChangePassword'|dict_s }}" />
+							</div>
+						</div>
+				</div>
 				<input type="hidden" name="loginop" value="do_reset_pwd" />
 				<input type="hidden" name="auth_user" value="{{ sAuthUser }}" />
 				<input type="hidden" name="token" value="{{ sToken }}" />
 			</form>
-		{% endif %}
-	</div
+			{% endif %}
+		</div>
+	</div>
 {% endblock %}

 {% block script %}