@authing/react-ui-components 3.0.0-alpha → 3.0.0-rc.11

package/lib/index.min.js.LICENSE.txt

@@ -67,3 +67,5 @@ PERFORMANCE OF THIS SOFTWARE.
       - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
   	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   */
+
+//! moment.js

package/package.json

@@ -1,28 +1,43 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "3.0.0-alpha",
-  "framework": "React",
+  "version": "3.0.0-rc.11",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "lib/index.d.ts",
+  "types": "react-app-env.d.ts",
+  "files": [
+    "dist",
+    "lib"
+  ],
   "dependencies": {
     "antd": "^4.8.0",
-    "authing-js-sdk": "4.22.18",
     "face-api.js": "^0.22.2",
+    "fastclick": "^1.0.6",
     "global": "^4.4.0",
     "qs": "^6.9.4",
     "react-use": "^17.3.1"
   },
-  "types": "react-app-env.d.ts",
   "peerDependencies": {
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "authing-js-sdk": ">=4.23.3"
   },
   "scripts": {
-    "start": "PORT=3006 node scripts/start.js",
-    "build": "node scripts/build.js",
-    "build:lib": "node scripts/lib.js",
-    "test": "node scripts/test.js"
+    "build": "node ./scripts/build.js",
+    "build:lib": "node ./scripts/lib.js",
+    "clear": "clear:lib && clear:dist",
+    "clear:dist": "rm -rf dist",
+    "clear:lib": "rm -rf lib",
+    "log-tag": "node ./scripts/tag.js",
+    "pretty-quick": "pretty-quick",
+    "prestart": "npm run log-tag && npm run version && npm run generate-examples",
+    "prebuild:lib": "npm run log-tag && npm run version",
+    "prepare": "cd ../.. && husky install packages/react-components/.husky",
+    "pub": "npm run build:lib && node ./scripts/publish.js",
+    "start": "PORT=1221 node ./scripts/start.js",
+    "vite": "vite",
+    "version": "node ./scripts/generate-version",
+    "generate-examples": "node ./scripts/generate-examples.js"
   },
   "publishConfig": {
     "access": "public",
@@ -120,6 +135,7 @@
     "@types/shortid": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
+    "@vitejs/plugin-react": "1.1.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "8.1.0",
@@ -129,6 +145,8 @@
     "bfj": "^7.0.2",
     "camelcase": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "chalk": "^4.1.2",
+    "cross-env": "^7.0.3",
     "css-loader": "4.3.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
@@ -147,6 +165,7 @@
     "file-loader": "6.1.1",
     "fs-extra": "^9.0.1",
     "html-webpack-plugin": "4.5.0",
+    "husky": "^7.0.4",
     "i18next": "^20.1.0",
     "i18next-browser-languagedetector": "^6.1.0",
     "identity-obj-proxy": "3.0.0",
@@ -167,6 +186,7 @@
     "postcss-rename-selector": "^0.1.1",
     "postcss-safe-parser": "5.0.2",
     "prettier": "^2.1.2",
+    "pretty-quick": "^3.0.0",
     "query-string": "^7.0.0",
     "react": "16.14.0",
     "react-app-polyfill": "^2.0.0",
@@ -178,12 +198,14 @@
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "8.0.2",
     "semver": "7.3.2",
+    "shelljs": "^0.8.4",
     "shortid": "^2.2.16",
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
     "typescript": "^4.0.3",
     "url-loader": "4.1.1",
+    "vite": "^2.6.14",
     "web-vitals": "^0.2.4",
     "webpack": "4.44.2",
     "webpack-bundle-analyzer": "^4.1.0",

package/.eslintignore

@@ -1,6 +0,0 @@
-# /node_modules/* and /bower_components/* ignored by default
-
-# Ignore built files except build/index.js
-build/*
-lib/*
-iconfont.js

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  extends: ['react-app'],
-  plugins: ['prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-  },
-}

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "es5"
-}

package/.vscode/settings.json

@@ -1,31 +0,0 @@
-{
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  "files.associations": {
-    "*.mw.json": "jsonc",
-    "*.icon": "xml"
-  },
-  "cssModules.camelCase": true,
-  "editor.snippetSuggestions": "top",
-  "emmet.showSuggestionsAsSnippets": true,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  },
-  "prettier.printWidth": 120,
-  "prettier.singleQuote": false,
-  "prettier.semi": true,
-  "i18n-ally.localesPaths": "components/_utils/locales",
-  "i18n-ally.displayLanguage": "zh",
-  "i18n-ally.keystyle": "nested",
-  "i18n-ally.annotations": true,
-  "i18n-ally.extract.targetPickingStrategy": "file-previous",
-  "i18n-ally.namespace": true,
-  "i18n-ally.sourceLanguage": "zh"
-}

package/build/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/build/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/components/AuthingDropdown/index.tsx

@@ -1,52 +0,0 @@
-import { DownOutlined } from '@ant-design/icons'
-import React, { FC, useState } from 'react'
-import { getClassnames } from '../_utils'
-
-import './style.less'
-
-/**
- * 不使用 antd 的 dropdown，因为里面会用 tooltip，体积过大
- */
-export const AuthingDropdown: FC<{
-  className?: string
-  menus: {
-    label: React.ReactNode
-    key: string | number
-    onClick?: (
-      key: string | number,
-      evt: React.MouseEvent<HTMLDivElement, MouseEvent>
-    ) => void
-  }[]
-}> = ({ menus, children, className }) => {
-  const [visible, setVisible] = useState(false)
-
-  return (
-    <div
-      className={getClassnames(['authing-dropdown', className])}
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
-    >
-      <div className="authing-dropdown-trigger">{children}</div>
-      <div
-        className={getClassnames([
-          'authing-dropdown-menu-container',
-          visible && 'authing-dropdown-menu-container__visible',
-        ])}
-      >
-        {menus.map((item) => (
-          <div
-            className="authing-dropdown-menu-item"
-            onClick={(evt) => {
-              setVisible(false)
-              item.onClick?.(item.key, evt)
-            }}
-            key={item.key}
-          >
-            {item.label}
-          </div>
-        ))}
-      </div>
-      <DownOutlined className="authing-dropdown-icon" />
-    </div>
-  )
-}

package/components/AuthingDropdown/style.less

@@ -1,43 +0,0 @@
-.authing-dropdown {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-}
-
-.authing-dropdown-trigger {
-  cursor: pointer;
-}
-
-.authing-dropdown-menu-container {
-  height: 0;
-  opacity: 0;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  transition: all 0.3s;
-  cursor: pointer;
-  background-color: #fff;
-  padding: 4px 0;
-  border-radius: 2px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  pointer-events: none;
-}
-
-.authing-dropdown-menu-container__visible {
-  height: auto;
-  opacity: 1;
-  pointer-events: unset;
-}
-
-.authing-dropdown-menu-item {
-  padding: 5px 12px;
-  transition: all 0.3s;
-  &:hover {
-    background-color: #f5f5f5;
-  }
-}
-
-.authing-dropdown-icon {
-  margin-left: 8px;
-}

package/components/AuthingGuard/AppMFALayout/index.tsx

@@ -1,74 +0,0 @@
-import { message } from 'antd'
-import { User } from 'authing-js-sdk'
-import React, { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { AuthingDropdown } from '../../AuthingDropdown'
-
-import {
-  EmailMfaVerifyForm,
-  SmsMfaVerifyForm,
-} from '../../../components/AuthingGuard/Forms'
-import { useGuardContext } from '../../context/global/context'
-import { ApplicationMfaType, ApplicationMfaTypeLabel } from '../api'
-
-import './style.less'
-
-export interface MfaLayoutProps {}
-
-export const AppMfaLayout: FC<MfaLayoutProps> = () => {
-  const { t } = useTranslation()
-  const {
-    state: { guardEvents, authClient, mfaData },
-  } = useGuardContext()
-
-  const [type, setType] = useState(ApplicationMfaType.SMS)
-
-  const onSuccess = (user: User) => {
-    message.success(t('common.LoginSuccess'))
-    guardEvents.onLogin?.(user, authClient)
-  }
-
-  const onFail = (error: any) => {
-    guardEvents.onLoginError?.(error, authClient)
-  }
-
-  const formProps = {
-    onSuccess,
-    onFail,
-  }
-
-  const formMap = {
-    [ApplicationMfaType.EMAIL]: <EmailMfaVerifyForm {...formProps} />,
-    [ApplicationMfaType.SMS]: <SmsMfaVerifyForm {...formProps} />,
-  }
-
-  const availableMfaType = mfaData.applicationMfa
-    ?.filter(
-      (item) =>
-        item.status && Object.keys(ApplicationMfaType).includes(item.mfaPolicy)
-    )
-    ?.sort((a, b) => a.sort - b.sort)
-    ?.map((item) => ({
-      label: ApplicationMfaTypeLabel()[item.mfaPolicy],
-      key: item.mfaPolicy,
-      onClick() {
-        setType(item.mfaPolicy)
-      },
-    }))
-
-  return (
-    <div className="authing-text-center">
-      {formMap[type]}
-      {(availableMfaType?.length || 0 > 1) && (
-        <AuthingDropdown
-          className="toggle-mfa-dropdown"
-          menus={availableMfaType!}
-        >
-          <span className="authing-toggle-mfa">
-            {t('login.otherVerifyWay')}
-          </span>
-        </AuthingDropdown>
-      )}
-    </div>
-  )
-}

package/components/AuthingGuard/AppMFALayout/style.less

@@ -1,12 +0,0 @@
-.authing-toggle-mfa,
-.toggle-mfa-dropdown .authing-dropdown-icon {
-  color: #999;
-}
-
-.toggle-mfa-dropdown {
-  margin-top: 30px;
-  align-self: center;
-  .authing-dropdown-menu-item {
-    white-space: nowrap;
-  }
-}

package/components/AuthingGuard/CompleteUserInfoLayout/index.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useGuardContext } from '../../context/global/context'
-import { CompleteUserInfoForm } from '../Forms/CompleteUserInfoForm'
-
-import './style.less'
-
-export const CompleteUserInfoLayout: FC = () => {
-  const {
-    state: { guardTitle },
-  } = useGuardContext()
-
-  const { t } = useTranslation()
-  return (
-    <div>
-      <h2 className="authing-guard-complete-info-title">
-        {t('common.perfectUserInfo')}
-      </h2>
-
-      <p className="authing-guard-complete-info-msg">
-        {t('common.welcomeDoc', {
-          name: guardTitle,
-        })}
-      </p>
-
-      <CompleteUserInfoForm />
-    </div>
-  )
-}

package/components/AuthingGuard/CompleteUserInfoLayout/style.less

@@ -1,8 +0,0 @@
-.authing-guard-complete-info-title {
-  font-size: 20px;
-  text-align: center;
-  color: #333;
-}
-.authing-guard-complete-info-msg {
-  color: #b2b2b2;
-}

package/components/AuthingGuard/Forms/ADLoginForm/index.tsx

@@ -1,117 +0,0 @@
-import { Input, Form, message } from 'antd'
-import { FormInstance } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-
-import { useGuardContext } from '../../../context/global/context'
-import {
-  ADLoginFormProps,
-  LoginMethods,
-} from '../../../../components/AuthingGuard/types'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-import { getRequiredRules } from '../../../_utils'
-
-export const ADLoginForm = forwardRef<FormInstance, ADLoginFormProps>(
-  ({ onSuccess, onValidateFail, onFail }, ref) => {
-    const { t } = useTranslation()
-    const { state } = useGuardContext()
-    const { authClient, guardEvents } = state
-
-    const [loading, setLoading] = useState(false)
-
-    const onFinishFailed = (errorInfo: any) => {
-      setLoading(false)
-      onValidateFail && onValidateFail(errorInfo)
-    }
-
-    const [rawForm] = Form.useForm()
-
-    const onFinish = async (values: any) => {
-      if (guardEvents.onBeforeLogin) {
-        try {
-          const canLogin = await guardEvents.onBeforeLogin(
-            {
-              type: LoginMethods.AD,
-              data: {
-                identity: values.identity,
-                password: values.password,
-              },
-            },
-            authClient
-          )
-
-          if (!canLogin) {
-            setLoading(false)
-            return
-          }
-        } catch (e) {
-          if (typeof e === 'string') {
-            message.error(e)
-          } else {
-            message.error(e.message)
-          }
-          setLoading(false)
-          return
-        }
-      }
-
-      try {
-        const identity = values.identity && values.identity.trim()
-        const password = values.password && values.password.trim()
-        const user = await authClient.loginByAd(identity, password)
-        onSuccess && onSuccess(user)
-      } catch (error) {
-        if (typeof error.message === 'string') {
-          // js sdk httpclient 的报错，这里只有一种情况就是用户开启了 mfa 的报错
-          try {
-            const errorData = JSON.parse(error.message)
-            onFail && onFail(errorData)
-            return
-          } catch (_) {
-            // do nothing
-          }
-        }
-        onFail && onFail(error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    useImperativeHandle(ref, () => rawForm)
-
-    return (
-      <Form
-        form={rawForm}
-        onSubmitCapture={() => setLoading(true)}
-        onFinishFailed={onFinishFailed}
-        onFinish={onFinish}
-      >
-        <Form.Item
-          name="identity"
-          rules={getRequiredRules(t('login.inputAdUsername'))}
-        >
-          <Input
-            autoComplete="email,username,tel"
-            size="large"
-            placeholder={t('login.inputAdUsername')}
-            prefix={<UserOutlined style={{ color: '#ddd' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          rules={getRequiredRules(t('login.inputAdPwd'))}
-        >
-          <Input.Password
-            autoComplete="current-password"
-            size="large"
-            visibilityToggle={false}
-            placeholder={t('login.inputAdPwd')}
-            prefix={<LockOutlined style={{ color: '#ddd' }} />}
-          />
-        </Form.Item>
-        <LoginFormFooter loading={loading}></LoginFormFooter>
-      </Form>
-    )
-  }
-)

package/components/AuthingGuard/Forms/Agreements/index.tsx

@@ -1,81 +0,0 @@
-import React, { FC, useState, useMemo, useEffect } from 'react'
-import { Space, Checkbox } from 'antd'
-import { Agreement } from '../../api'
-import './style.less'
-import { getClassnames } from '../../../_utils'
-
-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/AuthingGuard/Forms/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;
-}