feat: Funktionalität des Datumsauswählers zum Eingabefeld hinzufügen

- Einen Datumsauswähler implementiert, der beim Fokussieren des Eingabefeldes und beim Klicken auf das Kalendersymbol geöffnet wird.
- Sicherstellt, dass das Eingabefeld keine manuelle Dateneingabe zulässt, während der Kalender weiterhin angezeigt werden kann.
- Das `onkeydown`-Ereignis verwendet, um manuelle Eingaben zu verhindern und die Datenauswahl ausschließlich über den Datumsauswähler zu ermöglichen.

EnvelopeGenerator.Application/DTOs/EnvelopeReceiverReadOnly/EnvelopeReceiverReadOnlyCreateDto.cs

@@ -1,11 +1,15 @@
-using System.Text.Json.Serialization;
+using System.ComponentModel.DataAnnotations;
+using System.Text.Json.Serialization;
 
 namespace EnvelopeGenerator.Application.DTOs.EnvelopeReceiverReadOnly
 {
     public record EnvelopeReceiverReadOnlyCreateDto(
-        string ReceiverMail,
         DateTime DateValid)
     {
+        [EmailAddress]
+        [Required]
+        public required string ReceiverMail { get; init; }
+
         [JsonIgnore]
         public long? EnvelopeId { get; set; } = null;
 

EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml

@@ -126,11 +126,14 @@
                 <div class="modal-body">
                     <div class="input-group mb-3">
                         <span class="input-group-text">E-Mail</span>
-                        <input type="text" class="form-control" placeholder="user@samplemail.com" id="readonly-receiver-mail" aria-label="">
+                        <input type="text" class="form-control email-input" placeholder="user@mail.com" id="readonly-receiver-mail" aria-label="">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">Gültig bis</span>
-                        <input type="date" name="expiration" class="form-control" id="readonly-date-valid">
+                        <input type="date" name="expiration" class="form-control" lang="de" id="readonly-date-valid" onkeydown="return false;" onclick="this.showPicker()"
+                        min="@DateTime.Today.AddDays(1).ToString("yyyy-MM-dd")"
+                        max="@DateTime.Today.AddDays(90).ToString("yyyy-MM-dd")"
+                        value="@DateTime.Today.AddDays(7).ToString("yyyy-MM-dd")">
                     </div>
                 </div>
                 <div class="modal-footer">
@@ -150,16 +153,59 @@
 {
 <script nonce="@nonce">
     document.getElementById('readonly-send').addEventListener('click', async () => {
-        const receiverMail = document.getElementById('readonly-receiver-mail').value;
-        const dateValid = document.getElementById('readonly-date-valid').value;
+        const receiverMail = document.getElementById('readonly-receiver-mail');
+        const dateValid = document.getElementById('readonly-date-valid');
 
-        shareEnvelope(receiverMail, dateValid)
+        const receiverMail_value = receiverMail.value;
+        const dateValid_value = dateValid.value;
+    
+        //check email
+            if (!receiverMail_value || receiverMail.classList.contains('is-invalid')) {
+            Swal.fire({
+                icon: "error",
+                title: "Falsche Email",
+                text: "Die E-Mail-Adresse ist ungültig. Bitte verwenden Sie das richtige Format, z. B.: user@mail.com."
+            });
+            return;
+        }
+
+        //check the date
+        const tomorrow = new Date(Date.now() + 86400000);
+        if (new Date(dateValid_value) < tomorrow) {
+            Swal.fire({
+                icon: "error",
+                title: "Falsches Datum",
+                text: "Die Verteilung der Umschläge sollte mindestens einen Tag dauern."
+            });
+            return;
+        }
+
+        shareEnvelope(receiverMail_value, dateValid_value)
             .then(res => {
-                console.log(res)
+                if (res.ok) {
+                    Swal.fire({
+                        title: "Gesendet",
+                        icon: "success"
+                    });
+                }
+                else {
+                    Swal.fire({
+                        icon: "error",
+                        title: `Fehler ${res.status}`,
+                        text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
+                    });
+                }
             })
             .catch(err => {
-                console.log(err)
+                Swal.fire({
+                    icon: "error",
+                    title: "Unerwarteter Fehler",
+                    text: "Der Vorgang ist fehlgeschlagen. Bitte wenden Sie sich an das IT-Team."
+                });
             })
+
+            receiverMail.value = '';
+            dateValid.valueAsDate = new Date(new Date().setDate(new Date().getDate() + 8));
     });
 </script>
 }

EnvelopeGenerator.Web/wwwroot/js/event-binder.js

@@ -35,6 +35,15 @@ $('.btn_reject').click(_ =>
             Swal.showValidationMessage(`Request failed: ${res.message}`);
     }));
 
+document.querySelectorAll('.email-input').forEach(input => {
+    input.addEventListener('input', function() {
+        if (/^\S+@\S+\.\S+$/.test(this.value)) {
+            this.classList.remove('is-invalid');
+        } else {
+            this.classList.add('is-invalid');
+        }
+    });
+});
 
 class Comp {
     static ActPanel = class {

EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js

@@ -1,3 +1,3 @@
 $(".btn_reject").click(()=>Swal.fire({title:localized.rejection,html:`<div class="text-start fs-6 p-0 m-0">${localized.rejectionReasonQ}</div>`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(`
           Request failed: ${t}
-        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};}
+        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}}));document.querySelectorAll(".email-input").forEach(n=>{n.addEventListener("input",function(){/^\S+@\S+\.\S+$/.test(this.value)?this.classList.remove("is-invalid"):this.classList.add("is-invalid")})});class Comp{static ActPanel=class{static __Root;static get Root(){Comp.ActPanel.__Root??=document.getElementById("flex-action-panel");return Comp.ActPanel.__Root}static get Elements(){return[...Comp.ActPanel.Root.children]}static get IsHided(){return Comp.ActPanel.Root.style.display=="none"}static set Display(n){Comp.ActPanel.Root.style.display=n;Comp.ActPanel.Elements.forEach(t=>t.style.display=n)}static Toggle(){Comp.ActPanel.Display=Comp.ActPanel.IsHided?"":"none"}};static SignatureProgress=class{static __SignatureCount;static get SignatureCount(){this.__SignatureCount=parseInt(document.getElementById("signature-count").innerText);return this.__SignatureCount}static __SignedCountSpan;static get SignedCountSpan(){this.__SignedCountSpan??=document.getElementById("signed-count");return Comp.SignatureProgress.__SignedCountSpan}static __signedCount=0;static get SignedCount(){return this.__signedCount}static set SignedCount(n){this.__signedCount=n;const t=(n/this.SignatureCount)*100;this.SignedCountBar.style.setProperty("--progress-width",t+"%");this.SignedCountSpan.innerText=n.toString()}static __SignedCountBar;static get SignedCountBar(){this.__SignedCountBar??=document.getElementById("signed-count-bar");return this.__SignedCountBar}};}