user settings templates updated, user management index template updated

lib/shift73k_web/live/user/registration.html.heex

@@ -2,7 +2,7 @@
   <div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
 
   <h2>
-    <i class="bi bi-journal-plus"></i> Register
+    <i class="bi bi-journal-plus me-1"></i> Register
   </h2>
   <p class="lead">Create an account to manage your work shifts with us.</p>
 

lib/shift73k_web/live/user/reset_password.html.heex

@@ -2,16 +2,15 @@
   <div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
 
   <h2>
-    <%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
+    <i class="bi bi-shield-lock me-1"></i> Reset password
-    Reset password
   </h2>
   <p class="lead">Hi <%= @user.email %> &mdash; tell us your new password, please.</p>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>
 
     <%= label f, :password, "New password", class: "form-label" %>
-    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
+    <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"] %>
+      <i class="bi bi-key icon is-left text-muted fs-5"></i>
       <%= password_input f, :password,
           value: input_value(f, :password),
           class: input_class(f, :password, "form-control"),
@@ -23,8 +22,8 @@
     </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) %>">
+    <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"] %>
+      <i class="bi bi-key-fill icon is-left text-muted fs-5"></i>
       <%= password_input f, :password_confirmation,
           value: input_value(f, :password_confirmation),
           class: input_class(f, :password_confirmation, "form-control"),

lib/shift73k_web/live/user/settings.html.heex

@@ -1,8 +1,9 @@
 <div class="row justify-content-center">
   <div class="col-11">
 
-    <h2 class="mb-3"><%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
+    <h2 class="mb-3">
-      User Settings</h2>
+      <i class="bi bi-sliders me-1"></i> User Settings
+    </h2>
 
     <div class="row justify-content-center justify-content-md-start">
       <%= live_component @socket, Shift73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>

lib/shift73k_web/live/user/settings/calendar_url.html.heex

@@ -1,11 +1,11 @@
-<div id="<%= @id %>" class="col-12 col-sm-10 col-md-9 col-lg-8 col-xl-7 col-xxl-6 mt-1">
+<div id={@id} class="col-12 col-sm-10 col-md-9 col-lg-8 col-xl-7 col-xxl-6 mt-1">
 
   <h3>iCal Subscribe URL</h3>
 
   <div class="row">
     <div class="col mb-3">
       <label class="form-label">Use this URL to subscribe in calendar software</label>
-      <input type="text" class="form-control" value="<%= Routes.user_shifts_ics_url(@socket, :index, @current_user.calendar_slug) %>" readonly onclick="this.focus();this.select()" />
+      <input type="text" class="form-control" value={Routes.user_shifts_ics_url(@socket, :index, @current_user.calendar_slug)} readonly onclick="this.focus();this.select()" />
     </div>
   </div>
 

lib/shift73k_web/live/user/settings/email.html.heex

@@ -1,12 +1,12 @@
-<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
+<div id={@id} class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
 
   <h3>Change email</h3>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 
     <%= label f, :email, class: "form-label" %>
-    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
+    <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"] %>
+      <i class="bi bi-at icon is-left text-muted fs-5"></i>
       <%= email_input f, :email,
           value: input_value(f, :email),
           class: input_class(f, :email, "form-control"),
@@ -20,7 +20,7 @@
 
     <%= label f, :current_password, class: "form-label" %>
     <div class="inner-addon left-addon mb-3">
-      <%= icon_div @socket, "bi-lock", [class: "icon is-left text-muted fs-5"] %>
+      <i class="bi bi-lock icon is-left text-muted fs-5"></i>
       <%= password_input f, :current_password,
           value: input_value(f, :current_password),
           id: "user_email_current_password",

lib/shift73k_web/live/user/settings/password.html.heex

@@ -1,12 +1,12 @@
-<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
+<div id={@id} class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
 
   <h3>Change password</h3>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 
     <%= label f, :password, "New password", class: "form-label" %>
-    <div class="inner-addon left-addon mb-3" phx-feedback-for="<%= input_id(f, :password) %>">
+    <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"] %>
+      <i class="bi bi-key icon is-left text-muted fs-5"></i>
       <%= password_input f, :password,
           value: input_value(f, :password),
           class: input_class(f, :password, "form-control"),
@@ -18,8 +18,8 @@
     </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) %>">
+    <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"] %>
+      <i class="bi bi-key-fill icon is-left text-muted fs-5"></i>
       <%= password_input f, :password_confirmation,
           value: input_value(f, :password_confirmation),
           class: input_class(f, :password_confirmation, "form-control"),
@@ -31,7 +31,7 @@
 
     <%= label f, :current_password, class: "form-label" %>
     <div class="inner-addon left-addon mb-3">
-      <%= icon_div @socket, "bi-lock", [class: "icon is-left text-muted fs-5"] %>
+      <i class="bi bi-lock icon is-left text-muted fs-5"></i>
       <%= password_input f, :current_password,
           value: input_value(f, :current_password),
           id: "user_password_current_password",

lib/shift73k_web/live/user/settings/week_start.html.heex

@@ -1,4 +1,4 @@
-<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
+<div id={@id} class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
 
   <h3>Calendar view</h3>
 
@@ -6,7 +6,7 @@
 
     <%= label cvf, :week_start_at, "Week starts at", class: "form-label" %>
     <div class="inner-addon left-addon mb-3">
-      <%= icon_div @socket, "bi-calendar2-range", [class: "icon is-left text-muted fs-5"] %>
+      <i class="bi bi-calendar2-range icon is-left text-muted fs-5"></i>
       <%= select cvf, :week_start_at, week_start_options(),
           value: @current_user.week_start_at,
           class: "form-select"

lib/shift73k_web/live/user_management/index.html.heex

@@ -17,7 +17,7 @@
 
 
 <h2 class="mb-3">
-  <i class="bi bi-people"></i> Listing Users
+  <i class="bi bi-people me-1"></i> Listing Users
 </h2>
 
 <%# filtering and new item creation %>
@@ -26,7 +26,7 @@
   <div class="col-12 col-md-6 col-lg-4 col-xl-3">
   <%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])),
       class: "btn btn-primary mb-3 mb-md-0" do %>
-    <i class="bi bi-person-plus"></i> New User
+    <i class="bi bi-person-plus me-1"></i> New User
   <% end %>
   </div>
 
@@ -34,10 +34,10 @@
   <%= form_for :sort, "#", [phx_change: "sort-by-change"], fn srt -> %>
     <%= label srt, :sort_by, class: "visually-hidden" %>
     <div class="input-group inner-addon left-addon mb-3 mb-md-0">
-      <%= icon_div @socket, "bi-arrow-down-up", [class: "icon is-left text-muted fs-5", style: "z-index:1001;"], [style: "padding: 1px;"] %>
+      <i class="bi bi-arrow-down-up icon is-left text-muted fs-5" style="z-index:1001;"></i>
-      <%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
+      <%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select rounded-start" %>
       <button class="btn btn-primary" type="button" aria-label="Change sort order" phx-click="sort-order-change">
-      <%= icon_div @socket, (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"), [class: "icon baseline"] %>
+        <i class={if @query.sort_order == "desc", do: "bi bi-sort-up-alt", else: "bi bi-sort-down-alt"}></i>
       </button>
     </div>
   <% end %>
@@ -47,9 +47,9 @@
   <%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %>
     <%= label flt, :filter, class: "visually-hidden" %>
     <div class="inner-addon left-addon right-addon">
-      <i class="bi bi-funnel is-left text-muted fs-5"></i>
+      <i class="bi bi-funnel icon is-left text-muted fs-5"></i>
       <%= 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"] %>
+        <i class="bi bi-x-circle-fill icon is-right text-primary fs-5 cursor-pointer pe-auto" role="img" aria-hidden="false" aria-label="Clear filter" phx-click="filter-clear"></i>
       <% end %>
       <%= text_input flt, :filter,
           name: "filter",
@@ -90,21 +90,19 @@
             </dt>
             <dd class="d-inline d-sm-block col-auto">
               <span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
-              <input type="checkbox" class="form-check-input" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %> disabled>
+              <input type="checkbox" class="form-check-input" aria-hidden="true" checked={user.confirmed_at && :true || :false} disabled>
             </dd>
           </dl>
 
           <%= 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-primary btn-sm text-nowrap" do %>
-              <%= icon_div @socket, "bi-pencil", [class: "icon baseline"] %>
+              <i class="bi bi-pencil me-1"></i> Edit
-              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 %>">
+            <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"] %>
+              <i class="bi bi-trash me-1"></i> Delete
-              Delete
             </button>
           <% end %>
 
@@ -124,28 +122,25 @@
     <thead>
       <tr>
 
-        <th scope="col" phx-click="sort-change" phx-value-sort_by="email" class="cursor-pointer">
+        <th scope="col" style="white-space: nowrap;" phx-click="sort-change" phx-value-sort_by="email" class="cursor-pointer">
           Email
-          <%= if @query.sort_by == "email", do: icon_div @socket,
+          <%= if @query.sort_by == "email" do %>
-                (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"),
+            <i class={@query.sort_order == "desc" && "bi bi-sort-up-alt ms-1" || "bi bi-sort-down-alt ms-1"}></i>
-                [class: "icon baseline ms-1"]
+          <% end %>
-              %>
         </th>
 
-        <th scope="col" phx-click="sort-change" phx-value-sort_by="role" class="cursor-pointer">
+        <th scope="col" style="white-space: nowrap;" phx-click="sort-change" phx-value-sort_by="role" class="cursor-pointer">
           Role
-          <%= if @query.sort_by == "role", do: icon_div @socket,
+          <%= if @query.sort_by == "role" do %>
-                (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"),
+            <i class={@query.sort_order == "desc" && "bi bi-sort-up-alt ms-1" || "bi bi-sort-down-alt ms-1"}></i>
-                [class: "icon baseline ms-1"]
+          <% end %>
-              %>
         </th>
 
-        <th scope="col" phx-click="sort-change" phx-value-sort_by="inserted_at" class="cursor-pointer">
+        <th scope="col" style="white-space: nowrap;" phx-click="sort-change" phx-value-sort_by="inserted_at" class="cursor-pointer">
           Created at
-          <%= if @query.sort_by == "inserted_at", do: icon_div @socket,
+          <%= if @query.sort_by == "inserted_at" do %>
-                (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"),
+            <i class={@query.sort_order == "desc" && "bi bi-sort-up-alt ms-1" || "bi bi-sort-down-alt ms-1"}></i>
-                [class: "icon baseline ms-1"]
+          <% end %>
-              %>
         </th>
 
         <th scope="col">Confirmed?</th>
@@ -166,27 +161,25 @@
         </tr>
       <% else %>
         <%= for user <- @page.entries do %>
-          <tr id="user-<%= user.id %>">
+          <tr id={"user-#{user.id}"}>
             <td class="align-middle"><%= user.email %></td>
             <td class="align-middle"><%= user.role |> Atom.to_string() |> String.capitalize() %></td>
             <td class="align-middle" style="white-space: nowrap;"><%= dt_out(user.inserted_at) %></td>
             <td class="align-middle">
               <span class="visually-hidden"><%= user.confirmed_at && "Confirmed" || "Not confirmed" %></span>
-              <input type="checkbox" class="form-check-input" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %> disabled>
+              <input type="checkbox" class="form-check-input" aria-hidden="true" checked={user.confirmed_at && :true || :false} disabled>
             </td>
             <td class="align-middle text-end text-nowrap">
 
               <%= 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"] %>
+                  <i class="bi bi-pencil me-1"></i> Edit
-                  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 %>">
+                <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"] %>
+                  <i class="bi bi-trash me-1"></i> Delete
-                  Delete
                 </button>
               <% end %>
 
@@ -225,16 +218,16 @@
     <ul class="pagination mb-0">
 
       <%# previous page button %>
-      <% icon = icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %>
       <%= if @page.page_number == 1 do %>
       <li class="page-item disabled">
-        <span class="page-link" aria-hidden="true"><%= icon %></span>
+        <span class="page-link" aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
         <span class="visually-hidden">Previous</span>
+      </li>
       <% else %>
       <li class="page-item">
-        <a class="page-link" href="#" aria-label="Previous" phx-value-page_number="<%= @page.page_number - 1 %>" phx-click="page-change"><%= icon %></a>
+        <a class="page-link" href="#" aria-label="Previous" phx-value-page_number={@page.page_number - 1} phx-click="page-change"><i class="bi bi-chevron-left"></i></a>
-      <% end %>
       </li>
+      <% end %>
 
       <%# page buttons %>
       <%= for page_num <- generate_page_list(@page.page_number, @page.total_pages) do %>
@@ -246,26 +239,26 @@
             </li>
         <%    page_num == @page.page_number -> %>
             <li class="page-item active" aria-current="page">
-              <span class="page-link"><%= page_num %></a>
+              <span class="page-link"><%= page_num %></span>
             </li>
         <%    true -> %>
             <li class="page-item">
-              <a class="page-link" href="#" phx-value-page_number="<%= page_num %>" phx-click="page-change"><%= page_num %></a>
+              <a class="page-link" href="#" phx-value-page_number={page_num} phx-click="page-change"><%= page_num %></a>
             </li>
         <% end %>
       <% end %>
 
       <%# next page button %>
-      <% icon = icon_div @socket, "bi-chevron-right", [class: "icon baseline"] %>
       <%= if @page.page_number == @page.total_pages do %>
       <li class="page-item disabled">
-        <span class="page-link" aria-hidden="true"><%= icon %></span>
+        <span class="page-link" aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
         <span class="visually-hidden">Next</span>
+      </li>
       <% else %>
       <li class="page-item">
-        <a class="page-link" href="#" aria-label="Next" phx-value-page_number="<%= @page.page_number + 1 %>" phx-click="page-change"><%= icon %></a>
+        <a class="page-link" href="#" aria-label="Next" phx-value-page_number={@page.page_number + 1} phx-click="page-change"><i class="bi bi-chevron-right"></i></a>
-      <% end %>
       </li>
+      <% end %>
 
     </ul>
   </nav>

lib/shift73k_web/templates/user_confirmation/new.html.heex

@@ -2,7 +2,7 @@
   <div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">
 
   <h2>
-    <i class="bi bi-arrow-repeat"></i> Resend confirmation instructions
+    <i class="bi bi-arrow-repeat me-1"></i> Resend confirmation instructions
   </h2>
   <p class="lead">We'll send you another email with instructions to confirm your email address.</p>
 

lib/shift73k_web/templates/user_reset_password/new.html.heex

@@ -2,7 +2,7 @@
   <div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">
 
   <h2>
-    <i class="bi bi-patch-question"></i> Forgot your password?
+    <i class="bi bi-patch-question me-1"></i> Forgot your password?
   </h2>
   <p class="lead">We'll send you an email with instructions to reset your password.</p>
 

lib/shift73k_web/templates/user_shifts_csv/new.html.heex

@@ -2,7 +2,7 @@
   <div class="col-12 col-md-10 col-xl-8">
 
   <h2>
-    <i class="bi bi-file-earmark-spreadsheet"></i> CSV Export
+    <i class="bi bi-file-earmark-spreadsheet me-1"></i> CSV Export
   </h2>
   <p class="lead">Select a date range for which to export a CSV of your scheduled shifts, or click "Export All" to export everything.</p>
 

lib/shift73k_web/templates/user_shifts_ics/index.html.heex

@@ -2,7 +2,7 @@
   <div class="col-12 col-md-10 col-xl-8">
 
   <h2>
-    <i class="bi bi-calendar2"></i> User Shifts ICS
+    <i class="bi bi-calendar2 me-1"></i> User Shifts ICS
   </h2>
   <p class="lead">Shifts for user: <%= @user.email %></p>
   <p>Calendar slug: <%= @slug %></p>

priv/repo/seeds.exs

@@ -51,8 +51,10 @@ mock_users = users_json |> File.read!() |> Jason.decode!() |> Enum.take_random(c
 
 extra_mock_users = ~s([
   {"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},
-  {"email":"kat@73k.us","password":"katkatA1","role":"manager","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":true}
+  {"email":"babka@73k.us","password":"Babka2020","role":"user","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":false},
+  {"email":"malcolm@73k.us","password":"Malc2018","role":"user","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":false},
+  {"email":"casio@73k.us","password":"Casio2011","role":"user","inserted_at":"2018-12-14T01:06:01Z","confirmed_at":false}
 ])
 
 # for random week_start_at values