🚧 wip: email whitelist

docker-compose.mail.yml

@@ -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:

server/db/pg/schema/schema.ts

@@ -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", {
     inviteId: varchar("inviteId").primaryKey(),
     orgId: varchar("orgId")
@@ -621,12 +631,7 @@ export const resourceWhitelist = pgTable("resourceWhitelist", {
     email: varchar("email").notNull(),
     resourceId: integer("resourceId")
         .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", {
@@ -634,11 +639,6 @@ export const resourceOtp = pgTable("resourceOtp", {
     resourceId: integer("resourceId")
         .notNull()
         .references(() => resources.resourceId, { onDelete: "cascade" }),
-    resourcePolicyId: integer("resourcePolicyId")
-        .notNull()
-        .references(() => resourcePolicies.resourcePolicyId, {
-            onDelete: "cascade"
-        }),
     email: varchar("email").notNull(),
     otpHash: varchar("otpHash").notNull(),
     expiresAt: bigint("expiresAt", { mode: "number" }).notNull()

server/routers/policy/getResourcePolicy.ts

@@ -5,6 +5,7 @@ import {
     resourcePolicyHeaderAuth,
     resourcePolicyPassword,
     resourcePolicyPincode,
+    resourcePolicyWhiteList,
     rolePolicies,
     roles,
     userPolicies,
@@ -116,7 +117,19 @@ async function query(params: z.infer<typeof getResourcePolicySchema>) {
         )
         .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<

src/components/resource-policy/EditPolicyAuthMethodsSectionForm.tsx

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

src/components/resource-policy/EditPolicyForm.tsx

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

src/components/resource-policy/EditPolicyNameSectionForm.tsx

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

src/components/resource-policy/EditPolicyOtpEmailSectionForm.tsx

@@ -4,6 +4,7 @@ import {
     SettingsSection,
     SettingsSectionBody,
     SettingsSectionDescription,
+    SettingsSectionFooter,
     SettingsSectionForm,
     SettingsSectionHeader,
     SettingsSectionTitle
@@ -13,13 +14,14 @@ import { useTranslations } from "next-intl";
 
 import z from "zod";
 
-import { type PolicyFormValues } from ".";
+import { createPolicySchema, type PolicyFormValues } from ".";
 
 import { SwitchInput } from "@app/components/SwitchInput";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { Button } from "@app/components/ui/button";
 import {
+    Form,
     FormControl,
     FormDescription,
     FormField,
@@ -30,27 +32,64 @@ import { InfoPopup } from "@app/components/ui/info-popup";
 
 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 ────────────────────────────────────────────────────
 
 type PolicyOtpEmailSectionProps = {
-    form: UseFormReturn<PolicyFormValues, any, any>;
     emailEnabled: boolean;
 };
 
-export function PolicyOtpEmailSection({
+export function EditPolicyOtpEmailSectionForm({
-    form,
     emailEnabled
 }: PolicyOtpEmailSectionProps) {
     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<
         number | 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) {
         return (
             <SettingsSection>
@@ -77,6 +116,8 @@ export function PolicyOtpEmailSection({
     }
 
     return (
+        <Form {...form}>
+            <form action={formAction}>
                 <SettingsSection>
                     <SettingsSectionHeader>
                         <SettingsSectionTitle>
@@ -104,7 +145,6 @@ export function PolicyOtpEmailSection({
                                 label={t("otpEmailWhitelist")}
                                 defaultChecked={false}
                                 onCheckedChange={(val) => {
-                            setWhitelistEnabled(val);
                                     form.setValue("emailWhitelistEnabled", val);
                                 }}
                                 disabled={!emailEnabled}
@@ -118,7 +158,9 @@ export function PolicyOtpEmailSection({
                                         <FormItem>
                                             <FormLabel>
                                                 <InfoPopup
-                                            text={t("otpEmailWhitelistList")}
+                                                    text={t(
+                                                        "otpEmailWhitelistList"
+                                                    )}
                                                     info={t(
                                                         "otpEmailWhitelistListDescription"
                                                     )}
@@ -128,7 +170,9 @@ export function PolicyOtpEmailSection({
                                                 {/* @ts-ignore */}
                                                 <TagInput
                                                     {...field}
-                                            activeTagIndex={activeEmailTagIndex}
+                                                    activeTagIndex={
+                                                        activeEmailTagIndex
+                                                    }
                                                     size="sm"
                                                     validateTag={(tag) => {
                                                         return z
@@ -139,23 +183,33 @@ export function PolicyOtpEmailSection({
                                                                     .regex(
                                                                         /^\*@[\w.-]+\.[a-zA-Z]{2,}$/,
                                                                         {
-                                                                    message: t(
+                                                                            message:
+                                                                                t(
                                                                                     "otpEmailErrorInvalid"
                                                                                 )
                                                                         }
                                                                     )
                                                             )
-                                                    .safeParse(tag).success;
+                                                            .safeParse(tag)
+                                                            .success;
                                                     }}
                                                     setActiveTagIndex={
                                                         setActiveEmailTagIndex
                                                     }
-                                            placeholder={t("otpEmailEnter")}
+                                                    placeholder={t(
-                                            tags={form.getValues().emails}
+                                                        "otpEmailEnter"
+                                                    )}
+                                                    tags={
+                                                        form.getValues()
+                                                            .emails ?? []
+                                                    }
                                                     setTags={(newEmails) => {
                                                         form.setValue(
                                                             "emails",
-                                                    newEmails as [Tag, ...Tag[]]
+                                                            newEmails as [
+                                                                Tag,
+                                                                ...Tag[]
+                                                            ]
                                                         );
                                                     }}
                                                     allowDuplicates={false}
@@ -170,7 +224,19 @@ export function PolicyOtpEmailSection({
                                 />
                             )}
                         </SettingsSectionForm>
+
+                        <SettingsSectionFooter>
+                            <Button
+                                type="submit"
+                                loading={isSubmitting}
+                                disabled={isSubmitting || !emailEnabled}
+                            >
+                                {t("otpEmailWhitelistSave")}
+                            </Button>
+                        </SettingsSectionFooter>
                     </SettingsSectionBody>
                 </SettingsSection>
+            </form>
+        </Form>
     );
 }

src/components/resource-policy/EditPolicyUserRolesSectionForm.tsx

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