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

package/src/components/PSetting/index.tsx

@@ -0,0 +1,420 @@
+import { useState, useEffect } from 'react';
+import { Modal, Form, Input, message, Typography, Divider, Select } from 'antd';
+import { useTranslation } from 'react-i18next';
+import styles from './index.module.less';
+import { api, URLS } from '@/api';
+import { sha256 } from 'js-sha256';
+import { useHistory } from 'react-router-dom';
+import { getCurrentUser, safeLogout } from '@/utils/common';
+import { checkPassWord } from '@/utils/checkPass';
+import Back from '../Back';
+import cx from 'classnames';
+import { EMAIL_REGEXP, US_TELE_REGEXP, COUNTRY_LIST } from '@/constant';
+import { getI18n } from 'react-i18next';
+import { eventEmiter, eventNames } from '@/utils';
+
+const { Link, Text } = Typography;
+
+const SettingPage = () => {
+  const [visible, setVisible] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalType, setModalType] = useState('');
+  const [modalTitle, setModalTitle] = useState('');
+  const { t, i18n } = useTranslation();
+  const [nickname, setNickName] = useState(
+    window._SDF?.user?.user_nick_name || ''
+  );
+  const [username, setUsername] = useState(window._SDF?.user?.user_name || '');
+  const [phone, setPhone] = useState(window._SDF?.user?.mobile || '');
+  const [email, setEmail] = useState(window._SDF?.user?.email || '');
+  const [regionCode, setRegionCode] = useState(
+    window._SDF?.user?.country_code || ''
+  );
+  const history = useHistory();
+  const currentUser = getCurrentUser();
+
+  const ModifyPwdModal = () => {
+    const [form] = Form.useForm();
+    const handleSubmit = () => {
+      form
+        .validateFields()
+        .then(async (values) => {
+          const res = await api.put(URLS.RESET_PWD, {
+            user_name: currentUser?.user_name,
+            current_password: sha256(values.oldPassword),
+            new_password: sha256(values.newPassword),
+          });
+
+          if (res) {
+            form.resetFields();
+            setVisible(false);
+            message.success(t('setting.modifySuccess'));
+            safeLogout(history);
+          }
+        })
+        .catch(() => {});
+    };
+    return (
+      <Modal
+        title={t('setting.modify')}
+        visible={visible}
+        closable={true}
+        onOk={handleSubmit}
+        onCancel={() => {
+          setVisible(false);
+          form.resetFields();
+        }}
+        destroyOnClose
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          labelCol={{ span: i18n.language === 'zh' ? 5 : 9 }}
+        >
+          <Form.Item
+            label={t('setting.form.oldPassword.label')}
+            required
+            name="oldPassword"
+            rules={[
+              {
+                required: true,
+                message: t('setting.form.oldPassword.validate.require'),
+              },
+            ]}
+          >
+            <Input.Password
+              placeholder={t('setting.form.oldPassword.validate.require')}
+            />
+          </Form.Item>
+          <Form.Item
+            label={t('setting.form.newPassword.label')}
+            required
+            name="newPassword"
+            rules={[
+              {
+                required: true,
+                message: t('setting.form.newPassword.validate.require'),
+              },
+              () => ({
+                validator(_, value: string) {
+                  const result = checkPassWord(value);
+                  if (result) return Promise.resolve();
+                  const tip = t('setting.form.newPassword.validate.pattern');
+                  return Promise.reject(new Error(tip));
+                },
+              }),
+            ]}
+          >
+            <Input.Password
+              placeholder={t('setting.form.newPassword.validate.require')}
+            />
+          </Form.Item>
+          <Form.Item
+            label={t('setting.form.confirm.label')}
+            required
+            dependencies={['newPassword']}
+            name="confirmPassword"
+            rules={[
+              {
+                required: true,
+                message: t('setting.form.confirm.validate.require'),
+              },
+              ({ getFieldValue }) => ({
+                validator(_, value) {
+                  if (value && getFieldValue('newPassword') === value) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(
+                    new Error(t('setting.form.confirm.validate.unanimous'))
+                  );
+                },
+              }),
+            ]}
+          >
+            <Input.Password
+              placeholder={t('setting.form.confirm.validate.require')}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    );
+  };
+
+  const CommonModal = ({ title, type }) => {
+    const [selectValue, setSelectValue] = useState<string>('86');
+    const [form] = Form.useForm();
+
+    const rules = [
+      () => ({
+        validator(_, value) {
+          if (!value) {
+            return Promise.reject(
+              new Error(
+                type.includes('Phone')
+                  ? t('setting.phoneLable')
+                  : t('setting.emailLable')
+              )
+            );
+          }
+          if (type.includes('Phone')) {
+            if (US_TELE_REGEXP.test(value)) {
+              return Promise.resolve();
+            } else {
+              return Promise.reject(
+                new Error(t('login.form.username.validate.phonePattern'))
+              );
+            }
+          } else {
+            if (EMAIL_REGEXP.test(value)) {
+              return Promise.resolve();
+            } else {
+              return Promise.reject(
+                new Error(t('login.form.username.validate.emailPattern'))
+              );
+            }
+          }
+        },
+      }),
+    ];
+    const handleOk = () => {
+      form.validateFields().then(async (values) => {
+        const params = type.includes('Phone')
+          ? {
+              mobile: values.val.phone,
+              email: email || '',
+              country_code: values.val.region || '86',
+            }
+          : {
+              mobile: phone || '',
+              email: values.val,
+            };
+
+        api.put(URLS.ModifyPhoneAndEmail, { ...params }).then((res) => {
+          api.get(URLS.USER_INFO).then((res) => {
+            setUsername(res.user_name);
+            setPhone(res.mobile);
+            setEmail(res.email);
+            eventEmiter.emit(eventNames.USER_NAME, res.user_name);
+          });
+          setIsModalVisible(false);
+        });
+      });
+    };
+    const handleCancel = () => {
+      setIsModalVisible(false);
+    };
+    return (
+      <Modal
+        title={title}
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Form form={form}>
+          {type.includes('Phone') ? (
+            <Form.Item label={t('setting.phone')}>
+              <Input.Group compact>
+                <Form.Item name={['val', 'region']} noStyle>
+                  <Select
+                    dropdownMatchSelectWidth={false}
+                    defaultValue={'86'}
+                    labelInValue={false}
+                    value={selectValue}
+                    style={{ width: '22%' }}
+                    optionLabelProp="lable"
+                    onChange={(value: string) => {
+                      setSelectValue(`+${value}`);
+                    }}
+                  >
+                    {COUNTRY_LIST.map((country) => (
+                      <Select.Option
+                        key={country.countryCode}
+                        value={country.countryCode}
+                        lable={`+${country.countryCode}`}
+                      >
+                        {getI18n().language === 'zh'
+                          ? country.cnName
+                          : country.enName}
+                        (+
+                        {country.countryCode})
+                      </Select.Option>
+                    ))}
+                  </Select>
+                </Form.Item>
+                <Form.Item name={['val', 'phone']} noStyle rules={rules}>
+                  <Input style={{ width: '78%' }} />
+                </Form.Item>
+              </Input.Group>
+            </Form.Item>
+          ) : (
+            <Form.Item
+              name="val"
+              label={t('setting.email')}
+              rules={rules}
+              labelAlign="right"
+            >
+              <Input />
+            </Form.Item>
+          )}
+        </Form>
+      </Modal>
+    );
+  };
+  const Header = () => {
+    return (
+      <div className={styles.header}>
+        <Back />
+        <h3>{t('setting.title')}</h3>
+      </div>
+    );
+  };
+  const NickName = ({ nickname }) => {
+    return (
+      <div>
+        <div className={styles['setting-item']}>
+          <div style={{ width: '360px', marginLeft: '10px' }}>
+            {t('setting.name')}
+          </div>
+          <div style={{ width: '360px' }}> {nickname || '-'}</div>
+        </div>
+        <Divider style={{ marginTop: '0', marginBottom: '0' }} />
+      </div>
+    );
+  };
+
+  const Account = ({ username }) => {
+    return (
+      <div>
+        <div className={styles['setting-item']}>
+          <div style={{ width: '360px', marginLeft: '10px' }}>
+            {t('setting.accountLable')}
+          </div>
+          <div style={{ width: '360px' }}> {username}</div>
+        </div>
+        <Divider style={{ marginTop: '0', marginBottom: '0' }} />
+      </div>
+    );
+  };
+
+  const Phone = ({ phone }) => {
+    return (
+      <div>
+        <div className={styles['setting-item']}>
+          <div style={{ width: '360px', marginLeft: '10px' }}>
+            {t('setting.phone')}
+          </div>
+          {phone ? (
+            <div style={{ width: '360px' }}> {phone}</div>
+          ) : (
+            <Text type="warning" style={{ width: '360px' }}>
+              {t('setting.unBind')}
+            </Text>
+          )}
+
+          <Link
+            style={{ marginLeft: '10px' }}
+            onClick={() => {
+              if (phone) {
+                setModalTitle(t('setting.modifyPhone'));
+                setModalType('modifyPhone');
+              } else {
+                setModalTitle(t('setting.bindPhone'));
+                setModalType('bindPhone');
+              }
+              setIsModalVisible(true);
+            }}
+          >
+            {phone ? t('setting.modify') : t('setting.bind')}
+          </Link>
+        </div>
+        <Divider style={{ marginTop: '0', marginBottom: '0' }} />
+      </div>
+    );
+  };
+
+  const Email = ({ email }) => {
+    return (
+      <div>
+        <div className={styles['setting-item']}>
+          <div style={{ width: '360px', marginLeft: '10px' }}>
+            {t('setting.email')}
+          </div>
+          {email ? (
+            <div style={{ width: '360px' }}> {email}</div>
+          ) : (
+            <Text type="warning" style={{ width: '360px' }}>
+              {t('setting.unBind')}
+            </Text>
+          )}
+          <Link
+            style={{ marginLeft: '10px' }}
+            onClick={() => {
+              if (email) {
+                setModalTitle(t('setting.modifyEmail'));
+                setModalType('modifyEmail');
+              } else {
+                setModalTitle(t('setting.bindEmail'));
+                setModalType('bindEmail');
+              }
+              setIsModalVisible(true);
+            }}
+          >
+            {email ? t('setting.modify') : t('setting.bind')}
+          </Link>
+        </div>
+        <Divider style={{ marginTop: '0', marginBottom: '0' }} />
+      </div>
+    );
+  };
+  const ModifyPwd = () => {
+    return (
+      <div>
+        <div className={styles['setting-item']}>
+          <div style={{ width: '360px', marginLeft: '10px' }}>
+            {t('setting.password')}
+          </div>
+          <div style={{ width: '360px' }}> ******</div>
+          <Link
+            style={{ marginLeft: '10px' }}
+            onClick={() => {
+              setVisible(true);
+            }}
+          >
+            {t('setting.modify')}
+          </Link>
+        </div>
+        <Divider style={{ marginTop: '0', marginBottom: '0' }} />
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    api.get(URLS.USER_INFO).then((res) => {
+      setNickName(res.user_nick_name);
+      setUsername(res.user_name);
+      setPhone(res.mobile);
+      setEmail(res.email);
+      setRegionCode(res.country_code);
+    });
+  }, []);
+
+  return (
+    <div className={styles['page-container']}>
+      <div className={cx(styles['page-content'], 'main-app-setting')}>
+        <Header />
+        <NickName nickname={nickname} />
+        <Account username={username} />
+        {window._SDF_CONFIG?.features.is_edgecloud !== true && (
+          <>
+            <Phone phone={phone} />
+            <Email email={email} />
+          </>
+        )}
+        <ModifyPwd />
+      </div>
+      <ModifyPwdModal />
+      <CommonModal title={modalTitle} type={modalType} />
+    </div>
+  );
+};
+export default SettingPage;

package/src/constant/chargeStatus.ts

@@ -0,0 +1,6 @@
+export const CHARGE_STATUS = {
+  PERMANENT: 'PERMANENT', // 长期有效
+  TRIAL: 'TRIAL', // 试用中
+  STABLE: 'STABLE', // 已开通
+  EXPIRED: 'EXPIRED', // 已过期
+};

package/src/constant/imgs.ts

@@ -0,0 +1,6 @@
+const TuyaLogo =
+  'https://images.tuyacn.com/rms-static/3bb090e0-d7e2-11eb-815d-e39234ce96ff-1624865222894.png?tyName=tuyalogo.png';
+const ExpirationLogo =
+  'https://images.tuyacn.com/rms-static/f522c5e0-c056-11ec-838b-296cc196f8cc-1650424025406.png?tyName=%E7%BC%BA%E7%9C%81%E9%A1%B5%E9%85%8D%E5%9B%BE%402x.png';
+
+export { TuyaLogo, ExpirationLogo };