@authing/react-ui-components 3.0.2-alpha.2 → 3.0.2-beta.12

package/components/MFA/styles.less

@@ -1,93 +0,0 @@
-.authing-g2-mfa-title {
-  color: #282d3c;
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  margin-bottom: 8px;
-  margin-top: 40px;
-}
-
-.authing-g2-mfa-tips {
-  font-size: 14px;
-  color: #545968;
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.g2-mfa-content {
-  margin: 0 38px;
-
-  .g2-mfa-submit-button {
-    margin-top: 32px !important;
-  }
-
-  .bind-totp {
-    margin-top: 80px !important;
-  }
-
-  .authing-ant-form-item-control-input-content {
-    display: flex;
-    justify-content: center;
-  }
-
-  .g2-mfa-totp-verify-input {
-    text-align: center;
-    .authing-code-input-item {
-      &:not(:first-child) {
-        margin-left: 14px;
-      }
-    }
-  }
-
-  .authing-ant-form-horizontal {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-
-  .g2-mfa-face-image {
-    margin: 0px auto;
-    display: block;
-    margin-bottom: 24px;
-  }
-  .g2-mfa-face-identifying {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .video-round {
-      width: 210px;
-      height: 210px;
-      border-radius: 50%;
-      vertical-align: middle;
-    }
-    .mesh {
-      z-index: 100;
-      cursor: pointer;
-      user-select: none;
-      color: white;
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      background: rgba(0, 0, 0, 0.4);
-    }
-    .ring {
-      width: 240px;
-      height: 240px;
-      position: absolute;
-      transform: rotate(270deg);
-    }
-  }
-}
-.svg-circle-bg {
-  stroke-width: 4;
-  // stroke: rgba(255, 161, 39, 1);
-}
-.svg-circle-running {
-  stroke-width: 4;
-  transition: all 0.2s linear;
-  stroke: #396aff;
-  stroke-linecap: round;
-}

package/components/NeedHelpView/core/describeQuestions.tsx

@@ -1,223 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input, Modal, Select, Upload } from 'antd'
-import SubmitButton from '../../SubmitButton'
-import { UserOutlined, PlusOutlined } from '@ant-design/icons'
-import { UploadFile } from 'antd/lib/upload/interface'
-import { useGuardHttp } from '../../_utils/guradHttp'
-import { fieldRequiredRule } from '../../_utils'
-
-interface describeQuestionsProps {
-  appId: string
-  host: string
-  onSuccess: any
-}
-
-export const DescribeQuestions = (props: describeQuestionsProps) => {
-  const { t } = useTranslation()
-
-  // 不清楚为什么放出去之后，i18n 的结果全是 undefeated
-  const typeProblemMap: any = {
-    0: [
-      t('common.problem.noVerifyTip.tip'),
-      t('common.problem.noVerifyTip.type1'),
-      t('common.problem.noVerifyTip.type2'),
-      t('common.problem.noVerifyTip.type3'),
-    ],
-    1: [
-      t('common.problem.noLoginTip.tip'),
-      t('common.problem.noLoginTip.type1'),
-      t('common.problem.noLoginTip.type2'),
-    ],
-    2: [
-      t('common.problem.noRegisterTip.tip'),
-      t('common.problem.noRegisterTip.type1'),
-      t('common.problem.noRegisterTip.type2'),
-      t('common.problem.noRegisterTip.type3'),
-    ],
-    3: [
-      t('common.problem.noAccountTip.tip'),
-      t('common.problem.noAccountTip.type1'),
-      t('common.problem.noAccountTip.type2'),
-    ],
-    4: [
-      t('common.problem.noResetPassTip.tip'),
-      t('common.problem.noResetPassTip.type1'),
-      t('common.problem.noResetPassTip.type2'),
-    ],
-    5: [t('common.problem.otherTip.tip'), t('common.problem.otherTip.type1')],
-    6: [t('common.problem.otherTip.tip'), t('common.problem.otherTip.type1')],
-  }
-
-  const typeOperations = [
-    {
-      label: t('common.problem.noVerify'),
-      value: 0,
-    },
-    {
-      label: t('common.problem.noLogin'),
-      value: 1,
-    },
-    {
-      label: t('common.problem.noRegister'),
-      value: 2,
-    },
-    {
-      label: t('common.problem.noAccount'),
-      value: 3,
-    },
-    {
-      label: t('common.problem.noResetPass'),
-      value: 4,
-    },
-    {
-      label: t('common.problem.locked'),
-      value: 5,
-    },
-    {
-      label: t('common.problem.other'),
-      value: 6,
-    },
-  ]
-
-  const [form] = Form.useForm()
-  const { post } = useGuardHttp()
-  const [uploadUrl, setUploadUrl] = useState([])
-  const [previewVisible, setPreviewVisible] = useState(false)
-  const [previewImage, setPreviewImage] = useState()
-  const [fileList, setFileList] = useState<UploadFile<any>[]>([])
-  const [typeProblem, setTypeProblem] = useState(0)
-  const submitButtonRef = useRef<any>(null)
-  const textMap = typeProblemMap[typeProblem]
-
-  const onFinish = (values: any) => {
-    submitButtonRef?.current?.onSpin(true)
-    const params = {
-      type: typeProblem,
-      description: values.description,
-      phone: values.identify,
-      images: uploadUrl,
-      appId: props.appId,
-    }
-    let context = post('/api/v2/feedback', params)
-    context.then((res) => {
-      if (res.code === 200) {
-        submitButtonRef?.current?.onSpin(false)
-        props.onSuccess()
-      }
-    })
-  }
-
-  const handlePreview = async (file: any) => {
-    // setPreviewImage(file.url);
-    // file 没有 url 属性，需要改成下面的用法
-    let url = file.response.data.url
-    setPreviewImage(url)
-    setPreviewVisible(true)
-  }
-
-  return (
-    <div className="authing-g2-describe-questions">
-      <Form
-        name="resetPassword"
-        layout="vertical"
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => {
-          submitButtonRef?.current?.onError()
-        }}
-        autoComplete="off"
-      >
-        <Form.Item
-          className="authing-g2-input-form"
-          name="identify"
-          label={t('common.problem.form.phone')}
-          rules={fieldRequiredRule(t('common.problem.form.phone'))}
-        >
-          <Input
-            className="authing-g2-input"
-            autoComplete="tel"
-            size="large"
-            placeholder={t('login.inputPhoneOrEmail')}
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          label={t('common.problem.form.question')}
-          name="questionPicker"
-          initialValue={typeProblem}
-        >
-          <Select
-            className="authing-g2-select"
-            onChange={(value: number) => {
-              setTypeProblem(value)
-            }}
-          >
-            {typeOperations?.map(({ value, label }) => (
-              <Select.Option key={value} value={value}>
-                {label}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <div className="authing-g2-input-form">
-          {textMap?.map((item: any, index: any) => (
-            <div key={index}>{item}</div>
-          ))}
-        </div>
-
-        <Form.Item
-          className="authing-g2-input-form"
-          name="description"
-          label={t('common.problem.form.questionDescript')}
-        >
-          <Input.TextArea className="authing-g2-input" />
-        </Form.Item>
-
-        <div className="authing-g2-input-form">
-          <div className="label-title">
-            {t('common.problem.form.questionClip')}
-          </div>
-          <div className="g2-questions">
-            <Upload
-              action={`${props.host}/api/v2/upload?folder=photos`}
-              listType="picture-card"
-              accept="image/png, image/jpeg, image/jpg"
-              className="authing-g2-questions-upload-self"
-              fileList={fileList}
-              onPreview={handlePreview}
-              onChange={(e) => {
-                setFileList(e.fileList)
-                const imgUrl: any = e.fileList.map((item: any) => {
-                  const response = item.response
-                  return response?.data.url
-                })
-                setUploadUrl(imgUrl)
-              }}
-            >
-              {fileList.length >= 5 ? null : <PlusOutlined />}
-            </Upload>
-          </div>
-        </div>
-
-        <Form.Item className="authing-g2-input-form submit-form">
-          <SubmitButton
-            className="forget-password"
-            text={t('common.problem.form.submit')}
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-
-      <Modal
-        visible={previewVisible}
-        title={null}
-        footer={null}
-        onCancel={() => setPreviewVisible(false)}
-      >
-        <img alt="example" style={{ width: '100%' }} src={previewImage} />
-      </Modal>
-    </div>
-  )
-}

package/components/NeedHelpView/index.tsx

@@ -1,99 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ImagePro } from '../ImagePro'
-import { DescribeQuestions } from './core/describeQuestions'
-import { GuardModuleType } from '../Guard/module'
-import SubmitButton from '../SubmitButton'
-
-export const GuardNeedHelpView = (props: any) => {
-  const [mode, setMode] = useState<'typing' | 'success'>('typing')
-  const { t } = useTranslation()
-  const cdnBase = props.config.__publicConfig__?.cdnBase
-  const timerRef = useRef<any>(0)
-  const [countDown, setCountDown] = useState(5)
-
-  useEffect(() => {
-    return () => clearInterval(timerRef.current)
-  }, [])
-
-  useEffect(() => {
-    if (countDown <= 0) {
-      clearInterval(timerRef.current)
-      props.__changeModule(GuardModuleType.LOGIN)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [countDown])
-
-  const onSuccess = () => {
-    setMode('success')
-    setCountDown(5)
-    timerRef.current = setInterval(() => {
-      setCountDown((prev) => {
-        return prev - 1
-      })
-    }, 1000)
-  }
-
-  if (mode === 'typing') {
-    return (
-      <div className="g2-view-container">
-        <div className="g2-view-header">
-          <ImagePro
-            src={props.config?.logo}
-            size={48}
-            borderRadius={4}
-            alt=""
-            className="icon"
-          />
-
-          <div className="title">{t('common.problem.title')}</div>
-        </div>
-        <div className="g2-view-tabs">
-          <DescribeQuestions
-            appId={props.config.__publicConfig__.id}
-            host={props.config.__appHost__}
-            onSuccess={onSuccess}
-          />
-        </div>
-        <div className="g2-tips-line ">
-          <div className="back-to-login">
-            <span className="gray">{t('common.noQuestions')}</span>
-            <span
-              className="link-like"
-              onClick={() => props.__changeModule(GuardModuleType.LOGIN)}
-            >
-              {t('common.goToLogin')}
-            </span>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // mode === 'success' 的情况
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-tabs g2-questions-send-success-page">
-        <ImagePro
-          className="plate"
-          src={`${cdnBase}/questions-send-ok.png`}
-          alt=""
-          width={191}
-          height={146}
-        />
-        <div className="title">{t('common.problem.successTip')}</div>
-        <div className="message">{t('common.problem.successTipMsg')}</div>
-        <SubmitButton
-          onClick={() => {
-            props.__changeModule(GuardModuleType.LOGIN)
-          }}
-          text={t('common.backLoginPage')}
-        />
-        <div className="timer-tip">
-          {countDown} {t('common.pToLogin')}
-        </div>
-      </div>
-    </div>
-  )
-}

package/components/RecoveryCode/core/useCode.tsx

@@ -1,71 +0,0 @@
-import { LockOutlined } from '@ant-design/icons'
-import { Form, Input } from 'antd'
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import SubmitButton from '../../SubmitButton'
-import { useGuardHttp } from '../../_utils/guradHttp'
-
-export interface UseCodeProps {
-  mfaToken: string
-}
-
-export const UseCode: React.FC<UseCodeProps> = ({ mfaToken }) => {
-  const { t } = useTranslation()
-
-  const [form] = Form.useForm()
-
-  const { post } = useGuardHttp()
-
-  const onFinish = async () => {
-    submitButtonRef.current?.onSpin(true)
-
-    await post(
-      '/api/v2/mfa/totp/recovery',
-      {
-        recoveryCode: form.getFieldValue('recoveryCode'),
-      },
-      {
-        headers: {
-          authorization: mfaToken,
-        },
-      }
-    )
-  }
-
-  let submitButtonRef = useRef<any>(null)
-
-  return (
-    <>
-      <p className="authing-g2-mfa-title">{t('common.useRecoverCode')}</p>
-      <p className="authing-g2-mfa-tips">{t('login.mfaAfterReset')}</p>
-      <Form
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-      >
-        <Form.Item
-          className="authing-g2-input-form"
-          name="recoveryCode"
-          rules={[
-            {
-              required: true,
-              message: t('login.inputRecoverCode'),
-            },
-          ]}
-        >
-          <Input
-            className="authing-g2-input"
-            autoComplete="email"
-            size="large"
-            placeholder={t('login.inputRecoverCode')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-
-        <Form.Item className="authing-g2-input-form submit-form">
-          <SubmitButton text={t('common.sure')} ref={submitButtonRef} />
-        </Form.Item>
-      </Form>
-    </>
-  )
-}

package/components/RecoveryCode/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { IconFont } from '../IconFont'
-import { UseCode } from './core/useCode'
-import { GuardRecoveryCodeViewProps } from './interface'
-import './style.less'
-const window: Window = require('global/window')
-
-export const GuardRecoveryCodeView: React.FC<GuardRecoveryCodeViewProps> = ({
-  initData,
-}) => {
-  const onBack = () => window.history.back()
-  const { t } = useTranslation()
-  return (
-    <div className="g2-view-container g2-mfa-recovery-code">
-      <div className="g2-view-back">
-        <span onClick={onBack}>
-          <IconFont type="authing-back" />
-          <span>{t('common.backToVerify')}</span>
-        </span>
-      </div>
-      <div className="g2-mfa-content">
-        <UseCode mfaToken={initData.mfaToken} />
-      </div>
-    </div>
-  )
-}

package/components/RecoveryCode/interface.ts

@@ -1,31 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-import { AuthenticationClient, User } from '..'
-
-export interface RecoveryCodeConfig extends IG2Config {}
-
-const defaultConfig: RecoveryCodeConfig = {
-  ...getDefaultG2Config(),
-}
-
-export const getDefaultRecoveryCodeConfig = (): RecoveryCodeConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export interface RecoveryCodeEvents extends IG2Events {
-  onLogin?: (user: User, authClient: AuthenticationClient) => void
-}
-
-export interface GuardRecoveryCodeInitData {
-  mfaToken: string
-}
-
-export interface GuardRecoveryCodeProps extends IG2FCProps, RecoveryCodeEvents {
-  config: Partial<RecoveryCodeConfig>
-  initData: GuardRecoveryCodeInitData
-}
-
-export interface GuardRecoveryCodeViewProps extends GuardRecoveryCodeProps {
-  config: RecoveryCodeConfig
-  initData: GuardRecoveryCodeInitData
-}

package/components/RecoveryCode/style.less

@@ -1,13 +0,0 @@
-.g2-mfa-recovery-code {
-  .authing-g2-mfa-title {
-    margin-top: 92px;
-  }
-
-  .authing-g2-mfa-tips {
-    margin-bottom: 52px;
-  }
-
-  .submit-form {
-    margin-top: 64px !important;
-  }
-}

package/components/Register/codemap.ts

@@ -1,16 +0,0 @@
-import { ErrorCode } from '../_utils/GuardErrorCode'
-import { GuardModuleAction } from '../Guard/module'
-
-export const codeMap: Record<number, GuardModuleAction> = {
-  [ErrorCode.USER_EXISTENCE]: {
-    action: 'message',
-  },
-  [ErrorCode.INPUT_CAPTCHACODE]: {
-    // 需要输入图形验证码
-    action: 'message',
-  },
-  2333: {
-    // 密码错误
-    action: 'message',
-  },
-}

package/components/Register/components/Agreements/index.tsx

@@ -1,81 +0,0 @@
-import React, { FC, useState, useMemo, useEffect } from 'react'
-import { Space, Checkbox } from 'antd'
-import './style.less'
-import { getClassnames } from '../../../_utils'
-import { Agreement } from '../../../AuthingGuard/api'
-
-export interface AgreementsProps {
-  value?: boolean
-  onChange?: (value: boolean) => void
-  style?: React.CSSProperties
-  agreements: Agreement[]
-  showError?: boolean
-}
-
-export const Agreements: FC<AgreementsProps> = ({
-  showError,
-  onChange = () => {},
-  style,
-  agreements,
-}) => {
-  const [acceptList, setAcceptList] = useState<(string | number)[]>([])
-
-  const toggleItemCheck = (id: string | number) => {
-    setAcceptList((prev) => {
-      if (prev.includes(id)) {
-        return prev.filter((item) => item !== id)
-      }
-      return [...prev, id]
-    })
-  }
-
-  /** 是否可以注册 */
-  const isAccept = useMemo(() => {
-    /** 所有必须勾选的都勾了就可以通过 */
-    return agreements
-      .filter((item) => item.required)
-      .every((item) => acceptList.includes(item.id))
-  }, [acceptList, agreements])
-
-  useEffect(() => {
-    onChange(isAccept)
-  }, [isAccept, onChange])
-
-  return (
-    <div
-      className={getClassnames([
-        'authing-agreements',
-        showError && 'authing-agreements-error',
-      ])}
-    >
-      {agreements.map((item) => {
-        return (
-          <div
-            key={item.id}
-            style={{ ...style }}
-            className={getClassnames([
-              'authing-agreements-item',
-              item.required &&
-                !acceptList.includes(item.id) &&
-                'authing-agreements-item-invalid',
-            ])}
-            onClick={() => toggleItemCheck(item.id)}
-          >
-            <Space align="start" size={5}>
-              <Checkbox
-                className="authing-agreements-checkbox"
-                checked={acceptList.includes(item.id)}
-              />
-              <div
-                className="authing-agreements-item-content"
-                dangerouslySetInnerHTML={{
-                  __html: item.title,
-                }}
-              ></div>
-            </Space>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/components/Register/components/Agreements/style.less

@@ -1,44 +0,0 @@
-.authing-agreements {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  &.authing-agreements-error {
-    .authing-agreements-item-invalid {
-      color: #ff4d4f;
-      a {
-        color: #ff4d4f;
-      }
-      :global(.ant-checkbox-inner) {
-        border-color: #ff4d4f;
-      }
-    }
-  }
-}
-
-.authing-agreements-item {
-  color: #999999;
-  user-select: none;
-  cursor: pointer;
-  font-size: 12px;
-  &:not(:first-child) {
-    margin-top: 4px;
-  }
-  p {
-    margin-bottom: 0;
-    display: inline-block;
-  }
-}
-
-.authing-agreements-checkbox {
-  margin-bottom: 2px;
-  :global(.ant-checkbox-inner) {
-    width: 14px;
-    height: 14px;
-    &::after {
-      left: 20%;
-    }
-  }
-}
-
-.authing-agreements-item-content {
-  line-height: 23px;
-}