@springmicro/auth 0.1.8 → 0.2.0-alpha.0

package/src/components/forms/SendCodeInput.tsx

@@ -0,0 +1,149 @@
+// Copyright 2021 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 from "react";
+import i18next from "i18next";
+import * as UserBackend from "./util/user-api";
+import { CaptchaModal } from "./CaptchaModal";
+import type { Application } from "./util/provider";
+import { useTranslation } from "react-i18next";
+
+type ButtonClickArgsTuple = [
+  dest: any,
+  type: any,
+  applicationId: any,
+  checkUser?: string,
+];
+
+export type SendCodeInputProps = {
+  value?: any;
+  disabled: boolean;
+  textBefore?: string;
+  onChange: Function;
+  onButtonClickArgs: ButtonClickArgsTuple;
+  application: Application;
+  method: string;
+  countryCode: string;
+};
+
+export const SendCodeInput = ({
+  value,
+  disabled,
+  textBefore,
+  onChange,
+  onButtonClickArgs,
+  application,
+  method,
+  countryCode,
+}: SendCodeInputProps) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = React.useState(false);
+  const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
+  const [buttonLoading, setButtonLoading] = React.useState(false);
+  const dialogRef = React.useRef<HTMLElement | null>(null);
+
+  const handleCountDown = (leftTime = 60) => {
+    let leftTimeSecond = leftTime;
+    setButtonLeftTime(leftTimeSecond);
+    const countDown = () => {
+      leftTimeSecond--;
+      setButtonLeftTime(leftTimeSecond);
+      if (leftTimeSecond === 0) {
+        return;
+      }
+      setTimeout(countDown, 1000);
+    };
+    setTimeout(countDown, 1000);
+  };
+
+  const handleOk = (
+    captchaType: string,
+    captchaToken: string,
+    clientSecret: string
+  ) => {
+    setVisible(false);
+    setButtonLoading(true);
+    UserBackend.sendCode(
+      captchaType,
+      captchaToken,
+      clientSecret,
+      method,
+      countryCode,
+      ...onButtonClickArgs
+    ).then((res: any) => {
+      setButtonLoading(false);
+      if (res) {
+        handleCountDown(60);
+      }
+    });
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  React.useEffect(() => {
+    dialogRef.current = document.getElementById("captcha-modal");
+  }, []);
+
+  React.useEffect(() => {
+    if (dialogRef.current) {
+      if (visible) {
+        // @ts-ignore
+        dialogRef.current.showModal();
+      } else {
+        // @ts-ignore
+        dialogRef.current.close();
+      }
+    }
+  }, [visible]);
+
+  return (
+    <React.Fragment>
+      <div className="flex">
+        <input
+          className="input"
+          // addonBefore={textBefore}
+          disabled={disabled}
+          value={value}
+          // prefix={<SafetyOutlined />}
+          placeholder={"Enter your code"}
+          onChange={(e: any) => onChange(e.target.value)}
+          // onBlur={() => setVisible(true)}
+          autoComplete="one-time-code"
+        />
+        <button
+          className="btn"
+          disabled={disabled || buttonLeftTime > 0}
+          // loading={buttonLoading}
+          onClick={() => setVisible(true)}
+        >
+          {buttonLeftTime > 0
+            ? `${buttonLeftTime} s`
+            : buttonLoading
+              ? t("code.sending")
+              : t("code.sendCode")}
+        </button>
+      </div>
+      <CaptchaModal
+        owner={application.owner}
+        name={application.name}
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        isCurrentProvider={false}
+      />
+    </React.Fragment>
+  );
+};