TyleoDvDelaware3217/Kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-06-05 04:42:34 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

change input type to text

Browse source
This commit is contained in:
Abhigyan Mohanta 2024-11-06 22:41:17 +05:30 • committed by GitHub
parent f56be2ec9f
commit c0b2ffb863
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 6 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/components/notifications/SendGrid.vue
View file

@ -1,67 +1,25 @@
<template>
<div class="mb-3">
<label for="sendgrid-api-key" class="form-label">{{ $t("SendGrid API Key") }}</label>
<HiddenInput id="push-api-key" v-model="$parent.notification.sendgridApiKey" required autocomplete="new-password"></HiddenInput>
<HiddenInput id="push-api-key" v-model="$parent.notification.sendgridApiKey" :required="true" autocomplete="new-password"></HiddenInput>
</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="text"
class="form-control"
:class="{ 'is-invalid': errors.from }"
required
@input="validateEmail($event, 'from')"
>
<div v-if="errors.from" class="invalid-feedback">
{{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com") }}
</div>
<input id="sendgrid-from-email" v-model="$parent.notification.sendgridFromEmail" type="text" class="form-control" required>
</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="text"
class="form-control"
:class="{ 'is-invalid': errors.to }"
required
@input="validateEmail($event, 'to')"
>
<div v-if="errors.to" class="invalid-feedback">
{{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com") }}
</div>
<input id="sendgrid-to-email" v-model="$parent.notification.sendgridToEmail" type="text" class="form-control" required>
</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="text"
class="form-control"
:class="{ 'is-invalid': errors.cc }"
@input="validateEmail($event, 'cc')"
>
<input id="sendgrid-cc-email" v-model="$parent.notification.sendgridCcEmail" type="text" class="form-control">
<div class="form-text">{{ $t("Separate multiple email addresses with commas") }}</div>
<div v-if="errors.cc" class="invalid-feedback">
{{ $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="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 v-if="errors.bcc" class="invalid-feedback">
{{ $t("Please use format: Friendly Name <email@domain.com> or just email@domain.com for each address") }}
</div>
<input id="sendgrid-bcc-email" v-model="$parent.notification.sendgridBccEmail" type="text" class="form-control">
<small class="form-text text-muted">{{ $t("Separate multiple email addresses with commas") }}</small>
</div>
<div class="mb-3">
<label for="sendgrid-subject" class="form-label">{{ $t("Subject:") }}</label>
@ -80,61 +38,10 @@ export default {
components: {
HiddenInput,
},
data() {
return {
errors: {
from: false,
to: false,
cc: false,
bcc: false
}
};
},
mounted() {
if (typeof this.$parent.notification.sendgridSubject === "undefined") {
this.$parent.notification.sendgridSubject = "Notification from Your Uptime Kuma";
}
},
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);
}
}
};
</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>