Worked on #25: Login/register pages

public_html/media/css/auth.css

@@ -0,0 +1,50 @@
+form.auth {
+	display: table;
+	border-collapse:separate;
+	border-spacing: 0 0.5em;
+	width: 400px;
+}
+
+form.auth div {
+	display: table-row;
+}
+
+form.auth label {
+	display: table-cell;
+	text-align: right;
+	float: left;
+	width: 144px;
+	margin: 5px 16px 0 0;
+}
+
+form.auth input {
+	display: table-cell;
+	font-family: inherit;
+	display: block;
+}
+
+form.auth input:not([type="submit"]) {
+	width: 156px;
+	padding: 5px;
+	border-width: 2px;
+	margin: 0;
+}
+
+form.auth input[type="submit"] {
+	margin: 0 auto;
+	background-color: #77f;
+	border: 0;
+	color: white;
+	font-weight: bold;
+	font-size: 1em;
+	padding: 8px 16px;
+}
+
+form.auth input[type="submit"]:hover {
+	background-color: #55f;
+}
+
+form.auth p {
+	text-align: center;
+	margin: 10px 0;
+}

public_html/media/css/core.css

@@ -130,3 +130,20 @@ a:focus i[class*='icon-'],
 a:hover i[class*='icon-'] {
 	background-color: red;
 }
+
+.alert {
+	text-align: center;
+	padding: 10px;
+	border-style: solid;
+	border-width: 1px;
+}
+
+.alert-error {
+	border-color: #faa;
+	background-color: #fdd;
+}
+
+.alert-warning {
+	border-color: #ffa;
+	background-color: #ffd;
+}

src/Controllers/AuthController.php

@@ -12,6 +12,7 @@ class AuthController
 	*/
 	public function loginAction()
 	{
+		$this->context->stylesheets []= 'auth.css';
 		$this->context->subTitle = 'authentication form';
 
 		//check if already logged in
@@ -61,6 +62,7 @@ class AuthController
 	*/
 	public function registerAction()
 	{
+		$this->context->stylesheets []= 'auth.css';
 		$this->context->subTitle = 'registration form';
 
 		//check if already logged in

src/Views/auth-login.phtml

@@ -1,6 +1,11 @@
-<form action="<?php echo \Chibi\UrlHelper::route('auth', 'login') ?>" method="post">
+<form action="<?php echo \Chibi\UrlHelper::route('auth', 'login') ?>" class="auth" method="post">
+
 	<div>
-		<label for="user">User:</label>
+		<p>If you don't have an account yet,<br/><a href="<?php echo \Chibi\UrlHelper::route('auth', 'register'); ?>">click here</a> to create a new one.</p>
+	</div>
+
+	<div>
+		<label for="user">User name:</label>
 		<input id="user" name="user"/>
 	</div>
 
@@ -9,11 +14,11 @@
 		<input type="password" id="pass" name="pass"/>
 	</div>
 
+	<?php if (isset($this->context->transport->errorMessage)): ?>
+		<p class="alert alert-error">Error: <?php echo $this->context->transport->errorMessage ?></p>
+	<?php endif ?>
+
 	<div>
 		<input type="submit" value="Log in"/>
 	</div>
 </form>
-
-<?php if (isset($this->context->transport->errorMessage)): ?>
-	<p class="alert alert-error"><?php echo $this->context->transport->errorMessage ?></p>
-<?php endif ?>

src/Views/auth-register.phtml

@@ -7,15 +7,14 @@
 		<p>After this, an admin will have to confirm your registration.</p>
 	<?php endif ?>
 <?php else: ?>
-	<form action="<?php echo \Chibi\UrlHelper::route('auth', 'register') ?>" method="post">
+	<form action="<?php echo \Chibi\UrlHelper::route('auth', 'register') ?>" class="auth" method="post">
 		<div>
-			<label for="user">User:</label>
+			<p>Registered users can view more content,<br/>upload files and add posts to favorites.</p>
-			<input id="user" name="user" value="<?php echo $this->context->suppliedUser ?>"/ placeholder="e.g. darth_vader" autocomplete="off">
 		</div>
 
 		<div>
-			<label for="pass">E-mail address<?php if ($this->context->transport->emailActivation) echo ' (required)' ?>:</label>
+			<label for="user">User name:</label>
-			<input id="email" name="email" value="<?php echo $this->context->suppliedEmail ?>" placeholder="e.g. vader@empire.gov"/ autocomplete="off">
+			<input id="user" name="user" value="<?php echo $this->context->suppliedUser ?>"/ placeholder="e.g. darth_vader" autocomplete="off">
 		</div>
 
 		<div>
@@ -28,12 +27,23 @@
 			<input type="password" id="pass" name="pass2" value="<?php echo $this->context->suppliedPass2 ?>" placeholder="e.g. <?php echo str_repeat('&#x25cf;', 8) ?>"/ autocomplete="off">
 		</div>
 
+		<div>
+			<label for="email">E-mail address<?php if ($this->context->transport->emailActivation) echo ' (required)' ?>:</label>
+			<input id="email" name="email" value="<?php echo $this->context->suppliedEmail ?>" placeholder="e.g. vader@empire.gov"/ autocomplete="off">
+		</div>
+
+		<div>
+			<p id="email-info" name="email-info">Your e-mail will be used to show your <a href="http://gravatar.com/">Gravatar</a>.<br/>Leave blank for random Gravatar.</p>
+		</div>
+
+		<?php if (isset($this->context->transport->errorMessage)): ?>
+		<div>
+			<p class="alert alert-error">Error: <?php echo $this->context->transport->errorMessage ?></p>
+		</div>
+		<?php endif ?>
+
 		<div>
 			<input type="submit" value="Register">
 		</div>
 	</form>
-
-	<?php if (isset($this->context->transport->errorMessage)): ?>
-		<p class="alert alert-error"><?php echo $this->context->transport->errorMessage ?></p>
-	<?php endif ?>
 <?php endif ?>