From 83794d4bbc27e49c8d84ee846121fdc82af92fac Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Thu, 10 Oct 2024 19:21:15 +0200
Subject: [PATCH] feat: add email validation and toggle 'is-invalid' class for
 inputs with 'email-input' class

---
 EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml | 2 +-
 EnvelopeGenerator.Web/wwwroot/js/event-binder.js     | 9 +++++++++
 EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
index fc69e084..8fe1db1f 100644
--- a/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
+++ b/EnvelopeGenerator.Web/Views/Home/ShowEnvelope.cshtml
@@ -126,7 +126,7 @@
                 <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@samplemail.com" id="readonly-receiver-mail" aria-label="">
                     </div>
                     <div class="input-group">
                         <span class="input-group-text">Gültig bis</span>
diff --git a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js b/EnvelopeGenerator.Web/wwwroot/js/event-binder.js
index 076baabe..0252bfe4 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.js
+++ b/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 {
diff --git a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js b/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js
index 7d96784c..d2a513e4 100644
--- a/EnvelopeGenerator.Web/wwwroot/js/event-binder.min.js
+++ b/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}};}
\ No newline at end of file
+        `)}},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}};}
\ No newline at end of file