Improve login and registration pages (#2794)

* Keep the user on login page on failure

* Show an error if username already exists

* Check the password format in the backend

* Return a better message if username is invalid

* Add a title to the login page

* wip: Improve look of login and register pages

* Set a capital M in username help message

On the registration page, username tip started with a minuscule, while
the password tip started with a capital.

* Change message if username is taken

2 files changed, 26 insertions, 18 deletions

diff --git a/app/views/auth/formLogin.phtml b/app/views/auth/formLogin.phtml
index ecac7aced..3ab0a3b0f 100644
--- a/app/views/auth/formLogin.phtml
+++ b/app/views/auth/formLogin.phtml
@@ -7,25 +7,30 @@
 
 	<form id="crypto-form" method="post" action="<?= _url('auth', 'login') ?>">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
-		<div>
+
+		<div class="form-group">
 			<label for="username"><?= _t('gen.auth.username') ?></label>
 			<input type="text" id="username" name="username" autocomplete="username" size="16" required="required" pattern="<?= FreshRSS_user_Controller::USERNAME_PATTERN ?>" autofocus="autofocus" />
 		</div>
-		<div>
+
+		<div class="form-group">
 			<label for="passwordPlain"><?= _t('gen.auth.password') ?></label>
-				<input type="password" id="passwordPlain" required="required" />
-				<input type="hidden" id="challenge" name="challenge" /><br />
-				<noscript><strong><?= _t('gen.js.should_be_activated') ?></strong></noscript>
+			<input type="password" id="passwordPlain" required="required" />
+			<input type="hidden" id="challenge" name="challenge" />
+			<noscript><strong><?= _t('gen.js.should_be_activated') ?></strong></noscript>
 		</div>
-		<div>
+
+		<div class="form-group">
 			<label class="checkbox" for="keep_logged_in">
 				<input type="checkbox" name="keep_logged_in" id="keep_logged_in" value="1" />
 				<?= _t('gen.auth.keep_logged_in', $this->cookie_days) ?>
 			</label>
-			<br />
 		</div>
-		<div>
-			<button id="loginButton" type="submit" class="btn btn-important"><?= _t('gen.auth.login') ?></button>
+
+		<div class="form-group form-group-actions">
+			<button id="loginButton" type="submit" class="btn btn-important">
+				<?= _t('gen.auth.login') ?>
+			</button>
 		</div>
 	</form>
 
diff --git a/app/views/auth/register.phtml b/app/views/auth/register.phtml
index 4233f7fd4..584efa8f4 100644
--- a/app/views/auth/register.phtml
+++ b/app/views/auth/register.phtml
@@ -3,22 +3,23 @@
 
 	<form method="post" action="<?= _url('user', 'create') ?>">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
-		<div>
-			<label class="group-name" for="new_user_name"><?= _t('gen.auth.username'), '<br />', _i('help'), ' ', _t('gen.auth.username.format') ?></label>
+
+		<div class="form-group">
+			<label for="new_user_name"><?= _t('gen.auth.username'), '<br />', _i('help'), ' ', _t('gen.auth.username.format') ?></label>
 			<input id="new_user_name" name="new_user_name" type="text" size="16" required="required" autocomplete="off" pattern="<?= FreshRSS_user_Controller::USERNAME_PATTERN ?>" />
 		</div>
 
 		<?php if ($this->show_email_field) { ?>
-			<div>
-				<label class="group-name" for="new_user_email">
+			<div class="form-group">
+				<label for="new_user_email">
 					<?= _t('gen.auth.email') ?>
 				</label>
 				<input id="new_user_email" name="new_user_email" type="email" required />
 			</div>
 		<?php } ?>
 
-		<div>
-			<label class="group-name" for="new_user_passwordPlain"><?= _t('gen.auth.password'), '<br />', _i('help'), ' ', _t('gen.auth.password.format') ?></label>
+		<div class="form-group">
+			<label for="new_user_passwordPlain"><?= _t('gen.auth.password'), '<br />', _i('help'), ' ', _t('gen.auth.password.format') ?></label>
 			<div class="stick">
 				<input type="password" id="new_user_passwordPlain" name="new_user_passwordPlain" required="required" autocomplete="new-password" pattern=".{7,}" />
 				<a class="btn toggle-password" data-toggle="new_user_passwordPlain"><?= _i('key') ?></a>
@@ -27,7 +28,7 @@
 		</div>
 
 		<?php if ($this->show_tos_checkbox) { ?>
-			<div>
+			<div class="form-group">
 				<label class="checkbox" for="accept-tos">
 					<input type="checkbox" name="accept_tos" id="accept-tos" value="1" required />
 					<?= _t('gen.auth.accept_tos', _url('index', 'tos')) ?>
@@ -35,7 +36,7 @@
 			</div>
 		<?php } ?>
 
-		<div>
+		<div class="form-group form-group-actions">
 			<?php
 				$redirect_url = urlencode(Minz_Url::display(
 					array('c' => 'index', 'a' => 'index'),
@@ -43,8 +44,10 @@
 				));
 			?>
 			<input type="hidden" name="r" value="<?= $redirect_url ?>" />
+
 			<button type="submit" class="btn btn-important"><?= _t('gen.action.create') ?></button>
-			<a class="btn" href="<?= _url('index', 'index') ?>"><?= _t('gen.action.cancel') ?></a>
+
+			<a href="<?= _url('index', 'index') ?>"><?= _t('gen.action.cancel') ?></a>
 		</div>
 	</form>