@tuya-sat/sdf-main-sdk 0.0.1-beta.1

package/src/components/BLogin/component/TenanSpace/index.tsx

@@ -0,0 +1,28 @@
+import { Form, Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { TENANT_ID_REGEXP } from '@/constant';
+import Icon from '@/components/IconFont';
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => {
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name="tenantSpace"
+      label={t('login.form.tenantId.label')}
+      required={false}
+      rules={[
+        { required: true, message: t('login.form.tenantId.require') },
+        {
+          pattern: TENANT_ID_REGEXP,
+          message: t('login.form.tenantId.pattern'),
+        },
+      ]}
+    >
+      <Input
+        size="large"
+        prefix={<Icon type="icon-zuhuID" style={{ fontSize: '1em' }} />}
+        placeholder={t('login.form.tenantId.placeholder')}
+      />
+    </Form.Item>
+  );
+};

package/src/components/BLogin/component/Title/index.module.less

@@ -0,0 +1,6 @@
+.wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 56px;
+}

package/src/components/BLogin/component/Title/index.tsx

@@ -0,0 +1,12 @@
+import { Typography } from 'antd';
+import styles from './index.module.less';
+const { Title } = Typography;
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default ({ title }) => {
+  return (
+    <div className={styles.wrap}>
+      <Title level={3}>{title}</Title>
+    </div>
+  );
+};

package/src/components/BLogin/component/UserName/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Form, Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { UserOutlined } from '@ant-design/icons';
+import { EMAIL_REGEXP, US_TELE_REGEXP } from '@/constant';
+
+const UserName = ({ label = undefined }) => {
+  const { t } = useTranslation();
+  const [, setPhoneNum] = useState<string>();
+  const rules = [
+    () => ({
+      validator(_, value) {
+        if (!value) {
+          return Promise.reject(
+            new Error(t('login.form.username.validate.require'))
+          );
+        }
+        if (EMAIL_REGEXP.test(value)) {
+          return Promise.resolve();
+        } else if (US_TELE_REGEXP.test(value)) {
+          return Promise.resolve();
+        } else {
+          return Promise.reject(
+            new Error(t('login.form.username.validate.pattern'))
+          );
+        }
+        // 请输入正确的手机号码或邮箱账号;
+      },
+    }),
+  ];
+
+  return (
+    <Form.Item
+      name="username"
+      label={label || t('login.form.username.label')}
+      rules={rules}
+    >
+      <Input
+        size="large"
+        prefix={<UserOutlined className="site-form-item-icon" />}
+        placeholder={t('login.form.username.placeholder')}
+        onChange={(e) => setPhoneNum(e.target.value)}
+      />
+    </Form.Item>
+  );
+};
+
+export default UserName;

package/src/components/BLogin/component/VerifyCode/index.module.less

@@ -0,0 +1,11 @@
+.wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .form-item {
+    flex: 1;
+  }
+  .code {
+    margin: 6px 0 0 8px;
+  }
+}

package/src/components/BLogin/component/VerifyCode/index.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Statistic,
+  Form,
+  Input,
+  Row,
+  Col,
+  Button,
+  Spin,
+  FormInstance,
+} from 'antd';
+import { MailOutlined } from '@ant-design/icons';
+import { api, URLS } from '@/api';
+import styles from './index.module.less';
+import {
+  isOpenGt,
+  initGeetest,
+  geetestPromise,
+  showGeetest,
+} from '@/utils/common';
+import cx from 'classnames';
+
+const { Countdown } = Statistic;
+
+const VerifyCode = ({
+  form,
+  action = 'forgot',
+}: {
+  form: FormInstance;
+  action: 'forgot' | 'register';
+}) => {
+  const { t, i18n } = useTranslation();
+
+  const [deadline, setDeadline] = useState<number>(Date.now());
+  const [loading, setLoading] = useState<boolean>(false);
+  const [showCountdown, setShowCountdown] = useState(false);
+
+  useEffect(() => {
+    isOpenGt() && initGeetest();
+  }, []);
+  const sendCode = async () => {
+    if (isOpenGt()) {
+      await form.validateFields(['username']);
+
+      geetestPromise
+        .then((geetest) => {
+          showGeetest(geetest, null, processVerifyCode);
+        })
+        .catch(() => {
+          initGeetest();
+          geetestPromise.then((geetest) => {
+            showGeetest(geetest, null, processVerifyCode);
+          });
+        });
+    } else {
+      processVerifyCode(null);
+    }
+  };
+
+  const processVerifyCode = (secureKey) => {
+    let params = {};
+    try {
+      if (action === 'register') {
+        const values = form.getFieldsValue();
+        if (values.username.includes('@')) {
+          params = {
+            mail: values.username,
+            tenantSpace: values.tenantSpace,
+          };
+        } else {
+          params = {
+            phone: values.username,
+            countryCode: localStorage.getItem('regionCode') || '86',
+            tenantSpace: values.tenantSpace,
+          };
+        }
+      } else if (action === 'forgot') {
+        const values = form.getFieldsValue();
+        if (values.username.includes('@')) {
+          params = { mail: values.username, language: i18n.language };
+        } else {
+          params = {
+            phone: values.username,
+            country_code: localStorage.getItem('regionCode') || '86',
+            language: i18n.language,
+          };
+        }
+      }
+      params = { ...params, secureKey };
+      api
+        .post(action === 'forgot' ? URLS.CODE : URLS.TENANDCODE, params)
+        .then((res) => {
+          setLoading(true);
+          setShowCountdown(true);
+          setDeadline(Date.now() + 60 * 1000);
+          setLoading(false);
+        })
+        .catch(() => {
+          setLoading(false);
+        });
+    } catch (error) {
+      console.log('register or forgot failed', error);
+    }
+  };
+
+  return (
+    <div className={styles.wrap}>
+      <Form.Item
+        className={styles['form-item']}
+        name="validateCode"
+        label={t('login.form.code.getCode')}
+        required={false}
+        rules={[
+          { required: true, message: t('login.form.code.require') },
+          {
+            len: 6,
+            message: t('login.form.code.len'),
+          },
+        ]}
+      >
+        <Input
+          size="large"
+          type="text"
+          autoComplete="new-password"
+          prefix={<MailOutlined />}
+          placeholder={t('login.form.code.placeholder')}
+        />
+      </Form.Item>
+      <div className={cx(styles.code, 'main-verify-code')}>
+        {showCountdown ? (
+          <Button disabled size="large">
+            <div>
+              <Row>
+                <Col>{t('login.form.code.countdown')}</Col>
+                <Col>
+                  <Countdown
+                    format="ss"
+                    value={deadline}
+                    suffix="s"
+                    onFinish={() => {
+                      setShowCountdown(false);
+                    }}
+                    valueStyle={{
+                      fontSize: 14,
+                      width: 40,
+                    }}
+                  />
+                </Col>
+              </Row>
+            </div>
+          </Button>
+        ) : (
+          <Spin spinning={loading}>
+            <Button onClick={sendCode} size="large">
+              {t('login.form.code.getCode')}
+            </Button>
+          </Spin>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VerifyCode;

package/src/components/BLogin/index.module.less

@@ -0,0 +1,31 @@
+.login-form {
+  position: relative;
+  :global(.main-form-item-control-input-content) {
+    text-align: right;
+  }
+  .forgot {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    height: 22px;
+    line-height: 22px;
+    padding: 0;
+  }
+  padding-bottom: 30px;
+}
+.third-login {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  .icon {
+    width: 28px;
+    height: 28px;
+    transition: all 0.3s;
+    &:hover {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}

package/src/components/BLogin/index.tsx

@@ -0,0 +1,210 @@
+import { Form, message, Row } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { api, URLS } from '@/api';
+import { sha256 } from 'js-sha256';
+import { useHistory, useLocation } from 'react-router-dom';
+import UserName from './component/UserName';
+import Password from './component/Password';
+import SubmitBtn from './component/SubmitBtn';
+import styles from './index.module.less';
+import Clause from './component/Clause';
+import Title from './component/Title';
+import TenantSpace from './component/TenanSpace';
+import ForgetBtn from './component/ForgotBtn';
+import { useEffect, useMemo, useState } from 'react';
+import Logo from '@/components/BLayout/components/Logo';
+import { gMainConfig } from '@/index';
+
+import {
+  isOpenGt,
+  initGeetest,
+  afterLoginHook,
+  showGeetest,
+  geetestPromise,
+} from '@/utils/common';
+
+const LoginForm = () => {
+  const [form] = Form.useForm();
+  const {
+    title,
+    legal_notice,
+    privacy_policy,
+    service_terms,
+    tenant_type,
+    tenant_register_support,
+  } = window?._SDF?.saas;
+  const history = useHistory();
+  const { t } = useTranslation();
+  const { search } = useLocation();
+  const [agreed, setAgreed] = useState<boolean>();
+  const [logining, setLogining] = useState(false);
+
+  const hasTenantSpace = useMemo(() => {
+    return (
+      tenant_type === 'MULTI_TENANT' &&
+      window._SDF_CONFIG?.features.is_edgecloud
+    );
+  }, [tenant_type]);
+
+  const showClause = useMemo(() => {
+    const hasClause = !!legal_notice || !!privacy_policy || !!service_terms;
+    return window._SDF_CONFIG?.saas?.LOGIN_PROTO.ENABLE !== false && hasClause;
+  }, [legal_notice, privacy_policy, service_terms]);
+
+  useEffect(() => {
+    isOpenGt() && initGeetest();
+  });
+
+  const toLogin = async (form) => {
+    setLogining(true);
+    // 是否添加极验
+    if (isOpenGt()) {
+      geetestPromise
+        .then((geetest) => {
+          geetest.onClose(() => {
+            setLogining(false);
+          });
+          showGeetest(geetest, form, processlogin);
+        })
+        .catch(() => {
+          initGeetest();
+          geetestPromise.then((geetest) => {
+            showGeetest(geetest, form, processlogin);
+          });
+        });
+    } else {
+      processlogin(form, null);
+    }
+  };
+
+  const processlogin = async (form, secureKey) => {
+    if (gMainConfig?.hooks?.loginApiHook) {
+      await gMainConfig.hooks.loginApiHook(form, () => {
+        afterLoginHook({
+          search,
+          history,
+        });
+      });
+    } else {
+      // 区分手机号和邮箱
+      if (form.username.includes('@')) {
+        if (gMainConfig?.hooks?.beforeLoginApiHook) {
+          await gMainConfig?.hooks?.beforeLoginApiHook(form);
+        }
+        let params;
+        if (secureKey) {
+          params = {
+            username: form.username?.trim(),
+            password: sha256(form.password?.trim()),
+            tenantSpace: hasTenantSpace ? form.tenantSpace : undefined,
+            secureKey,
+          };
+        } else {
+          params = {
+            username: form.username?.trim(),
+            password: sha256(form.password?.trim()),
+            tenantSpace: hasTenantSpace ? form.tenantSpace : undefined,
+          };
+        }
+        api
+          .post<{
+            userToken: string;
+            accountType: 1 | 3;
+            roleName: string;
+          }>(URLS.LOGIN, params)
+          .then(async ({}) => {
+            if (gMainConfig?.hooks?.afterLoginApiHook) {
+              await gMainConfig?.hooks?.afterLoginApiHook(() => {
+                afterLoginHook({
+                  search,
+                  history,
+                });
+              });
+            } else {
+              afterLoginHook({
+                search,
+                history,
+              });
+            }
+          })
+          .catch(() => setLogining(false))
+          .finally(() => setLogining(false));
+      } else {
+        let params;
+        if (secureKey) {
+          params = {
+            country_code: localStorage.getItem('regionCode') || '86',
+            username: form.username?.trim(),
+            password: sha256(form.password?.trim()),
+            tenantSpace: hasTenantSpace ? form.tenantSpace : undefined,
+            secureKey,
+          };
+        } else {
+          params = {
+            country_code: localStorage.getItem('regionCode') || '86',
+            username: form.username?.trim(),
+            password: sha256(form.password?.trim()),
+            tenantSpace: hasTenantSpace ? form.tenantSpace : undefined,
+          };
+        }
+        api
+          .post<{
+            userToken: string;
+            accountType: 1 | 3;
+            roleName: string;
+          }>(URLS.LOGIN, params)
+          .then(
+            ({
+              userToken,
+              user_nick_name,
+              user_name,
+              roleName,
+              mobile,
+              email,
+            }) =>
+              afterLoginHook({
+                search,
+                history,
+              })
+          )
+          .catch(() => setLogining(false))
+          .finally(() => setLogining(false));
+      }
+    }
+  };
+
+  return (
+    <>
+      <Form
+        form={form}
+        className={styles['login-form']}
+        onFinish={toLogin}
+        validateTrigger={['onBlur']}
+        layout="vertical"
+      >
+        {window._SDF_CONFIG?.saas?.LOGO_INSTEAD_OF_TITLE ? (
+          <Row style={{ marginBottom: '20px' }}>
+            <Logo />
+          </Row>
+        ) : (
+          <Title title={title} />
+        )}
+        {hasTenantSpace && <TenantSpace />}
+        <UserName />
+        <Password />
+        {showClause && <Clause toggleAgreed={setAgreed} />}
+        <SubmitBtn
+          loading={logining}
+          top={13}
+          disabled={agreed}
+          btTx={t('login.signIn')}
+        />
+        {window._SDF_CONFIG?.saas?.FORGET_PWD_ENABLE !== false && (
+          <ForgetBtn showRegister={!!tenant_register_support} />
+        )}
+      </Form>
+    </>
+  );
+};
+
+export default LoginForm;

package/src/components/BRegister/components/TenantName/index.tsx

@@ -0,0 +1,26 @@
+import { Form, Input } from 'antd';
+import Icon from '@/components/IconFont';
+import { useTranslation } from 'react-i18next';
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => {
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name="tenantName"
+      label={t('register.form.enterprise.label')}
+      required={false}
+      rules={[
+        {
+          required: true,
+          message: t('register.form.enterprise.validate.require'),
+        },
+      ]}
+    >
+      <Input
+        size="large"
+        prefix={<Icon type="icon-zuzhimingcheng" style={{ fontSize: '1em' }} />}
+        placeholder={t('register.form.enterprise.placeholder')}
+      />
+    </Form.Item>
+  );
+};

package/src/components/BRegister/index.module.less

@@ -0,0 +1,5 @@
+.icon {
+  font-size: 32px !important;
+  margin-right: 16px;
+  cursor: pointer;
+}

package/src/components/BRegister/index.tsx

@@ -0,0 +1,71 @@
+import { Form, message, Row, Typography } from 'antd';
+import TenantSpace from '@/components/BLogin/component/TenanSpace';
+import UserName from '@/components/BLogin/component/UserName';
+import VerifyCode from '@/components/BLogin/component/VerifyCode';
+import Password from '@/components/BLogin/component/Password';
+import SubmitBtn from '@/components/BLogin/component/SubmitBtn';
+import TenantName from './components/TenantName';
+import IconFont from '@/components/IconFont';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+import { api, URLS } from '@/api';
+import { sha256 } from 'js-sha256';
+import styles from './index.module.less';
+import cx from 'classnames';
+
+const { Title } = Typography;
+const LTitle = ({ goback }) => {
+  const { t } = useTranslation();
+  return (
+    <Row style={{ marginBottom: '56px' }}>
+      <span onClick={goback}>
+        <IconFont
+          type="icon-jiantouda-zuo"
+          className={cx(styles.icon, 'main-primary-hover')}
+        />
+      </span>
+      <Title level={3}>{t('login.back2login')}</Title>
+    </Row>
+  );
+};
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [form] = Form.useForm();
+  const toRegister = (form) => {
+    api
+      .post(URLS.REGISTER, {
+        tenantName: form.tenantName,
+        tenantSpace: form.tenantSpace,
+        username: form.username,
+        code: form.validateCode,
+        password: sha256(form.password),
+      })
+      .then((res) => {
+        if (res) {
+          afterRegister();
+          message.success(t('register.registerSuccess'));
+        }
+      });
+  };
+  const afterRegister = () => {
+    history.push('/login');
+  };
+  return (
+    <Form
+      form={form}
+      onFinish={toRegister}
+      layout="vertical"
+      validateTrigger={['onBlur']}
+    >
+      <LTitle goback={afterRegister} />
+      <TenantName />
+      <TenantSpace />
+      <UserName label={t('register.form.username.label')} />
+      <VerifyCode form={form} action="register" />
+      <Password isHide={true} name="password" />
+      <SubmitBtn top={16} btTx={t('register.register')} />
+    </Form>
+  );
+};

package/src/components/Back/index.tsx

@@ -0,0 +1,25 @@
+import { useHistory } from 'react-router-dom';
+import IconFont from '@/components/IconFont';
+
+const Back = () => {
+  const history = useHistory();
+  function browserHistory() {
+    const historyState = window.history.state;
+    if (historyState === null) {
+      // history.push('/');
+      window.location.pathname = '/';
+    } else {
+      history.goBack();
+    }
+  }
+  return (
+    <a onClick={browserHistory} style={{ marginTop: '3px' }}>
+      <IconFont
+        type="icon-jiantouda-zuo"
+        className="main-text-color"
+        style={{ fontSize: '20px' }}
+      />
+    </a>
+  );
+};
+export default Back;