llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 05:10:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve UI.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/ResetModal.js
View File

@ -18,6 +18,7 @@ import React from "react";
import * as Setting from "./Setting" import * as Setting from "./Setting"
import * as UserBackend from "./backend/UserBackend" import * as UserBackend from "./backend/UserBackend"
import {CountDownInput} from "./component/CountDownInput"; import {CountDownInput} from "./component/CountDownInput";
import {MailOutlined, PhoneOutlined} from "@ant-design/icons";
export const ResetModal = (props) => { export const ResetModal = (props) => {
const [visible, setVisible] = React.useState(false); 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}}> <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
<Row style={{width: "100%", marginBottom: "20px"}}> <Row style={{width: "100%", marginBottom: "20px"}}>
<Input <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} placeholder={placeHolder}
onChange={e => setDest(e.target.value)} onChange={e => setDest(e.target.value)}
/> />

6
web/src/auth/ForgetPage.js
View File

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

23
web/src/component/CountDownInput.js
View File

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