@springmicro/auth 0.7.0 → 0.7.2

package/src/components/forms/CaptchaController.tsx

@@ -1,94 +1,94 @@
-import React from "react";
-import { CaptchaModal } from "./CaptchaModal";
-import * as AuthBackend from "./util/auth-api";
-
-type CaptchaState = {
-  values: any;
-  openCaptchaModal: boolean;
-};
-
-export default function CaptchaController() {
-  const [state, setState] = React.useState<CaptchaState>({
-    values: {},
-    openCaptchaModal: false,
-  });
-  const dialogRef = React.useRef<HTMLElement | null>(null);
-
-  const handleClick = () => {
-    if (dialogRef.current) {
-      if (!state.openCaptchaModal) {
-        // @ts-ignore
-        dialogRef.current.showModal();
-      } else {
-        // @ts-ignore
-        dialogRef.current.close();
-      }
-      setState({ ...state, openCaptchaModal: !state.openCaptchaModal });
-    }
-  };
-
-  const captchaCallback = (v: any) => {
-    console.log(v);
-  };
-
-  const onOk = (
-    captchaType: string,
-    captchaToken: string,
-    clientSecret: string
-  ) => {
-    if (dialogRef.current) {
-      // @ts-ignore
-      dialogRef.current.close();
-      const values = state.values;
-      values["captchaType"] = captchaType;
-      values["captchaToken"] = captchaToken;
-      values["clientSecret"] = clientSecret;
-      AuthBackend.getCaptchaStatus(values).then((res) => {
-        if (res.status === "ok") {
-          // errors
-          if (res.data) {
-            setState({
-              openCaptchaModal: true,
-              values: values,
-            });
-            return null;
-          }
-        }
-        captchaCallback(values);
-      });
-      setState({ ...state, openCaptchaModal: false });
-    }
-  };
-
-  const onCancel = () => {
-    if (dialogRef.current) {
-      // @ts-ignore
-      dialogRef.current.close();
-      setState({ ...state, openCaptchaModal: false });
-    }
-  };
-
-  React.useEffect(() => {
-    dialogRef.current = document.getElementById("captcha-modal");
-  }, []);
-
-  return (
-    <>
-      <CaptchaModal
-        visible={state.openCaptchaModal}
-        owner="admin"
-        name="provider_captcha_default"
-        isCurrentProvider={true}
-        onCancel={onCancel}
-        onOk={onOk}
-      />
-      <button
-        className="btn btn-primary"
-        // @ts-ignore
-        onClick={handleClick}
-      >
-        Captcha
-      </button>
-    </>
-  );
-}
+import React from "react";
+import { CaptchaModal } from "./CaptchaModal";
+import * as AuthBackend from "./util/auth-api";
+
+type CaptchaState = {
+  values: any;
+  openCaptchaModal: boolean;
+};
+
+export default function CaptchaController() {
+  const [state, setState] = React.useState<CaptchaState>({
+    values: {},
+    openCaptchaModal: false,
+  });
+  const dialogRef = React.useRef<HTMLElement | null>(null);
+
+  const handleClick = () => {
+    if (dialogRef.current) {
+      if (!state.openCaptchaModal) {
+        // @ts-ignore
+        dialogRef.current.showModal();
+      } else {
+        // @ts-ignore
+        dialogRef.current.close();
+      }
+      setState({ ...state, openCaptchaModal: !state.openCaptchaModal });
+    }
+  };
+
+  const captchaCallback = (v: any) => {
+    console.log(v);
+  };
+
+  const onOk = (
+    captchaType: string,
+    captchaToken: string,
+    clientSecret: string
+  ) => {
+    if (dialogRef.current) {
+      // @ts-ignore
+      dialogRef.current.close();
+      const values = state.values;
+      values["captchaType"] = captchaType;
+      values["captchaToken"] = captchaToken;
+      values["clientSecret"] = clientSecret;
+      AuthBackend.getCaptchaStatus(values).then((res) => {
+        if (res.status === "ok") {
+          // errors
+          if (res.data) {
+            setState({
+              openCaptchaModal: true,
+              values: values,
+            });
+            return null;
+          }
+        }
+        captchaCallback(values);
+      });
+      setState({ ...state, openCaptchaModal: false });
+    }
+  };
+
+  const onCancel = () => {
+    if (dialogRef.current) {
+      // @ts-ignore
+      dialogRef.current.close();
+      setState({ ...state, openCaptchaModal: false });
+    }
+  };
+
+  React.useEffect(() => {
+    dialogRef.current = document.getElementById("captcha-modal");
+  }, []);
+
+  return (
+    <>
+      <CaptchaModal
+        visible={state.openCaptchaModal}
+        owner="admin"
+        name="provider_captcha_default"
+        isCurrentProvider={true}
+        onCancel={onCancel}
+        onOk={onOk}
+      />
+      <button
+        className="btn btn-primary"
+        // @ts-ignore
+        onClick={handleClick}
+      >
+        Captcha
+      </button>
+    </>
+  );
+}

package/src/components/forms/CaptchaModal.jsx

@@ -1,171 +1,171 @@
-// Copyright 2022 The Casdoor Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React, { useEffect } from "react";
-import * as UserBackend from "./util/user-api";
-import { CaptchaWidget } from "./CaptchaWidget";
-import { useTranslation } from "react-i18next";
-
-export const CaptchaModal = (props) => {
-  const { t } = useTranslation();
-  const { owner, name, visible, onOk, onCancel, isCurrentProvider } = props;
-
-  const [captchaType, setCaptchaType] = React.useState("none");
-  const [clientId, setClientId] = React.useState("");
-  const [clientSecret, setClientSecret] = React.useState("");
-  const [subType, setSubType] = React.useState("");
-  const [clientId2, setClientId2] = React.useState("");
-  const [clientSecret2, setClientSecret2] = React.useState("");
-
-  const [open, setOpen] = React.useState(false);
-  const [captchaImg, setCaptchaImg] = React.useState("");
-  const [captchaToken, setCaptchaToken] = React.useState("");
-
-  const defaultInputRef = React.useRef(null);
-
-  useEffect(() => {
-    if (visible) {
-      loadCaptcha();
-    } else {
-      handleCancel();
-      setOpen(false);
-    }
-  }, [visible]);
-
-  const handleOk = () => {
-    onOk?.(captchaType, captchaToken, clientSecret);
-  };
-
-  const handleCancel = () => {
-    setCaptchaToken("");
-    onCancel?.();
-  };
-
-  const loadCaptcha = () => {
-    UserBackend.getCaptcha(owner, name, isCurrentProvider).then((res) => {
-      if (res.type === "none") {
-        handleOk();
-      } else if (res.type === "Default") {
-        setOpen(true);
-        setClientSecret(res.captchaId);
-        setCaptchaImg(res.captchaImage);
-        setCaptchaType("Default");
-      } else {
-        setOpen(true);
-        setCaptchaType(res.type);
-        setClientId(res.clientId);
-        setClientSecret(res.clientSecret);
-        setSubType(res.subType);
-        setClientId2(res.clientId2);
-        setClientSecret2(res.clientSecret2);
-      }
-    });
-  };
-
-  const renderDefaultCaptcha = () => {
-    return (
-      <div className="flex flex-col items-center">
-        <div
-          className="bg-no-repeat mb-4 border border-current rounded w-[200px] h-[80px]"
-          style={{
-            backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
-          }}
-        />
-        <input
-          className="input input-bordered w-[200px]"
-          type="text"
-          ref={defaultInputRef}
-          value={captchaToken}
-          // prefix={<SafetyOutlined />}
-          placeholder={t("general.captcha")}
-          onKeyDown={(e) => (e.key === "Enter" ? handleOk() : null)}
-          onChange={(e) => setCaptchaToken(e.target.value)}
-        />
-      </div>
-    );
-  };
-
-  const onChange = (token) => {
-    setCaptchaToken(token);
-  };
-
-  const renderCaptcha = () => {
-    if (captchaType === "Default") {
-      return renderDefaultCaptcha();
-    } else {
-      return (
-        <div className="flex justify-center">
-          <CaptchaWidget
-            captchaType={captchaType}
-            subType={subType}
-            siteKey={clientId}
-            clientSecret={clientSecret}
-            onChange={onChange}
-            clientId2={clientId2}
-            clientSecret2={clientSecret2}
-          />
-        </div>
-      );
-    }
-  };
-
-  const renderFooter = () => {
-    let isOkDisabled = false;
-    if (captchaType === "Default") {
-      const regex = /^\d{5}$/;
-      if (!regex.test(captchaToken)) {
-        isOkDisabled = true;
-      }
-    } else if (captchaToken === "") {
-      isOkDisabled = true;
-    }
-
-    return [
-      <button className="btn" onClick={handleCancel} key="closebtn">
-        Cancel
-      </button>,
-      <button
-        className="btn btn-primary"
-        disabled={isOkDisabled}
-        onClick={handleOk}
-        key="okbtn"
-      >
-        OK
-      </button>,
-    ];
-  };
-
-  return (
-    <dialog id="captcha-modal" className="modal">
-      <div className="modal-box">
-        <div className="mt-4 mb-8">{renderCaptcha()}</div>
-        <div className="modal-action">
-          <form method="dialog" className="modal-backdrop">
-            {/* if there is a button in form, it will close the modal */}
-            <button>Close</button>
-          </form>
-          <form method="dialog" className="flex gap-3">
-            {renderFooter()}
-          </form>
-        </div>
-      </div>
-    </dialog>
-  );
-};
-
-export const CaptchaRule = {
-  Always: "Always",
-  Never: "Never",
-  Dynamic: "Dynamic",
-};
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useEffect } from "react";
+import * as UserBackend from "./util/user-api";
+import { CaptchaWidget } from "./CaptchaWidget";
+import { useTranslation } from "react-i18next";
+
+export const CaptchaModal = (props) => {
+  const { t } = useTranslation();
+  const { owner, name, visible, onOk, onCancel, isCurrentProvider } = props;
+
+  const [captchaType, setCaptchaType] = React.useState("none");
+  const [clientId, setClientId] = React.useState("");
+  const [clientSecret, setClientSecret] = React.useState("");
+  const [subType, setSubType] = React.useState("");
+  const [clientId2, setClientId2] = React.useState("");
+  const [clientSecret2, setClientSecret2] = React.useState("");
+
+  const [open, setOpen] = React.useState(false);
+  const [captchaImg, setCaptchaImg] = React.useState("");
+  const [captchaToken, setCaptchaToken] = React.useState("");
+
+  const defaultInputRef = React.useRef(null);
+
+  useEffect(() => {
+    if (visible) {
+      loadCaptcha();
+    } else {
+      handleCancel();
+      setOpen(false);
+    }
+  }, [visible]);
+
+  const handleOk = () => {
+    onOk?.(captchaType, captchaToken, clientSecret);
+  };
+
+  const handleCancel = () => {
+    setCaptchaToken("");
+    onCancel?.();
+  };
+
+  const loadCaptcha = () => {
+    UserBackend.getCaptcha(owner, name, isCurrentProvider).then((res) => {
+      if (res.type === "none") {
+        handleOk();
+      } else if (res.type === "Default") {
+        setOpen(true);
+        setClientSecret(res.captchaId);
+        setCaptchaImg(res.captchaImage);
+        setCaptchaType("Default");
+      } else {
+        setOpen(true);
+        setCaptchaType(res.type);
+        setClientId(res.clientId);
+        setClientSecret(res.clientSecret);
+        setSubType(res.subType);
+        setClientId2(res.clientId2);
+        setClientSecret2(res.clientSecret2);
+      }
+    });
+  };
+
+  const renderDefaultCaptcha = () => {
+    return (
+      <div className="flex flex-col items-center">
+        <div
+          className="bg-no-repeat mb-4 border border-current rounded w-[200px] h-[80px]"
+          style={{
+            backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
+          }}
+        />
+        <input
+          className="input input-bordered w-[200px]"
+          type="text"
+          ref={defaultInputRef}
+          value={captchaToken}
+          // prefix={<SafetyOutlined />}
+          placeholder={t("general.captcha")}
+          onKeyDown={(e) => (e.key === "Enter" ? handleOk() : null)}
+          onChange={(e) => setCaptchaToken(e.target.value)}
+        />
+      </div>
+    );
+  };
+
+  const onChange = (token) => {
+    setCaptchaToken(token);
+  };
+
+  const renderCaptcha = () => {
+    if (captchaType === "Default") {
+      return renderDefaultCaptcha();
+    } else {
+      return (
+        <div className="flex justify-center">
+          <CaptchaWidget
+            captchaType={captchaType}
+            subType={subType}
+            siteKey={clientId}
+            clientSecret={clientSecret}
+            onChange={onChange}
+            clientId2={clientId2}
+            clientSecret2={clientSecret2}
+          />
+        </div>
+      );
+    }
+  };
+
+  const renderFooter = () => {
+    let isOkDisabled = false;
+    if (captchaType === "Default") {
+      const regex = /^\d{5}$/;
+      if (!regex.test(captchaToken)) {
+        isOkDisabled = true;
+      }
+    } else if (captchaToken === "") {
+      isOkDisabled = true;
+    }
+
+    return [
+      <button className="btn" onClick={handleCancel} key="closebtn">
+        Cancel
+      </button>,
+      <button
+        className="btn btn-primary"
+        disabled={isOkDisabled}
+        onClick={handleOk}
+        key="okbtn"
+      >
+        OK
+      </button>,
+    ];
+  };
+
+  return (
+    <dialog id="captcha-modal" className="modal">
+      <div className="modal-box">
+        <div className="mt-4 mb-8">{renderCaptcha()}</div>
+        <div className="modal-action">
+          <form method="dialog" className="modal-backdrop">
+            {/* if there is a button in form, it will close the modal */}
+            <button>Close</button>
+          </form>
+          <form method="dialog" className="flex gap-3">
+            {renderFooter()}
+          </form>
+        </div>
+      </div>
+    </dialog>
+  );
+};
+
+export const CaptchaRule = {
+  Always: "Always",
+  Never: "Never",
+  Dynamic: "Dynamic",
+};