mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-04 13:20:19 +08:00
Improve UI.
This commit is contained in:
@ -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)}
|
||||
/>
|
||||
|
@ -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)}
|
||||
{Setting.getMaskedPhone(this.state.phone)}
|
||||
</Option>
|
||||
);
|
||||
} else if (this.state.email !== "") {
|
||||
options.push(
|
||||
<Option key={"email"} value={"email"}>
|
||||
{Setting.getMaskedEmail(this.state.email)}
|
||||
{Setting.getMaskedEmail(this.state.email)}
|
||||
</Option>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user