🚧 wip: email whitelist

This commit is contained in:
Fred KISSIE
2026-03-03 20:26:17 +01:00
parent 20b65f549e
commit be2b1fd1ce
8 changed files with 220 additions and 125 deletions

13
docker-compose.mail.yml Normal file
View File

@@ -0,0 +1,13 @@
services:
mailer:
image: axllent/mailpit
ports:
- 8025:8025
- 1025:1025
volumes:
- mailpit-storage:/data
environment:
- MP_DATABASE=/data/mailpit.db
volumes:
mailpit-storage:

View File

@@ -469,6 +469,16 @@ export const userPolicies = pgTable("userPolicies", {
}) })
}); });
export const resourcePolicyWhiteList = pgTable("resourcePolicyWhitelist", {
whitelistId: serial("id").primaryKey(),
email: varchar("email").notNull(),
resourcePolicyId: integer("resourcePolicyId")
.notNull()
.references(() => resourcePolicies.resourcePolicyId, {
onDelete: "cascade"
})
});
export const userInvites = pgTable("userInvites", { export const userInvites = pgTable("userInvites", {
inviteId: varchar("inviteId").primaryKey(), inviteId: varchar("inviteId").primaryKey(),
orgId: varchar("orgId") orgId: varchar("orgId")
@@ -621,12 +631,7 @@ export const resourceWhitelist = pgTable("resourceWhitelist", {
email: varchar("email").notNull(), email: varchar("email").notNull(),
resourceId: integer("resourceId") resourceId: integer("resourceId")
.notNull() .notNull()
.references(() => resources.resourceId, { onDelete: "cascade" }), .references(() => resources.resourceId, { onDelete: "cascade" })
resourcePolicyId: integer("resourcePolicyId")
.notNull()
.references(() => resourcePolicies.resourcePolicyId, {
onDelete: "cascade"
})
}); });
export const resourceOtp = pgTable("resourceOtp", { export const resourceOtp = pgTable("resourceOtp", {
@@ -634,11 +639,6 @@ export const resourceOtp = pgTable("resourceOtp", {
resourceId: integer("resourceId") resourceId: integer("resourceId")
.notNull() .notNull()
.references(() => resources.resourceId, { onDelete: "cascade" }), .references(() => resources.resourceId, { onDelete: "cascade" }),
resourcePolicyId: integer("resourcePolicyId")
.notNull()
.references(() => resourcePolicies.resourcePolicyId, {
onDelete: "cascade"
}),
email: varchar("email").notNull(), email: varchar("email").notNull(),
otpHash: varchar("otpHash").notNull(), otpHash: varchar("otpHash").notNull(),
expiresAt: bigint("expiresAt", { mode: "number" }).notNull() expiresAt: bigint("expiresAt", { mode: "number" }).notNull()

View File

@@ -5,6 +5,7 @@ import {
resourcePolicyHeaderAuth, resourcePolicyHeaderAuth,
resourcePolicyPassword, resourcePolicyPassword,
resourcePolicyPincode, resourcePolicyPincode,
resourcePolicyWhiteList,
rolePolicies, rolePolicies,
roles, roles,
userPolicies, userPolicies,
@@ -116,7 +117,19 @@ async function query(params: z.infer<typeof getResourcePolicySchema>) {
) )
.where(eq(rolePolicies.resourcePolicyId, res.resourcePolicyId)); .where(eq(rolePolicies.resourcePolicyId, res.resourcePolicyId));
return { ...res, roles: policyRoles, users: policyUsers }; const policyEmailWhiteList = await db
.select()
.from(resourcePolicyWhiteList)
.where(
eq(resourcePolicyWhiteList.resourcePolicyId, res.resourcePolicyId)
);
return {
...res,
roles: policyRoles,
users: policyUsers,
emailWhiteList: policyEmailWhiteList
};
} }
export type GetResourcePolicyResponse = NonNullable< export type GetResourcePolicyResponse = NonNullable<

View File

@@ -4,6 +4,7 @@ import {
SettingsSection, SettingsSection,
SettingsSectionBody, SettingsSectionBody,
SettingsSectionDescription, SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm, SettingsSectionForm,
SettingsSectionHeader, SettingsSectionHeader,
SettingsSectionTitle SettingsSectionTitle
@@ -136,7 +137,6 @@ export function EditPolicyAuthMethodsSectionForm() {
if (!isValid) return; if (!isValid) return;
const payload = form.getValues(); const payload = form.getValues();
console.log({ payload, policy });
const responseArray: Array<Promise<AxiosResponse<{}> | void>> = []; const responseArray: Array<Promise<AxiosResponse<{}> | void>> = [];
@@ -640,7 +640,7 @@ export function EditPolicyAuthMethodsSectionForm() {
</SettingsSectionForm> </SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
<div className="flex py-6 justify-end"> <SettingsSectionFooter>
<Button <Button
type="submit" type="submit"
loading={isSubmitting} loading={isSubmitting}
@@ -648,7 +648,7 @@ export function EditPolicyAuthMethodsSectionForm() {
> >
{t("saveSettings")} {t("saveSettings")}
</Button> </Button>
</div> </SettingsSectionFooter>
</SettingsSection> </SettingsSection>
</form> </form>
</Form> </Form>

View File

@@ -21,6 +21,7 @@ import { useMemo } from "react";
import { EditPolicyAuthMethodsSectionForm } from "./EditPolicyAuthMethodsSectionForm"; import { EditPolicyAuthMethodsSectionForm } from "./EditPolicyAuthMethodsSectionForm";
import { EditPolicyNameSectionForm } from "./EditPolicyNameSectionForm"; import { EditPolicyNameSectionForm } from "./EditPolicyNameSectionForm";
import { EditPolicyUsersRolesSectionForm } from "./EditPolicyUserRolesSectionForm"; import { EditPolicyUsersRolesSectionForm } from "./EditPolicyUserRolesSectionForm";
import { EditPolicyOtpEmailSectionForm } from "./EditPolicyOtpEmailSectionForm";
// ─── EditPolicyForm ───────────────────────────────────────────────────────── // ─── EditPolicyForm ─────────────────────────────────────────────────────────
@@ -107,11 +108,11 @@ export function EditPolicyForm({ hidePolicyNameForm }: EditPolicyFormProps) {
/> />
<EditPolicyAuthMethodsSectionForm /> <EditPolicyAuthMethodsSectionForm />
<EditPolicyOtpEmailSectionForm
emailEnabled={env.email.emailEnabled}
/>
{/* {/*
<PolicyOtpEmailSection
form={form}
emailEnabled={env.email.emailEnabled}
/>
<PolicyRulesSection <PolicyRulesSection
form={form} form={form}
isMaxmindAvailable={isMaxmindAvailable} isMaxmindAvailable={isMaxmindAvailable}

View File

@@ -4,6 +4,7 @@ import {
SettingsSection, SettingsSection,
SettingsSectionBody, SettingsSectionBody,
SettingsSectionDescription, SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm, SettingsSectionForm,
SettingsSectionHeader, SettingsSectionHeader,
SettingsSectionTitle SettingsSectionTitle
@@ -136,7 +137,7 @@ export function EditPolicyNameSectionForm() {
</SettingsSectionForm> </SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
<div className="flex py-6 justify-end"> <SettingsSectionFooter>
<Button <Button
type="submit" type="submit"
loading={isSubmitting} loading={isSubmitting}
@@ -144,7 +145,7 @@ export function EditPolicyNameSectionForm() {
> >
{t("saveSettings")} {t("saveSettings")}
</Button> </Button>
</div> </SettingsSectionFooter>
</SettingsSection> </SettingsSection>
</form> </form>
</Form> </Form>

View File

@@ -4,6 +4,7 @@ import {
SettingsSection, SettingsSection,
SettingsSectionBody, SettingsSectionBody,
SettingsSectionDescription, SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm, SettingsSectionForm,
SettingsSectionHeader, SettingsSectionHeader,
SettingsSectionTitle SettingsSectionTitle
@@ -13,13 +14,14 @@ import { useTranslations } from "next-intl";
import z from "zod"; import z from "zod";
import { type PolicyFormValues } from "."; import { createPolicySchema, type PolicyFormValues } from ".";
import { SwitchInput } from "@app/components/SwitchInput"; import { SwitchInput } from "@app/components/SwitchInput";
import { Tag, TagInput } from "@app/components/tags/tag-input"; import { Tag, TagInput } from "@app/components/tags/tag-input";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert"; import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { import {
Form,
FormControl, FormControl,
FormDescription, FormDescription,
FormField, FormField,
@@ -30,27 +32,64 @@ import { InfoPopup } from "@app/components/ui/info-popup";
import { InfoIcon, Plus } from "lucide-react"; import { InfoIcon, Plus } from "lucide-react";
import { useState } from "react"; import { useActionState, useState } from "react";
import { UseFormReturn } from "react-hook-form"; import { useForm, UseFormReturn, useWatch } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
import { useResourcePolicyContext } from "@app/providers/ResourcePolicyProvider";
// ─── PolicyOtpEmailSection ──────────────────────────────────────────────────── // ─── PolicyOtpEmailSection ────────────────────────────────────────────────────
type PolicyOtpEmailSectionProps = { type PolicyOtpEmailSectionProps = {
form: UseFormReturn<PolicyFormValues, any, any>;
emailEnabled: boolean; emailEnabled: boolean;
}; };
export function PolicyOtpEmailSection({ export function EditPolicyOtpEmailSectionForm({
form,
emailEnabled emailEnabled
}: PolicyOtpEmailSectionProps) { }: PolicyOtpEmailSectionProps) {
const t = useTranslations(); const t = useTranslations();
const [isExpanded, setIsExpanded] = useState(false);
const [whitelistEnabled, setWhitelistEnabled] = useState(false); const { policy } = useResourcePolicyContext();
const router = useRouter();
const form = useForm({
resolver: zodResolver(
createPolicySchema.pick({
emailWhitelistEnabled: true,
emails: true
})
),
defaultValues: {
emailWhitelistEnabled: policy.emailWhitelistEnabled,
emails: policy.emailWhiteList.map((email) => ({
id: email.whitelistId.toString(),
text: email.email
}))
}
});
const whitelistEnabled = useWatch({
control: form.control,
name: "emailWhitelistEnabled"
});
const [isExpanded, setIsExpanded] = useState(whitelistEnabled);
const [activeEmailTagIndex, setActiveEmailTagIndex] = useState< const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
number | null number | null
>(null); >(null);
const [, formAction, isSubmitting] = useActionState(onSubmit, null);
async function onSubmit() {
const isValid = await form.trigger();
if (!isValid) return;
const payload = form.getValues();
console.log({ payload, policy });
}
if (!isExpanded) { if (!isExpanded) {
return ( return (
<SettingsSection> <SettingsSection>
@@ -77,100 +116,127 @@ export function PolicyOtpEmailSection({
} }
return ( return (
<SettingsSection> <Form {...form}>
<SettingsSectionHeader> <form action={formAction}>
<SettingsSectionTitle> <SettingsSection>
{t("otpEmailTitle")} <SettingsSectionHeader>
</SettingsSectionTitle> <SettingsSectionTitle>
<SettingsSectionDescription> {t("otpEmailTitle")}
{t("otpEmailTitleDescription")} </SettingsSectionTitle>
</SettingsSectionDescription> <SettingsSectionDescription>
</SettingsSectionHeader> {t("otpEmailTitleDescription")}
<SettingsSectionBody> </SettingsSectionDescription>
<SettingsSectionForm> </SettingsSectionHeader>
{!emailEnabled && ( <SettingsSectionBody>
<Alert variant="neutral" className="mb-4"> <SettingsSectionForm>
<InfoIcon className="h-4 w-4" /> {!emailEnabled && (
<AlertTitle className="font-semibold"> <Alert variant="neutral" className="mb-4">
{t("otpEmailSmtpRequired")} <InfoIcon className="h-4 w-4" />
</AlertTitle> <AlertTitle className="font-semibold">
<AlertDescription> {t("otpEmailSmtpRequired")}
{t("otpEmailSmtpRequiredDescription")} </AlertTitle>
</AlertDescription> <AlertDescription>
</Alert> {t("otpEmailSmtpRequiredDescription")}
)} </AlertDescription>
<SwitchInput </Alert>
id="whitelist-toggle"
label={t("otpEmailWhitelist")}
defaultChecked={false}
onCheckedChange={(val) => {
setWhitelistEnabled(val);
form.setValue("emailWhitelistEnabled", val);
}}
disabled={!emailEnabled}
/>
{whitelistEnabled && emailEnabled && (
<FormField
control={form.control}
name="emails"
render={({ field }) => (
<FormItem>
<FormLabel>
<InfoPopup
text={t("otpEmailWhitelistList")}
info={t(
"otpEmailWhitelistListDescription"
)}
/>
</FormLabel>
<FormControl>
{/* @ts-ignore */}
<TagInput
{...field}
activeTagIndex={activeEmailTagIndex}
size="sm"
validateTag={(tag) => {
return z
.email()
.or(
z
.string()
.regex(
/^\*@[\w.-]+\.[a-zA-Z]{2,}$/,
{
message: t(
"otpEmailErrorInvalid"
)
}
)
)
.safeParse(tag).success;
}}
setActiveTagIndex={
setActiveEmailTagIndex
}
placeholder={t("otpEmailEnter")}
tags={form.getValues().emails}
setTags={(newEmails) => {
form.setValue(
"emails",
newEmails as [Tag, ...Tag[]]
);
}}
allowDuplicates={false}
sortTags={true}
/>
</FormControl>
<FormDescription>
{t("otpEmailEnterDescription")}
</FormDescription>
</FormItem>
)} )}
/> <SwitchInput
)} id="whitelist-toggle"
</SettingsSectionForm> label={t("otpEmailWhitelist")}
</SettingsSectionBody> defaultChecked={false}
</SettingsSection> onCheckedChange={(val) => {
form.setValue("emailWhitelistEnabled", val);
}}
disabled={!emailEnabled}
/>
{whitelistEnabled && emailEnabled && (
<FormField
control={form.control}
name="emails"
render={({ field }) => (
<FormItem>
<FormLabel>
<InfoPopup
text={t(
"otpEmailWhitelistList"
)}
info={t(
"otpEmailWhitelistListDescription"
)}
/>
</FormLabel>
<FormControl>
{/* @ts-ignore */}
<TagInput
{...field}
activeTagIndex={
activeEmailTagIndex
}
size="sm"
validateTag={(tag) => {
return z
.email()
.or(
z
.string()
.regex(
/^\*@[\w.-]+\.[a-zA-Z]{2,}$/,
{
message:
t(
"otpEmailErrorInvalid"
)
}
)
)
.safeParse(tag)
.success;
}}
setActiveTagIndex={
setActiveEmailTagIndex
}
placeholder={t(
"otpEmailEnter"
)}
tags={
form.getValues()
.emails ?? []
}
setTags={(newEmails) => {
form.setValue(
"emails",
newEmails as [
Tag,
...Tag[]
]
);
}}
allowDuplicates={false}
sortTags={true}
/>
</FormControl>
<FormDescription>
{t("otpEmailEnterDescription")}
</FormDescription>
</FormItem>
)}
/>
)}
</SettingsSectionForm>
<SettingsSectionFooter>
<Button
type="submit"
loading={isSubmitting}
disabled={isSubmitting || !emailEnabled}
>
{t("otpEmailWhitelistSave")}
</Button>
</SettingsSectionFooter>
</SettingsSectionBody>
</SettingsSection>
</form>
</Form>
); );
} }

View File

@@ -4,6 +4,7 @@ import {
SettingsSection, SettingsSection,
SettingsSectionBody, SettingsSectionBody,
SettingsSectionDescription, SettingsSectionDescription,
SettingsSectionFooter,
SettingsSectionForm, SettingsSectionForm,
SettingsSectionHeader, SettingsSectionHeader,
SettingsSectionTitle SettingsSectionTitle
@@ -342,7 +343,7 @@ export function EditPolicyUsersRolesSectionForm({
</SettingsSectionForm> </SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
<div className="flex py-6 justify-end"> <SettingsSectionFooter>
<Button <Button
type="submit" type="submit"
loading={isSubmitting} loading={isSubmitting}
@@ -350,7 +351,7 @@ export function EditPolicyUsersRolesSectionForm({
> >
{t("resourceUsersRolesSubmit")} {t("resourceUsersRolesSubmit")}
</Button> </Button>
</div> </SettingsSectionFooter>
</SettingsSection> </SettingsSection>
</form> </form>
</Form> </Form>