2021-07-31 22:45:28 +00:00
|
|
|
<template>
|
2021-10-04 02:38:45 +00:00
|
|
|
<v-container fluid class="narrow-container">
|
|
|
|
<BasePageTitle divider>
|
|
|
|
<template #header>
|
|
|
|
<v-img
|
|
|
|
max-height="200"
|
|
|
|
max-width="150"
|
|
|
|
class="mb-2"
|
|
|
|
:src="require('~/static/svgs/admin-site-settings.svg')"
|
|
|
|
></v-img>
|
|
|
|
</template>
|
|
|
|
<template #title> {{ $t("settings.site-settings") }} </template>
|
|
|
|
</BasePageTitle>
|
|
|
|
<BaseCardSectionTitle :icon="$globals.icons.email" title="Email Configuration"> </BaseCardSectionTitle>
|
|
|
|
<v-card>
|
|
|
|
<v-card-text>
|
|
|
|
<v-list-item>
|
|
|
|
<v-list-item-avatar>
|
|
|
|
<v-icon :color="ready ? 'success' : 'error'">
|
|
|
|
{{ ready ? $globals.icons.check : $globals.icons.close }}
|
|
|
|
</v-icon>
|
|
|
|
</v-list-item-avatar>
|
|
|
|
<v-list-item-content>
|
|
|
|
<v-list-item-title
|
|
|
|
:class="{
|
|
|
|
'success--text': ready,
|
|
|
|
'error--text': !ready,
|
|
|
|
}"
|
|
|
|
>
|
|
|
|
Email Configuration Status
|
|
|
|
</v-list-item-title>
|
|
|
|
<v-list-item-subtitle
|
|
|
|
:class="{
|
|
|
|
'success--text': ready,
|
|
|
|
'error--text': !ready,
|
|
|
|
}"
|
|
|
|
>
|
|
|
|
{{ ready ? "Ready" : "Not Ready - Check Env Variables" }}
|
|
|
|
</v-list-item-subtitle>
|
|
|
|
</v-list-item-content>
|
|
|
|
</v-list-item>
|
|
|
|
<v-card-actions>
|
|
|
|
<v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
|
|
|
|
</v-text-field>
|
|
|
|
<BaseButton color="info" :disabled="!ready || !validEmail" :loading="loading" @click="testEmail">
|
|
|
|
<template #icon> {{ $globals.icons.email }} </template>
|
|
|
|
{{ $t("general.test") }}
|
|
|
|
</BaseButton>
|
|
|
|
</v-card-actions>
|
|
|
|
</v-card-text>
|
|
|
|
<template v-if="tested">
|
|
|
|
<v-divider class="my-x"></v-divider>
|
|
|
|
<v-card-text>
|
|
|
|
Email Test Result: {{ success ? "Succeeded" : "Failed" }}
|
|
|
|
<div>Errors: {{ error }}</div>
|
|
|
|
</v-card-text>
|
|
|
|
</template>
|
|
|
|
</v-card>
|
2021-08-07 00:28:12 +00:00
|
|
|
</v-container>
|
2021-08-02 03:24:47 +00:00
|
|
|
</template>
|
2021-08-07 00:28:12 +00:00
|
|
|
|
2021-08-02 03:24:47 +00:00
|
|
|
<script lang="ts">
|
2021-10-04 02:38:45 +00:00
|
|
|
import { computed, defineComponent, onMounted, reactive, toRefs } from "@nuxtjs/composition-api";
|
|
|
|
import { useApiSingleton } from "~/composables/use-api";
|
|
|
|
import { validators } from "~/composables/use-validators";
|
2021-08-02 03:24:47 +00:00
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
layout: "admin",
|
|
|
|
setup() {
|
2021-10-04 02:38:45 +00:00
|
|
|
const state = reactive({
|
|
|
|
ready: true,
|
|
|
|
loading: false,
|
|
|
|
address: "",
|
|
|
|
success: false,
|
|
|
|
error: "",
|
|
|
|
tested: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
const api = useApiSingleton();
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
const { data } = await api.email.check();
|
|
|
|
|
|
|
|
if (data) {
|
|
|
|
state.ready = data.ready;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
async function testEmail() {
|
|
|
|
state.loading = true;
|
|
|
|
state.tested = false;
|
|
|
|
const { data } = await api.email.test({ email: state.address });
|
|
|
|
|
|
|
|
if (data) {
|
|
|
|
if (data.success) {
|
|
|
|
state.success = true;
|
|
|
|
} else {
|
|
|
|
state.error = data.error;
|
|
|
|
state.success = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
state.loading = false;
|
|
|
|
state.tested = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
const validEmail = computed(() => {
|
|
|
|
if (state.address === "") {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
const valid = validators.email(state.address);
|
|
|
|
|
|
|
|
// Explicit bool check because validators.email sometimes returns a string
|
|
|
|
if (valid === true) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
|
|
|
return {
|
|
|
|
validEmail,
|
|
|
|
validators,
|
|
|
|
...toRefs(state),
|
|
|
|
testEmail,
|
|
|
|
};
|
2021-08-02 03:24:47 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|
2021-08-07 00:28:12 +00:00
|
|
|
|
2021-08-02 03:24:47 +00:00
|
|
|
<style scoped>
|
|
|
|
</style>
|