@authing/react-ui-components 4.0.0-rc.2 → 4.0.0-rc.5

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

@@ -10,6 +10,15 @@
   http://jedwatson.github.io/classnames
 */
 
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "4.0.0-rc.2",
+  "version": "4.0.0-rc.5",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "types/index.d.ts",
@@ -15,6 +15,7 @@
     "fastclick": "^1.0.6",
     "global": "^4.4.0",
     "phone": "^3.1.12",
+    "prompt": "^1.3.0",
     "qs": "^6.9.4",
     "react-responsive": "^9.0.0-beta.5",
     "react-use": "^17.3.1",
@@ -27,8 +28,8 @@
   },
   "scripts": {
     "build": "node ./scripts/build.js",
-    "build:types": "tsc",
-    "build:lib": "clear && tsc && node ./scripts/lib.js",
+    "build:types": "npx tsc",
+    "build:lib": "clear && npm run build:types && node ./scripts/lib.js",
     "clear": "npm run clear:dist && npm run clear:lib && npm run clear:types",
     "clear:dist": "rm -rf dist",
     "clear:lib": "rm -rf lib",
@@ -42,7 +43,8 @@
     "start": "PORT=1221 node ./scripts/start.js",
     "vite": "vite",
     "generate-version": "node ./scripts/generate-version",
-    "generate-examples": "node ./scripts/generate-examples.js"
+    "generate-examples": "node ./scripts/generate-examples.js",
+    "test": "node ./scripts/dev/pre-build.js"
   },
   "publishConfig": {
     "access": "public",
@@ -193,6 +195,7 @@
     "mini-css-extract-plugin": "0.11.3",
     "npm-dts-webpack-plugin": "^1.3.5",
     "optimize-css-assets-webpack-plugin": "5.0.4",
+    "ora": "^5.4.1",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
@@ -217,6 +220,7 @@
     "semver": "7.3.2",
     "shelljs": "^0.8.4",
     "shortid": "^2.2.16",
+    "signale": "^1.4.0",
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
@@ -230,4 +234,4 @@
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
   }
-}
+}

package/types/Guard/core/hooks/useMultipleAccounts.d.ts

@@ -0,0 +1,320 @@
+/**
+ * 整体的思路：
+ * 在所有登录方式中，当进行登录时保存登录方式（FE侧自定义）
+ * 之后在登录成功（onLogin）中，触发store的方法保存用户信息以及对应的登录方式进入localStorage。
+ * 当用户再次打开页面时，拿出数据进行对比。（主要对比 LoginWay ），TODO: 这里的代码主要显得乱的原因是因为枚举的不正当使用。（主要要和Server端进行互相映射，后续维护时可优化）
+ *
+ * 核心思路：登录成功时，保存的FE侧自定义 LoginWay
+ * 再次打开页面时，初始化时先根据 FE 自定义的 LoginWay 跳转到不同的 tab 下（way）下使用 account 进行回填。TODO: 这里也可优化，应该在登录成功时候就进行 LoginWay 的格式化，而非转来转去。（但是这样无法直观的体现是哪种方式进行登录）
+*/
+import { SelectOptions } from '../../../Login/multipleAccounts/panel';
+export declare const QR_CODE_WAY: LoginWay[];
+/**
+ * 登录时所有支持的登录列表(前端定义列表)
+ * 这里稍微有点乱 因为Login中的登录方式和这里的不匹配，暂时放在了一起
+ */
+export declare type LoginWay = 'email' | 'phone' | 'password' | 'phone-code' | 'email-code' | 'social' | 'wechat-miniprogram-qrcode' | 'wechatmp-qrcode' | 'app-qrcode' | 'ad' | 'ldap' | 'ldap-password' | 'ldap-email' | 'ldap-phone';
+/**
+ * when： 多账号页面跳转进入登录页面
+ * 携带的回填数据信息
+ */
+export interface BackFillMultipleState extends Omit<User, 'id' | 'name' | 'nickname' | 'username' | 'phone' | 'email' | 'photo' | '_updateTime'> {
+    /**
+     * 回填的账号名称 邮箱/用户名/手机
+      */
+    account: string;
+}
+/**
+ * Store instance
+ */
+export declare type StoreInstance = ReturnType<MultipleAccount['getStore']>;
+/**
+ * 当前 userId 对应的类型
+ */
+export interface CurrentStore {
+    [id: string]: User;
+}
+export interface User {
+    /**
+     * userId
+     */
+    id: string;
+    /**
+     * Tab 栏状态
+     */
+    tab: 'input' | 'qrcode';
+    /**
+     * 登录方式
+     */
+    way: LoginWay;
+    /**
+     * 姓名
+     */
+    name?: string | null;
+    /**
+     * 昵称
+     */
+    nickname?: string | null;
+    /**
+     * 用户名
+     */
+    username?: string | null;
+    /**
+     * 手机号
+     */
+    phone?: string | null;
+    /**
+     * 邮箱
+     */
+    email?: string | null;
+    /**
+     * 头像
+     */
+    photo?: string | null;
+    /**
+     * qrCodeId 对应的ID
+     */
+    qrCodeId?: string;
+    /**
+     * 国际化短信区号
+     */
+    phoneCountryCode?: string;
+    /**
+     * 国际化短信选择框回填
+     */
+    areaCode?: string;
+    /**
+     * 登录时间
+     */
+    _updateTime?: string;
+}
+declare class MultipleAccount {
+    /**
+     * 原始的登录账号
+    */
+    private originAccount;
+    private originWay;
+    /**
+     * 原始的 localStore 值
+     */
+    private originStore;
+    /**
+     * 当前 AppId Store
+     */
+    private currentStore;
+    /**
+     * 单账号直接回填
+     */
+    private firstBackFillData?;
+    /**
+    * server 返回支持的登录方式
+    */
+    private serverSideLoginMethods;
+    /**
+     * 是否显示多账号登录页面
+     * true 存在
+     */
+    private memberState;
+    /**
+   * 二维码登录时的ID
+   */
+    private qrCodeId?;
+    /**
+   * 国际化短信前缀 区号
+   */
+    private phoneCountryCode?;
+    /**
+  * 国际化短信前缀 选中地区编号
+  */
+    private areaCode?;
+    private tabStatus?;
+    /**
+     * 当前登录二级状态
+     */
+    private loginWay?;
+    private appId;
+    /**
+     * 是否开启国际化短信
+     */
+    private isInternationSms?;
+    constructor();
+    /**
+     * 页面首次加载时初始化 Store
+     * 从 LocalStore 中拿值 放到这里来
+     */
+    private initStore;
+    /**
+     * 初始化记住账号相关信息
+     * @param normalCount
+     * @returns
+     */
+    private initMemberState;
+    /**
+     * 获取当前ID下有效账号个数
+     * @returns qrCount 有效的二维码登录个数 normalCount 有效的账号登录方式
+     */
+    private memberStateCount;
+    /**
+     * 初始化第一次的数据 TODO: 逻辑有点脏 待整理
+     */
+    private initBackfillData;
+    /**
+     * 根据前端存储的登录方式返回后端映射方式
+     * @param front
+     */
+    private getServerLoginMethodByFront;
+    /**
+     * 当前 Store  DONE
+     */
+    private getCurrentStore;
+    /**
+     * 国际化短信过滤
+     * true 表示通过 需要保留
+     * false 表示不通过 需要过滤
+     */
+    private validateInternationSms;
+    /**
+     * 校验有效的登录方式账号
+     * @param user
+     * @param serverSideLoginMethods
+     * @returns
+     */
+    private validateMethod;
+    /**
+     *
+     * @param tab 一级Tab状态
+     * @param way 二级Tab状态
+     * @param id 二维码登录时 记录对应的二维码 ID
+     */
+    private setLoginWay;
+    /**
+     * 设置/更新 store 内的用户信息
+     */
+    private setUserInfo;
+    /**
+     * 持久化保存
+     */
+    private saveStore;
+    /**
+     * 根据登录的 account 判断本次登录的方式
+     * @param account 登录输入的账号
+     * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+     * @returns
+     */
+    private setLoginWayByHttpData;
+    /**
+   * 根据登录的 account 判断本次LDAP登录方式
+   * @param account 登录输入的账号
+   * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+   * @returns
+   */
+    private setLoginWayByLDAPData;
+    /**
+     * 根据用户 ID 删除 localStorage 中当前用户 ID
+     */
+    private delUserById;
+    /**
+     * 获得多账号登录页面的所有用户列表
+     * @param excludeWays
+     */
+    private getMemoUser;
+    /**
+     * 根据 id 获得当前已登录的用户信息
+     * @param userId
+     * @returns User / undefined
+     */
+    private getMemoSingleUser;
+    /**
+     * 该方法仅仅需要回填账号的登录方式，其他都不计入
+     * 当用户名/手机号/邮箱/AD/LDAP 相同时，根据登录顺序匹配不同的账号
+     * 根据记住的用户登录方式获取对应的登录账户名
+     * @param way
+     * @param user
+     * @returns
+     */
+    private getAccountByWay;
+    private _mappingUser;
+    /**
+     * 外部暴露方法
+     */
+    getStore: () => {
+        initStore: (appId: string, options: {
+            serverSideLoginMethods: LoginWay[];
+            isInternationSms: boolean;
+        }) => void;
+        setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string | undefined, internation?: {
+            phoneCountryCode: string;
+            areaCode: string;
+        } | undefined) => void;
+        setUserInfo: (user: Pick<User & {
+            id: string;
+        }, "email" | "username" | "phone" | "photo" | "id" | "name" | "nickname" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+        setLoginWayByHttpData: (account: string, data: {
+            username?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        setLoginWayByLDAPData: (account: string, data: {
+            name?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+        getMemoSingleUser: (id: string) => {
+            way: LoginWay;
+            account: string;
+        } | undefined;
+        delUserById: (id: string) => string;
+        getMemberState: () => boolean;
+        getFirstBackFillData: () => BackFillMultipleState | undefined;
+        getOriginAccount: () => string;
+        getOriginWay: () => string;
+    };
+}
+/**
+ * MultipleAccounts 相关 Hook
+ * Finally Config 类型过滤
+ */
+declare const useMultipleAccounts: ({ appId, finallyConfig }: {
+    appId?: string | undefined;
+    finallyConfig?: any;
+}) => {
+    instance: {
+        initStore: (appId: string, options: {
+            serverSideLoginMethods: LoginWay[];
+            isInternationSms: boolean;
+        }) => void;
+        setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string | undefined, internation?: {
+            phoneCountryCode: string;
+            areaCode: string;
+        } | undefined) => void;
+        setUserInfo: (user: Pick<User & {
+            id: string;
+        }, "email" | "username" | "phone" | "photo" | "id" | "name" | "nickname" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+        setLoginWayByHttpData: (account: string, data: {
+            username?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        setLoginWayByLDAPData: (account: string, data: {
+            name?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+        getMemoSingleUser: (id: string) => {
+            way: LoginWay;
+            account: string;
+        } | undefined;
+        delUserById: (id: string) => string;
+        getMemberState: () => boolean;
+        getFirstBackFillData: () => BackFillMultipleState | undefined;
+        getOriginAccount: () => string;
+        getOriginWay: () => string;
+    } | undefined;
+    isMultipleAccount: boolean;
+    referMultipleState: (type: 'login' | 'multiple', data?: BackFillMultipleState | undefined) => void;
+    multipleAccountData: BackFillMultipleState | undefined;
+    clearBackFillData: () => void;
+};
+export default useMultipleAccounts;

package/types/Guard/event.d.ts

@@ -8,7 +8,39 @@ import { RegisterEvents } from '../Register/interface';
 export interface GuardEvents extends LoginEvents, RegisterEvents, CompleteInfoEvents, ForgetPasswordEvents, IdentityBindingEvents, IdentityBindingAskEvents {
     onBeforeChangeModule?: (key: GuardModuleType, initData?: any) => boolean | Promise<boolean>;
 }
-export declare const guardEventsFilter: (props: any, openEventsMapping?: boolean | undefined) => GuardEvents;
+export declare const guardEventsFilter: (props: any, multipleInstance?: {
+    initStore: (appId: string, options: {
+        serverSideLoginMethods: import("./core/hooks/useMultipleAccounts").LoginWay[];
+        isInternationSms: boolean;
+    }) => void;
+    setLoginWay: (tab: "input" | "qrcode", way: import("./core/hooks/useMultipleAccounts").LoginWay, id?: string | undefined, internation?: {
+        phoneCountryCode: string;
+        areaCode: string;
+    } | undefined) => void;
+    setUserInfo: (user: Pick<import("./core/hooks/useMultipleAccounts").User & {
+        id: string;
+    }, "email" | "username" | "phone" | "photo" | "id" | "name" | "nickname" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+    setLoginWayByHttpData: (account: string, data: {
+        username?: string | undefined;
+        phone?: string | undefined;
+        email?: string | undefined;
+    }) => void;
+    setLoginWayByLDAPData: (account: string, data: {
+        name?: string | undefined;
+        phone?: string | undefined;
+        email?: string | undefined;
+    }) => void;
+    getMemoUser: (excludeWays?: import("./core/hooks/useMultipleAccounts").LoginWay[]) => import("../Login/multipleAccounts/panel").SelectOptions[];
+    getMemoSingleUser: (id: string) => {
+        way: import("./core/hooks/useMultipleAccounts").LoginWay;
+        account: string;
+    } | undefined;
+    delUserById: (id: string) => string;
+    getMemberState: () => boolean;
+    getFirstBackFillData: () => import("./core/hooks/useMultipleAccounts").BackFillMultipleState | undefined;
+    getOriginAccount: () => string;
+    getOriginWay: () => string;
+} | undefined, openEventsMapping?: boolean | undefined) => GuardEvents;
 export declare const guardEventsHijacking: (events: GuardEvents, openEventsMapping?: boolean | undefined) => GuardEvents;
 export declare const GuardEventsCamelToKebabMapping: {
     readonly onLoad: "load";

package/types/Login/core/withAD.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BackFillMultipleState, StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
 import { Agreement } from '../../Type/application';
 interface LoginWithADProps {
     publicKey: string;
@@ -7,6 +8,14 @@ interface LoginWithADProps {
     onLoginFailed: any;
     onBeforeLogin: any;
     agreements: Agreement[];
+    /**
+     * 回填的数据
+     */
+    backfillData?: BackFillMultipleState;
+    /**
+     * 根据输入的账号 & 返回获得对应的登录方法
+     */
+    multipleInstance?: StoreInstance;
 }
 export declare const LoginWithAD: (props: LoginWithADProps) => JSX.Element;
 export {};

package/types/Login/core/withAppQrcode.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
 interface LoginWithAppQrcodeProps {
     onLoginSuccess: any;
     canLoop: boolean;
     qrCodeScanOptions: any;
+    multipleInstance?: StoreInstance;
 }
 export declare const LoginWithAppQrcode: (props: LoginWithAppQrcodeProps) => JSX.Element;
 export {};

package/types/Login/core/withLDAP.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Agreement } from '../../Type/application';
+import { BackFillMultipleState, StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
 interface LoginWithLDAPProps {
     publicKey: string;
     autoRegister?: boolean;
@@ -8,6 +9,14 @@ interface LoginWithLDAPProps {
     onLoginFailed: any;
     onBeforeLogin: any;
     agreements: Agreement[];
+    /**
+     * 根据输入的账号 & 返回获得对应的登录方法
+     */
+    multipleInstance?: StoreInstance;
+    /**
+     * 多账号回填的数据
+     */
+    backfillData?: BackFillMultipleState;
 }
 export declare const LoginWithLDAP: (props: LoginWithLDAPProps) => JSX.Element;
 export {};

package/types/Login/core/withPassword/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { AuthingResponse } from '../../../_utils/http';
 import { Agreement, LoginMethods, PasswordLoginMethods } from '../../../Type/application';
+import { BackFillMultipleState, StoreInstance } from '../../../Guard/core/hooks/useMultipleAccounts';
 interface LoginWithPasswordProps {
     publicKey: string;
     autoRegister?: boolean;
@@ -14,6 +15,14 @@ interface LoginWithPasswordProps {
     loginWay?: LoginMethods;
     submitButText?: string;
     saveIdentify?: (type: LoginMethods, identity: string) => void;
+    /**
+     * 根据输入的账号 & 返回获得对应的登录方法
+     */
+    multipleInstance?: StoreInstance;
+    /**
+     * 多账号回填的数据
+     */
+    backfillData?: BackFillMultipleState;
 }
 export declare const LoginWithPassword: (props: LoginWithPasswordProps) => JSX.Element;
 export {};

package/types/Login/core/withVerifyCode/VirtualDropdown.d.ts

@@ -1,6 +1,10 @@
 import React, { FC } from 'react';
 import './styles.less';
 export interface VirtualDropdownProps {
+    /**
+     * 回填的国际化区号
+     */
+    regionCode?: string;
     value?: string;
     onChange?: (value: string) => void;
     style?: React.CSSProperties;

package/types/Login/core/withVerifyCode/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import './styles.less';
-export declare const LoginWithVerifyCode: (props: any) => JSX.Element;
+declare const LoginWithVerifyCode: (props: any) => JSX.Element;
+export { LoginWithVerifyCode };

package/types/Login/core/withWechatMiniQrcode.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
+import { StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
 interface LoginWithWechatMiniQrcodeProps {
     onLoginSuccess: any;
     canLoop: boolean;
     qrCodeScanOptions: any;
+    id: string;
+    multipleInstance?: StoreInstance;
 }
 export declare const LoginWithWechatMiniQrcode: (props: LoginWithWechatMiniQrcodeProps) => JSX.Element;
 export {};

package/types/Login/core/withWechatmpQrcode.d.ts

@@ -1,8 +1,14 @@
 /// <reference types="react" />
+import { StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
 interface LoginWithWechatmpQrcodeProps {
     onLoginSuccess: any;
     canLoop: boolean;
     qrCodeScanOptions: any;
+    id: string;
+    /**
+     * 多账号存储实例
+     */
+    multipleInstance?: StoreInstance;
 }
 export declare const LoginWithWechatmpQrcode: (props: LoginWithWechatmpQrcodeProps) => JSX.Element;
 export {};

package/types/Login/hooks/useLoginMultiple.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { FormInstance } from 'antd/lib/form';
+import { BackFillMultipleState, LoginWay } from '../../Guard/core/hooks/useMultipleAccounts';
+/**
+ * 多账号登录下 账户 & 登录方式自动回填
+ * TODO: HOOK 参数有时间整理成为对象，开始没有想到有这么多
+ * 调用地方 core 中需要回填的两个登录方式
+ */
+declare function useLoginMultipleBackFill(options: {
+    form: FormInstance<any>;
+    way: LoginWay;
+    formKey: string;
+    backfillData?: BackFillMultipleState;
+    isOnlyInternationSms?: boolean;
+    setAreaCode?: React.Dispatch<React.SetStateAction<string>>;
+    cancelBackfill?: boolean;
+}): void;
+/**
+ * 多账号统一状态管理
+ * @param setLoginWay
+ * @returns
+ */
+declare function useLoginMultiple(setLoginWay: React.Dispatch<any>): {
+    isMultipleAccount: boolean;
+    multipleInstance: {
+        initStore: (appId: string, options: {
+            serverSideLoginMethods: LoginWay[];
+            isInternationSms: boolean;
+        }) => void;
+        setLoginWay: (tab: "input" | "qrcode", way: LoginWay, id?: string | undefined, internation?: {
+            phoneCountryCode: string;
+            areaCode: string;
+        } | undefined) => void;
+        setUserInfo: (user: Pick<import("../../Guard/core/hooks/useMultipleAccounts").User & {
+            id: string;
+        }, "email" | "username" | "phone" | "photo" | "id" | "name" | "nickname" | "_updateTime" | "qrCodeId" | "areaCode">) => void;
+        setLoginWayByHttpData: (account: string, data: {
+            username?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        setLoginWayByLDAPData: (account: string, data: {
+            name?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        getMemoUser: (excludeWays?: LoginWay[]) => import("../multipleAccounts/panel").SelectOptions[];
+        getMemoSingleUser: (id: string) => {
+            way: LoginWay;
+            account: string;
+        } | undefined;
+        delUserById: (id: string) => string;
+        getMemberState: () => boolean;
+        getFirstBackFillData: () => BackFillMultipleState | undefined;
+        getOriginAccount: () => string;
+        getOriginWay: () => string;
+    } | undefined;
+    referMultipleState: ((type: "login" | "multiple") => void) | undefined;
+    backfillData: BackFillMultipleState | undefined;
+    defaultQrWay: string | undefined;
+};
+export { useLoginMultipleBackFill, useLoginMultiple };

package/types/Login/multipleAccounts/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LoginWay, StoreInstance } from '../../Guard/core/hooks/useMultipleAccounts';
+import { GuardModuleType } from '../../Guard';
+interface MultipleAccountsProps {
+    /**
+     * 多账号存储实例
+     */
+    multipleInstance?: StoreInstance;
+    /**
+     * 切换 Guard 方法
+     */
+    changeModule?: (moduleName: GuardModuleType, initData?: any) => Promise<void>;
+    /**
+     * 切换多账号状态
+     */
+    referMultipleState?: (type: 'login' | 'multiple', data?: {
+        account: string;
+        way: LoginWay;
+    }) => void;
+}
+declare const MultipleAccounts: React.NamedExoticComponent<MultipleAccountsProps>;
+export { MultipleAccounts };