From 18c1adb68ab6d5a559c18ea9ddfd8ce95e040d7d Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 9 Nov 2026 16:08:00 +0100
Subject: [PATCH] Refactor receiver management UI in wizard

Simplify and restructure the UI for managing receivers in the sender creation wizard. Replace separate fields for adding new receivers with an inline approach, allowing users to add receivers directly within the receiver list.

Introduce a new inline receiver item with fields for name and email, along with an "Add" button. Update the receiver list layout to accommodate the new design.

Add styles for the inline receiver item and "Add Receiver" button in `sender-page.css`, including hover effects, disabled states, and alignment adjustments. Ensure the new design integrates seamlessly with the existing layout.
---
 .../Sender/CreateEnvelopeWizardPopup.razor    | 166 ++++++++----------
 .../wwwroot/css/sender-page.css               |  34 ++++
 2 files changed, 107 insertions(+), 93 deletions(-)

diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
index e3faccd8..fdc793dd 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/CreateEnvelopeWizardPopup.razor
@@ -282,105 +282,85 @@
                                                 }
                                             </div>
 
-                                            <div class="sender-create-wizard__form-grid">
-                                                <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
-                                                        <span>@L("FullName", "Vor- und Nachname") <span class="sender-create-wizard__required">*</span></span>
-                                                        <MudTooltip Text='@L("SenderWizard_Help_FullName", "Name des Empfaengers wie er in E-Mails und Signaturansicht angezeigt wird.")'>
-                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_FullName", "Hilfe zum Feld Vor- und Nachname")' />
-                                                        </MudTooltip>
-                                                    </label>
-                                                    <DxTextBox Text="@_receiverName"
-                                                               TextChanged="OnReceiverNameChanged"
-                                                               BindValueMode="BindValueMode.OnInput"
-                                                               NullText="Max Mustermann"
-                                                               CssClass="w-100" />
-                                                </div>
+                                            <div class="sender-create-wizard__receiver-tagbox-wrap">
+                                                <label class="sender-create-wizard__label sender-create-wizard__label-row">
+                                                    <span>@L("Receiver", "Empfänger")</span>
+                                                    <MudTooltip Text='@L("SenderWizard_Help_ReceiverList", "Hier sehen und verwalten Sie alle aktuell hinzugefuegten Empfaenger.")'>
+                                                        <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ReceiverList", "Hilfe zur Empfaengerliste")' />
+                                                    </MudTooltip>
+                                                </label>
 
-                                                <div class="sender-create-wizard__field">
-                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
-                                                        <span>@L("EmailAddress", "E-Mail-Adresse") <span class="sender-create-wizard__required">*</span></span>
-                                                        <MudTooltip Text='@L("SenderWizard_Help_EmailAddress", "An diese Adresse wird die Signaturanfrage gesendet.")'>
-                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_EmailAddress", "Hilfe zum Feld E-Mail-Adresse")' />
-                                                        </MudTooltip>
-                                                    </label>
-                                                    <DxTextBox Text="@_receiverEmail"
-                                                               TextChanged="OnReceiverEmailChanged"
-                                                               BindValueMode="BindValueMode.OnInput"
-                                                               NullText="name@beispiel.de"
-                                                               CssClass="w-100" />
-                                                </div>
-                                            </div>
+                                                <div class="sender-create-wizard__receiver-list" role="table" aria-label="Added receivers">
+                                                    @for (var i = 0; i < _receivers.Count; i++)
+                                                    {
+                                                        var rowIndex = i;
+                                                        var receiver = _receivers[rowIndex];
 
-                                            <div class="sender-create-wizard__receiver-actions">
-                                                <button type="button"
-                                                        class="sender-create-wizard__add-receiver-btn"
-                                                        @onclick="AddReceiver"
-                                                        disabled="@IsActionLocked">
-                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-                                                        <path d="M8 4a.5.5 0 0 1 .5.5V7.5H11.5a.5.5 0 0 1 0 1H8.5v3a.5.5 0 0 1-1 0v-3H4.5a.5.5 0 0 1 0-1H7.5v-3A.5.5 0 0 1 8 4z" />
-                                                    </svg>
-                                                    <span>@L("AddReceiver", "Empfänger hinzufügen")</span>
-                                                </button>
-                                            </div>
-
-                                            @if (_receivers.Count == 0)
-                                            {
-                                                <div class="sender-create-wizard__empty-list">
-                                                    @L("SenderEditor_NoReceiversAdded", "Noch keine Empfänger hinzugefügt.")
-                                                </div>
-                                            }
-                                            else
-                                            {
-                                                <div class="sender-create-wizard__receiver-tagbox-wrap">
-                                                    <label class="sender-create-wizard__label sender-create-wizard__label-row">
-                                                        <span>@L("Receiver", "Empfänger")</span>
-                                                        <MudTooltip Text='@L("SenderWizard_Help_ReceiverList", "Hier sehen und verwalten Sie alle aktuell hinzugefuegten Empfaenger.")'>
-                                                            <MudIconButton Icon="@Icons.Material.Filled.Info" Color="Color.Tertiary" Size="Size.Small" Class="sender-create-wizard__help-icon" aria-label='@L("SenderWizard_HelpAria_ReceiverList", "Hilfe zur Empfaengerliste")' />
-                                                        </MudTooltip>
-                                                    </label>
-
-                                                    <div class="sender-create-wizard__receiver-list" role="table" aria-label="Added receivers">
-                                                        @for (var i = 0; i < _receivers.Count; i++)
-                                                        {
-                                                            var rowIndex = i;
-                                                            var receiver = _receivers[rowIndex];
-
-                                                            <div class="sender-create-wizard__receiver-item" role="row">
-                                                                <div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
-                                                                    <div class="sender-create-wizard__field">
-                                                                        <DxTextBox Text="@receiver.FullName"
-                                                                                   TextChanged="@(value => OnReceiverListNameChanged(rowIndex, value))"
-                                                                                   BindValueMode="BindValueMode.OnInput"
-                                                                                   NullText='@L("FullName", "Vor- und Nachname")'
-                                                                                   CssClass="w-100"
-                                                                                   Enabled="@(!IsActionLocked)" />
-                                                                    </div>
-                                                                    <div class="sender-create-wizard__field">
-                                                                        <DxTextBox Text="@receiver.EmailAddress"
-                                                                                   TextChanged="@(value => OnReceiverListEmailChanged(rowIndex, value))"
-                                                                                   BindValueMode="BindValueMode.OnInput"
-                                                                                   NullText='@L("EmailAddress", "E-Mail-Adresse")'
-                                                                                   CssClass="w-100"
-                                                                                   Enabled="@(!IsActionLocked)" />
-                                                                    </div>
+                                                        <div class="sender-create-wizard__receiver-item" role="row">
+                                                            <div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
+                                                                <div class="sender-create-wizard__field">
+                                                                    <DxTextBox Text="@receiver.FullName"
+                                                                               TextChanged="@(value => OnReceiverListNameChanged(rowIndex, value))"
+                                                                               BindValueMode="BindValueMode.OnInput"
+                                                                               NullText='@L("FullName", "Vor- und Nachname")'
+                                                                               CssClass="w-100"
+                                                                               Enabled="@(!IsActionLocked)" />
+                                                                </div>
+                                                                <div class="sender-create-wizard__field">
+                                                                    <DxTextBox Text="@receiver.EmailAddress"
+                                                                               TextChanged="@(value => OnReceiverListEmailChanged(rowIndex, value))"
+                                                                               BindValueMode="BindValueMode.OnInput"
+                                                                               NullText='@L("EmailAddress", "E-Mail-Adresse")'
+                                                                               CssClass="w-100"
+                                                                               Enabled="@(!IsActionLocked)" />
                                                                 </div>
-                                                                <button type="button"
-                                                                        class="sender-create-wizard__receiver-remove-btn"
-                                                                        @onclick="() => RemoveReceiver(receiver)"
-                                                                        disabled="@IsActionLocked"
-                                                                        title='@L("Remove", "Entfernen")'
-                                                                        aria-label='@L("Remove", "Entfernen")'>
-                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
-                                                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
-                                                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                                                                    </svg>
-                                                                </button>
                                                             </div>
-                                                        }
+                                                            <button type="button"
+                                                                    class="sender-create-wizard__receiver-remove-btn"
+                                                                    @onclick="() => RemoveReceiver(receiver)"
+                                                                    disabled="@IsActionLocked"
+                                                                    title='@L("Remove", "Entfernen")'
+                                                                    aria-label='@L("Remove", "Entfernen")'>
+                                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+                                                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                                                </svg>
+                                                            </button>
+                                                        </div>
+                                                    }
+
+                                                    <div class="sender-create-wizard__receiver-item sender-create-wizard__receiver-item--new" role="row">
+                                                        <div class="sender-create-wizard__form-grid sender-create-wizard__field--full sender-create-wizard__receiver-item-fields">
+                                                            <div class="sender-create-wizard__field">
+                                                                <DxTextBox Text="@_receiverName"
+                                                                           TextChanged="OnReceiverNameChanged"
+                                                                           BindValueMode="BindValueMode.OnInput"
+                                                                           NullText="Max Mustermann"
+                                                                           CssClass="w-100"
+                                                                           Enabled="@(!IsActionLocked)" />
+                                                            </div>
+                                                            <div class="sender-create-wizard__field">
+                                                                <DxTextBox Text="@_receiverEmail"
+                                                                           TextChanged="OnReceiverEmailChanged"
+                                                                           BindValueMode="BindValueMode.OnInput"
+                                                                           NullText="name@beispiel.de"
+                                                                           CssClass="w-100"
+                                                                           Enabled="@(!IsActionLocked)" />
+                                                            </div>
+                                                        </div>
+                                                        <button type="button"
+                                                                class="sender-create-wizard__receiver-add-inline-btn"
+                                                                @onclick="AddReceiver"
+                                                                disabled="@IsActionLocked"
+                                                                title='@L("AddReceiver", "Empfänger hinzufügen")'
+                                                                aria-label='@L("AddReceiver", "Empfänger hinzufügen")'>
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+                                                                <path d="M8 1a.5.5 0 0 1 .5.5V7.5h6a.5.5 0 0 1 0 1h-6v6a.5.5 0 0 1-1 0v-6h-6a.5.5 0 0 1 0-1h6v-6A.5.5 0 0 1 8 1z" />
+                                                            </svg>
+                                                        </button>
                                                     </div>
                                                 </div>
-                                            }
+                                            </div>
                                         }
                                         else
                                         {
diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
index 3f8dd1f3..097e914e 100644
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/sender-page.css
@@ -1563,6 +1563,34 @@
     cursor: not-allowed;
 }
 
+.sender-create-wizard__receiver-item--new {
+    border-style: dashed;
+}
+
+.sender-create-wizard__receiver-add-inline-btn {
+    flex: 0 0 auto;
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(14, 116, 144, 0.25);
+    border-radius: 6px;
+    background: rgba(236, 254, 255, 0.95);
+    color: #0f766e;
+    padding: 0;
+    line-height: 1;
+}
+
+.sender-create-wizard__receiver-add-inline-btn:hover:not(:disabled) {
+    background: rgba(207, 250, 254, 1);
+}
+
+.sender-create-wizard__receiver-add-inline-btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
 .sender-create-wizard__upload-stage {
     display: flex;
     flex-direction: column;
@@ -1738,6 +1766,12 @@
         align-self: flex-end;
     }
 
+    .sender-create-wizard__receiver-add-inline-btn {
+        width: auto;
+        min-width: 2rem;
+        align-self: flex-end;
+    }
+
     .sender-pdf-dropzone {
         width: 100%;
     }