From 8becb6b17434d4c3699fce6e58c300ebf12a0f7d Mon Sep 17 00:00:00 2001
From: Shadowfacts <me@shadowfacts.net>
Date: Sun, 26 Apr 2020 17:47:42 -0400
Subject: [PATCH] Login form, flash style improvements

---
 assets/css/clacks.scss                        | 25 +++++++++++++++++++
 lib/clacks_web/templates/layout/app.html.eex  |  8 ++++--
 lib/clacks_web/templates/login/login.html.eex | 16 ++++++------
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/assets/css/clacks.scss b/assets/css/clacks.scss
index 9df9e81..7f43d19 100644
--- a/assets/css/clacks.scss
+++ b/assets/css/clacks.scss
@@ -62,6 +62,19 @@ h1, h2, h3 {
 	margin: 0.5rem 0;
 }
 
+.flash-info {
+	padding: 0.5rem;
+	background-color: lighten(blue, 35%);
+	border: 1px solid darken(blue, 20%);
+	color: darken(blue, 35%);
+}
+.flash-error {
+	padding: 0.5rem;
+	background-color: lighten(red, 30%);
+	border: 1px solid darken(red, 20%);
+	color: darken(red, 35%);
+}
+
 header {
 	nav {
 		display: flex;
@@ -161,3 +174,15 @@ ul.status-list {
 		margin-right: 1rem;
 	}
 }
+
+.login-form {
+	.input-group {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0.5rem;
+
+		label {
+			width: 100px;
+		}
+	}
+}
diff --git a/lib/clacks_web/templates/layout/app.html.eex b/lib/clacks_web/templates/layout/app.html.eex
index 4c2486c..1fefa6f 100644
--- a/lib/clacks_web/templates/layout/app.html.eex
+++ b/lib/clacks_web/templates/layout/app.html.eex
@@ -37,8 +37,12 @@
       </section>
     </header>
     <main role="main" class="container">
-      <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+      <%= if get_flash(@conn, :info) do %>
+        <p class="flash-info" role="alert"><%= get_flash(@conn, :info) %></p>
+      <% end %>
+      <%= if get_flash(@conn, :error) do %>
+        <p class="flash-error" role="alert"><%= get_flash(@conn, :error) %></p>
+      <% end %>
       <%= render @view_module, @view_template, assigns %>
     </main>
     <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
diff --git a/lib/clacks_web/templates/login/login.html.eex b/lib/clacks_web/templates/login/login.html.eex
index 46db376..ed41da8 100644
--- a/lib/clacks_web/templates/login/login.html.eex
+++ b/lib/clacks_web/templates/login/login.html.eex
@@ -1,13 +1,15 @@
-<%= form_tag Routes.login_path(@conn, :login_post), method: :post do %>
+<%= form_tag Routes.login_path(@conn, :login_post), method: :post, class: "login-form" do %>
   <%= if @continue do %>
     <input type="hidden" name="continue" value="<%= @continue %>">
   <% end %>
 
-  <label for="username">Username</label>
-  <input id="username" type="text" name="username">
-  <br>
-  <label for="password">Password</label>
-  <input id="password" type="password" name="password">
-  <br>
+  <div class="input-group">
+    <label for="username">Username:</label>
+    <input id="username" type="text" name="username">
+  </div>
+  <div class="input-group">
+    <label for="password">Password:</label>
+    <input id="password" type="password" name="password">
+  </div>
   <%= submit "Log In" %>
 <% end %>