user confirmation styled and working with tests

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

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 -> %>
+  <h3>
-  <%= label f, :email %>
+    <%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
-  <%= email_input f, :email, required: true %>
+    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 %>
+</div>
-
-<p>
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
-</p>

lib/bones73k_web/views/user_confirmation_view.ex

@@ -1,3 +1,4 @@
 defmodule Bones73kWeb.UserConfirmationView do
   use Bones73kWeb, :view
+  alias Bones73k.Accounts.User
 end

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