From 598773d67856e79975f392ac9a52966961201e10 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Mon, 1 Mar 2021 16:38:54 -0500
Subject: [PATCH] user confirmation styled and working with tests

---
 assets/js/app.js                              |  2 +-
 .../templates/user_confirmation/new.html.eex  | 49 ++++++++++++++-----
 .../views/user_confirmation_view.ex           |  1 +
 .../user_confirmation_controller_test.exs     |  2 +-
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 1b904f1..3aee4d3 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -15,7 +15,7 @@ import "../node_modules/bootstrap-icons/icons/box-arrow-right.svg"; // log out
 import "../node_modules/bootstrap-icons/icons/at.svg";
 import "../node_modules/bootstrap-icons/icons/key.svg";
 import "../node_modules/bootstrap-icons/icons/key-fill.svg";
-import "../node_modules/bootstrap-icons/icons/envelope.svg";
+import "../node_modules/bootstrap-icons/icons/arrow-repeat.svg";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
diff --git a/lib/bones73k_web/templates/user_confirmation/new.html.eex b/lib/bones73k_web/templates/user_confirmation/new.html.eex
index 803080f..3ce9608 100644
--- a/lib/bones73k_web/templates/user_confirmation/new.html.eex
+++ b/lib/bones73k_web/templates/user_confirmation/new.html.eex
@@ -1,15 +1,40 @@
-<h1>Resend confirmation instructions</h1>
+<div class="row justify-content-center">
+  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-<%= form_for :user, Routes.user_confirmation_path(@conn, :create), fn f -> %>
-  <%= label f, :email %>
-  <%= email_input f, :email, required: true %>
+  <h3>
+    <%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
+    Resend confirmation instructions
+  </h3>
+  <p class="lead">We'll send you another email with a link to confirm your email address.</p>
+
+  <%= form_for :user, Routes.user_confirmation_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>
+
+    <%= label f, :email, class: "form-label" %>
+    <div class="input-group has-validation mb-3">
+      <span class="input-group-text">
+        <%= icon_div @conn, "bi-at", [class: "icon fs-5"] %>
+      </span>
+      <%= email_input f, :email,
+          value: @current_user && @current_user.email || "",
+          placeholder: "e.g., babka@73k.us",
+          class: "form-control",
+          maxlength: User.max_email,
+          required: true,
+          autofocus: !@current_user
+        %>
+      <span class="invalid-feedback">must be a valid email address</span>
+    </div>
+
+    <div class="mb-3">
+      <%= submit "Resend confirmation instructions", class: "btn btn-primary" %>
+    </div>
+
+  <% end %>
+
+  <p>
+    <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
+    <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
+  </p>
 
-  <div>
-    <%= submit "Resend confirmation instructions" %>
   </div>
-<% end %>
-
-<p>
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
-</p>
+</div>
diff --git a/lib/bones73k_web/views/user_confirmation_view.ex b/lib/bones73k_web/views/user_confirmation_view.ex
index 7ba1a84..3001318 100644
--- a/lib/bones73k_web/views/user_confirmation_view.ex
+++ b/lib/bones73k_web/views/user_confirmation_view.ex
@@ -1,3 +1,4 @@
 defmodule Bones73kWeb.UserConfirmationView do
   use Bones73kWeb, :view
+  alias Bones73k.Accounts.User
 end
diff --git a/test/bones73k_web/controllers/user_confirmation_controller_test.exs b/test/bones73k_web/controllers/user_confirmation_controller_test.exs
index bc0ea4f..1681306 100644
--- a/test/bones73k_web/controllers/user_confirmation_controller_test.exs
+++ b/test/bones73k_web/controllers/user_confirmation_controller_test.exs
@@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserConfirmationControllerTest do
     test "renders the confirmation page", %{conn: conn} do
       conn = get(conn, Routes.user_confirmation_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "<h1>Resend confirmation instructions</h1>"
+      assert response =~ "Resend confirmation instructions\n  </h3>"
     end
   end