first commit
This commit is contained in:
220
resources/js/smtp-settings/SenderResponseForm.js
Normal file
220
resources/js/smtp-settings/SenderResponseForm.js
Normal file
@ -0,0 +1,220 @@
|
||||
export default class SenderResponseForm {
|
||||
constructor(config = {}) {
|
||||
const defaultConfig = {
|
||||
formSenderResponseId: 'mail-sender-response-settings-card',
|
||||
replyToMethodId: 'reply_to_method',
|
||||
saveSenderResponseButtonId: 'save_sender_response_button',
|
||||
cancelButtonId: 'cancel_sender_response_button'
|
||||
};
|
||||
|
||||
this.config = { ...defaultConfig, ...config };
|
||||
this.formSenderResponse = null;
|
||||
this.smtpReplyToMethod = null;
|
||||
this.saveButton = null;
|
||||
this.cancelButton = null;
|
||||
|
||||
this.init(); // Inicializa el formulario
|
||||
}
|
||||
|
||||
// Método para inicializar el formulario
|
||||
init() {
|
||||
try {
|
||||
// Obtener elementos esenciales
|
||||
this.formSenderResponse = document.getElementById(this.config.formSenderResponseId);
|
||||
this.smtpReplyToMethod = document.getElementById(this.config.replyToMethodId);
|
||||
this.saveButton = document.getElementById(this.config.saveSenderResponseButtonId);
|
||||
this.cancelButton = document.getElementById(this.config.cancelButtonId);
|
||||
|
||||
// Asignar eventos
|
||||
this.formSenderResponse.addEventListener('input', event => this.handleInput(event));
|
||||
this.smtpReplyToMethod.addEventListener('change', () => this.handleToggleReplyToMethod());
|
||||
this.cancelButton.addEventListener('click', () => this.handleCancel());
|
||||
|
||||
// Inicializar validación del formulario
|
||||
this.initializeFormValidation(this.formSenderResponse, this.senderResponsValidateConfig, () => {
|
||||
this.handleFormValid();
|
||||
});
|
||||
|
||||
// Disparar el evento 'change' en el método de respuesta
|
||||
setTimeout(() => this.smtpReplyToMethod.dispatchEvent(new Event('change')), 0);
|
||||
} catch (error) {
|
||||
console.error('Error al inicializar el formulario de respuesta:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Método de recarga parcial
|
||||
* Este método restablece la validación y los eventos sin destruir la instancia.
|
||||
*/
|
||||
reload() {
|
||||
try {
|
||||
// Vuelve a inicializar la validación del formulario
|
||||
this.initializeFormValidation(this.formSenderResponse, this.senderResponsValidateConfig, () => {
|
||||
this.handleFormValid();
|
||||
});
|
||||
|
||||
// Vuelve a agregar los eventos (si es necesario, depende de tu lógica)
|
||||
this.smtpReplyToMethod.dispatchEvent(new Event('change'));
|
||||
} catch (error) {
|
||||
console.error('Error al recargar el formulario:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja el evento de entrada en el formulario.
|
||||
* @param {Event} event - Evento de entrada.
|
||||
*/
|
||||
handleInput(event) {
|
||||
const target = event.target;
|
||||
|
||||
if (['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
|
||||
this.toggleButtonsState(this.formSenderResponse, true); // Habilitar botones
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Muestra u oculta el campo de correo personalizado según el método de respuesta seleccionado.
|
||||
* @param {HTMLElement} smtpReplyToMethod - Elemento select del método de respuesta.
|
||||
*/
|
||||
handleToggleReplyToMethod() {
|
||||
const emailCustomDiv = document.querySelector('.email-custom-div');
|
||||
|
||||
if (emailCustomDiv) {
|
||||
emailCustomDiv.style.display = Number(this.smtpReplyToMethod.value) === 3 ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancels the sender response form submission.
|
||||
* This method disables the form buttons, disables all form fields,
|
||||
* and sets the cancel button to a loading state.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
handleCancel() {
|
||||
this.disableFormFields(this.formSenderResponse);
|
||||
this.toggleButtonsState(this.formSenderResponse, false);
|
||||
this.setButtonLoadingState(this.cancelButton, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa la validación del formulario.
|
||||
* @param {HTMLElement} form - El formulario.
|
||||
* @param {Object} config - Configuración de validación.
|
||||
* @param {Function} onValidCallback - Callback cuando el formulario es válido.
|
||||
*/
|
||||
initializeFormValidation(form, config, onValidCallback) {
|
||||
return FormValidation.formValidation(form, config).on('core.form.valid', onValidCallback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja la acción cuando el formulario es válido.
|
||||
*/
|
||||
handleFormValid() {
|
||||
this.disableFormFields(this.formSenderResponse);
|
||||
this.toggleButtonsState(this.formSenderResponse, false);
|
||||
this.setButtonLoadingState(this.saveButton, true);
|
||||
|
||||
Livewire.dispatch('saveMailSenderResponseSettings');
|
||||
}
|
||||
|
||||
/**
|
||||
* Deshabilita todos los campos del formulario.
|
||||
* @param {HTMLElement} form - El formulario.
|
||||
*/
|
||||
disableFormFields(form) {
|
||||
form.querySelectorAll('input, select, textarea').forEach(field => {
|
||||
field.disabled = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Habilita o deshabilita los botones dentro del formulario.
|
||||
* @param {HTMLElement} form - El formulario.
|
||||
* @param {boolean} state - Estado de habilitación.
|
||||
*/
|
||||
toggleButtonsState(form, state) {
|
||||
form.querySelectorAll('button').forEach(button => {
|
||||
button.disabled = !state;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura el estado de carga de un botón.
|
||||
* @param {HTMLElement} button - El botón.
|
||||
* @param {boolean} isLoading - Si el botón está en estado de carga.
|
||||
*/
|
||||
setButtonLoadingState(button, isLoading) {
|
||||
const loadingText = button.getAttribute('data-loading-text');
|
||||
|
||||
if (loadingText && isLoading) {
|
||||
button.innerHTML = loadingText;
|
||||
} else {
|
||||
button.innerHTML = button.getAttribute('data-original-text') || button.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
senderResponsValidateConfig = {
|
||||
fields: {
|
||||
from_address: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'El correo electrónico de salida es obligatorio.'
|
||||
},
|
||||
emailAddress: {
|
||||
message: 'Por favor, introduce un correo electrónico válido.'
|
||||
}
|
||||
}
|
||||
},
|
||||
from_name: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'El nombre del remitente es obligatorio.'
|
||||
}
|
||||
}
|
||||
},
|
||||
reply_to_method: {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'El método de respuesta es obligatorio.'
|
||||
}
|
||||
}
|
||||
},
|
||||
reply_to_email: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'El correo electrónico de respuesta es obligatorio.',
|
||||
callback: function (input) {
|
||||
if (Number(document.getElementById('reply_to_method').value) === 3) {
|
||||
return input.value.trim() !== '' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
reply_to_name: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'El nombre de respuesta es obligatorio.',
|
||||
callback: function (input) {
|
||||
if (Number(document.getElementById('reply_to_method').value) === 3) {
|
||||
return input.value.trim() !== '';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
||||
eleValidClass: '',
|
||||
rowSelector: '.fv-row'
|
||||
}),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
};
|
||||
}
|
||||
239
resources/js/smtp-settings/SmtpSettingsForm.js
Normal file
239
resources/js/smtp-settings/SmtpSettingsForm.js
Normal file
@ -0,0 +1,239 @@
|
||||
export default class SmtpSettingsForm {
|
||||
constructor(config = {}) {
|
||||
const defaultConfig = {
|
||||
formSmtpSettingsSelector: '#mail-smtp-settings-card',
|
||||
changeSmtpSettingsId: 'change_smtp_settings',
|
||||
testSmtpConnectionButtonId: 'test_smtp_connection_button',
|
||||
saveSmtpConnectionButtonId: 'save_smtp_connection_button',
|
||||
cancelSmtpConnectionButtonId: 'cancel_smtp_connection_button'
|
||||
};
|
||||
|
||||
this.config = { ...defaultConfig, ...config };
|
||||
this.formSmtpSettings = null;
|
||||
this.changeSmtpSettingsCheckbox = null;
|
||||
this.testButton = null;
|
||||
this.saveButton = null;
|
||||
this.cancelButton = null;
|
||||
this.validator = null;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa el formulario de configuración SMTP.
|
||||
*/
|
||||
init() {
|
||||
try {
|
||||
// Obtener elementos esenciales
|
||||
this.formSmtpSettings = document.querySelector(this.config.formSmtpSettingsSelector);
|
||||
this.notificationArea = this.formSmtpSettings.querySelector(this.config.notificationAreaSelector);
|
||||
this.changeSmtpSettingsCheckbox = document.getElementById(this.config.changeSmtpSettingsId);
|
||||
this.testButton = document.getElementById(this.config.testSmtpConnectionButtonId);
|
||||
this.saveButton = document.getElementById(this.config.saveSmtpConnectionButtonId);
|
||||
this.cancelButton = document.getElementById(this.config.cancelSmtpConnectionButtonId);
|
||||
|
||||
// Asignar eventos
|
||||
this.changeSmtpSettingsCheckbox.addEventListener('change', event => this.handleCheckboxChange(event));
|
||||
this.testButton.addEventListener('click', event => this.handleTestConnection(event));
|
||||
this.cancelButton.addEventListener('click', () => this.handleCancel());
|
||||
|
||||
// Inicializar validación del formulario
|
||||
this.validator = FormValidation.formValidation(this.formSmtpSettings, this.smtpSettingsFormValidateConfig);
|
||||
} catch (error) {
|
||||
console.error('Error al inicializar el formulario SMTP:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Método de recarga parcial
|
||||
* Este método restablece la validación y los eventos sin destruir la instancia.
|
||||
*/
|
||||
reload() {
|
||||
try {
|
||||
// Inicializar validación del formulario
|
||||
this.validator = FormValidation.formValidation(this.formSmtpSettings, this.smtpSettingsFormValidateConfig);
|
||||
} catch (error) {
|
||||
console.error('Error al recargar el formulario:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja el cambio en la casilla "Cambiar configuración SMTP".
|
||||
* @param {Event} event - Evento de cambio.
|
||||
*/
|
||||
handleCheckboxChange(event) {
|
||||
const isEnabled = event.target.checked;
|
||||
|
||||
this.toggleFieldsState(['host', 'port', 'encryption', 'username', 'password'], isEnabled);
|
||||
|
||||
this.testButton.disabled = false;
|
||||
this.saveButton.disabled = true;
|
||||
this.cancelButton.disabled = false;
|
||||
|
||||
if (!isEnabled) {
|
||||
Livewire.dispatch('loadSettings');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja el clic en el botón "Probar conexión".
|
||||
* @param {Event} event - Evento de clic.
|
||||
*/
|
||||
handleTestConnection(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.validator.resetForm();
|
||||
|
||||
this.validator.validate().then(status => {
|
||||
if (status === 'Valid') {
|
||||
this.disableFormFields(this.formSmtpSettings);
|
||||
this.toggleButtonsState(this.formSmtpSettings, false);
|
||||
this.setButtonLoadingState(this.testButton, true);
|
||||
|
||||
Livewire.dispatch('testSmtpConnection');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Maneja la cancelación de cambios en la configuración SMTP.
|
||||
*/
|
||||
handleCancel() {
|
||||
this.disableFormFields(this.formSmtpSettings);
|
||||
this.toggleButtonsState(this.formSmtpSettings, false);
|
||||
this.setButtonLoadingState(this.cancelButton, true);
|
||||
|
||||
Livewire.dispatch('loadSettings');
|
||||
}
|
||||
|
||||
/**
|
||||
* Habilita o deshabilita los campos del formulario.
|
||||
* @param {Array} fields - IDs de los campos a actualizar.
|
||||
* @param {boolean} isEnabled - Estado de habilitación.
|
||||
*/
|
||||
toggleFieldsState(fields, isEnabled) {
|
||||
fields.forEach(id => {
|
||||
const field = document.getElementById(id);
|
||||
|
||||
if (field) field.disabled = !isEnabled;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Deshabilita todos los campos del formulario.
|
||||
* @param {HTMLElement} form - El formulario.
|
||||
*/
|
||||
disableFormFields(form) {
|
||||
form.querySelectorAll('input, select, textarea').forEach(field => {
|
||||
field.disabled = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Habilita o deshabilita los botones dentro del formulario.
|
||||
* @param {HTMLElement} form - El formulario.
|
||||
* @param {boolean} state - Estado de habilitación.
|
||||
*/
|
||||
toggleButtonsState(form, state) {
|
||||
form.querySelectorAll('button').forEach(button => {
|
||||
button.disabled = !state;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Configura el estado de carga de un botón.
|
||||
* @param {HTMLElement} button - El botón.
|
||||
* @param {boolean} isLoading - Si el botón está en estado de carga.
|
||||
*/
|
||||
setButtonLoadingState(button, isLoading) {
|
||||
const loadingText = button.getAttribute('data-loading-text');
|
||||
|
||||
if (loadingText && isLoading) {
|
||||
button.innerHTML = loadingText;
|
||||
} else {
|
||||
button.innerHTML = button.getAttribute('data-original-text') || button.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
smtpSettingsFormValidateConfig = {
|
||||
fields: {
|
||||
host: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'El servidor SMTP es obligatorio.',
|
||||
callback: function (input) {
|
||||
// Ejecutar la validación solo si 'change_smtp_settings' está marcado
|
||||
if (document.getElementById('change_smtp_settings').checked) {
|
||||
return input.value.trim() !== '';
|
||||
}
|
||||
return true; // No validar si no está marcado
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
port: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'El puerto SMTP es obligatorio.',
|
||||
callback: function (input) {
|
||||
if (document.getElementById('change_smtp_settings').checked) {
|
||||
return (
|
||||
input.value.trim() !== '' &&
|
||||
/^\d+$/.test(input.value) &&
|
||||
input.value >= 1 &&
|
||||
input.value <= 65535
|
||||
);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
encryption: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'La encriptación es obligatoria.',
|
||||
callback: function (input) {
|
||||
if (document.getElementById('change_smtp_settings').checked) {
|
||||
return input.value.trim() !== '';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
username: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'El usuario SMTP es obligatorio.',
|
||||
callback: function (input) {
|
||||
if (document.getElementById('change_smtp_settings').checked) {
|
||||
return input.value.trim().length >= 6;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
password: {
|
||||
validators: {
|
||||
callback: {
|
||||
message: 'Por favor, introduzca su contraseña.',
|
||||
callback: function (input) {
|
||||
if (document.getElementById('change_smtp_settings').checked) {
|
||||
return input.value.trim().length >= 5;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap5: new FormValidation.plugins.Bootstrap5({ rowSelector: '.fv-row' }),
|
||||
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||
autoFocus: new FormValidation.plugins.AutoFocus()
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user