🚧 auth methods

src/components/resource-policy/EditPolicyForm.tsx

@@ -281,8 +281,8 @@ export function EditPolicyForm({ hidePolicyNameForm }: EditPolicyFormProps) {
                 allUsers={allUsers}
                 allIdps={allIdps}
             />
+            <PolicyAuthMethodsSection />
             {/* 
-                    <PolicyAuthMethodsSection form={form} />
                     <PolicyOtpEmailSection
                         form={form}
                         emailEnabled={env.email.emailEnabled}
@@ -429,8 +429,6 @@ export function PolicyUsersRolesSection({
 
     const api = createApiClient(useEnvContext());
 
-    console.log({ policy });
-
     const form = useForm({
         resolver: zodResolver(
             createPolicySchema.pick({
@@ -736,15 +734,24 @@ const setHeaderAuthSchema = z.object({
     extendedCompatibility: z.boolean()
 });
 
-type PolicyAuthMethodsSectionProps = {
+export function PolicyAuthMethodsSection() {
-    form: UseFormReturn<PolicyFormValues, any, any>;
+    const { policy } = useResourcePolicyContext();
-};
+
+    const api = createApiClient(useEnvContext());
+
+    const form = useForm({
+        resolver: zodResolver(
+            createPolicySchema.pick({
+                password: true,
+                pincode: true,
+                headerAuth: true
+            })
+        ),
+        defaultValues: {}
+    });
 
-export function PolicyAuthMethodsSection({
-    form
-}: PolicyAuthMethodsSectionProps) {
     const t = useTranslations();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [isSetPasswordOpen, setIsSetPasswordOpen] = useState(false);
     const [isSetPincodeOpen, setIsSetPincodeOpen] = useState(false);
     const [isSetHeaderAuthOpen, setIsSetHeaderAuthOpen] = useState(false);
@@ -768,7 +775,18 @@ export function PolicyAuthMethodsSection({
         defaultValues: { user: "", password: "", extendedCompatibility: true }
     });
 
-    if (!isOpen) {
+    const [, formAction, isSubmitting] = useActionState(onSubmit, null);
+
+    async function onSubmit() {
+        const isValid = await form.trigger();
+
+        if (!isValid) return;
+
+        const payload = form.getValues();
+        console.log({ payload });
+    }
+
+    if (!isExpanded) {
         return (
             <SettingsSection>
                 <SettingsSectionHeader>
@@ -783,7 +801,7 @@ export function PolicyAuthMethodsSection({
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => setIsOpen(true)}
+                        onClick={() => setIsExpanded(true)}
                     >
                         <Plus className="mr-2 h-4 w-4" />
                         {t("resourcePolicyAuthMethodAdd")}
@@ -1050,6 +1068,8 @@ export function PolicyAuthMethodsSection({
                 </CredenzaContent>
             </Credenza>
 
+            <Form {...form}>
+                <form action={() => {}}>
                     <SettingsSection>
                         <SettingsSectionHeader>
                             <SettingsSectionTitle>
@@ -1081,8 +1101,13 @@ export function PolicyAuthMethodsSection({
                                         size="sm"
                                         onClick={
                                             password
-                                        ? () => form.setValue("password", null)
+                                                ? () =>
-                                        : () => setIsSetPasswordOpen(true)
+                                                      form.setValue(
+                                                          "password",
+                                                          null
+                                                      )
+                                                : () =>
+                                                      setIsSetPasswordOpen(true)
                                         }
                                     >
                                         {password
@@ -1111,11 +1136,18 @@ export function PolicyAuthMethodsSection({
                                         size="sm"
                                         onClick={
                                             pincode
-                                        ? () => form.setValue("pincode", null)
+                                                ? () =>
-                                        : () => setIsSetPincodeOpen(true)
+                                                      form.setValue(
+                                                          "pincode",
+                                                          null
+                                                      )
+                                                : () =>
+                                                      setIsSetPincodeOpen(true)
                                         }
                                     >
-                                {pincode ? t("pincodeRemove") : t("pincodeAdd")}
+                                        {pincode
+                                            ? t("pincodeRemove")
+                                            : t("pincodeAdd")}
                                     </Button>
                                 </div>
 
@@ -1142,8 +1174,14 @@ export function PolicyAuthMethodsSection({
                                         onClick={
                                             headerAuth
                                                 ? () =>
-                                              form.setValue("headerAuth", null)
+                                                      form.setValue(
-                                        : () => setIsSetHeaderAuthOpen(true)
+                                                          "headerAuth",
+                                                          null
+                                                      )
+                                                : () =>
+                                                      setIsSetHeaderAuthOpen(
+                                                          true
+                                                      )
                                         }
                                     >
                                         {headerAuth
@@ -1153,7 +1191,19 @@ export function PolicyAuthMethodsSection({
                                 </div>
                             </SettingsSectionForm>
                         </SettingsSectionBody>
+
+                        <div className="flex py-6 justify-end">
+                            <Button
+                                type="submit"
+                                loading={isSubmitting}
+                                disabled={isSubmitting}
+                            >
+                                {t("saveSettings")}
+                            </Button>
+                        </div>
                     </SettingsSection>
+                </form>
+            </Form>
         </>
     );
 }
@@ -1170,13 +1220,13 @@ export function PolicyOtpEmailSection({
     emailEnabled
 }: PolicyOtpEmailSectionProps) {
     const t = useTranslations();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [whitelistEnabled, setWhitelistEnabled] = useState(false);
     const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
         number | null
     >(null);
 
-    if (!isOpen) {
+    if (!isExpanded) {
         return (
             <SettingsSection>
                 <SettingsSectionHeader>
@@ -1191,7 +1241,7 @@ export function PolicyOtpEmailSection({
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => setIsOpen(true)}
+                        onClick={() => setIsExpanded(true)}
                     >
                         <Plus className="mr-2 h-4 w-4" />
                         {t("resourcePolicyOtpEmailAdd")}
@@ -1332,7 +1382,7 @@ export function PolicyRulesSection({
     isMaxmindAsnAvailable
 }: PolicyRulesSectionProps) {
     const t = useTranslations();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [rules, setRules] = useState<LocalRule[]>([]);
     const [rulesEnabled, setRulesEnabled] = useState(false);
     const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
@@ -1829,7 +1879,7 @@ export function PolicyRulesSection({
         state: { pagination: { pageIndex: 0, pageSize: 1000 } }
     });
 
-    if (!isOpen) {
+    if (!isExpanded) {
         return (
             <SettingsSection>
                 <SettingsSectionHeader>
@@ -1844,7 +1894,7 @@ export function PolicyRulesSection({
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => setIsOpen(true)}
+                        onClick={() => setIsExpanded(true)}
                     >
                         <Plus className="mr-2 h-4 w-4" />
                         {t("resourcePolicyRulesAdd")}