llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-09-10 21:30:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reduce CountDownInput args.

Browse Source
This commit is contained in:
Gucheng Wang
2021-11-28 20:57:14 +08:00
parent 36b7993994
commit d224e728a3
6 changed files with 20 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/ResetModal.js
View File

@@ -25,7 +25,7 @@ export const ResetModal = (props) => {
const [confirmLoading, setConfirmLoading] = React.useState(false); const [confirmLoading, setConfirmLoading] = React.useState(false);
const [dest, setDest] = React.useState(""); const [dest, setDest] = React.useState("");
const [code, setCode] = React.useState(""); const [code, setCode] = React.useState("");
const {buttonText, destType, coolDownTime, org} = props; const {buttonText, destType, org} = props;
const showModal = () => { const showModal = () => {
setVisible(true); setVisible(true);
@@ -87,13 +87,9 @@ export const ResetModal = (props) => {
</Row> </Row>
<Row style={{width: "100%", marginBottom: "20px"}}> <Row style={{width: "100%", marginBottom: "20px"}}>
<CountDownInput <CountDownInput
defaultButtonText={i18next.t("code:Send Code")}
textBefore={i18next.t("code:Code You Received")} textBefore={i18next.t("code:Code You Received")}
placeHolder={i18next.t("code:Enter your code")}
onChange={setCode} onChange={setCode}
onButtonClick={UserBackend.sendCode} onButtonClickArgs={[dest, destType, `${org?.owner}/${org?.name}`]}
onButtonClickArgs={[dest, destType, org?.owner + "/" + org?.name]}
coolDownTime={coolDownTime}
/> />
</Row> </Row>
</Col> </Col>

4
web/src/Setting.js
View File

@@ -550,3 +550,7 @@ export function getTags(tags) {
}); });
return res; return res;
} }
export function getApplicationOrgName(application) {
return `${application?.organizationObj.owner}/${application?.organizationObj.name}`;
}

4
web/src/UserEditPage.js
View File

@@ -212,7 +212,7 @@ class UserEditPage extends React.Component {
<Input value={this.state.user.email} disabled /> <Input value={this.state.user.email} disabled />
</Col> </Col>
<Col span={11} > <Col span={11} >
{ this.state.user.id === this.props.account?.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Email...")} destType={"email"} coolDownTime={60}/>) : null} { this.state.user.id === this.props.account?.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Email...")} destType={"email"} />) : null}
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >
@@ -223,7 +223,7 @@ class UserEditPage extends React.Component {
<Input value={this.state.user.phone} addonBefore={`+${this.state.application?.organizationObj.phonePrefix}`} disabled /> <Input value={this.state.user.phone} addonBefore={`+${this.state.application?.organizationObj.phonePrefix}`} disabled />
</Col> </Col>
<Col span={11} > <Col span={11} >
{ this.state.user.id === this.props.account?.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} coolDownTime={60}/>) : null} { this.state.user.id === this.props.account?.id ? (<ResetModal org={this.state.application?.organizationObj} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} />) : null}
</Col> </Col>
</Row> </Row>
<Row style={{marginTop: '20px'}} > <Row style={{marginTop: '20px'}} >

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

@@ -341,33 +341,13 @@ class ForgetPage extends React.Component {
> >
{this.state.verifyType === "email" ? ( {this.state.verifyType === "email" ? (
<CountDownInput <CountDownInput
disabled={this.state.username === "" || this.state.verifyType === ""} disabled={this.state.username === "" || this.state.verifyType === ""}
placeHolder={i18next.t("code:Verify code")} onButtonClickArgs={[this.state.email, "email", Setting.getApplicationOrgName(this.state.application)]}
defaultButtonText={i18next.t("code:Send Code")}
onButtonClick={UserBackend.sendCode}
onButtonClickArgs={[
this.state.email,
"email",
this.state.application?.organizationObj.owner +
"/" +
this.state.application?.organizationObj.name,
]}
coolDownTime={60}
/> />
) : ( ) : (
<CountDownInput <CountDownInput
disabled={this.state.username === "" || this.state.verifyType === ""} disabled={this.state.username === "" || this.state.verifyType === ""}
placeHolder={i18next.t("code:Verify code")} onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationOrgName(this.state.application)]}
defaultButtonText={i18next.t("code:Send Code")}
onButtonClick={UserBackend.sendCode}
onButtonClickArgs={[
this.state.phone,
"phone",
this.state.application?.organizationObj.owner +
"/" +
this.state.application?.organizationObj.name,
]}
coolDownTime={60}
/> />
)} )}
</Form.Item> </Form.Item>

11
web/src/auth/SignupPage.js
View File

@@ -21,7 +21,6 @@ import i18next from "i18next";
import * as Util from "./Util"; import * as Util from "./Util";
import {authConfig} from "./Auth"; import {authConfig} from "./Auth";
import * as ApplicationBackend from "../backend/ApplicationBackend"; import * as ApplicationBackend from "../backend/ApplicationBackend";
import * as UserBackend from "../backend/UserBackend";
import {CountDownInput} from "../component/CountDownInput"; import {CountDownInput} from "../component/CountDownInput";
import SelectRegionBox from "../SelectRegionBox"; import SelectRegionBox from "../SelectRegionBox";
import CustomGithubCorner from "../CustomGithubCorner"; import CustomGithubCorner from "../CustomGithubCorner";
@@ -280,10 +279,7 @@ class SignupPage extends React.Component {
> >
<CountDownInput <CountDownInput
disabled={!this.state.validEmail} disabled={!this.state.validEmail}
defaultButtonText={i18next.t("code:Send Code")} onButtonClickArgs={[this.state.email, "email", Setting.getApplicationOrgName(application)]}
onButtonClick={UserBackend.sendCode}
onButtonClickArgs={[this.state.email, "email", application?.organizationObj.owner + "/" + application?.organizationObj.name]}
coolDownTime={60}
/> />
</Form.Item> </Form.Item>
</React.Fragment> </React.Fragment>
@@ -334,10 +330,7 @@ class SignupPage extends React.Component {
> >
<CountDownInput <CountDownInput
disabled={!this.state.validPhone} disabled={!this.state.validPhone}
defaultButtonText={i18next.t("code:Send Code")} onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationOrgName(application)]}
onButtonClick={UserBackend.sendCode}
onButtonClickArgs={[this.state.phone, "phone", application.organizationObj.owner + "/" + application.organizationObj.name]}
coolDownTime={60}
/> />
</Form.Item> </Form.Item>
</React.Fragment> </React.Fragment>

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

@@ -22,35 +22,29 @@ import {SafetyOutlined} from "@ant-design/icons";
const { Search } = Input; const { Search } = Input;
export const CountDownInput = (props) => { export const CountDownInput = (props) => {
const {defaultButtonText, disabled, textBefore, placeHolder, onChange, coolDownTime, onButtonClick, onButtonClickArgs} = props; const {disabled, textBefore, onChange, onButtonClickArgs} = props;
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("");
const [captchaImg, setCaptchaImg] = React.useState(""); const [captchaImg, setCaptchaImg] = React.useState("");
const [checkType, setCheckType] = React.useState(""); const [checkType, setCheckType] = React.useState("");
// const [coolDown, setCoolDown] = React.useState(false);
const [checkId, setCheckId] = React.useState(""); const [checkId, setCheckId] = React.useState("");
const [buttonDisabled, setButtonDisabled] = React.useState(false); const [buttonDisabled, setButtonDisabled] = React.useState(false);
const countDown = (leftTime) => { const countDown = (leftTime) => {
if (leftTime === 0) { if (leftTime === 0) {
setButtonDisabled(false); setButtonDisabled(false);
// setCoolDown(false);
setButtonText(defaultButtonText);
return; return;
} }
setButtonText(`${leftTime} s`);
setTimeout(() => countDown(leftTime - 1), 1000); setTimeout(() => countDown(leftTime - 1), 1000);
} }
const handleOk = () => { const handleOk = () => {
setVisible(false); setVisible(false);
onButtonClick(checkType, checkId, key, ...onButtonClickArgs).then(res => { UserBackend.sendCode(checkType, checkId, key, ...onButtonClickArgs).then(res => {
setKey(""); setKey("");
if (res) { if (res) {
// setCoolDown(true);
setButtonDisabled(true) setButtonDisabled(true)
countDown(coolDownTime); countDown(60);
} }
}) })
} }
@@ -63,7 +57,7 @@ export const CountDownInput = (props) => {
const loadHumanCheck = () => { const loadHumanCheck = () => {
UserBackend.getHumanCheck().then(res => { UserBackend.getHumanCheck().then(res => {
if (res.type === "none") { if (res.type === "none") {
onButtonClick("none", "", "", ...onButtonClickArgs); UserBackend.sendCode("none", "", "", ...onButtonClickArgs);
} else if (res.type === "captcha") { } else if (res.type === "captcha") {
setCheckId(res.captchaId); setCheckId(res.captchaId);
setCaptchaImg(res.captchaImage); setCaptchaImg(res.captchaImage);
@@ -107,12 +101,12 @@ export const CountDownInput = (props) => {
addonBefore={textBefore} addonBefore={textBefore}
disabled={disabled} disabled={disabled}
prefix={<SafetyOutlined />} prefix={<SafetyOutlined />}
placeholder={placeHolder} placeholder={i18next.t("code:Enter your code")}
onChange={e => onChange(e.target.value)} onChange={e => onChange(e.target.value)}
enterButton={ enterButton={
<Button type={"primary"} disabled={disabled || buttonDisabled}> <Button type={"primary"} disabled={disabled || buttonDisabled}>
<div style={{fontSize: 14}}> <div style={{fontSize: 14}}>
{buttonText} {i18next.t("code:Send Code")}
</div> </div>
</Button> </Button>
} }