Files
pocketbase/ui/src/components/collections/CollectionAuthOptionsTab.svelte
2024-11-13 19:55:33 +02:00

128 lines
4.4 KiB
Svelte

<script>
import Field from "@/components/base/Field.svelte";
import EmailTemplateAccordion from "@/components/collections/EmailTemplateAccordion.svelte";
import TokenOptionsAccordion from "@/components/collections/TokenOptionsAccordion.svelte";
import MFAAccordion from "@/components/collections/MFAAccordion.svelte";
import OAuth2Accordion from "@/components/collections/OAuth2Accordion.svelte";
import OTPAccordion from "@/components/collections/OTPAccordion.svelte";
import PasswordAuthAccordion from "@/components/collections/PasswordAuthAccordion.svelte";
import EmailTestPopup from "@/components/settings/EmailTestPopup.svelte";
export let collection;
let emailTemplatesList = [];
let emailTestPopup;
$: isSuperusers = collection.system && collection.name === "_superusers";
// nested email template normalizations
$: if (typeof collection.otp?.emailTemplate == "undefined") {
collection.otp = collection.otp || {};
collection.otp.emailTemplate = {};
}
$: if (typeof collection.authAlert?.emailTemplate == "undefined") {
collection.authAlert = collection.authAlert || {};
collection.authAlert.emailTemplate = {};
}
// predefined email template configs
$: resetPasswordTemplate = {
key: "resetPasswordTemplate",
label: "Default Password reset email template",
placeholders: ["APP_NAME", "APP_URL", "RECORD:*", "TOKEN"],
config: collection.resetPasswordTemplate,
};
$: verificationTemplate = {
key: "verificationTemplate",
label: "Default Verification email template",
placeholders: ["APP_NAME", "APP_URL", "RECORD:*", "TOKEN"],
config: collection.verificationTemplate,
};
$: confirmEmailChangeTemplate = {
key: "confirmEmailChangeTemplate",
label: "Default Confirm email change email template",
placeholders: ["APP_NAME", "APP_URL", "RECORD:*", "TOKEN"],
config: collection.confirmEmailChangeTemplate,
};
$: otpTemplate = {
key: "otp.emailTemplate",
label: "Default OTP email template",
placeholders: ["APP_NAME", "APP_URL", "RECORD:*", "OTP", "OTP_ID"],
config: collection.otp.emailTemplate,
};
$: authAlertTemplate = {
key: "authAlert.emailTemplate",
label: "Default Login alert email template",
placeholders: ["APP_NAME", "APP_URL", "RECORD:*"],
config: collection.authAlert.emailTemplate,
};
$: emailTemplatesList = isSuperusers
? [resetPasswordTemplate, otpTemplate, authAlertTemplate]
: [
verificationTemplate,
resetPasswordTemplate,
confirmEmailChangeTemplate,
otpTemplate,
authAlertTemplate,
];
</script>
<h4 class="section-title">
<div class="flex">
<span class="txt">Auth methods</span>
<div class="m-l-auto handle">
<Field
class="form-field form-field-sm form-field-toggle m-0"
name="authAlert.enabled"
inlineError={true}
let:uniqueId
>
<input type="checkbox" id={uniqueId} bind:checked={collection.authAlert.enabled} />
<label for={uniqueId}>Send email alert for new logins</label>
</Field>
</div>
</div>
</h4>
<div class="accordions m-b-35">
<PasswordAuthAccordion bind:collection />
{#if !isSuperusers}
<OAuth2Accordion bind:collection />
{/if}
<OTPAccordion bind:collection />
<MFAAccordion bind:collection />
</div>
<h4 class="section-title">
<span class="txt">Mail templates</span>
<button
type="button"
class="btn btn-xs m-l-auto btn-secondary"
on:click={() => emailTestPopup?.show(collection.id)}
>
Send test email
</button>
</h4>
<div class="accordions m-b-35">
<div class="accordions">
{#each emailTemplatesList as template (template.key)}
<EmailTemplateAccordion
single
key={template.key}
title={template.label}
placeholders={template?.placeholders}
bind:config={template.config}
/>
{/each}
</div>
</div>
<h4 class="section-title">Other</h4>
<div class="accordions m-b-base">
<TokenOptionsAccordion bind:collection />
</div>
<EmailTestPopup bind:this={emailTestPopup} />