feat: add use terms in register page

pingcap-inc · Nov 10, 2021 · fa2b617 · fa2b617 · vercel · Nov 10, 2021
1 parent 6873f57
commit fa2b617
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/packages/accounts/src/app.css b/packages/accounts/src/app.css
@@ -11,3 +11,7 @@ body {
 #app {
   min-height: 100vh;
 }
+
+.no-wrap {
+  white-space: nowrap;
+}
diff --git a/packages/accounts/src/components/links.js b/packages/accounts/src/components/links.js
@@ -4,6 +4,7 @@ import { colors } from '@tidb-community/ui';
 
 export const RouteLink = styled(Link)`
   color: #aaa;
+  //white-space: nowrap;
 
   &:hover {
     color: ${colors.B1};

diff --git a/packages/accounts/src/pages/register/index.page.jsx b/packages/accounts/src/pages/register/index.page.jsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import { Checkbox, Form, FormItem, Input, AutoComplete } from 'formik-antd';
+import { AutoComplete, Checkbox, Form, FormItem, Input } from 'formik-antd';
 import { Formik } from 'formik';
-import { Link, withVerifyCode, RemoteAutoComplete } from '@tidb-community/ui';
+import { Link, RemoteAutoComplete, withVerifyCode } from '@tidb-community/ui';
 import { parse } from 'querystring';
 import { useLocation } from 'react-router-dom';
 import { utils } from '@tidb-community/common';
 
-import { Flex } from '~/components/layout';
 import { RouteLink } from '~/components/links';
 import { SimpleLayout } from '~/layout';
-import { SubmitButton, PhoneInputPrefix } from '~/components/form';
-import { signup as callSignup, fetchOrganizationOptions } from '~/api';
+import { PhoneInputPrefix, SubmitButton } from '~/components/form';
+import { fetchOrganizationOptions, signup as callSignup } from '~/api';
 import { form, formSchema, initialValues } from './register.form';
 import { handleError } from '~/utils/errors';
 
@@ -19,7 +18,7 @@ const { wrapFormikSubmitFunction } = utils.form;
 
 const VerifyInput = withVerifyCode(Input);
 
-const { privacy, prefixText: agreementsPrefixText, ...agreementsProps } = agreements;
+const { privacy, terms, prefixText: agreementsPrefixText, ...agreementsProps } = agreements;
 
 const Page = () => {
   const location = useLocation();
@@ -60,17 +59,20 @@ const Page = () => {
               size="large"
             />
           </FormItem>
-          <Flex>
-            <FormItem name={agreements.name}>
-              <Checkbox {...agreementsProps}>
-                {agreementsPrefixText}
-                <Link href={privacy.url}>{privacy.title}</Link>
-              </Checkbox>
-            </FormItem>
-            <RouteLink to={`/login${location.search}`} style={{ lineHeight: '32px' }}>
-              已有账号？去登录
-            </RouteLink>
-          </Flex>
+          <FormItem name={agreements.name}>
+            <Checkbox {...agreementsProps}>
+              {agreementsPrefixText}
+              <Link href={privacy.url}>
+                <span className="no-wrap">{privacy.title}</span>
+              </Link>
+              <Link href={terms.url}>
+                <span className="no-wrap">{terms.title}</span>
+              </Link>
+            </Checkbox>
+          </FormItem>
+          <RouteLink to={`/login${location.search}`} style={{ lineHeight: '36px' }}>
+            <span className="no-wrap">已有账号？去登录</span>
+          </RouteLink>
           <SubmitButton>注册</SubmitButton>
         </Form>
       )}

diff --git a/packages/accounts/src/pages/register/register.form.js b/packages/accounts/src/pages/register/register.form.js
@@ -22,6 +22,10 @@ export const form = {
       title: '《隐私协议》',
       url: 'https://pingcap.com/zh/privacy-policy/',
     },
+    terms: {
+      title: '《使用条款》',
+      url: 'https://pingcap.com/zh/terms-of-use',
+    },
     validator: Yup.bool().oneOf([true], '需阅读并同意相关协议').required('需阅读并同意相关协议'),
     initialValue: false,
   },