Improve UI.

This commit is contained in:
Gucheng Wang
2021-11-28 20:18:03 +08:00
parent c10ccd8106
commit 36b7993994
3 changed files with 12 additions and 21 deletions

View File

@ -18,6 +18,7 @@ import React from "react";
import * as Setting from "./Setting"
import * as UserBackend from "./backend/UserBackend"
import {CountDownInput} from "./component/CountDownInput";
import {MailOutlined, PhoneOutlined} from "@ant-design/icons";
export const ResetModal = (props) => {
const [visible, setVisible] = React.useState(false);
@ -78,7 +79,8 @@ export const ResetModal = (props) => {
<Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
<Row style={{width: "100%", marginBottom: "20px"}}>
<Input
addonBefore={i18next.t("user:New " + destType)}
addonBefore={destType === "email" ? i18next.t("user:New Email") : i18next.t("user:New phone")}
prefix={destType === "email" ? <MailOutlined /> : <PhoneOutlined />}
placeholder={placeHolder}
onChange={e => setDest(e.target.value)}
/>

View File

@ -13,7 +13,7 @@
// limitations under the License.
import React from "react";
import {Button, Col, Divider, Form, Select, Input, Row, Steps} from "antd";
import {Button, Col, Form, Select, Input, Row, Steps} from "antd";
import * as AuthBackend from "./AuthBackend";
import * as ApplicationBackend from "../backend/ApplicationBackend";
import * as Util from "./Util";
@ -174,13 +174,13 @@ class ForgetPage extends React.Component {
if (this.state.phone !== "") {
options.push(
<Option key={"phone"} value={"phone"}>
{Setting.getMaskedPhone(this.state.phone)}
&nbsp;&nbsp;{Setting.getMaskedPhone(this.state.phone)}
</Option>
);
} else if (this.state.email !== "") {
options.push(
<Option key={"email"} value={"email"}>
{Setting.getMaskedEmail(this.state.email)}
&nbsp;&nbsp;{Setting.getMaskedEmail(this.state.email)}
</Option>
);
}

View File

@ -17,12 +17,12 @@ import React from "react";
import * as Setting from "../Setting";
import i18next from "i18next";
import * as UserBackend from "../backend/UserBackend";
import { AuditOutlined, VerifiedOutlined } from "@ant-design/icons";
import {SafetyOutlined} from "@ant-design/icons";
const { Search } = Input;
export const CountDownInput = (props) => {
const {defaultButtonText, disabled, prefix, textBefore, placeHolder, onChange, coolDownTime, onButtonClick, onButtonClickArgs} = props;
const {defaultButtonText, disabled, textBefore, placeHolder, onChange, coolDownTime, onButtonClick, onButtonClickArgs} = props;
const [buttonText, setButtonText] = React.useState(defaultButtonText);
const [visible, setVisible] = React.useState(false);
const [key, setKey] = React.useState("");
@ -90,7 +90,7 @@ export const CountDownInput = (props) => {
}}
/>
<Row>
<Input autoFocus value={key} placeholder={i18next.t("general:Captcha")} onPressEnter={handleOk} onChange={e => setKey(e.target.value)} />
<Input autoFocus value={key} prefix={<SafetyOutlined />} placeholder={i18next.t("general:Captcha")} onPressEnter={handleOk} onChange={e => setKey(e.target.value)} />
</Row>
</Col>
)
@ -101,23 +101,12 @@ export const CountDownInput = (props) => {
return null;
}
const getIcon = (prefix) => {
switch (prefix) {
case "VerifiedOutlined":
return <VerifiedOutlined />;
case "AuditOutlined":
return <AuditOutlined />;
default:
return null;
}
};
return (
<div>
<React.Fragment>
<Search
addonBefore={textBefore}
disabled={disabled}
prefix={prefix !== null ? getIcon(prefix) : null}
prefix={<SafetyOutlined />}
placeholder={placeHolder}
onChange={e => onChange(e.target.value)}
enterButton={
@ -146,6 +135,6 @@ export const CountDownInput = (props) => {
renderCheck()
}
</Modal>
</div>
</React.Fragment>
);
}