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

package/components/Guard/config.ts

@@ -1,19 +0,0 @@
-import { getDefaultLoginConfig, LoginConfig } from '../Login/props'
-import { getDefaultRegisterConfig, RegisterConfig } from '../Register/props'
-
-export interface GuardComponentConifg extends Partial<GuardLocalConfig> {}
-
-export interface GuardLocalConfig extends RegisterConfig, LoginConfig {}
-
-let defaultConfig: GuardLocalConfig
-
-export const getDefaultGuardLocalConfig = (): GuardLocalConfig => {
-  if (!defaultConfig) {
-    defaultConfig = {
-      ...getDefaultLoginConfig(),
-      ...getDefaultRegisterConfig(),
-    }
-  }
-
-  return defaultConfig
-}

package/components/Guard/event.ts

@@ -1,52 +0,0 @@
-import { message } from 'antd'
-import { CompleteInfoEvents } from '../CompleteInfo/interface'
-import { ForgetPasswordEvents } from '../ForgetPassword/interface'
-import { LoginEvents } from '../Login/props'
-import { RegisterEvents } from '../Register/props'
-import { i18n } from '../_utils/locales'
-
-export interface GuardEvents
-  extends LoginEvents,
-    RegisterEvents,
-    CompleteInfoEvents,
-    ForgetPasswordEvents {}
-
-export const guardEventsFilter = (props: any) => {
-  const events: GuardEvents = {}
-  const eventsName = Object.keys(props).filter((name) => name.startsWith('on'))
-  eventsName.forEach((eventName) => {
-    events[eventName as keyof GuardEvents] = props[eventName]
-  })
-
-  return guardEventsHijacking(events)
-}
-
-const eventsMapping: Partial<GuardEvents> = {
-  onLogin: (...props) => {
-    message.success(i18n.t('common.LoginSuccess'))
-    return props
-  },
-
-  onRegister: (...props) => {
-    message.success(i18n.t('common.registrationSuccess'))
-    return props
-  },
-}
-
-export const guardEventsHijacking = (events: GuardEvents): GuardEvents => {
-  const newEvents: GuardEvents = {}
-  Object.keys(eventsMapping).forEach((eventsKey) => {
-    // @ts-ignore
-    newEvents[eventsKey] = (...props) => {
-      // @ts-ignore
-      const newProps = eventsMapping[eventsKey](...props)
-      // @ts-ignore
-      events[eventsKey]?.(newProps)
-    }
-  })
-
-  return {
-    ...events,
-    ...newEvents,
-  }
-}

package/components/Guard/index.tsx

@@ -1,4 +0,0 @@
-export * from './Guard'
-export * from './module'
-export * from './event'
-export * from './config'

package/components/Guard/module.ts

@@ -1,19 +0,0 @@
-export enum GuardModuleType {
-  ERROR = 'error',
-  LOGIN = 'login',
-  REGISTER = 'register',
-  MFA = 'mfa',
-  FORGET_PWD = 'forgetPassword',
-  CHANGE_PWD = 'changePassword',
-  DOWNLOAD_AT = 'downloadAT',
-  BIND_TOTP = 'bindTotp',
-  ANY_QUESTIONS = 'anyQuestions',
-  COMPLETE_INFO = 'completeInfo',
-  RECOVERY_CODE = 'recoveryCode',
-}
-export interface GuardModuleAction {
-  action: string
-  module?: GuardModuleType
-  message?: string
-  initData?: any
-}

package/components/Guard/stateMachine.ts

@@ -1,133 +0,0 @@
-import { useEffect } from 'react'
-import { GuardComponentConifg, GuardLocalConfig } from './config'
-import { GuardModuleType } from './module'
-const window: Window = require('global/window')
-
-export interface ModuleState {
-  moduleName: GuardModuleType
-  initData?: any
-}
-
-export enum ActionType {
-  ChangeModule = 'ChangeModule',
-  Back = 'Back',
-  Init = 'Init',
-}
-
-export interface StateMachineLog {
-  action: ActionType
-  date: number
-  dataSource: ModuleState
-}
-
-export type ChangeModuleEvent = (
-  nextModelu: GuardModuleType,
-  initData?: any
-) => void
-export class GuardStateMachine {
-  // 计数器
-  private order: number = 0
-
-  // 总体的配置信息
-  private config: GuardComponentConifg = {}
-
-  // 历史记录
-  private moduleStateHistory: ModuleState[] = []
-
-  private changeMouleEvent: ChangeModuleEvent
-
-  // Log
-  private stateMachineLog: Record<number, StateMachineLog> = {}
-
-  constructor(changeMouleEvent: ChangeModuleEvent, initData: ModuleState) {
-    this.changeMouleEvent = changeMouleEvent
-
-    this.historyPush(initData, ActionType.Init)
-  }
-  globalWindow = (): Window | undefined =>
-    typeof window !== undefined ? window : undefined
-
-  next = (nextModelu: GuardModuleType, initData: any) => {
-    const moduleData: ModuleState = {
-      moduleName: nextModelu,
-      initData,
-    }
-    this.changeMouleEvent(nextModelu, initData)
-
-    this.historyPush(moduleData)
-    console.log('next Log', this.stateMachineLog)
-    console.log('next History', this.moduleStateHistory)
-  }
-
-  back = (initData: any = {}) => {
-    if (this.moduleStateHistory.length <= 1) return
-
-    const backModule = this.moduleStateHistory[1]
-    this.changeMouleEvent(backModule.moduleName, {
-      ...initData,
-      ...backModule.initData,
-    })
-
-    this.moduleStateHistory.splice(0, 1)
-    console.log('back Log', this.stateMachineLog)
-  }
-
-  // 业务终点 Log 发送
-  end = () => {
-    console.log('业务终点 Log', this.stateMachineLog)
-
-    // TODO 请求
-  }
-
-  historyPush = (
-    data: ModuleState,
-    actionType: ActionType = ActionType.ChangeModule
-  ) => {
-    this.moduleStateHistory.unshift(data)
-
-    this.stateMachineLog[this.order++] = {
-      action: actionType,
-      date: new Date().getTime(),
-      dataSource: data,
-    }
-
-    if (this.moduleStateHistory.length > 10)
-      this.moduleStateHistory.splice(10, this.moduleStateHistory.length - 10)
-  }
-
-  historyBack = (data: ModuleState) => {
-    if (this.moduleStateHistory.length <= 1) return
-
-    this.moduleStateHistory.splice(0, 1)
-
-    this.stateMachineLog[this.order++] = {
-      action: ActionType.Back,
-      date: new Date().getTime(),
-      dataSource: data,
-    }
-  }
-
-  setConfig = (config: GuardLocalConfig) => {
-    this.config = config
-  }
-}
-
-export const useHistoryHijack = (back?: () => void) => {
-  const next = (state: any = {}) => {
-    window?.history.pushState(state, '', window?.location.href)
-  }
-
-  useEffect(() => {
-    const onPopstate = () => {
-      back?.()
-    }
-
-    back && window?.addEventListener('popstate', onPopstate)
-
-    return () => {
-      back && window.removeEventListener('popstate', onPopstate)
-    }
-  }, [back])
-
-  return [next]
-}

package/components/Guard/styles.less

@@ -1,444 +0,0 @@
-@import '~antd/lib/style/mixins/index.less';
-
-*[class*='authing-'] {
-  @import '~antd/lib/style/core/global.less';
-}
-
-.authing-g2-render-module {
-  --sidePadding: 38px;
-  --containerWidth: 456px;
-}
-.authing-g2-render-module-modal {
-  --containerWidth: 456px;
-}
-
-@media only screen and (max-width: 450px) {
-  .authing-g2-render-module {
-    --sidePadding: 8px;
-    --containerWidth: 100%;
-  }
-  .authing-g2-render-module-modal {
-    --containerWidth: 100%;
-  }
-}
-
-// 侵入 core 的样式代码，guard view 皮肤
-.g2-view-container {
-  font-family: sans-serif;
-  box-shadow: 0px 0px 60px rgba(84, 89, 104, 0.05);
-  background: #ffffff;
-  display: flex;
-  flex-direction: column;
-  width: var(--containerWidth);
-  min-height: 610px;
-  box-sizing: border-box;
-  padding: 16px;
-  padding-bottom: 32px;
-  border-radius: 8px;
-  position: relative;
-  .none {
-    display: none;
-  }
-  .g2-view-back {
-    margin-top: 26px;
-    padding-left: 38px;
-    cursor: pointer;
-    font-size: 14px;
-    color: #878a95;
-    .g2-icon {
-      margin-right: 8px;
-    }
-  }
-  .g2-view-header {
-    user-select: none;
-    padding: 44px var(--sidePadding) 0;
-    .icon {
-      width: 48px;
-      height: 48px;
-      border-radius: 4px;
-      margin-bottom: 8px;
-    }
-    .title {
-      font-weight: 600;
-      font-size: 24px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .title-explain {
-      font-weight: 300;
-      font-size: 14px;
-      color: #545968;
-    }
-    margin-bottom: 24px;
-  }
-
-  .g2-view-tabs {
-    padding: 0 var(--sidePadding);
-
-    .authing-ant-tabs-tab {
-      color: #878a95;
-      &:hover {
-        color: #282d3c;
-      }
-    }
-  }
-
-  .authing-g2-submit-button {
-    width: calc(100% - 4px);
-    border-radius: 4px;
-    height: 42px;
-    margin: 0 2px;
-    &.shaking {
-      animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-    }
-    @keyframes shake {
-      10%,
-      90% {
-        transform: translate3d(-1px, 0, 0);
-      }
-
-      20%,
-      80% {
-        transform: translate3d(2px, 0, 0);
-      }
-
-      30%,
-      50%,
-      70% {
-        transform: translate3d(-4px, 0, 0);
-      }
-
-      40%,
-      60% {
-        transform: translate3d(4px, 0, 0);
-      }
-    }
-  }
-}
-
-.authing-g2-button-group {
-  background: #eff2f6;
-  border-radius: 8px;
-  padding: 4px 2px;
-  margin-bottom: 16px;
-  width: fit-content;
-
-  .authing-ant-radio-button-wrapper {
-    margin: 0 2px;
-    border-radius: 8px;
-    color: #545968;
-    cursor: pointer;
-    border: none;
-    background: none;
-    height: auto;
-    &.authing-ant-radio-button-wrapper-checked {
-      color: #396aff;
-      background: #ffffff;
-    }
-    &:not(:first-child)::before {
-      display: none;
-    }
-  }
-}
-
-.authing-g2-input-form {
-  padding: 0 2px;
-  margin-bottom: 16px;
-  &.submit-form {
-    margin-top: 32px;
-  }
-  .label-title {
-    padding: 0 0 8px;
-  }
-  // .authing-ant-form-item-explain {
-  //   // display: none;
-  //   transition: 0.2s all;
-  //   position: absolute;
-  //   user-select: none;
-  //   background: white;
-  //   left: 10px;
-  //   top: -15px;
-  //   z-index: 100;
-  //   padding: 4px 8px;
-  //   border-radius: 4px;
-  //   box-shadow: #eeeff1;
-  // }
-}
-.authing-g2-input-form {
-  .authing-g2-select {
-    border: 1px solid #f5f6f7;
-    border-color: #f5f6f7;
-    height: 46px;
-    border-radius: 4px;
-    .authing-ant-select-selector {
-      height: 100% !important;
-      border-color: #f5f6f7 !important;
-      background-color: #f5f6f7 !important;
-      .authing-ant-select-selection-item {
-        line-height: 42px;
-      }
-      &:hover {
-        border-color: #eeeff1 !important;
-        background-color: #eeeff1 !important;
-      }
-    }
-  }
-}
-
-.authing-g2-input {
-  border: 1px solid #f5f6f7;
-  height: 46px;
-  border-radius: 4px;
-  background: #f5f6f7;
-  &:hover {
-    background: #eeeff1;
-  }
-  &:focus {
-    background: #ffffff !important;
-    border-color: #618eff;
-  }
-
-  input {
-    // 通过这个方式 hack 浏览器自动填充：
-    // 自动填充的浏览器可以说罪恶滔天，钉死在 mdn 的耻辱柱上：https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
-    // 下方的 focused 同样需要这样处理
-    height: 0;
-    padding: 1em 0.5em !important;
-    background-clip: content-box !important;
-    &::placeholder,
-    &::-webkit-input-placeholder {
-      color: #a7a7a7;
-    }
-  }
-
-  // affix-wrapper 特殊处理 hover
-  &.authing-ant-input-affix-wrapper:hover {
-    border-color: #eeeff1;
-    background: #eeeff1;
-    border-color: #618eff;
-
-    .authing-ant-input {
-      background: #eeeff1;
-    }
-  }
-
-  // focus
-  &.authing-ant-input-affix-wrapper-focused {
-    background: #ffffff !important;
-    border-color: #618eff;
-    input {
-      height: 0;
-      padding: 1em 0.5em !important;
-      background-clip: content-box !important;
-      &::placeholder,
-      &::-webkit-input-placeholder {
-        color: #a7a7a7;
-      }
-    }
-  }
-
-  // 适配图形验证码
-  &.add-after {
-    border: none;
-    .authing-ant-input-group {
-      .authing-ant-input,
-      .authing-ant-input-group-addon {
-        border-radius: 4px;
-        height: 46px;
-      }
-    }
-  }
-
-  // 适配数字输入框
-  &.authing-ant-input-number {
-    width: 100%;
-    input {
-      padding: 1.4em 0.5em !important;
-    }
-    .authing-ant-input-number-handler-wrap {
-      display: none;
-    }
-  }
-  .g2-captcha-code-image {
-    min-width: 100px;
-  }
-}
-
-// input error 的情况
-.authing-ant-form-item-has-error {
-  .authing-ant-input-affix-wrapper:hover {
-    border-color: #ff4d4f !important;
-  }
-
-  // focus
-  .authing-ant-input-affix-wrapper-focused {
-    border-color: #ff4d4f !important;
-  }
-}
-
-.authing-g2-send-code {
-  color: #396aff;
-  cursor: pointer;
-  &.sending {
-    cursor: not-allowed;
-    filter: opacity(0.5);
-  }
-}
-
-.g2-tips-line {
-  display: flex;
-  font-size: 14px;
-  padding: 0 var(--sidePadding);
-  height: 22px;
-  .link-like {
-    color: #396aff;
-    cursor: pointer;
-    transition: all 0.3s;
-    &:hover {
-      color: #557fff;
-    }
-    &:active {
-      color: #254cd9;
-    }
-  }
-  .gray {
-    color: #999;
-  }
-  .go-to-register {
-    margin-left: auto;
-  }
-  .back-to-login {
-    margin-left: auto;
-  }
-  .touch-tip {
-    color: #d4d6dc;
-    cursor: pointer;
-    &:hover {
-      color: #878a95;
-    }
-  }
-}
-.g2-init-setting-loading {
-  width: var(--containerWidth);
-  min-height: 610px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 0px 60px rgba(84, 89, 104, 0.05);
-}
-
-.g2-questions {
-  .authing-ant-upload-list-picture-card-container {
-    height: 56px;
-    width: 56px;
-
-    .authing-ant-upload-list-item-list-type-picture-card {
-      padding: 4px;
-    }
-  }
-  // authing-ant-upload authing-ant-upload-select
-  .authing-ant-upload-select-picture-card {
-    height: 56px;
-    width: 56px;
-    border: none;
-    background: #f5f6f7;
-    transition: 0.2s all;
-    &:hover {
-      background: #eeeff1;
-    }
-  }
-}
-
-.g2-questions-send-success-page {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-height: 610px;
-  .plate {
-    margin-bottom: 14px;
-  }
-  .title {
-    color: #282d3c;
-    font-weight: 500;
-    font-size: 16px;
-    margin-bottom: 10px;
-  }
-  .message {
-    font-size: 14px;
-    color: #545968;
-    margin-bottom: 32px;
-    text-align: center;
-  }
-  .timer-tip {
-    font-size: 14px;
-    color: #545968;
-    margin-top: 12px;
-  }
-}
-
-.g2-change-language-container {
-  margin: auto 0 20px;
-  padding-top: 10px;
-  text-align: center;
-  .g2-change-language-button {
-    user-select: none;
-    font-size: 14px;
-    color: #878a95;
-    cursor: pointer;
-    margin: auto;
-    transition: 0.2s all;
-    &:hover {
-      color: #282d3c;
-    }
-    .g2-change-language-text {
-      margin-left: 5px;
-    }
-  }
-}
-.authing-g2-render-module-modal {
-  width: var(--containerWidth);
-  .authing-ant-modal-content {
-    width: var(--containerWidth);
-    border-radius: 8px;
-  }
-  .authing-ant-modal-body {
-    padding: 0;
-  }
-  .authing-ant-modal-close {
-    left: 0;
-    border-radius: 4px;
-    transform: scale(0.5);
-    color: #d4d6dc;
-    transition: 0.2s all;
-    width: 56px;
-    height: 56px;
-    &:hover {
-      background: #eeeff1;
-      color: #878a95;
-    }
-
-    .g2-modal-close {
-      font-size: 36px;
-      margin-top: 10px;
-    }
-  }
-  .authing-ant-modal-footer {
-    display: none;
-  }
-}
-
-.g2-send-code-input-col {
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  input[type='number'] {
-    -moz-appearance: textfield;
-  }
-}