Add toggle password visibility button on login form (#3205)

* Add password observer for login view and update Origine theme

* Update Alternative-Dark style

* Update BlueLagoon theme

* Update Dark theme

* Update Flat theme

* Update Screwdriver theme

* Update Origine-compact theme

* Update Pafat theme

* Coding style

app/views/auth/formLogin.phtml

@@ -15,7 +15,10 @@
 
 		<div class="form-group">
 			<label for="passwordPlain"><?= _t('gen.auth.password') ?></label>
-			<input type="password" id="passwordPlain" required="required" />
+			<div class="stick">
+				<input type="password" id="passwordPlain" required="required" />
+				<a class="btn toggle-password" data-toggle="passwordPlain"><?= _i('key') ?></a>
+			</div>
 			<input type="hidden" id="challenge" name="challenge" />
 			<noscript><strong><?= _t('gen.js.should_be_activated') ?></strong></noscript>
 		</div>

p/themes/Alternative-Dark/adark.css

@@ -663,6 +663,11 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
@@ -671,13 +676,36 @@ a.btn {
 }
 
 .prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+	margin-top: 2rem;
+	margin-bottom: 3rem;
+	text-align: left;
+}
+
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
+}
+
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
 }
 
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Alternative-Dark/adark.rtl.css

@@ -663,21 +663,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;	
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/BlueLagoon/BlueLagoon.css

@@ -757,27 +757,44 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
-	padding: 14px 0px;
 	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
+	text-align: left;
+}
+
 .prompt label {
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 180px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
-.prompt input {
-	margin: 5px auto;
-	width: 100%;
+.prompt .form-group::after {
+	display: none;
 }
 
-.prompt p {
-	margin: 20px 0;
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
+.prompt input {
+	width: 100%;
+	box-sizing: border-box;
 }
 
 .prompt input#username,.prompt input#passwordPlain {
@@ -791,6 +808,16 @@ a.btn {
 	box-shadow: 0 0 3px #0062be;
 }
 
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
+}
+
+.prompt p {
+	margin: 20px 0;
+}
+
 /*=== New article notification */
 #new-article {
 	background: #0084cc;

p/themes/BlueLagoon/BlueLagoon.rtl.css

@@ -765,27 +765,40 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
-	padding: 14px 0px;
 	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 180px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
-.prompt input {
-	margin: 5px auto;
-	width: 100%;
+.prompt .form-group::after {
+	display: none;
 }
 
-.prompt p {
-	margin: 20px 0;
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
+.prompt input {
+	width: 100%;
+	box-sizing: border-box;	
 }
 
 .prompt input#username,.prompt input#passwordPlain {
@@ -799,6 +812,16 @@ a.btn {
 	box-shadow: 0 0 3px #0062be;
 }
 
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
+}
+
+.prompt p {
+	margin: 20px 0;
+}
+
 /*=== New article notification */
 #new-article {
 	background: #0084cc;

p/themes/Dark/dark.css

@@ -701,21 +701,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Dark/dark.rtl.css

@@ -701,21 +701,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Flat/flat.css

@@ -706,21 +706,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Flat/flat.rtl.css

@@ -706,21 +706,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Origine-compact/origine-compact.css

@@ -735,21 +735,45 @@ a.btn,
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Origine-compact/origine-compact.rtl.css

@@ -735,21 +735,45 @@ a.btn,
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;	
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Origine/origine.css

@@ -698,14 +698,12 @@ a.btn {
 	margin-right: auto;
 	padding-left: .5rem;
 	padding-right: .5rem;
-
 	text-align: center;
 }
 
 .prompt form {
 	margin-top: 2rem;
 	margin-bottom: 3rem;
-
 	text-align: left;
 }
 
@@ -720,7 +718,6 @@ a.btn {
 .prompt .form-group.form-group-actions {
 	display: flex;
 	margin-top: 2rem;
-
 	align-items: center;
 	justify-content: space-between;
 }
@@ -728,12 +725,12 @@ a.btn {
 .prompt .stick,
 .prompt input {
 	width: 100%;
+	box-sizing: border-box;
 }
 
 .prompt .btn.btn-important {
 	padding-left: 1.5rem;
 	padding-right: 1.5rem;
-
 	font-size: 1.1rem;
 }
 

p/themes/Origine/origine.rtl.css

@@ -698,14 +698,12 @@ a.btn {
 	margin-left: auto;
 	padding-right: .5rem;
 	padding-left: .5rem;
-
 	text-align: center;
 }
 
 .prompt form {
 	margin-top: 2rem;
 	margin-bottom: 3rem;
-
 	text-align: right;
 }
 
@@ -720,7 +718,6 @@ a.btn {
 .prompt .form-group.form-group-actions {
 	display: flex;
 	margin-top: 2rem;
-
 	align-items: center;
 	justify-content: space-between;
 }
@@ -728,12 +725,12 @@ a.btn {
 .prompt .stick,
 .prompt input {
 	width: 100%;
+	box-sizing: border-box;	
 }
 
 .prompt .btn.btn-important {
 	padding-right: 1.5rem;
 	padding-left: 1.5rem;
-
 	font-size: 1.1rem;
 }
 

p/themes/Pafat/pafat.css

@@ -700,21 +700,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
+.prompt .form-group::after {
+	display: none;
+}
+
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;
+}
+
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Pafat/pafat.rtl.css

@@ -700,21 +700,45 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 200px;
+.prompt .form-group {
+	margin-bottom: 1rem;
+}
+
+.prompt .form-group::after {
+	display: none;
 }
 
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
 .prompt input {
-	margin: 5px auto;
 	width: 100%;
+	box-sizing: border-box;	
+}
+
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
 }
 
 .prompt p {

p/themes/Screwdriver/screwdriver.css

@@ -746,27 +746,40 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: .5rem;
+	padding-right: .5rem;
 	text-align: center;
-	padding: 14px 0px;
 	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: left;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 180px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
-.prompt input {
-	margin: 5px auto;
-	width: 100%;
+.prompt .form-group::after {
+	display: none;
 }
 
-.prompt p {
-	margin: 20px 0;
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
+.prompt input {
+	width: 100%;
+	box-sizing: border-box;
 }
 
 .prompt input#username,.prompt input#passwordPlain {
@@ -780,6 +793,16 @@ a.btn {
 	box-shadow: 0 0 3px #e7ab34;
 }
 
+.prompt .btn.btn-important {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-size: 1.1rem;
+}
+
+.prompt p {
+	margin: 20px 0;
+}
+
 /*=== New article notification */
 #new-article {
 	background: #0084cc;

p/themes/Screwdriver/screwdriver.rtl.css

@@ -754,27 +754,40 @@ a.btn {
 
 /*=== Prompt (centered) */
 .prompt {
+	max-width: 20rem;
+	margin-right: auto;
+	margin-left: auto;
+	padding-right: .5rem;
+	padding-left: .5rem;
 	text-align: center;
-	padding: 14px 0px;
-	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
-.prompt label {
+.prompt form {
+	margin-top: 2rem;
+	margin-bottom: 3rem;
 	text-align: right;
 }
 
-.prompt form {
-	margin: 10px auto 20px auto;
-	width: 180px;
+.prompt .form-group {
+	margin-bottom: 1rem;
 }
 
-.prompt input {
-	margin: 5px auto;
-	width: 100%;
+.prompt .form-group::after {
+	display: none;
 }
 
-.prompt p {
-	margin: 20px 0;
+.prompt .form-group.form-group-actions {
+	display: flex;
+	margin-top: 2rem;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.prompt .stick,
+.prompt input {
+	width: 100%;
+	box-sizing: border-box;
+	
 }
 
 .prompt input#username,.prompt input#passwordPlain {
@@ -788,6 +801,16 @@ a.btn {
 	box-shadow: 0 0 3px #e7ab34;
 }
 
+.prompt .btn.btn-important {
+	padding-right: 1.5rem;
+	padding-left: 1.5rem;
+	font-size: 1.1rem;
+}
+
+.prompt p {
+	margin: 20px 0;
+}
+
 /*=== New article notification */
 #new-article {
 	background: #0084cc;