From 56173d423ba5b5990b3d80bdecfbcca3bb2bb918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20Eppl=C3=A9e?= <hello@rafa.ee>
Date: Tue, 2 Dec 2025 09:56:54 +0100
Subject: [PATCH] Mark required fields in UI

---
 lib/mv_web/components/core_components.ex | 44 ++++++++++++++++++------
 lib/mv_web/live/member_live/form.ex      |  2 +-
 priv/gettext/de/LC_MESSAGES/default.po   | 25 ++++++++++----
 priv/gettext/default.pot                 | 20 +++++++----
 priv/gettext/en/LC_MESSAGES/default.po   | 25 ++++++++++----
 5 files changed, 86 insertions(+), 30 deletions(-)

diff --git a/lib/mv_web/components/core_components.ex b/lib/mv_web/components/core_components.ex
index b8fe0fc..da9e9c9 100644
--- a/lib/mv_web/components/core_components.ex
+++ b/lib/mv_web/components/core_components.ex
@@ -56,7 +56,7 @@ defmodule MvWeb.CoreComponents do
       id={@id}
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
-      class="toast toast-top toast-end z-50"
+      class="z-50 toast toast-top toast-end"
       {@rest}
     >
       <div class={[
@@ -71,7 +71,7 @@ defmodule MvWeb.CoreComponents do
           <p>{msg}</p>
         </div>
         <div class="flex-1" />
-        <button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}>
+        <button type="button" class="self-start cursor-pointer group" aria-label={gettext("close")}>
           <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
         </button>
       </div>
@@ -180,7 +180,7 @@ defmodule MvWeb.CoreComponents do
       end)
 
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
         <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
         <span class="label">
@@ -192,7 +192,11 @@ defmodule MvWeb.CoreComponents do
             checked={@checked}
             class={@class || "checkbox checkbox-sm"}
             {@rest}
-          />{@label}
+          />{@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
         </span>
       </label>
       <.error :for={msg <- @errors}>{msg}</.error>
@@ -202,9 +206,15 @@ defmodule MvWeb.CoreComponents do
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
-        <span :if={@label} class="label mb-1">{@label}</span>
+        <span :if={@label} class="mb-1 label">
+          {@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
+        </span>
         <select
           id={@id}
           name={@name}
@@ -223,9 +233,15 @@ defmodule MvWeb.CoreComponents do
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
-        <span :if={@label} class="label mb-1">{@label}</span>
+        <span :if={@label} class="mb-1 label">
+          {@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
+        </span>
         <textarea
           id={@id}
           name={@name}
@@ -244,9 +260,15 @@ defmodule MvWeb.CoreComponents do
   # All other inputs text, datetime-local, url, password, etc. are handled here...
   def input(assigns) do
     ~H"""
-    <fieldset class="fieldset mb-2">
+    <fieldset class="mb-2 fieldset">
       <label>
-        <span :if={@label} class="label mb-1">{@label}</span>
+        <span :if={@label} class="mb-1 label">
+          {@label}<span
+            :if={@rest[:required]}
+            class="text-red-700 tooltip tooltip-right"
+            data-tip={gettext("This field cannot be empty")}
+          >*</span>
+        </span>
         <input
           type={@type}
           name={@name}
@@ -517,7 +539,7 @@ defmodule MvWeb.CoreComponents do
     <div class="mt-14">
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500">{name}</dt>
+          <dt class="flex-none w-1/4 text-zinc-500">{name}</dt>
           <dd class="text-zinc-700">{value}</dd>
         </div>
       </dl>
diff --git a/lib/mv_web/live/member_live/form.ex b/lib/mv_web/live/member_live/form.ex
index e4c2e7e..8d8863f 100644
--- a/lib/mv_web/live/member_live/form.ex
+++ b/lib/mv_web/live/member_live/form.ex
@@ -37,7 +37,7 @@ defmodule MvWeb.MemberLive.Form do
       <.header>
         {@page_title}
         <:subtitle>
-          {gettext("Use this form to manage member records and their properties.")}
+          {gettext("Fields marked with an asterisk (*) cannot be empty.")}
         </:subtitle>
       </.header>
 
diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po
index e9214fc..68723ba 100644
--- a/priv/gettext/de/LC_MESSAGES/default.po
+++ b/priv/gettext/de/LC_MESSAGES/default.po
@@ -10,7 +10,7 @@ msgid ""
 msgstr ""
 "Language: en\n"
 
-#: lib/mv_web/components/core_components.ex:356
+#: lib/mv_web/components/core_components.ex:378
 #, elixir-autogen, elixir-format
 msgid "Actions"
 msgstr "Aktionen"
@@ -174,11 +174,6 @@ msgstr "Speichern..."
 msgid "Street"
 msgstr "Straße"
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Use this form to manage member records and their properties."
-msgstr "Dieses Formular dient zur Verwaltung von Mitgliedern und deren Eigenschaften."
-
 #: lib/mv_web/live/member_live/show.ex:47
 #, elixir-autogen, elixir-format
 msgid "Id"
@@ -782,7 +777,25 @@ msgstr "Mitglied entverknüpfen"
 msgid "Unlinking scheduled"
 msgstr "Entverknüpfung geplant"
 
+#: lib/mv_web/live/member_live/form.ex:40
+#, elixir-autogen, elixir-format
+msgid "Fields marked with an asterisk (*) cannot be empty."
+msgstr "Felder, die mit einem Sternchen (*) markiert sind, dürfen nicht leer bleiben."
+
+#: lib/mv_web/components/core_components.ex:198
+#: lib/mv_web/components/core_components.ex:215
+#: lib/mv_web/components/core_components.ex:242
+#: lib/mv_web/components/core_components.ex:269
+#, elixir-autogen, elixir-format, fuzzy
+msgid "This field cannot be empty"
+msgstr "Dieses Feld darf nicht leer bleiben"
+
 #~ #: lib/mv_web/live/custom_field_live/index.ex:97
 #~ #, elixir-autogen, elixir-format
 #~ msgid "To confirm deletion, please enter the custom field slug:"
 #~ msgstr "Um die Löschung zu bestätigen, gib bitte den Slug des benutzerdefinierten Feldes ein:"
+
+#~ #: lib/mv_web/live/member_live/form.ex:40
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Use this form to manage member records and their properties."
+#~ msgstr "Dieses Formular dient zur Verwaltung von Mitgliedern und deren Eigenschaften."
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 47fe4dd..9acef50 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -11,7 +11,7 @@
 msgid ""
 msgstr ""
 
-#: lib/mv_web/components/core_components.ex:356
+#: lib/mv_web/components/core_components.ex:378
 #, elixir-autogen, elixir-format
 msgid "Actions"
 msgstr ""
@@ -175,11 +175,6 @@ msgstr ""
 msgid "Street"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Use this form to manage member records and their properties."
-msgstr ""
-
 #: lib/mv_web/live/member_live/show.ex:47
 #, elixir-autogen, elixir-format
 msgid "Id"
@@ -782,3 +777,16 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Unlinking scheduled"
 msgstr ""
+
+#: lib/mv_web/live/member_live/form.ex:40
+#, elixir-autogen, elixir-format
+msgid "Fields marked with an asterisk (*) cannot be empty."
+msgstr ""
+
+#: lib/mv_web/components/core_components.ex:198
+#: lib/mv_web/components/core_components.ex:215
+#: lib/mv_web/components/core_components.ex:242
+#: lib/mv_web/components/core_components.ex:269
+#, elixir-autogen, elixir-format
+msgid "This field cannot be empty"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index a9e59e8..4b9bc09 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -11,7 +11,7 @@ msgstr ""
 "Language: en\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: lib/mv_web/components/core_components.ex:356
+#: lib/mv_web/components/core_components.ex:378
 #, elixir-autogen, elixir-format
 msgid "Actions"
 msgstr ""
@@ -175,11 +175,6 @@ msgstr ""
 msgid "Street"
 msgstr ""
 
-#: lib/mv_web/live/member_live/form.ex:40
-#, elixir-autogen, elixir-format
-msgid "Use this form to manage member records and their properties."
-msgstr ""
-
 #: lib/mv_web/live/member_live/show.ex:47
 #, elixir-autogen, elixir-format
 msgid "Id"
@@ -783,7 +778,25 @@ msgstr ""
 msgid "Unlinking scheduled"
 msgstr ""
 
+#: lib/mv_web/live/member_live/form.ex:40
+#, elixir-autogen, elixir-format
+msgid "Fields marked with an asterisk (*) cannot be empty."
+msgstr ""
+
+#: lib/mv_web/components/core_components.ex:198
+#: lib/mv_web/components/core_components.ex:215
+#: lib/mv_web/components/core_components.ex:242
+#: lib/mv_web/components/core_components.ex:269
+#, elixir-autogen, elixir-format, fuzzy
+msgid "This field cannot be empty"
+msgstr ""
+
 #~ #: lib/mv_web/live/custom_field_live/index.ex:97
 #~ #, elixir-autogen, elixir-format
 #~ msgid "To confirm deletion, please enter the custom field slug:"
 #~ msgstr ""
+
+#~ #: lib/mv_web/live/member_live/form.ex:40
+#~ #, elixir-autogen, elixir-format
+#~ msgid "Use this form to manage member records and their properties."
+#~ msgstr ""