From e24d5b8f5e1ce26f64c4af6120055e99c388019e Mon Sep 17 00:00:00 2001
From: abhigyan-mohanta <underthunder02@gmail.com>
Date: Wed, 6 Nov 2024 13:06:22 +0530
Subject: [PATCH] fix #5314 Email Address Friendly Name Error

---
 src/components/notifications/SendGrid.vue | 105 ++++++++++++++++++++--
 1 file changed, 100 insertions(+), 5 deletions(-)

diff --git a/src/components/notifications/SendGrid.vue b/src/components/notifications/SendGrid.vue
index 18118f469..01d4f453b 100644
--- a/src/components/notifications/SendGrid.vue
+++ b/src/components/notifications/SendGrid.vue
@@ -5,21 +5,65 @@
     </div>
     <div class="mb-3">
         <label for="sendgrid-from-email" class="form-label">{{ $t("From Email") }}</label>
-        <input id="sendgrid-from-email" v-model="$parent.notification.sendgridFromEmail" type="email" class="form-control" required>
+        <input 
+            id="sendgrid-from-email" 
+            v-model="$parent.notification.sendgridFromEmail" 
+            type="text" 
+            class="form-control" 
+            :class="{ 'is-invalid': errors.from }"
+            @input="validateEmail($event, 'from')"
+            required
+        >
+        <div class="invalid-feedback" v-if="errors.from">
+            {{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com") }}
+        </div>
     </div>
     <div class="mb-3">
         <label for="sendgrid-to-email" class="form-label">{{ $t("To Email") }}</label>
-        <input id="sendgrid-to-email" v-model="$parent.notification.sendgridToEmail" type="email" class="form-control" required>
+        <input 
+            id="sendgrid-to-email" 
+            v-model="$parent.notification.sendgridToEmail" 
+            type="text" 
+            class="form-control"
+            :class="{ 'is-invalid': errors.to }"
+            @input="validateEmail($event, 'to')"
+            required
+        >
+        <div class="invalid-feedback" v-if="errors.to">
+            {{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com") }}
+        </div>
     </div>
     <div class="mb-3">
         <label for="sendgrid-cc-email" class="form-label">{{ $t("smtpCC") }}</label>
-        <input id="sendgrid-cc-email" v-model="$parent.notification.sendgridCcEmail" type="email" class="form-control">
+        <input 
+            id="sendgrid-cc-email" 
+            v-model="$parent.notification.sendgridCcEmail" 
+            type="text" 
+            class="form-control"
+            :class="{ 'is-invalid': errors.cc }"
+            @input="validateEmail($event, 'cc')"
+            
+        >
         <div class="form-text">{{ $t("Separate multiple email addresses with commas") }}</div>
+        <div class="invalid-feedback" v-if="errors.cc">
+            {{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com for each address") }}
+        </div>
     </div>
     <div class="mb-3">
         <label for="sendgrid-bcc-email" class="form-label">{{ $t("smtpBCC") }}</label>
-        <input id="sendgrid-bcc-email" v-model="$parent.notification.sendgridBccEmail" type="email" class="form-control">
-        <small class="form-text text-muted">{{ $t("Separate multiple email addresses with commas") }}</small>
+        <input 
+            id="sendgrid-bcc-email" 
+            v-model="$parent.notification.sendgridBccEmail" 
+            type="text" 
+            class="form-control"
+            :class="{ 'is-invalid': errors.bcc }"
+            @input="validateEmail($event, 'bcc')"
+            
+        >
+        <div class="form-text">{{ $t("Separate multiple email addresses with commas") }}</div>
+        <div class="invalid-feedback" v-if="errors.bcc">
+            {{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com for each address") }}
+        </div>
     </div>
     <div class="mb-3">
         <label for="sendgrid-subject" class="form-label">{{ $t("Subject:") }}</label>
@@ -38,6 +82,46 @@ export default {
     components: {
         HiddenInput,
     },
+    
+    data() {
+        return {
+            errors: {
+                from: false,
+                to: false,
+                cc: false,
+                bcc: false
+            }
+        }
+    },
+
+    methods: {
+        isValidEmailFormat(value) {
+            const friendlyEmailRegex = /^[^<>]+ <[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}>$/;
+            const emailOnlyRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+            return friendlyEmailRegex.test(value) || emailOnlyRegex.test(value);
+        },
+
+        validateEmail(event, field) {
+            const value = event.target.value;
+            
+            if (!value) {
+                this.errors[field] = false;
+                return;
+            }
+
+            if (field === 'cc' || field === 'bcc') {
+                if (value.includes(',')) {
+                    this.errors[field] = !value.split(',')
+                        .map(email => email.trim())
+                        .every(email => this.isValidEmailFormat(email));
+                    return;
+                }
+            }
+            
+            this.errors[field] = !this.isValidEmailFormat(value);
+        }
+    },
+
     mounted() {
         if (typeof this.$parent.notification.sendgridSubject === "undefined") {
             this.$parent.notification.sendgridSubject = "Notification from Your Uptime Kuma";
@@ -45,3 +129,14 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.is-invalid {
+    border-color: #dc3545;
+    padding-right: calc(1.5em + 0.75rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.1875rem) center;
+    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+</style>
\ No newline at end of file