user settings templates updated, user management index template updated

This commit is contained in:
Adam Piontek 2022-08-13 09:26:09 -04:00
parent 3eff955672
commit ce03eaaf2d
13 changed files with 69 additions and 74 deletions

View file

@ -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>

View file

@ -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"] %>
Reset password
<i class="bi bi-shield-lock me-1"></i> 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) %>">
<%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password)}>
<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) %>">
<%= icon_div @socket, "bi-key-fill", [class: "icon is-left text-muted fs-5"] %>
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password_confirmation)}>
<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"),

View file

@ -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"] %>
User Settings</h2>
<h2 class="mb-3">
<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 %>

View file

@ -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>

View file

@ -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) %>">
<%= icon_div @socket, "bi-at", [class: "icon is-left text-muted fs-5"] %>
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :email)}>
<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",

View file

@ -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) %>">
<%= icon_div @socket, "bi-key", [class: "icon is-left text-muted fs-5"] %>
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password)}>
<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) %>">
<%= icon_div @socket, "bi-key-fill", [class: "icon is-left text-muted fs-5"] %>
<div class="inner-addon left-addon mb-3" phx-feedback-for={input_id(f, :password_confirmation)}>
<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",

View file

@ -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"

View file

@ -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;"] %>
<%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
<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 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"] %>
Edit
<i class="bi bi-pencil me-1"></i> 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"] %>
Delete
<button class="btn btn-outline-danger btn-sm text-nowrap" phx-click="delete-modal" phx-value-id={user.id}>
<i class="bi bi-trash me-1"></i> 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,
(@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"),
[class: "icon baseline ms-1"]
%>
<%= if @query.sort_by == "email" do %>
<i class={@query.sort_order == "desc" && "bi bi-sort-up-alt ms-1" || "bi bi-sort-down-alt ms-1"}></i>
<% 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,
(@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"),
[class: "icon baseline ms-1"]
%>
<%= if @query.sort_by == "role" do %>
<i class={@query.sort_order == "desc" && "bi bi-sort-up-alt ms-1" || "bi bi-sort-down-alt ms-1"}></i>
<% 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,
(@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"),
[class: "icon baseline ms-1"]
%>
<%= if @query.sort_by == "inserted_at" do %>
<i class={@query.sort_order == "desc" && "bi bi-sort-up-alt ms-1" || "bi bi-sort-down-alt ms-1"}></i>
<% 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"] %>
Edit
<i class="bi bi-pencil me-1"></i> 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"] %>
Delete
<button class="btn btn-outline-danger btn-sm text-nowrap" phx-click="delete-modal" phx-value-id={user.id}>
<i class="bi bi-trash me-1"></i> 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>
<% end %>
<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>
</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>
<% end %>
<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>
</li>
<% end %>
</ul>
</nav>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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