Improve UX of join requests and fix minor bugs (#492)
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
## Description of the implemented changes The changes were: - [x] Bugfixing - [x] New Feature - [ ] Breaking Change - [ ] Refactoring This PR improves the join-request flow and presentation quality, fixes several data-display issues in join/join-request screens, and adds a usability improvement in global settings (directly opening the join link). It also includes dependency updates and changelog maintenance. ## What has been changed? - Join form (`JoinLive`) now renders inputs based on actual field types (including checkbox/date/number/email behavior instead of generic text-only handling). - Join form custom-field labels are resolved from configured custom fields (fallback remains safe if lookup fails). - Join-request details page (`JoinRequestLive.Show`) now: - resolves and shows custom field names instead of raw IDs, - formats boolean-like values (`on/true/1`, `off/false/0`) as localized `Yes/No`, - formats ISO date strings for better readability, - keeps legacy field handling while improving output consistency. - Join-request detail layout was improved semantically and visually (`dl/dt/dd` structure for label/value rows). - Global settings page now includes an **Open** button for the join URL (`target="_blank"`, `rel="noopener noreferrer"`, ARIA label). - Added/updated tests around: - join field type rendering, - custom field labels in join-request views, - related auth/global-settings behavior. - Updated translations (`default.pot`, `en`, `de`) for new UI strings. - Updated dependencies/tooling (`mix.lock`, `mix.exs`, CI/renovate-related updates). - Updated `CHANGELOG.md` entries for unreleased changes. ## Definition of Done ### Code Quality - [x] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [x] New elements are properly defined with html-tags - [x] Colour contrast follows WCAG criteria - [x] Aria labels are added when needed - [x] Everything is accessible by keyboard - [x] Tab-Order is comprehensible - [x] All interactive elements have a visible focus ### Testing - [x] Tests for new code are written - [ ] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes - Reviewer focus areas: - `lib/mv_web/live/join_live.ex`: input type derivation and custom field lookup strategy (`authorize?: false` read path used intentionally for field metadata). - `lib/mv_web/live/join_request_live/show.ex`: value-formatting logic (especially backward compatibility for legacy `form_data` payloads). - `lib/mv_web/live/global_settings_live.ex`: external-link behavior and accessibility attributes. - The branch also contains dependency update commits; please review lockfile and CI-related changes separately from functional join/join-request changes. Reviewed-on: #492 Co-authored-by: Simon <s.thiessen@local-it.org> Co-committed-by: Simon <s.thiessen@local-it.org>
This commit is contained in:
parent
bfa33dcae2
commit
2bb01bd201
14 changed files with 781 additions and 135 deletions
|
|
@ -5,7 +5,9 @@ defmodule MvWeb.JoinLive do
|
|||
"""
|
||||
use MvWeb, :live_view
|
||||
|
||||
alias Ash.Resource.Info
|
||||
alias Mv.Membership
|
||||
alias Mv.Membership.CustomFieldLookup
|
||||
alias MvWeb.JoinRateLimit
|
||||
alias MvWeb.Translations.MemberFields
|
||||
|
||||
|
|
@ -54,10 +56,6 @@ defmodule MvWeb.JoinLive do
|
|||
{gettext("Become a member")}
|
||||
</.header>
|
||||
|
||||
<p class="text-base-content/80">
|
||||
{gettext("Please enter your details for the membership application here.")}
|
||||
</p>
|
||||
|
||||
<%= if @submitted do %>
|
||||
<div data-testid="join-success-message" class="alert alert-success">
|
||||
<p class="font-medium">
|
||||
|
|
@ -67,6 +65,9 @@ defmodule MvWeb.JoinLive do
|
|||
</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-base-content/80">
|
||||
{gettext("Please enter your details for the membership application here.")}
|
||||
</p>
|
||||
<.form
|
||||
for={@form}
|
||||
id="join-form"
|
||||
|
|
@ -80,19 +81,41 @@ defmodule MvWeb.JoinLive do
|
|||
<% end %>
|
||||
|
||||
<%= for field <- @join_fields do %>
|
||||
<div>
|
||||
<label for={"join-field-#{field.id}"} class="label">
|
||||
<span class="label-text">{field.label}{if field.required, do: " *"}</span>
|
||||
<%= if field.input_type == "checkbox" do %>
|
||||
<input type="hidden" name={field.id} value="off" />
|
||||
<label
|
||||
for={"join-field-#{field.id}"}
|
||||
class="label cursor-pointer justify-start gap-3"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name={field.id}
|
||||
id={"join-field-#{field.id}"}
|
||||
checked={checkbox_checked?(@form.params[field.id])}
|
||||
required={field.required}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="label-text">
|
||||
{field.label}<span :if={field.required} aria-hidden="true"> *</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type={input_type(field.id)}
|
||||
name={field.id}
|
||||
id={"join-field-#{field.id}"}
|
||||
value={@form.params[field.id]}
|
||||
required={field.required}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<% else %>
|
||||
<div>
|
||||
<label for={"join-field-#{field.id}"} class="label">
|
||||
<span class="label-text">
|
||||
{field.label}<span :if={field.required} aria-hidden="true"> *</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type={field.input_type}
|
||||
name={field.id}
|
||||
id={"join-field-#{field.id}"}
|
||||
value={@form.params[field.id]}
|
||||
required={field.required}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<%!--
|
||||
|
|
@ -216,19 +239,32 @@ defmodule MvWeb.JoinLive do
|
|||
|
||||
defp build_join_fields_with_labels(allowlist) do
|
||||
member_field_strings = Mv.Constants.member_fields() |> Enum.map(&Atom.to_string/1)
|
||||
custom_field_by_id = custom_field_map(allowlist, member_field_strings)
|
||||
|
||||
Enum.map(allowlist, fn %{id: id, required: required} ->
|
||||
label =
|
||||
if id in member_field_strings do
|
||||
MemberFields.label(String.to_existing_atom(id))
|
||||
else
|
||||
gettext("Field")
|
||||
end
|
||||
|
||||
%{id: id, label: label, required: required}
|
||||
build_join_field(id, required, member_field_strings, custom_field_by_id)
|
||||
end)
|
||||
end
|
||||
|
||||
defp build_join_field(id, required, member_field_strings, custom_field_by_id) do
|
||||
if id in member_field_strings do
|
||||
label = MemberFields.label(String.to_existing_atom(id))
|
||||
%{id: id, label: label, required: required, input_type: member_field_input_type(id)}
|
||||
else
|
||||
custom_field = Map.get(custom_field_by_id, id)
|
||||
label = if custom_field, do: custom_field.name, else: gettext("Field")
|
||||
input_type = custom_field_input_type(custom_field && custom_field.value_type)
|
||||
|
||||
%{id: id, label: label, required: required, input_type: input_type}
|
||||
end
|
||||
end
|
||||
|
||||
defp custom_field_map(allowlist, _member_field_strings) do
|
||||
allowlist
|
||||
|> Enum.map(& &1.id)
|
||||
|> CustomFieldLookup.fetch_map_by_ids(authorize?: false, select: [:id, :name, :value_type])
|
||||
end
|
||||
|
||||
defp initial_form_params(join_fields) do
|
||||
join_fields
|
||||
|> Enum.map(fn f -> {f.id, ""} end)
|
||||
|
|
@ -236,8 +272,42 @@ defmodule MvWeb.JoinLive do
|
|||
|> Map.put(@honeypot_field, "")
|
||||
end
|
||||
|
||||
defp input_type("email"), do: "email"
|
||||
defp input_type(_), do: "text"
|
||||
defp member_field_input_type("email"), do: "email"
|
||||
|
||||
defp member_field_input_type(field_id) when is_binary(field_id) do
|
||||
case member_field_atom(field_id) do
|
||||
nil ->
|
||||
"text"
|
||||
|
||||
field_atom ->
|
||||
Mv.Membership.Member
|
||||
|> Info.attribute(field_atom)
|
||||
|> Map.get(:type)
|
||||
|> input_type_for()
|
||||
end
|
||||
end
|
||||
|
||||
defp member_field_input_type(_), do: "text"
|
||||
|
||||
defp member_field_atom(field_id) when is_binary(field_id) do
|
||||
Mv.Constants.member_fields()
|
||||
|> Enum.find(&(Atom.to_string(&1) == field_id))
|
||||
end
|
||||
|
||||
defp custom_field_input_type(type), do: input_type_for(type)
|
||||
|
||||
defp input_type_for(:date), do: "date"
|
||||
defp input_type_for(Ash.Type.Date), do: "date"
|
||||
defp input_type_for(:integer), do: "number"
|
||||
defp input_type_for(Ash.Type.Integer), do: "number"
|
||||
defp input_type_for(:boolean), do: "checkbox"
|
||||
defp input_type_for(Ash.Type.Boolean), do: "checkbox"
|
||||
defp input_type_for(:email), do: "email"
|
||||
defp input_type_for(Mv.Membership.Email), do: "email"
|
||||
defp input_type_for(_), do: "text"
|
||||
|
||||
defp checkbox_checked?(value) when value in [true, "true", "on", "1"], do: true
|
||||
defp checkbox_checked?(_), do: false
|
||||
|
||||
defp build_submit_attrs(params, join_fields) do
|
||||
allowlist_ids = MapSet.new(Enum.map(join_fields, & &1.id))
|
||||
|
|
@ -257,9 +327,12 @@ defmodule MvWeb.JoinLive do
|
|||
}
|
||||
|
||||
form_data =
|
||||
params
|
||||
|> Enum.filter(fn {key, _} -> key in allowlist_ids and key not in typed end)
|
||||
|> Map.new(fn {k, v} -> {k, String.trim(to_string(v))} end)
|
||||
join_fields
|
||||
|> Enum.filter(&(&1.id not in typed))
|
||||
|> Map.new(fn field ->
|
||||
{field.id, normalize_join_field_value(params[field.id], field.input_type)}
|
||||
end)
|
||||
|> Map.take(MapSet.to_list(allowlist_ids))
|
||||
|
||||
attrs = %{attrs | form_data: form_data}
|
||||
{:ok, attrs}
|
||||
|
|
@ -271,6 +344,10 @@ defmodule MvWeb.JoinLive do
|
|||
if is_binary(v), do: String.trim(v), else: nil
|
||||
end
|
||||
|
||||
defp normalize_join_field_value(raw, _input_type) when is_binary(raw), do: String.trim(raw)
|
||||
defp normalize_join_field_value(_raw, "checkbox"), do: "off"
|
||||
defp normalize_join_field_value(_raw, _input_type), do: ""
|
||||
|
||||
# Prefer X-Forwarded-For / X-Real-IP when behind a reverse proxy; fall back to peer_data.
|
||||
# Uses :inet.ntoa/1 for correct IPv4 and IPv6 string representation.
|
||||
defp client_ip_from_socket(socket) do
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue