mirror of
https://github.com/axllent/mailpit.git
synced 2025-07-03 00:46:58 +02:00
Chore: Apply linting to all JavaScript/Vue files with eslint & prettier
This commit is contained in:
Ralph Slooten
278
server/ui-src/components/AppAbout.vue
Normal file
278
server/ui-src/components/AppAbout.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<script>
|
||||
import AjaxLoader from "./AjaxLoader.vue";
|
||||
import Settings from "./AppSettings.vue";
|
||||
import CommonMixins from "../mixins/CommonMixins";
|
||||
import { mailbox } from "../stores/mailbox";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AjaxLoader,
|
||||
Settings,
|
||||
},
|
||||
|
||||
mixins: [CommonMixins],
|
||||
|
||||
props: {
|
||||
modals: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mailbox,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadInfo() {
|
||||
this.get(this.resolve("/api/v1/info"), false, (response) => {
|
||||
mailbox.appInfo = response.data;
|
||||
this.modal("AppInfoModal").show();
|
||||
});
|
||||
},
|
||||
|
||||
requestNotifications() {
|
||||
// check if the browser supports notifications
|
||||
if (!("Notification" in window)) {
|
||||
alert("This browser does not support desktop notifications");
|
||||
}
|
||||
|
||||
// we need to ask the user for permission
|
||||
else if (Notification.permission !== "denied") {
|
||||
Notification.requestPermission().then((permission) => {
|
||||
if (permission === "granted") {
|
||||
mailbox.notificationsEnabled = true;
|
||||
}
|
||||
|
||||
this.modal("EnableNotificationsModal").hide();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="!modals">
|
||||
<div class="bg-body ms-sm-n1 me-sm-n1 py-2 text-muted small about-mailpit">
|
||||
<button class="text-muted btn btn-sm" @click="loadInfo()">
|
||||
<i class="bi bi-info-circle-fill me-1"></i>
|
||||
About
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-sm btn-outline-secondary float-end"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#SettingsModal"
|
||||
title="Mailpit UI settings"
|
||||
>
|
||||
<i class="bi bi-gear-fill"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="mailbox.connected && mailbox.notificationsSupported && !mailbox.notificationsEnabled"
|
||||
class="btn btn-sm btn-outline-secondary float-end me-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#EnableNotificationsModal"
|
||||
title="Enable browser notifications"
|
||||
>
|
||||
<i class="bi bi-bell"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- Modals -->
|
||||
<div
|
||||
id="AppInfoModal"
|
||||
class="modal modal-xl fade"
|
||||
tabindex="-1"
|
||||
aria-labelledby="AppInfoModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog">
|
||||
<div v-if="mailbox.appInfo.RuntimeStats" class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="AppInfoModalLabel" class="modal-title">
|
||||
Mailpit
|
||||
<code>({{ mailbox.appInfo.Version }})</code>
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-xl-6">
|
||||
<div v-if="mailbox.appInfo.LatestVersion != 'disabled'">
|
||||
<div v-if="mailbox.appInfo.LatestVersion == ''" class="row g-3">
|
||||
<div class="col">
|
||||
<div class="alert alert-warning mb-3">
|
||||
There might be a newer version available. The check failed.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="mailbox.appInfo.Version != mailbox.appInfo.LatestVersion"
|
||||
class="row g-3"
|
||||
>
|
||||
<div class="col">
|
||||
<a
|
||||
class="btn btn-warning d-block mb-3"
|
||||
:href="
|
||||
'https://github.com/axllent/mailpit/releases/tag/' +
|
||||
mailbox.appInfo.LatestVersion
|
||||
"
|
||||
>
|
||||
A new version of Mailpit ({{ mailbox.appInfo.LatestVersion }}) is
|
||||
available.
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<RouterLink to="/api/v1/" class="btn btn-primary w-100" target="_blank">
|
||||
<i class="bi bi-braces"></i>
|
||||
OpenAPI / Swagger API documentation
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<a
|
||||
class="btn btn-primary w-100"
|
||||
href="https://github.com/axllent/mailpit"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="bi bi-github"></i>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<a
|
||||
class="btn btn-primary w-100"
|
||||
href="https://mailpit.axllent.org/docs/"
|
||||
target="_blank"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card border-secondary text-center">
|
||||
<div class="card-header">Database size</div>
|
||||
<div class="card-body text-muted">
|
||||
<h5 class="card-title">
|
||||
{{ getFileSize(mailbox.appInfo.DatabaseSize) }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card border-secondary text-center">
|
||||
<div class="card-header">RAM usage</div>
|
||||
<div class="card-body text-muted">
|
||||
<h5 class="card-title">
|
||||
{{ getFileSize(mailbox.appInfo.RuntimeStats.Memory) }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="card border-secondary h-100">
|
||||
<div class="card-header h4">
|
||||
Runtime statistics
|
||||
<button class="btn btn-sm btn-outline-secondary float-end" @click="loadInfo()">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body text-muted">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mailpit up since</td>
|
||||
<td>
|
||||
{{ secondsToRelative(mailbox.appInfo.RuntimeStats.Uptime) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Messages deleted</td>
|
||||
<td>
|
||||
{{ formatNumber(mailbox.appInfo.RuntimeStats.MessagesDeleted) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SMTP messages accepted</td>
|
||||
<td>
|
||||
{{ formatNumber(mailbox.appInfo.RuntimeStats.SMTPAccepted) }}
|
||||
<small class="text-muted">
|
||||
({{
|
||||
getFileSize(
|
||||
mailbox.appInfo.RuntimeStats.SMTPAcceptedSize,
|
||||
)
|
||||
}})
|
||||
</small>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SMTP messages rejected</td>
|
||||
<td>
|
||||
{{ formatNumber(mailbox.appInfo.RuntimeStats.SMTPRejected) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="mailbox.uiConfig.DuplicatesIgnored">
|
||||
<td>SMTP messages ignored</td>
|
||||
<td>
|
||||
{{ formatNumber(mailbox.appInfo.RuntimeStats.SMTPIgnored) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="EnableNotificationsModal"
|
||||
class="modal fade"
|
||||
tabindex="-1"
|
||||
aria-labelledby="EnableNotificationsModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="EnableNotificationsModalLabel" class="modal-title">Enable browser notifications?</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="h4">Get browser notifications when Mailpit receives new messages?</p>
|
||||
<p>
|
||||
Note that your browser will ask you for confirmation when you click
|
||||
<code>enable notifications</code>, and that you must have Mailpit open in a browser tab to
|
||||
be able to receive the notifications.
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" @click="requestNotifications">
|
||||
Enable notifications
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Settings />
|
||||
</template>
|
||||
|
||||
<AjaxLoader :loading="loading" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user