mitgliederverwaltung/lib/mv_web/live/join_live.ex
Simon 2bb01bd201
All checks were successful
continuous-integration/drone/push Build is passing
Improve UX of join requests and fix minor bugs (#492)
## 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>
2026-05-06 14:34:42 +02:00

384 lines
13 KiB
Elixir
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

defmodule MvWeb.JoinLive do
@moduledoc """
Public join page (unauthenticated). Renders form from allowlist, handles submit
with honeypot and rate limiting; shows success copy after submit.
"""
use MvWeb, :live_view
alias Ash.Resource.Info
alias Mv.Membership
alias Mv.Membership.CustomFieldLookup
alias MvWeb.JoinRateLimit
alias MvWeb.Translations.MemberFields
# Honeypot field name (legitimate-sounding to avoid bot detection)
@honeypot_field "website"
# Anti-enumeration: delay before showing success (ms). Applied in LiveView so the process is not blocked.
@anti_enumeration_delay_ms_min 100
@anti_enumeration_delay_ms_rand 200
@impl true
def mount(_params, _session, socket) do
allowlist = Membership.get_join_form_allowlist()
join_fields = build_join_fields_with_labels(allowlist)
client_ip = client_ip_from_socket(socket)
club_name =
case Membership.get_settings() do
{:ok, s} -> s.club_name || "Mitgliederverwaltung"
_ -> "Mitgliederverwaltung"
end
socket =
socket
|> assign(:join_fields, join_fields)
|> assign(:submitted, false)
|> assign(:rate_limit_error, nil)
|> assign(:client_ip, client_ip)
|> assign(:honeypot_field, @honeypot_field)
|> assign(:club_name, club_name)
|> Layouts.assign_page_title(gettext("Join"))
|> assign(:form, to_form(initial_form_params(join_fields)))
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<Layouts.public_page flash={@flash} club_name={@club_name}>
<div class="max-w-4xl mx-auto">
<div class="hero min-h-[60vh] bg-base-200 rounded-lg">
<div class="hero-content flex-col items-start text-left">
<div class="max-w-xl w-full space-y-6">
<.header>
{gettext("Become a member")}
</.header>
<%= if @submitted do %>
<div data-testid="join-success-message" class="alert alert-success">
<p class="font-medium">
{gettext(
"We have saved your details. To complete your request, please click the link we sent to your email."
)}
</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"
phx-submit="submit"
class="space-y-4"
>
<%= if @rate_limit_error do %>
<div class="alert alert-error">
{@rate_limit_error}
</div>
<% end %>
<%= for field <- @join_fields do %>
<%= 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>
<% 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 %>
<%!--
Honeypot (best practice): legit field name "website", type="text", no inline CSS,
hidden via class in app.css (off-screen + 1px). tabindex=-1, autocomplete=off,
aria-hidden so screen readers skip. If filled → silent failure (same success UI).
--%>
<div class="join-form-helper" aria-hidden="true">
<label for="join-website" class="sr-only">{gettext("Website")}</label>
<input
type="text"
name={@honeypot_field}
id="join-website"
tabindex="-1"
autocomplete="off"
class="join-form-helper-input"
/>
</div>
<p class="text-sm text-base-content/85">
{gettext(
"By submitting your application you will receive an email with a confirmation link. Once you have confirmed your email address, your application will be reviewed."
)}
</p>
<p class="text-xs text-base-content/80">
{gettext(
"Your details are only used to process your membership application and to contact you. To prevent abuse we also process technical data (e.g. IP address) only as necessary."
)}
</p>
<div>
<button type="submit" class="btn btn-primary">
{gettext("Submit request")}
</button>
</div>
</.form>
<% end %>
</div>
</div>
</div>
</div>
</Layouts.public_page>
"""
end
@impl true
def handle_event("submit", params, socket) do
# Honeypot: if filled, treat as bot show same success UI, do not create (silent failure)
honeypot_value = String.trim(params[@honeypot_field] || "")
if honeypot_value != "" do
{:noreply, assign(socket, :submitted, true)}
else
key = "join:#{socket.assigns.client_ip}"
case JoinRateLimit.check(key) do
:allow -> do_submit(socket, params)
{:deny, _retry_after} -> rate_limited_reply(socket, params)
end
end
end
defp do_submit(socket, params) do
case build_submit_attrs(params, socket.assigns.join_fields) do
{:ok, attrs} ->
case Membership.submit_join_request(attrs, actor: nil) do
{:ok, _} ->
delay_ms =
@anti_enumeration_delay_ms_min + :rand.uniform(@anti_enumeration_delay_ms_rand)
Process.send_after(self(), :show_join_success, delay_ms)
{:noreply, socket}
{:error, :email_delivery_failed} ->
{:noreply,
socket
|> put_flash(
:error,
gettext(
"We could not send the confirmation email. Please try again later or contact support."
)
)
|> assign(:form, to_form(params, as: "join"))}
{:error, _} ->
validation_error_reply(socket, params)
end
{:error, message} ->
{:noreply,
socket
|> put_flash(:error, message)
|> assign(:form, to_form(params, as: "join"))}
end
end
defp validation_error_reply(socket, params) do
{:noreply,
socket
|> put_flash(:error, gettext("Please check your entries. Email is required."))
|> assign(:form, to_form(params, as: "join"))}
end
@impl true
def handle_info(:show_join_success, socket) do
{:noreply, assign(socket, :submitted, true)}
end
# Swoosh (e.g. in test) may send {:email, email} to the LiveView process; ignore.
def handle_info(_msg, socket) do
{:noreply, socket}
end
defp rate_limited_reply(socket, params) do
{:noreply,
socket
|> assign(:rate_limit_error, gettext("Too many requests. Please try again later."))
|> assign(:form, to_form(params, as: "join"))}
end
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} ->
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)
|> Map.new()
|> Map.put(@honeypot_field, "")
end
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))
typed = ["email", "first_name", "last_name"]
email = String.trim(params["email"] || "")
if email == "" do
{:error, gettext("Email is required.")}
else
attrs = %{
email: email,
first_name: optional_param(params, "first_name"),
last_name: optional_param(params, "last_name"),
form_data: %{},
schema_version: 1
}
form_data =
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}
end
end
defp optional_param(params, key) do
v = params[key]
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
with nil <- client_ip_from_headers(socket),
%{address: address} when is_tuple(address) <- get_connect_info(socket, :peer_data) do
address |> :inet.ntoa() |> to_string()
else
ip when is_binary(ip) -> ip
_ -> "unknown"
end
end
defp client_ip_from_headers(socket) do
headers = get_connect_info(socket, :x_headers) || []
real_ip = header_value(headers, "x-real-ip")
forwarded = header_value(headers, "x-forwarded-for")
cond do
real_ip != nil -> real_ip
forwarded != nil -> String.split(forwarded, ~r/,\s*/) |> List.first() |> String.trim()
true -> nil
end
end
defp header_value(headers, name) do
name_lower = String.downcase(name)
headers
|> Enum.find_value(fn
{h, v} when is_binary(h) -> if String.downcase(h) == name_lower, do: String.trim(v)
_ -> nil
end)
end
end