관리-도구
편집 파일: mail_settings.vue
<template> <div class="main-content"> <breadcumb :page="$t('mail_settings')" :folder="$t('Settings')"/> <div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div> <!-- mail_settings --> <validation-observer ref="form_config_mail" v-if="!isLoading"> <b-form @submit.prevent="Submit_config_mail"> <b-row class="mt-5"> <b-col lg="12" md="12" sm="12"> <b-card no-body :header="$t('mail_settings')"> <b-card-body> <b-row> <!-- MAIL_MAILER --> <b-col lg="4" md="4" sm="12"> <validation-provider name="MAIL_MAILER" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="MAIL_MAILER *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="MAIL_MAILER-feedback" label="MAIL_MAILER" placeholder="MAIL_MAILER" v-model="server.mail_mailer" ></b-form-input> <b-form-invalid-feedback id="MAIL_MAILER-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> <p class="text-danger">Supported: "smtp", "sendmail", "mailgun", "ses","postmark", "log"</p> </validation-provider> </b-col> <!-- HOST --> <b-col lg="4" md="4" sm="12"> <validation-provider name="HOST" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="MAIL_HOST *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="HOST-feedback" label="HOST" placeholder="MAIL_HOST" v-model="server.host" ></b-form-input> <b-form-invalid-feedback id="HOST-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> </validation-provider> </b-col> <!-- PORT --> <b-col lg="4" md="4" sm="12"> <validation-provider name="PORT" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="MAIL_PORT *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="PORT-feedback" label="PORT" placeholder="MAIL_PORT" v-model="server.port" ></b-form-input> <b-form-invalid-feedback id="PORT-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> </validation-provider> </b-col> <!-- Sender Name --> <b-col lg="4" md="4" sm="12"> <validation-provider name="sender" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="Sender Name *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="sender-feedback" label="Sender" placeholder="Sender Name" v-model="server.sender_name" ></b-form-input> <b-form-invalid-feedback id="sender-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> </validation-provider> </b-col> <!-- Username --> <b-col lg="4" md="4" sm="12"> <validation-provider name="Username" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="MAIL_USERNAME *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="Username-feedback" label="Username" placeholder="MAIL_USERNAME" v-model="server.username" ></b-form-input> <b-form-invalid-feedback id="Username-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> </validation-provider> </b-col> <!-- Password --> <b-col lg="4" md="4" sm="12"> <validation-provider name="Password" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="MAIL_PASSWORD *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="Password-feedback" label="Password" placeholder="MAIL_PASSWORD" v-model="server.password" ></b-form-input> <b-form-invalid-feedback id="Password-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> </validation-provider> </b-col> <!-- encryption --> <b-col lg="4" md="4" sm="12"> <validation-provider name="encryption" :rules="{ required: true}" v-slot="validationContext" > <b-form-group label="MAIL_ENCRYPTION *"> <b-form-input :state="getValidationState(validationContext)" aria-describedby="encryption-feedback" label="encryption" placeholder="MAIL_ENCRYPTION" v-model="server.encryption" ></b-form-input> <b-form-invalid-feedback id="encryption-feedback" >{{ validationContext.errors[0] }}</b-form-invalid-feedback> </b-form-group> </validation-provider> </b-col> <b-col md="12"> <b-form-group> <b-button variant="primary" type="submit"><i class="i-Yes me-2 font-weight-bold"></i> {{$t('submit')}}</b-button> </b-form-group> </b-col> </b-row> </b-card-body> </b-card> </b-col> </b-row> </b-form> </validation-observer> </div> </template> <script> import { mapActions, mapGetters } from "vuex"; import NProgress from "nprogress"; export default { metaInfo: { title: "Mail Settings" }, data() { return { isLoading: true, server: { host: "", port: "", username: "", password: "", encryption: "", sender_name:"", mail_mailer:"", } }; }, methods: { ...mapActions(["refreshUserPermissions"]), //------------- Submit Validation SMTP Submit_config_mail() { this.$refs.form_config_mail.validate().then(success => { if (!success) { this.makeToast( "danger", this.$t("Please_fill_the_form_correctly"), this.$t("Failed") ); } else { this.Update_config_mail(); } }); }, //------ Toast makeToast(variant, msg, title) { this.$root.$bvToast.toast(msg, { title: title, variant: variant, solid: true }); }, getValidationState({ dirty, validated, valid = null }) { return dirty || validated ? valid : null; }, //---------------------------------- Update SMTP ----------------\\ Update_config_mail() { NProgress.start(); NProgress.set(0.1); axios .put("update_config_mail/" + this.server.id, { mail_mailer: this.server.mail_mailer, host: this.server.host, port: this.server.port, sender_name: this.server.sender_name, username: this.server.username, password: this.server.password, encryption: this.server.encryption }) .then(response => { Fire.$emit("Event_Smtp"); this.makeToast( "success", this.$t("Successfully_Updated"), this.$t("Success") ); NProgress.done(); }) .catch(error => { NProgress.done(); this.makeToast("danger", this.$t("InvalidData"), this.$t("Failed")); }); }, //---------------------------------- GET SMTP ----------------\\ get_config_mail() { axios .get("get_config_mail") .then(response => { this.server = response.data.server; this.isLoading = false; }) .catch(error => { this.isLoading = false; }); }, }, //end Methods //----------------------------- Created function------------------- created: function() { this.get_config_mail(); Fire.$on("Event_Smtp", () => { this.get_config_mail(); }); } }; </script>