fix(settings): change pw modal usage

raspiblitz · Oct 2, 2024 · 392ad3d · 392ad3d
1 parent ee83a91
commit 392ad3d
Showing 1 changed file with 75 additions and 76 deletions.
diff --git a/src/pages/Settings/ChangePwModal.tsx b/src/pages/Settings/ChangePwModal.tsx
@@ -6,7 +6,6 @@ import useCapsLock from "@/hooks/use-caps-lock";
 import { checkError } from "@/utils/checkError";
 import { instance } from "@/utils/interceptor";
 import { Input, useDisclosure } from "@nextui-org/react";
-import { ModalFooter, ModalBody } from "@nextui-org/react";
 import { type FC, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -63,84 +62,84 @@ const ChangePwModal: FC = () => {
         disclosure={confirmModal}
         headline={t("settings.change_pw_a")}
         isLoading={isLoading}
-        customContent={
-          <form onSubmit={handleSubmit(changePwHandler)}>
-            <ModalBody>
-              {isCapsLockEnabled && <CapsLockWarning />}
+        custom
+      >
+        <form onSubmit={handleSubmit(changePwHandler)}>
+          <ConfirmModal.Body>
+            {isCapsLockEnabled && <CapsLockWarning />}
 
-              <fieldset className="flex w-full flex-col gap-4">
-                <Input
-                  className="w-full"
-                  classNames={{
-                    inputWrapper:
-                      "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
-                  }}
-                  type="password"
-                  label={t("settings.old_pw")}
-                  isInvalid={!!errors.oldPassword}
-                  errorMessage={errors.oldPassword?.message}
-                  {...register("oldPassword", {
-                    required: t("setup.password_error_empty"),
-                    pattern: {
-                      value: /^[a-zA-Z0-9.-]*$/,
-                      message: t("setup.password_error_chars"),
-                    },
-                    minLength: {
-                      value: 8,
-                      message: t("setup.password_error_length"),
-                    },
-                  })}
-                  {...keyHandlers}
-                />
-
-                <Input
-                  className="w-full"
-                  classNames={{
-                    inputWrapper:
-                      "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
-                  }}
-                  type="password"
-                  label={t("settings.new_pw")}
-                  isInvalid={!!errors.newPassword}
-                  errorMessage={errors.newPassword?.message}
-                  {...register("newPassword", {
-                    required: t("setup.password_error_empty"),
-                    pattern: {
-                      value: /^[a-zA-Z0-9.-]*$/,
-                      message: t("setup.password_error_chars"),
-                    },
-                    minLength: {
-                      value: 8,
-                      message: t("setup.password_error_length"),
-                    },
-                  })}
-                  {...keyHandlers}
-                />
-              </fieldset>
-            </ModalBody>
+            <fieldset className="flex w-full flex-col gap-4">
+              <Input
+                className="w-full"
+                classNames={{
+                  inputWrapper:
+                    "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
+                }}
+                type="password"
+                label={t("settings.old_pw")}
+                isInvalid={!!errors.oldPassword}
+                errorMessage={errors.oldPassword?.message}
+                {...register("oldPassword", {
+                  required: t("setup.password_error_empty"),
+                  pattern: {
+                    value: /^[a-zA-Z0-9.-]*$/,
+                    message: t("setup.password_error_chars"),
+                  },
+                  minLength: {
+                    value: 8,
+                    message: t("setup.password_error_length"),
+                  },
+                })}
+                {...keyHandlers}
+              />
 
-            <ModalFooter>
-              <Button
-                onClick={() => {
-                  confirmModal.onClose();
-                  reset();
+              <Input
+                className="w-full"
+                classNames={{
+                  inputWrapper:
+                    "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
                 }}
-                disabled={isLoading}
-              >
-                {t("settings.cancel")}
-              </Button>
-              <Button
-                color="primary"
-                type="submit"
-                disabled={isLoading || !isValid}
-                isLoading={isLoading}
-              >
-                {t("settings.confirm")}
-              </Button>
-            </ModalFooter>
-          </form>
-        }
-      />
+                type="password"
+                label={t("settings.new_pw")}
+                isInvalid={!!errors.newPassword}
+                errorMessage={errors.newPassword?.message}
+                {...register("newPassword", {
+                  required: t("setup.password_error_empty"),
+                  pattern: {
+                    value: /^[a-zA-Z0-9.-]*$/,
+                    message: t("setup.password_error_chars"),
+                  },
+                  minLength: {
+                    value: 8,
+                    message: t("setup.password_error_length"),
+                  },
+                })}
+                {...keyHandlers}
+              />
+            </fieldset>
+          </ConfirmModal.Body>
+
+          <ConfirmModal.Footer>
+            <Button
+              onClick={() => {
+                confirmModal.onClose();
+                reset();
+              }}
+              disabled={isLoading}
+            >
+              {t("settings.cancel")}
+            </Button>
+            <Button
+              color="primary"
+              type="submit"
+              disabled={isLoading || !isValid}
+              isLoading={isLoading}
+            >
+              {t("settings.confirm")}
+            </Button>
+          </ConfirmModal.Footer>
+        </form>
+      </ConfirmModal>
 
       <ActionBox
         name={t("settings.change_pw_a")}