feat(invitation): 申请加入功能

packages/guard-core-v4/src/Guard/core/renderModule.tsx

@@ -77,6 +77,8 @@ import { GuardTenantPortalSelectView } from '../../TenantPortalSelect'
 import { GuardNewSubmitSuccessView } from '../../NewSubmitSuccess'
 
 import { i18n } from '../../_utils/locales'
+import { GuardApplicationView } from '../../Invitation/Application'
+import { GuardMessageView } from '../../Message'
 
 const { useEffect, useMemo } = React
 
@@ -210,10 +212,16 @@ export const RenderModule: React.FC<{
     [GuardModuleType.FLOW_SELECT_ACCOUNT]: key => (
       <GuardSelectAccountView key={key} />
     ),
-    [GuardModuleType.TENANT_PORTAL]: key => <GuardTenantPortalSelectView />,
+    [GuardModuleType.TENANT_PORTAL]: key => (
+      <GuardTenantPortalSelectView key={key} />
+    ),
     [GuardModuleType.New_SUBMIT_SUCCESS]: key => (
       <GuardNewSubmitSuccessView key={key} />
-    )
+    ),
+    [GuardModuleType.APPLY_INVITATION]: key => (
+      <GuardApplicationView key={key} />
+    ),
+    [GuardModuleType.MESSAGE]: key => <GuardMessageView key={key} />
   }
 
   // 初始化 请求拦截器 （Error Code）

packages/guard-core-v4/src/Guard/module.ts

@@ -25,7 +25,9 @@ export enum GuardModuleType {
   TENANT_PORTAL = 'tenant-portal',
   New_SUBMIT_SUCCESS = 'newSubmitSuccess', // 提交成功展示页
   SELECT_ACCOUNT_2_LOGIN = 'selectAccout2Login', // 选择登录身份
-  RESET_ACCOUNT_NAME = 'resetAccountName'
+  RESET_ACCOUNT_NAME = 'resetAccountName',
+  APPLY_INVITATION = 'applyInvitation',
+  MESSAGE = 'message'
 }
 export interface GuardModuleAction {
   action: string

packages/guard-core-v4/src/Invitation/Application/index.tsx

@@ -0,0 +1,167 @@
+import { React } from 'shim-react'
+import {
+  useGuardEvents,
+  useGuardFinallyConfig,
+  useGuardHttpClient,
+  useGuardInitData,
+  useGuardModule,
+  useGuardPublicConfig
+} from '../../_utils/context'
+import { Form, Input, Select, DatePicker, message } from 'shim-antd'
+
+import { ChangeLanguage } from '../../ChangeLanguage'
+import SubmitButton from '../../SubmitButton'
+import { useTranslation } from 'react-i18next'
+import CustomFormItem from '../../ValidatorRules'
+import { InputInternationPhone } from '../../Login/core/withVerifyCode/InputInternationPhone'
+import { InputNumber } from '../../InputNumber'
+import { IconFont } from '../../IconFont'
+import { useMediaSize } from '../../_utils/hooks'
+import './style.less'
+import { fieldRequiredRule, i18n, useGuardHttp } from '../../_utils'
+import { SendCodeByEmail } from '../../SendCode/SendCodeByEmail'
+import { EmailScene } from '../../Type'
+import { GuardModuleType } from '../../Guard'
+
+const { useRef, useState, useCallback, useEffect } = React
+
+export const GuardApplicationView = () => {
+  const { t } = useTranslation()
+
+  const config = useGuardFinallyConfig()
+  const events = useGuardEvents()
+  const initData = useGuardInitData<{ identifier: string }>()
+
+  const { changeModule } = useGuardModule()
+
+  const publicConfig = useGuardPublicConfig()
+
+  const { get, post } = useGuardHttp()
+
+  const [form] = Form.useForm()
+
+  let submitButtonRef = useRef<any>(null)
+
+  const verifyCodeLength = publicConfig?.verifyCodeLength
+
+  const [inviter, setInviter] = useState('')
+
+  const getConfig = useCallback(async () => {
+    const { data } = await get(
+      `/api/v3/get-universal-invitation-public-config?identifier=${initData?.identifier}`
+    )
+    setInviter(data.inviter.displayName)
+  }, [initData])
+
+  useEffect(() => {
+    getConfig()
+  }, [getConfig])
+
+  const onFinishHandle = async () => {
+    try {
+      submitButtonRef.current?.onSpin(true)
+      // await post('/aa', { ...form.getFieldsValue() })
+      changeModule?.(GuardModuleType.MESSAGE, {
+        message:
+          '你已完成加入「北京奥星科技有限公司」的申请。<br />请等待管理员审批通过后，你将收到邮件，敬请留意。'
+      })
+    } catch (error) {
+    } finally {
+      submitButtonRef.current?.onSpin(false)
+    }
+  }
+
+  return (
+    <div className="g2-view-container g2-view-invitation-apply">
+      <div className="g2-view-container-inner">
+        <div className="g2-view-header">
+          <img src={config?.logo} alt="" className="icon" />
+          <div className="g2-view-header-container">
+            <div className="invitation-welcome">
+              {inviter} {t('common.welcomeJoin')}
+            </div>
+            <div className="title">{config?.title}</div>
+          </div>
+        </div>
+
+        <div className="g2-view-content">
+          <Form
+            layout="vertical"
+            name="et-pre-check-email"
+            onFinish={onFinishHandle}
+            onFinishFailed={() => submitButtonRef.current.onError()}
+            autoComplete="off"
+            form={form}
+            className="authing-g2-form-required-item-icon-after"
+            // onValuesChange={formValuesChange}
+          >
+            <Form.Item
+              name="name"
+              label={t('common.name')}
+              rules={[{ required: true }]}
+              className="authing-g2-input-form"
+            >
+              <Input
+                type="text"
+                size="large"
+                className="authing-g2-input"
+                autoComplete="off"
+              />
+            </Form.Item>
+            <CustomFormItem.Email
+              className="authing-g2-input-form"
+              name="email"
+              checkRepeat={true}
+              label={i18n.t('common.email')}
+              key="internal email:email13"
+              validateFirst={true}
+              required
+            >
+              <Input
+                className="authing-g2-input"
+                autoComplete="email"
+                size="large"
+                placeholder={t('login.inputEmail') as string}
+              />
+            </CustomFormItem.Email>
+            <Form.Item
+              validateTrigger={['onBlur', 'onChange']}
+              className="authing-g2-input-form"
+              name="emailCode"
+              key="internal email:code1432"
+              rules={fieldRequiredRule(t('common.captchaCode'))}
+            >
+              <SendCodeByEmail
+                className="authing-g2-input g2-send-code-input"
+                autoComplete="one-time-code"
+                size="large"
+                placeholder={
+                  t('common.inputFourVerifyCode', {
+                    length: verifyCodeLength
+                  }) as string
+                }
+                maxLength={verifyCodeLength}
+                data={''}
+                scene={EmailScene.VERIFY_CODE}
+                fieldName="email"
+                form={form}
+                onSendCodeBefore={() => form.validateFields(['email'])}
+              />
+            </Form.Item>
+            <Form.Item className="authing-g2-sumbit-form">
+              <SubmitButton
+                text={t('common.applyJoin') as string}
+                className="password"
+                ref={submitButtonRef}
+              />
+            </Form.Item>
+          </Form>
+        </div>
+        <ChangeLanguage
+          langRange={config?.langRange}
+          onLangChange={events?.onLangChange}
+        />
+      </div>
+    </div>
+  )
+}

packages/guard-core-v4/src/Invitation/Application/style.less

@@ -0,0 +1,19 @@
+.g2-view-invitation-apply {
+  .g2-view-header {
+    display: flex;
+    &-container {
+      margin-left: 16px;
+      .invitation-welcome {
+        margin-bottom: 4px;
+        color: #545968;
+        font-size: 14px;
+      }
+      .title {
+        line-height: 1;
+      }
+    }
+  }
+  .g2-view-content {
+    padding: 0 38px;
+  }
+}

packages/guard-core-v4/src/Message/index.tsx

@@ -0,0 +1,54 @@
+import { React } from 'shim-react'
+
+import { i18n } from '../_utils/locales'
+
+import './styles.less'
+
+import { useGuardInitData, useGuardPublicConfig } from '../_utils/context'
+
+import { useGuardView } from '../Guard/core/hooks/useGuardView'
+
+const { useMemo } = React
+
+export interface MessageProps {
+  message?: React.ReactNode
+}
+
+export interface GuardMessageProps {
+  initData?: MessageProps
+}
+
+export const GuardMessageView: React.FC<MessageProps> = propsInitData => {
+  const guardXInitData = useGuardInitData<MessageProps>()
+
+  const publicConfig = useGuardPublicConfig()
+
+  useGuardView()
+
+  const messages = useMemo(() => {
+    const message = propsInitData?.message ?? guardXInitData?.message
+
+    return `${message}` ?? `${i18n.t('user.contactAdministrator')}`
+  }, [guardXInitData?.message, propsInitData?.message])
+
+  return (
+    <div className="g2-view-container g2-view-message">
+      <div className="g2-message-content">
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div
+            style={{
+              width: 135,
+              height: 103,
+              backgroundImage: `url(${publicConfig.cdnBase}/authing_message.svg)`,
+              backgroundSize: 'contain'
+            }}
+          />
+        </div>
+        <span
+          className="g2-message-text"
+          dangerouslySetInnerHTML={{ __html: messages }}
+        />
+      </div>
+    </div>
+  )
+}

packages/guard-core-v4/src/Message/styles.less

@@ -0,0 +1,17 @@
+.g2-message-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto 0;
+
+  .g2-message-text {
+    margin-top: 10px;
+    color: #545968;
+    font-size: 14px;
+  }
+  // .g2-error-message {
+  //   margin-top: 30px;
+  //   color: #545968;
+  //   font-size: 16px;
+  // }
+}

packages/guard-core-v4/src/Type/index.ts

@@ -136,5 +136,7 @@ export enum EmailScene {
   // - 邮箱解绑验证码
   EMAIL_UNBIND_VERIFY_CODE = 'EMAIL_UNBIND_VERIFY_CODE',
   // 自助解锁验证码
-  SELF_UNLOCKING_VERIFY_CODE = 'SELF_UNLOCKING_VERIFY_CODE'
+  SELF_UNLOCKING_VERIFY_CODE = 'SELF_UNLOCKING_VERIFY_CODE',
+  // 验证码模版
+  VERIFY_CODE = 'VERIFY_CODE'
 }

packages/guard-core-v4/src/_utils/locales/en-us/common.json

@@ -203,5 +203,8 @@
   "verify": "test and verify",
   "inputBusinessEmail": "Please enter your company email address",
   "inputCode": "Please enter the verification code",
-  "domainNotFound": "The current organization administrator has not set up a corporate email domain name. Please contact the administrator to set it up and join the organization."
+  "domainNotFound": "The current organization administrator has not set up a corporate email domain name. Please contact the administrator to set it up and join the organization.",
+  "name": "name",
+  "applyJoin": "Apply to join",
+  "welcomeJoin": "Inviting you to join"
 }

packages/guard-core-v4/src/_utils/locales/ja-jp/common.json

@@ -203,5 +203,8 @@
   "verify": "検証",
   "inputBusinessEmail": "エンタープライズメールアドレスを入力してください",
   "inputCode": "認証コードを入力してください",
-  "domainNotFound": "現在の組織管理者はエンタープライズメールアドレスのドメイン名を設定していません。管理者に連絡して設定してから組織に参加してください。"
+  "domainNotFound": "現在の組織管理者はエンタープライズメールアドレスのドメイン名を設定していません。管理者に連絡して設定してから組織に参加してください。",
+  "name": "名前",
+  "applyJoin": "加入申請",
+  "welcomeJoin": "あなたを招待します"
 }

packages/guard-core-v4/src/_utils/locales/zh-cn/common.json

@@ -203,5 +203,8 @@
   "verify": "验证",
   "inputBusinessEmail": "请输入企业邮箱",
   "inputCode": "请输入验证码",
-  "domainNotFound": "当前组织管理员未设置企业邮箱域名，请联系管理员设置后加入组织。"
+  "domainNotFound": "当前组织管理员未设置企业邮箱域名，请联系管理员设置后加入组织。",
+  "name": "姓名",
+  "applyJoin": "申请加入",
+  "welcomeJoin": "邀请你加入"
 }

packages/guard-core-v4/src/_utils/locales/zh-tw/common.json

@@ -201,5 +201,8 @@
   "verify": "驗證",
   "inputBusinessEmail": "請輸入企業郵箱",
   "inputCode": "請輸入驗證碼",
-  "domainNotFound": "當前組織管理員未設定企業郵箱功能變數名稱，請聯系管理員設定後加入組織。"
+  "domainNotFound": "當前組織管理員未設定企業郵箱功能變數名稱，請聯系管理員設定後加入組織。",
+  "name": "姓名",
+  "applyJoin": "申請加入",
+  "welcomeJoin": "邀請你加入"
 }