This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/next by this push:
new c2c07b5 feature: change login page (#171)
c2c07b5 is described below
commit c2c07b5361f83772a35de39a583c01c3f3b2d5a9
Author: bzp2010 <[email protected]>
AuthorDate: Thu Apr 9 19:23:23 2020 +0800
feature: change login page (#171)
fix: user login fake function
---
src/locales/en-US/component.ts | 9 +++++
src/locales/zh-CN/component.ts | 11 ++++++-
src/pages/user/login/index.tsx | 75 +++++++++---------------------------------
src/services/login.ts | 12 ++++---
src/services/user.ts | 3 +-
5 files changed, 44 insertions(+), 66 deletions(-)
diff --git a/src/locales/en-US/component.ts b/src/locales/en-US/component.ts
index 0157420..1133865 100644
--- a/src/locales/en-US/component.ts
+++ b/src/locales/en-US/component.ts
@@ -15,6 +15,15 @@ export default {
'component.global.edit.plugin': 'Edit plugin',
'component.status.success': 'Successfully',
'component.status.fail': 'Failed',
+ // User component
+ 'component.user.loginByPassword': 'Username & Password',
+ 'component.user.login': 'Login',
+ 'component.user.username': 'Username',
+ 'component.user.password': 'Password',
+ 'component.user.rememberMe': 'Remember Me',
+ 'component.user.inputUsername': 'Please input username!',
+ 'component.user.inputPassword': 'Please input password!',
+ 'component.user.wrongUsernameOrPassword': 'Wrong account or password!',
// SSL Module
'component.ssl.removeSSLItemModalContent': 'You are going to remove this
item!',
'component.ssl.removeSSLItemModalTitle': 'SSL Remove Alert',
diff --git a/src/locales/zh-CN/component.ts b/src/locales/zh-CN/component.ts
index 5999e3c..3a73156 100644
--- a/src/locales/zh-CN/component.ts
+++ b/src/locales/zh-CN/component.ts
@@ -15,7 +15,16 @@ export default {
'component.global.edit.plugin': '编辑插件',
'component.status.success': '成功',
'component.status.fail': '失败',
- // SSL 模块
+ // User component
+ 'component.user.loginByPassword': '账号密码登录',
+ 'component.user.login': '登录',
+ 'component.user.username': '账号',
+ 'component.user.password': '密码',
+ 'component.user.rememberMe': '自动登录',
+ 'component.user.inputUsername': '请输入账号！',
+ 'component.user.inputPassword': '请输入密码！',
+ 'component.user.wrongUsernameOrPassword': '账号或密码错误！',
+ // SSL Module
'component.ssl.removeSSLItemModalContent': '确定要移除该项吗？',
'component.ssl.removeSSLItemModalTitle': '移除 SSL',
'component.ssl.fetchSSLListSuccess': '获取 SSL 列表成功',
diff --git a/src/pages/user/login/index.tsx b/src/pages/user/login/index.tsx
index a553315..de529b7 100644
--- a/src/pages/user/login/index.tsx
+++ b/src/pages/user/login/index.tsx
@@ -1,9 +1,8 @@
-import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined }
from '@ant-design/icons';
import { Alert, Checkbox } from 'antd';
import React, { useState } from 'react';
import { Dispatch, AnyAction } from 'redux';
-import { Link } from 'umi';
import { connect } from 'dva';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import { StateType } from '@/models/login';
import { LoginParamsType } from '@/services/login';
import { ConnectState } from '@/models/connect';
@@ -11,7 +10,7 @@ import LoginFrom from './components/Login';
import styles from './style.less';
-const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginFrom;
+const { Tab, UserName, Password, Submit } = LoginFrom;
interface LoginProps {
dispatch: Dispatch<AnyAction>;
userLogin: StateType;
@@ -47,86 +46,44 @@ const Login: React.FC<LoginProps> = props => {
return (
<div className={styles.main}>
<LoginFrom activeKey={type} onTabChange={setType}
onSubmit={handleSubmit}>
- <Tab key="account" tab="账户密码登录">
+ <Tab key="account" tab={formatMessage({ id:
'component.user.loginByPassword' })}>
{status === 'error' && loginType === 'account' && !submitting && (
- <LoginMessage content="账户或密码错误（admin/ant.design）" />
+ <LoginMessage
+ content={formatMessage({ id:
'component.user.wrongUsernameOrPassword' })}
+ />
)}
<UserName
name="userName"
- placeholder="用户名: admin or user"
+ placeholder={formatMessage({ id: 'component.user.username' })}
+ defaultValue="admin"
rules={[
{
required: true,
- message: '请输入用户名!',
+ message: formatMessage({ id: 'component.user.inputUsername' }),
},
]}
/>
<Password
name="password"
- placeholder="密码: ant.design"
+ placeholder={formatMessage({ id: 'component.user.password' })}
+ defaultValue="123456"
rules={[
{
required: true,
- message: '请输入密码！',
- },
- ]}
- />
- </Tab>
- <Tab key="mobile" tab="手机号登录">
- {status === 'error' && loginType === 'mobile' && !submitting && (
- <LoginMessage content="验证码错误" />
- )}
- <Mobile
- name="mobile"
- placeholder="手机号"
- rules={[
- {
- required: true,
- message: '请输入手机号！',
- },
- {
- pattern: /^1\d{10}$/,
- message: '手机号格式错误！',
- },
- ]}
- />
- <Captcha
- name="captcha"
- placeholder="验证码"
- countDown={120}
- getCaptchaButtonText=""
- getCaptchaSecondText="秒"
- rules={[
- {
- required: true,
- message: '请输入验证码！',
+ message: formatMessage({ id: 'component.user.inputPassword' }),
},
]}
/>
</Tab>
<div>
<Checkbox checked={autoLogin} onChange={e =>
setAutoLogin(e.target.checked)}>
- 自动登录
+ <FormattedMessage id="component.user.rememberMe" />
</Checkbox>
- <a
- style={{
- float: 'right',
- }}
- >
- 忘记密码
- </a>
- </div>
- <Submit loading={submitting}>登录</Submit>
- <div className={styles.other}>
- 其他登录方式
- <AlipayCircleOutlined className={styles.icon} />
- <TaobaoCircleOutlined className={styles.icon} />
- <WeiboCircleOutlined className={styles.icon} />
- <Link className={styles.register} to="/user/register">
- 注册账户
- </Link>
</div>
+ <Submit loading={submitting}>
+ <FormattedMessage id="component.user.login" />
+ </Submit>
</LoginFrom>
</div>
);
diff --git a/src/services/login.ts b/src/services/login.ts
index 5c694df..a033215 100644
--- a/src/services/login.ts
+++ b/src/services/login.ts
@@ -7,11 +7,13 @@ export interface LoginParamsType {
captcha: string;
}
-export async function fakeAccountLogin(params: LoginParamsType) {
- return request('/api/login/account', {
- method: 'POST',
- data: params,
- });
+export async function fakeAccountLogin() {
+ // NOTE: APISIX doesn‘t support user login currently, we return fake data
directly.
+ return {
+ status: 'ok',
+ type: 'account',
+ currentAuthority: 'admin',
+ };
}
export async function getFakeCaptcha(mobile: string) {
diff --git a/src/services/user.ts b/src/services/user.ts
index 1e5fec8..de49698 100644
--- a/src/services/user.ts
+++ b/src/services/user.ts
@@ -8,7 +8,8 @@ export async function queryCurrent(): Promise<any> {
// NOTE: APISIX doesn‘t support user login currently, we return fake data
directly.
return {
name: 'APISIX User',
- avatar: 'favicon.png',
+ avatar:
+
'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmlld0JveD0iMCAwIDUwMCA1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxkZWZzPg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iaWQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjI1MTE5LjgiIHkxPSIxMTA1Mi41IiB4Mj0iMjE3MjUuNyIgeTI9IjIxNTUxLjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMC4wMjgwOTUsIDAsIDAsIDAuMDI4MDk1LCAtNDkyLjg2NzA5NiwgLTE0NC43Njk4MjEpIj4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29
[...]
userid: '00000001',
};
}
