243 lines
9.8 KiB
Svelte
243 lines
9.8 KiB
Svelte
|
<script>
|
||
|
|
import { slide } from "svelte/transition";
|
||
|
|
import ApiClient from "@/utils/ApiClient";
|
||
|
|
import CommonHelper from "@/utils/CommonHelper";
|
||
|
|
import { addSuccessToast } from "@/stores/toasts";
|
||
|
|
import Field from "@/components/base/Field.svelte";
|
||
|
|
import ObjectSelect from "@/components/base/ObjectSelect.svelte";
|
||
|
|
import RedactedPasswordInput from "@/components/base/RedactedPasswordInput.svelte";
|
||
|
|
import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
|
||
|
|
|
||
|
|
const tlsOptions = [
|
||
|
|
{ label: "Optional (StartTLS)", value: false },
|
||
|
|
{ label: "Always", value: true },
|
||
|
|
];
|
||
|
|
|
||
|
|
let formSettings = {};
|
||
|
|
let isLoading = false;
|
||
|
|
let isSaving = false;
|
||
|
|
let initialHash = "";
|
||
|
|
|
||
|
|
$: hasChanges = initialHash != JSON.stringify(formSettings);
|
||
|
|
|
||
|
|
CommonHelper.setDocumentTitle("Mail settings");
|
||
|
|
|
||
|
|
loadSettings();
|
||
|
|
|
||
|
|
async function loadSettings() {
|
||
|
|
isLoading = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const settings = (await ApiClient.Settings.getAll()) || {};
|
||
|
|
init(settings);
|
||
|
|
} catch (err) {
|
||
|
|
ApiClient.errorResponseHandler(err);
|
||
|
|
}
|
||
|
|
|
||
|
|
isLoading = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function save() {
|
||
|
|
if (isSaving || !hasChanges) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
isSaving = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const settings = await ApiClient.Settings.update(CommonHelper.filterRedactedProps(formSettings));
|
||
|
|
init(settings);
|
||
|
|
addSuccessToast("Successfully saved mail settings.");
|
||
|
|
} catch (err) {
|
||
|
|
ApiClient.errorResponseHandler(err);
|
||
|
|
}
|
||
|
|
|
||
|
|
isSaving = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function init(settings = {}) {
|
||
|
|
formSettings = {
|
||
|
|
meta: settings?.meta || {},
|
||
|
|
smtp: settings?.smtp || {},
|
||
|
|
};
|
||
|
|
initialHash = JSON.stringify(formSettings);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<SettingsSidebar />
|
||
|
|
|
||
|
|
<main class="page-wrapper">
|
||
|
|
<header class="page-header">
|
||
|
|
<nav class="breadcrumbs">
|
||
|
|
<div class="breadcrumb-item">Settings</div>
|
||
|
|
<div class="breadcrumb-item">Mail settings</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
<form class="panel" autocomplete="off" on:submit|preventDefault={() => save()}>
|
||
|
|
<div class="content txt-xl m-b-base">
|
||
|
|
<p>Configure common settings for sending emails.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if isLoading}
|
||
|
|
<div class="loader" />
|
||
|
|
{:else}
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<Field class="form-field required" name="meta.senderName" let:uniqueId>
|
||
|
|
<label for={uniqueId}>Sender name</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.meta.senderName}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<Field class="form-field required" name="meta.senderAddress" let:uniqueId>
|
||
|
|
<label for={uniqueId}>Sender address</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.meta.senderAddress}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Field class="form-field required" name="meta.userVerificationUrl" let:uniqueId>
|
||
|
|
<label for={uniqueId}>User verification page url</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.meta.userVerificationUrl}
|
||
|
|
/>
|
||
|
|
<div class="help-block">
|
||
|
|
Used in the user verification email. Available placeholder parameters:
|
||
|
|
<code>%APP_URL%</code>, <code>%TOKEN%</code>.
|
||
|
|
</div>
|
||
|
|
</Field>
|
||
|
|
|
||
|
|
<Field class="form-field required" name="meta.userResetPasswordUrl" let:uniqueId>
|
||
|
|
<label for={uniqueId}>User reset password page url</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.meta.userResetPasswordUrl}
|
||
|
|
/>
|
||
|
|
<div class="help-block">
|
||
|
|
Used in the user password reset email. Available placeholder parameters:
|
||
|
|
<code>%APP_URL%</code>, <code>%TOKEN%</code>.
|
||
|
|
</div>
|
||
|
|
</Field>
|
||
|
|
|
||
|
|
<Field class="form-field required" name="meta.userConfirmEmailChangeUrl" let:uniqueId>
|
||
|
|
<label for={uniqueId}>User confirm email change page url</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.meta.userConfirmEmailChangeUrl}
|
||
|
|
/>
|
||
|
|
<div class="help-block">
|
||
|
|
Used in the user email change confirmation email. Available placeholder
|
||
|
|
parameters:
|
||
|
|
<code>%APP_URL%</code>, <code>%TOKEN%</code>.
|
||
|
|
</div>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
|
||
|
|
<div class="content m-b-sm">
|
||
|
|
<p>
|
||
|
|
By default PocketBase uses the OS <code>sendmail</code> command for sending emails.
|
||
|
|
<br />
|
||
|
|
<strong class="txt-bold">
|
||
|
|
For better emails deliverability it is recommended to enable the SMTP settings
|
||
|
|
below.
|
||
|
|
</strong>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Field class="form-field form-field-toggle" let:uniqueId>
|
||
|
|
<input type="checkbox" id={uniqueId} required bind:checked={formSettings.smtp.enabled} />
|
||
|
|
<label for={uniqueId}>Use SMTP mail server</label>
|
||
|
|
</Field>
|
||
|
|
|
||
|
|
{#if formSettings.smtp.enabled}
|
||
|
|
<div class="grid" transition:slide|local={{ duration: 150 }}>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<Field class="form-field required" name="smtp.host" let:uniqueId>
|
||
|
|
<label for={uniqueId}>SMTP server host</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.smtp.host}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<Field class="form-field required" name="smtp.port" let:uniqueId>
|
||
|
|
<label for={uniqueId}>Port</label>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
id={uniqueId}
|
||
|
|
required
|
||
|
|
bind:value={formSettings.smtp.port}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3">
|
||
|
|
<Field class="form-field required" name="smtp.tls" let:uniqueId>
|
||
|
|
<label for={uniqueId}>TLS Encryption</label>
|
||
|
|
<ObjectSelect
|
||
|
|
id={uniqueId}
|
||
|
|
items={tlsOptions}
|
||
|
|
bind:keyOfSelected={formSettings.smtp.tls}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<Field class="form-field" name="smtp.username" let:uniqueId>
|
||
|
|
<label for={uniqueId}>Username</label>
|
||
|
|
<input type="text" id={uniqueId} bind:value={formSettings.smtp.username} />
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<Field class="form-field" name="smtp.password" let:uniqueId>
|
||
|
|
<label for={uniqueId}>Password</label>
|
||
|
|
<RedactedPasswordInput
|
||
|
|
id={uniqueId}
|
||
|
|
bind:value={formSettings.smtp.password}
|
||
|
|
/>
|
||
|
|
</Field>
|
||
|
|
</div>
|
||
|
|
<!-- margin helper -->
|
||
|
|
<div class="col-lg-12" />
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<div class="flex">
|
||
|
|
<div class="flex-fill" />
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="btn btn-expanded"
|
||
|
|
class:btn-loading={isSaving}
|
||
|
|
disabled={!hasChanges || isSaving}
|
||
|
|
on:click={() => save()}
|
||
|
|
>
|
||
|
|
<span class="txt">Save changes</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</main>
|