improved input fields, icons, error helpers

assets/css/_phx-liveview.scss

@@ -9,7 +9,6 @@
 /* sets default bootstrap form-control styles if field not touched yet */
 .phx-no-feedback .form-control.is-valid,
 .phx-no-feedback .form-control.is-invalid {
-  padding: $input-padding-y $input-padding-x;
   border: $input-border-width solid $input-border-color;
   background-image: none;
 

assets/css/app.scss

@@ -31,3 +31,36 @@
 .cursor-pointer {
   cursor: pointer !important;
 }
+
+/*
+  icons in input fields
+  */
+/* enable absolute positioning */
+.inner-addon {
+  position: relative;
+}
+
+/* style icon */
+.inner-addon .icon {
+  position: absolute;
+  padding: 0.5625rem 0.5rem;
+  pointer-events: none;
+}
+
+/* align icon */
+.inner-addon .icon.is-left {
+  left: 0px;
+}
+.inner-addon .icon.is-right {
+  right: 0px;
+}
+
+/* add padding  */
+.left-addon input,
+.left-addon select {
+  padding-left: 2rem;
+}
+.right-addon input,
+.right-addon select {
+  padding-right: 2rem;
+}

assets/js/app.js

@@ -17,9 +17,9 @@ import "../node_modules/bootstrap-icons/icons/at.svg"; // email field
 import "../node_modules/bootstrap-icons/icons/key.svg"; // new password field
 import "../node_modules/bootstrap-icons/icons/key-fill.svg"; // pw confirm field
 import "../node_modules/bootstrap-icons/icons/lock.svg"; // current pw field
-import "../node_modules/bootstrap-icons/icons/shield-shaded.svg"; // role
+import "../node_modules/bootstrap-icons/icons/shield.svg"; // role
 // live tables
-import "../node_modules/bootstrap-icons/icons/filter.svg";
+import "../node_modules/bootstrap-icons/icons/funnel.svg";
 import "../node_modules/bootstrap-icons/icons/backspace.svg"; // clear filter
 import "../node_modules/bootstrap-icons/icons/sort-down-alt.svg";
 import "../node_modules/bootstrap-icons/icons/sort-up-alt.svg";
@@ -29,6 +29,7 @@ import "../node_modules/bootstrap-icons/icons/pencil.svg";
 import "../node_modules/bootstrap-icons/icons/trash.svg";
 import "../node_modules/bootstrap-icons/icons/check.svg";
 import "../node_modules/bootstrap-icons/icons/x.svg";
+import "../node_modules/bootstrap-icons/icons/x-circle-fill.svg";
 // page headers
 import "../node_modules/bootstrap-icons/icons/shield-lock.svg"; // reset password
 import "../node_modules/bootstrap-icons/icons/arrow-repeat.svg"; // resend confirmation

lib/bones73k_web/live/property_live/form_component.html.leex

@@ -7,38 +7,32 @@
 
   <div class="modal-body">
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :name)%>">
-      <%= label f, :name, class: "form-label" %>
-      <div class="input-group has-validation">
-        <%= text_input f, :name,
-            class: input_class(f, :name, "form-control"),
-            aria_describedby: error_id(f, :name)
-          %>
-        <%= error_tag f, :name %>
-      </div>
+    <%= label f, :name, class: "form-label" %>
+    <div class="mb-3" phx-feedback-for="<%= input_id(f, :name) %>">
+      <%= text_input f, :name,
+          class: input_class(f, :name, "form-control"),
+          aria_describedby: error_ids(f, :name)
+        %>
+      <%= error_tag f, :name %>
     </div>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :price)%>">
-      <%= label f, :price, class: "form-label" %>
-      <div class="input-group has-validation">
-        <%= number_input f, :price,
-            class: input_class(f, :price, "form-control"),
-            step: "any",
-            aria_describedby: error_id(f, :price)
-          %>
-        <%= error_tag f, :price %>
-      </div>
+    <%= label f, :price, class: "form-label" %>
+    <div class="mb-3" phx-feedback-for="<%= input_id(f, :price) %>">
+      <%= number_input f, :price,
+          class: input_class(f, :price, "form-control"),
+          step: "any",
+          aria_describedby: error_ids(f, :price)
+        %>
+      <%= error_tag f, :price %>
     </div>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :description)%>">
-      <%= label f, :description, class: "form-label" %>
-      <div class="input-group has-validation">
-        <%= textarea f, :description,
-            class: input_class(f, :description, "form-control"),
-            aria_describedby: error_id(f, :description)
-          %>
-        <%= error_tag f, :description %>
-      </div>
+    <%= label f, :description, class: "form-label" %>
+    <div class="mb-3" phx-feedback-for="<%= input_id(f, :description) %>">
+      <%= textarea f, :description,
+          class: input_class(f, :description, "form-control"),
+          aria_describedby: error_ids(f, :description)
+        %>
+      <%= error_tag f, :description %>
     </div>
 
   </div>

lib/bones73k_web/live/user/registration.html.leex

@@ -9,40 +9,33 @@
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "reg_form"], fn f -> %>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
-      <%= label f, :email, class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-at", [class: "icon"] %>
-        </span>
-        <%= email_input f, :email,
-            value: input_value(f, :email),
-            class: input_class(f, :email, "form-control"),
-            placeholder: "e.g., babka@73k.us",
-            maxlength: User.max_email,
-            autofocus: true,
-            phx_debounce: "blur",
-            aria_describedby: error_id(f, :email)
-          %>
-        <%= error_tag f, :email %>
-      </div>
+
+    <%= label f, :email, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
+      <%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
+      <%= email_input f, :email,
+          value: input_value(f, :email),
+          class: input_class(f, :email, "form-control"),
+          placeholder: "e.g., babka@73k.us",
+          maxlength: User.max_email,
+          autofocus: true,
+          phx_debounce: "blur",
+          aria_describedby: error_ids(f, :email)
+        %>
+      <%= error_tag f, :email %>
     </div>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
-      <%= label f, :password, class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-key", [class: "icon"] %>
-        </span>
-        <%= password_input f, :password,
-            value: input_value(f, :password),
-            class: input_class(f, :password, "form-control"),
-            maxlength: User.max_password,
-            phx_debounce: "250",
-            aria_describedby: error_id(f, :password)
-          %>
-        <%= error_tag f, :password %>
-      </div>
+    <%= label f, :password, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
+      <%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :password,
+          value: input_value(f, :password),
+          class: input_class(f, :password, "form-control"),
+          maxlength: User.max_password,
+          phx_debounce: "250",
+          aria_describedby: error_ids(f, :password)
+        %>
+      <%= error_tag f, :password %>
     </div>
 
     <div class="mb-3">

lib/bones73k_web/live/user/reset_password.html.leex

@@ -9,39 +9,32 @@
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
-      <%= label f, :password, "New password", class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-key", [class: "icon"] %>
-        </span>
-        <%= password_input f, :password,
-            value: input_value(f, :password),
-            class: input_class(f, :password, "form-control"),
-            maxlength: User.max_password,
-            autofocus: true,
-            aria_describedby: error_id(f, :password)
-          %>
-        <%= error_tag f, :password %>
-      </div>
+    <%= label f, :password, "New password", class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
+      <%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :password,
+          value: input_value(f, :password),
+          class: input_class(f, :password, "form-control"),
+          maxlength: User.max_password,
+          autofocus: true,
+          aria_describedby: error_ids(f, :password)
+        %>
+      <%= error_tag f, :password %>
     </div>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password_confirmation) %>">
-      <%= label f, :password_confirmation, "Confirm new password", class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-key-fill", [class: "icon"] %>
-        </span>
-        <%= password_input f, :password_confirmation,
-            value: input_value(f, :password_confirmation),
-            class: input_class(f, :password_confirmation, "form-control"),
-            maxlength: User.max_password,
-            aria_describedby: error_id(f, :password_confirmation)
-          %>
-        <%= error_tag f, :password_confirmation %>
-      </div>
+    <%= label f, :password_confirmation, "Confirm new password", class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password_confirmation) %>">
+      <%= icon_div @socket, "bi-key-fill", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :password_confirmation,
+          value: input_value(f, :password_confirmation),
+          class: input_class(f, :password_confirmation, "form-control"),
+          maxlength: User.max_password,
+          aria_describedby: error_ids(f, :password_confirmation)
+        %>
+      <%= error_tag f, :password_confirmation %>
     </div>
 
+
     <div class="mb-3">
       <%= submit "Reset password",
           class: "btn btn-primary",

lib/bones73k_web/live/user/settings/email.html.leex

@@ -4,40 +4,34 @@
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
-      <%= label f, :email, class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-at", [class: "icon"] %>
-        </span>
-        <%= email_input f, :email,
-            value: input_value(f, :email),
-            class: input_class(f, :email, "form-control"),
-            placeholder: "e.g., babka@73k.us",
-            maxlength: User.max_email,
-            phx_debounce: "500",
-            aria_describedby: error_id(f, :email)
-          %>
-        <%= error_tag f, :email %>
-      </div>
+
+    <%= label f, :email, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
+      <%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
+      <%= email_input f, :email,
+          value: input_value(f, :email),
+          class: input_class(f, :email, "form-control"),
+          placeholder: "e.g., babka@73k.us",
+          maxlength: User.max_email,
+          phx_debounce: "500",
+          aria_describedby: error_ids(f, :email)
+        %>
+      <%= error_tag f, :email %>
     </div>
 
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :current_password) %>">
-      <%= label f, :current_password, class: "form-label" %>
-      <div class="input-group">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-lock", [class: "icon"] %>
-        </span>
-        <%= password_input f, :current_password,
-            value: input_value(f, :current_password),
-            class: "form-control",
-            aria_describedby: error_id(f, :current_password)
-          %>
-        <%= error_tag f, :current_password %>
-      </div>
+    <%= label f, :current_password, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :current_password) %>">
+      <%= icon_div @socket, "bi-lock", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :current_password,
+          value: input_value(f, :current_password),
+          class: "form-control",
+          aria_describedby: error_ids(f, :current_password)
+        %>
+      <%= error_tag f, :current_password %>
     </div>
 
+
     <div class="mb-3">
       <%= submit "Change email",
           class: "btn btn-primary",

lib/bones73k_web/live/user/settings/password.html.leex

@@ -4,52 +4,41 @@
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
-      <%= label f, :password, "New password", class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-key", [class: "icon"] %>
-        </span>
-        <%= password_input f, :password,
-            value: input_value(f, :password),
-            class: input_class(f, :password, "form-control"),
-            maxlength: User.max_password,
-            phx_debounce: "500",
-            aria_describedby: error_id(f, :password)
-          %>
-        <%= error_tag f, :password %>
-      </div>
+
+    <%= label f, :password, "New password", class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
+      <%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :password,
+          value: input_value(f, :password),
+          class: input_class(f, :password, "form-control"),
+          maxlength: User.max_password,
+          phx_debounce: "500",
+          aria_describedby: error_ids(f, :password)
+        %>
+      <%= error_tag f, :password %>
     </div>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :password_confirmation) %>">
-      <%= label f, :password_confirmation, "Confirm new password", class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-key-fill", [class: "icon"] %>
-        </span>
-        <%= password_input f, :password_confirmation,
-            value: input_value(f, :password_confirmation),
-            class: input_class(f, :password_confirmation, "form-control"),
-            maxlength: User.max_password,
-            aria_describedby: error_id(f, :password_confirmation)
-          %>
-        <%= error_tag f, :password_confirmation %>
-      </div>
+    <%= label f, :password_confirmation, "Confirm new password", class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password_confirmation) %>">
+      <%= icon_div @socket, "bi-key-fill", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :password_confirmation,
+          value: input_value(f, :password_confirmation),
+          class: input_class(f, :password_confirmation, "form-control"),
+          maxlength: User.max_password,
+          aria_describedby: error_ids(f, :password_confirmation)
+        %>
+      <%= error_tag f, :password_confirmation %>
     </div>
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :current_password) %>">
-      <%= label f, :current_password, class: "form-label" %>
-      <div class="input-group">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-lock", [class: "icon"] %>
-        </span>
-        <%= password_input f, :current_password,
-            value: input_value(f, :current_password),
-            class: "form-control",
-            aria_describedby: error_id(f, :current_password)
-          %>
-        <%= error_tag f, :current_password %>
-      </div>
+    <%= label f, :current_password, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :current_password) %>">
+      <%= icon_div @socket, "bi-lock", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :current_password,
+          value: input_value(f, :current_password),
+          class: "form-control",
+          aria_describedby: error_ids(f, :current_password)
+        %>
+      <%= error_tag f, :current_password %>
     </div>
 
     <div class="mb-3">
@@ -68,10 +57,4 @@
     <%= hidden_input f, :params_token, value: Phoenix.Token.encrypt(Bones73kWeb.Endpoint, "login_params", @login_params) %>
   <% end %>
 
-  <%# hidden form to submit user for relogin after password change %>
-  <%#= form_for :user_login, Routes.user_session_path(@socket, :create), [phx_trigger_action: @trigger_submit], fn f -> %>
-    <%#= hidden_input f, :login_params_token, value: Phoenix.Token.encrypt(Bones73kWeb.Endpoint, "login_params", @login_params) %>
-    <%#= hidden_input f, :remember_me, value: false %>
-  <%# end %>
-
 </div>

lib/bones73k_web/live/user_management/form_component.html.leex

@@ -6,31 +6,37 @@
 
   <div class="modal-body">
 
-    <div class="mb-3" phx-feedback-for="<%= input_id(f, :email)%>">
-      <%= label f, :email, class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-at", [class: "icon"] %>
-        </span>
-        <%= email_input f, :email,
-            value: input_value(f, :email),
-            class: input_class(f, :email, "form-control"),
-            placeholder: "e.g., babka@73k.us",
-            maxlength: User.max_email,
-            autofocus: true,
-            phx_debounce: "250",
-            aria_describedby: error_id(f, :email)
-          %>
-        <%= error_tag f, :email %>
-      </div>
+    <%= label f, :email, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
+      <%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
+      <%= email_input f, :email,
+          value: input_value(f, :email),
+          class: input_class(f, :email, "form-control"),
+          placeholder: "e.g., babka@73k.us",
+          maxlength: User.max_email,
+          autofocus: true,
+          phx_debounce: "250",
+          aria_describedby: error_ids(f, :email)
+        %>
+      <%= error_tag f, :email %>
+    </div>
+
+    <%= label f, :password, class: "form-label" %>
+    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
+      <%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
+      <%= password_input f, :password,
+          value: input_value(f, :password),
+          class: input_class(f, :password, "form-control"),
+          maxlength: User.max_password,
+          aria_describedby: error_ids(f, :password)
+        %>
+      <%= error_tag f, :password %>
     </div>
 
     <%= if Roles.can?(@current_user, %User{}, :edit_role) do %>
       <%= label f, :role, class: "form-label" %>
-      <div class="input-group mb-3">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-shield-shaded", [class: "icon"] %>
-        </span>
+      <div class="inner-addon left-addon mb-3">
+        <%= icon_div @socket, "bi-shield", [class: "icon is-left text-muted fs-5"] %>
         <%= select f, :role, Enum.map(User.roles(), fn {k, _v} -> {String.capitalize(Atom.to_string(k)), k} end), class: "form-select" %>
         <span class="valid-feedback text-primary" style="display: block;">
           <%= role_description(input_value(f, :role)) %>
@@ -40,21 +46,6 @@
       <%= hidden_input f, :role, value: input_value(f, :role) %>
     <% end %>
 
-    <div phx-feedback-for="<%= input_id(f, :password) %>">
-      <%= label f, :password, class: "form-label" %>
-      <div class="input-group has-validation">
-        <span class="input-group-text">
-          <%= icon_div @socket, "bi-key", [class: "icon"] %>
-        </span>
-        <%= password_input f, :password,
-            value: input_value(f, :password),
-            class: input_class(f, :password, "form-control"),
-            maxlength: User.max_password,
-            aria_describedby: error_id(f, :password)
-          %>
-        <%= error_tag f, :password %>
-      </div>
-    </div>
 
   </div>
   <div class="modal-footer">

lib/bones73k_web/live/user_management/index.html.leex

@@ -22,7 +22,7 @@
 </h2>
 
 <%# filtering and new item creation %>
-<div class="d-flex flex-column flex-sm-row justify-content-between d-flex align-items-start mb-3">
+<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end mb-3">
 
   <%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])),
       class: "btn btn-primary mb-3 mb-sm-0" do %>
@@ -31,25 +31,13 @@
   <% end %>
 
   <%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %>
-  <div class="input-group">
-
-    <span class="input-group-text">
-      <%= icon_div @socket, "bi-filter", [class: "icon"] %>
-    </span>
-
-    <%= text_input flt, :filter, name: "filter", class: "form-control", placeholder: "Filter users...", value: @query.filter %>
-
-    </button>
-
-    <%= if @query.filter == "" do %>
-      <button class="btn btn-outline-secondary" type="button" aria-label="Clear filter" aria-disabled="true" disabled>
-    <% else %>
-      <button class="btn btn-outline-secondary" type="button" aria-label="Clear filter" phx-click="filter-clear">
-    <% end %>
-      <%= icon_div @socket, "bi-backspace", [class: "icon baseline"], [role: "img", aria_hidden: false] %>
-    </button>
-
-  </div>
+    <div class="inner-addon left-addon right-addon">
+      <%= icon_div @socket, "bi-funnel", [class: "icon is-left text-muted fs-5"] %>
+      <%= if @query.filter != "" do %>
+        <%= icon_div @socket, "bi-x-circle-fill", [class: "icon is-right text-primary fs-5"], [role: "img", aria_hidden: false, aria_label: "Clear filter", class: "cursor-pointer pe-auto", phx_click: "filter-clear"] %>
+      <% end %>
+      <%= text_input flt, :filter, name: "filter", class: "form-control", placeholder: "Filter users...", value: @query.filter %>
+    </div>
   <% end %>
 
 </div>
@@ -118,18 +106,18 @@
             </td>
             <td class="align-middle text-end text-nowrap">
 
-              <%= live_patch to: Routes.user_management_index_path(@socket, :edit, user.id, Enum.into(@query, [])), class: "btn btn-outline-primary btn-sm text-nowrap" do %>
-                <%= icon_div @socket, "bi-pencil", [class: "icon baseline", style: "margin-right:0.125rem;"] %>
-                Edit
+              <%= if Roles.can?(@current_user, user, :edit) do %>
+                <%= live_patch to: Routes.user_management_index_path(@socket, :edit, user.id, Enum.into(@query, [])), class: "btn btn-outline-primary btn-sm text-nowrap" do %>
+                  <%= icon_div @socket, "bi-pencil", [class: "icon baseline", style: "margin-right:0.125rem;"] %>
+                  Edit
+                <% end %>
               <% end %>
 
               <%= if Roles.can?(@current_user, user, :delete) do %>
-
                 <button class="btn btn-outline-danger btn-sm text-nowrap" phx-click="delete-modal" phx-value-id="<%= user.id %>">
                   <%= icon_div @socket, "bi-trash", [class: "icon baseline", style: "margin-right:0.125rem;"] %>
                   Delete
                 </button>
-
               <% end %>
 
             </td>
@@ -159,7 +147,7 @@
           class: "form-select"
         %>
     <% end %>
-    <span class="ms-2"><%= @page.total_entries %> found</span>
+    <span class="ms-2"><%= @page.total_entries %> total</span>
   </div>
 
   <%# main pagination %>

lib/bones73k_web/templates/user_confirmation/new.html.eex

@@ -10,10 +10,8 @@
   <%= 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>
+    <div class="inner-addon left-addon mb-3">
+      <%= icon_div @conn, "bi-at", [class: "icon is-left text-muted fs-5"] %>
       <%= email_input f, :email,
           value: @current_user && @current_user.email || "",
           placeholder: "e.g., babka@73k.us",

lib/bones73k_web/templates/user_reset_password/new.html.eex

@@ -10,10 +10,8 @@
   <%= form_for :user, Routes.user_reset_password_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"] %>
-      </span>
+    <div class="inner-addon left-addon mb-3">
+      <%= icon_div @conn, "bi-at", [class: "icon is-left text-muted fs-5"] %>
       <%= email_input f, :email,
           placeholder: "e.g., babka@73k.us",
           class: "form-control",

lib/bones73k_web/templates/user_session/new.html.eex

@@ -15,11 +15,10 @@
       </div>
     <% end %>
 
+
     <%= 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"] %>
-      </span>
+    <div class="inner-addon left-addon mb-3">
+      <%= icon_div @conn, "bi-at", [class: "icon is-left text-muted fs-5"] %>
       <%= email_input f, :email,
           class: "form-control",
           placeholder: "e.g., babka@73k.us",
@@ -30,10 +29,8 @@
     </div>
 
     <%= label f, :password, class: "form-label" %>
-    <div class="input-group has-validation mb-3">
-      <span class="input-group-text">
-        <%= icon_div @conn, "bi-lock", [class: "icon"] %>
-      </span>
+    <div class="inner-addon left-addon mb-3">
+      <%= icon_div @conn, "bi-lock", [class: "icon is-left text-muted fs-5"] %>
       <%= password_input f, :password,
           class: "form-control",
           required: true
@@ -41,6 +38,7 @@
       <span class="invalid-feedback">password is required</span>
     </div>
 
+
     <div class="form-check mb-3 no-valid-style">
       <%= checkbox f, :remember_me, class: "form-check-input" %>
       <%= label f, :remember_me, "Keep me logged in for 60 days", class: "form-check-label" %>

lib/bones73k_web/views/error_helpers.ex

@@ -8,35 +8,50 @@ defmodule Bones73kWeb.ErrorHelpers do
   @doc """
   Generates tag for inlined form input errors.
   """
-  def error_tag(form, field, opts \\ []) do
-    opts = error_opts(form, field, opts)
+  def error_tag(%Phoenix.HTML.Form{} = form, field, opts \\ []) do
+    opts = error_common_opts(form, field, "invalid-feedback", opts)
 
     form.errors
     |> Keyword.get_values(field)
-    |> Enum.map(fn error -> content_tag(:span, translate_error(error), opts) end)
+    |> Stream.with_index()
+    |> Enum.map(fn err_with_index -> error_tag_span(err_with_index, opts) end)
   end
 
-  defp error_opts(form, field, opts) do
-    append = "invalid-feedback"
-    input_id = input_id(form, field)
+  defp error_tag_span({err, _} = err_with_index, opts) do
+    opts = error_tag_opts(err_with_index, opts)
+    content_tag(:span, translate_error(err), opts)
+  end
 
-    opts
-    |> Keyword.put_new(:id, error_id(input_id))
-    |> Keyword.put_new(:phx_feedback_for, input_id)
+  defp error_common_opts(form, field, append, opts) do
+    Keyword.put(opts, :phx_feedback_for, input_id(form, field))
     |> Keyword.update(:class, append, fn c -> "#{append} #{c}" end)
   end
 
-  def error_id(%Phoenix.HTML.Form{} = form, field), do: input_id(form, field) |> error_id()
-  def error_id(input_id) when is_binary(input_id), do: "#{input_id}_feedback"
+  defp error_tag_opts({_err, err_index}, opts) do
+    input_id = Keyword.get(opts, :phx_feedback_for, "")
+    Keyword.put(opts, :id, error_id(input_id, err_index))
+  end
+
+  defp error_id(input_id, err_index), do: "#{input_id}_feedback-#{err_index}"
+
+  def error_ids(%Phoenix.HTML.Form{} = form, field) do
+    input_id = input_id(form, field)
+
+    form.errors
+    |> Keyword.get_values(field)
+    |> Stream.with_index()
+    |> Stream.map(fn {_, index} -> error_id(input_id, index) end)
+    |> Enum.join(" ")
+  end
 
   def input_class(form, field, classes \\ "") do
-    case form.source.action do
-      nil -> classes
-      _ ->
-        case Keyword.has_key?(form.errors, field) do
-          true -> "#{classes} is-invalid"
-          _ -> "#{classes} is-valid"
-        end
+    if form.source.action do
+      case Keyword.has_key?(form.errors, field) do
+        true -> "#{classes} is-invalid"
+        _ -> "#{classes} is-valid"
+      end
+    else
+      classes
     end
   end
 

lib/bones73k_web/views/icon_helpers.ex

@@ -16,7 +16,10 @@ defmodule Bones73kWeb.IconHelpers do
     opts = aria_hidden?(opts)
 
     content_tag(:svg, tag_opts(name, opts)) do
-      tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}"))
+      ~E"""
+      <%= if title = Keyword.get(opts, :aria_label), do: content_tag(:title, title) %>
+      <%= tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}")) %>
+      """
     end
   end
 

priv/repo/seeds.exs

@@ -53,9 +53,9 @@ count_to_take = 123
 mock_users = users_json |> File.read!() |> Jason.decode!() |> Enum.take_random(count_to_take)
 
 mock_users = ~s([
-      {"email":"adam@73k.us","password":"adamadam","role":"admin","inserted_at":"2018-12-14T01:01:01Z","confirmed_at":true},
-      {"email":"karen@73k.us","password":"karenkaren","role":"manager","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":true},
-      {"email":"kat@73k.us","password":"katkat","role":"manager","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":true}
+      {"email":"adam@73k.us","password":"adamadamA1","role":"admin","inserted_at":"2018-12-14T01:01:01Z","confirmed_at":true},
+      {"email":"karen@73k.us","password":"karenkarenA1","role":"manager","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":true},
+      {"email":"kat@73k.us","password":"katkatA1","role":"manager","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":true}
     ]) |> Jason.decode!() |> Enum.concat(mock_users)
 
 mock_users =