@springmicro/auth 0.1.9 → 0.2.0-alpha.0

package/src/components/forms/AgreementModal.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import type { SignUpFormState } from "../SignUp";
+import type { Application } from "./util/provider";
+
+export type AgreementModalProps = {
+  application: Application;
+  state: SignUpFormState;
+  setState: React.Dispatch<React.SetStateAction<SignUpFormState>>;
+};
+
+export function AgreementModal({
+  application,
+  state,
+  setState,
+}: AgreementModalProps) {
+  const [visible, setVisible] = React.useState(false);
+  const dialogRef = React.useRef<HTMLDialogElement | null>(null);
+
+  React.useEffect(() => {
+    if (!dialogRef.current) {
+      dialogRef.current = document.getElementById(
+        "agreementDialog"
+      ) as HTMLDialogElement | null;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (dialogRef.current) {
+      if (visible) {
+        dialogRef.current.showModal();
+      } else {
+        dialogRef.current.close();
+      }
+    }
+  }, [visible]);
+
+  const handleCancel = () => {
+    setState({ ...state, agreement: false });
+    setVisible(false);
+  };
+
+  const handleOk = () => {
+    setState({ ...state, agreement: true });
+    setVisible(false);
+  };
+
+  const handleOpen = () => {
+    setVisible(true);
+  };
+
+  return (
+    <>
+      <dialog id="agreementDialog" className="modal">
+        <div className="modal-box">
+          <div className="mt-4 mb-8">
+            <iframe
+              src={application.termsOfUse}
+              width="100%"
+              height="300px"
+              sandbox="allow-scripts"
+            />
+          </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">
+              <button className="btn" onClick={handleCancel} key="closebtn">
+                Cancel
+              </button>
+              <button
+                className="btn btn-primary"
+                // disabled={isOkDisabled}
+                onClick={handleOk}
+                key="okbtn"
+              >
+                OK
+              </button>
+            </form>
+          </div>
+        </div>
+      </dialog>
+      <input checked={!!state.agreement} type="checkbox" readOnly />
+      <button onClick={handleOpen}>Open Terms</button>
+    </>
+  );
+}

package/src/components/forms/CaptchaController.tsx

@@ -0,0 +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>
+    </>
+  );
+}

package/src/components/forms/CaptchaModal.jsx

@@ -0,0 +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",
+};

package/src/components/forms/CaptchaWidget.jsx

@@ -0,0 +1,146 @@
+// 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";
+
+export const CaptchaWidget = (props) => {
+  const {
+    captchaType,
+    subType,
+    siteKey,
+    clientSecret,
+    clientId2,
+    clientSecret2,
+    onChange,
+  } = props;
+
+  const loadScript = (src) => {
+    const tag = document.createElement("script");
+    tag.async = false;
+    tag.src = src;
+    const body = document.getElementsByTagName("body")[0];
+    body.appendChild(tag);
+  };
+
+  useEffect(() => {
+    switch (captchaType) {
+      case "reCAPTCHA": {
+        const reTimer = setInterval(() => {
+          if (!window.grecaptcha) {
+            loadScript("https://recaptcha.net/recaptcha/api.js");
+          }
+          if (window.grecaptcha && window.grecaptcha.render) {
+            window.grecaptcha.render("captcha", {
+              sitekey: siteKey,
+              callback: onChange,
+            });
+            clearInterval(reTimer);
+          }
+        }, 300);
+        break;
+      }
+      case "hCaptcha": {
+        const hTimer = setInterval(() => {
+          if (!window.hcaptcha) {
+            loadScript("https://js.hcaptcha.com/1/api.js");
+          }
+          if (window.hcaptcha && window.hcaptcha.render) {
+            window.hcaptcha.render("captcha", {
+              sitekey: siteKey,
+              callback: onChange,
+            });
+            clearInterval(hTimer);
+          }
+        }, 300);
+        break;
+      }
+      case "Aliyun Captcha": {
+        const AWSCTimer = setInterval(() => {
+          if (!window.AWSC) {
+            loadScript("https://g.alicdn.com/AWSC/AWSC/awsc.js");
+          }
+
+          if (window.AWSC) {
+            if (clientSecret2 && clientSecret2 !== "***") {
+              window.AWSC.use(subType, function (state, module) {
+                module.init({
+                  appkey: clientSecret2,
+                  scene: clientId2,
+                  renderTo: "captcha",
+                  success: function (data) {
+                    onChange(
+                      `SessionId=${data.sessionId}&AccessKeyId=${siteKey}&Scene=${clientId2}&AppKey=${clientSecret2}&Token=${data.token}&Sig=${data.sig}&RemoteIp=192.168.0.1`
+                    );
+                  },
+                });
+              });
+            }
+            clearInterval(AWSCTimer);
+          }
+        }, 300);
+        break;
+      }
+      case "GEETEST": {
+        let getLock = false;
+        const gTimer = setInterval(() => {
+          if (!window.initGeetest4) {
+            loadScript("https://static.geetest.com/v4/gt4.js");
+          }
+          if (window.initGeetest4 && siteKey && !getLock) {
+            const captchaId = String(siteKey);
+            window.initGeetest4(
+              {
+                captchaId,
+                product: "float",
+              },
+              function (captchaObj) {
+                if (!getLock) {
+                  captchaObj.appendTo("#captcha");
+                  getLock = true;
+                }
+                captchaObj.onSuccess(function () {
+                  const result = captchaObj.getValidate();
+                  onChange(
+                    `lot_number=${result.lot_number}&captcha_output=${result.captcha_output}&pass_token=${result.pass_token}&gen_time=${result.gen_time}&captcha_id=${siteKey}`
+                  );
+                });
+              }
+            );
+            clearInterval(gTimer);
+          }
+        }, 500);
+        break;
+      }
+      case "Cloudflare Turnstile": {
+        const tTimer = setInterval(() => {
+          if (!window.turnstile) {
+            loadScript("https://challenges.cloudflare.com/turnstile/v0/api.js");
+          }
+          if (window.turnstile && window.turnstile.render) {
+            window.turnstile.render("#captcha", {
+              sitekey: siteKey,
+              callback: onChange,
+            });
+            clearInterval(tTimer);
+          }
+        }, 300);
+        break;
+      }
+      default:
+        break;
+    }
+  }, [captchaType, subType, siteKey, clientSecret, clientId2, clientSecret2]);
+
+  return <div id="captcha" />;
+};

package/src/components/forms/PasswordChecker.ts

@@ -0,0 +1,88 @@
+// Copyright 2023 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 i18next from "i18next";
+
+function isValidOption_AtLeast6(password: string) {
+  if (password.length < 6) {
+    return i18next.t("user:The password must have at least 6 characters");
+  }
+  return "";
+}
+
+function isValidOption_AtLeast8(password: string) {
+  if (password.length < 8) {
+    return i18next.t("user:The password must have at least 8 characters");
+  }
+  return "";
+}
+
+function isValidOption_Aa123(password: string) {
+  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).+$/;
+  if (!regex.test(password)) {
+    return i18next.t(
+      "user:The password must contain at least one uppercase letter, one lowercase letter and one digit"
+    );
+  }
+  return "";
+}
+
+function isValidOption_SpecialChar(password: string) {
+  const regex = /^(?=.*[!-/:-@[-`{-~]).+$/;
+  if (!regex.test(password)) {
+    return i18next.t(
+      "user:The password must contain at least one special character"
+    );
+  }
+  return "";
+}
+
+function isValidOption_NoRepeat(password: string) {
+  const regex = /(.)\1+/;
+  if (regex.test(password)) {
+    return i18next.t(
+      "user:The password must not contain any repeated characters"
+    );
+  }
+  return "";
+}
+
+export function checkPasswordComplexity(password: string, options: any) {
+  if (password.length === 0) {
+    return i18next.t("login:Please input your password!");
+  }
+
+  if (!options || options.length === 0) {
+    options = ["AtLeast6"];
+  }
+
+  const checkers = {
+    AtLeast6: isValidOption_AtLeast6,
+    AtLeast8: isValidOption_AtLeast8,
+    Aa123: isValidOption_Aa123,
+    SpecialChar: isValidOption_SpecialChar,
+    NoRepeat: isValidOption_NoRepeat,
+  };
+
+  for (const option of options) {
+    const checkerFunc = checkers[option as keyof typeof checkers];
+    if (checkerFunc) {
+      const errorMsg = checkerFunc(password);
+      if (errorMsg !== "") {
+        return errorMsg;
+      }
+    }
+  }
+  return "";
+}