llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-23 02:35:49 +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
Show Stats 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 [dest, setDest] = React.useState("");
const [code, setCode] = React.useState("");
const {buttonText, destType, coolDownTime, org} = props;
const {buttonText, destType, org} = props;
const showModal = () => {
setVisible(true);
@ -87,13 +87,9 @@ export const ResetModal = (props) => {
</Row>
<Row style={{width: "100%", marginBottom: "20px"}}>
<CountDownInput
defaultButtonText={i18next.t("code:Send Code")}
textBefore={i18next.t("code:Code You Received")}
placeHolder={i18next.t("code:Enter your code")}
onChange={setCode}
onButtonClick={UserBackend.sendCode}
onButtonClickArgs={[dest, destType, org?.owner + "/" + org?.name]}
coolDownTime={coolDownTime}
onButtonClickArgs={[dest, destType, `${org?.owner}/${org?.name}`]}
/>
</Row>
</Col>

4
web/src/Setting.js
View File

@ -550,3 +550,7 @@ export function getTags(tags) {
});
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 />
</Col>
<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>
</Row>
<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 />
</Col>
<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>
</Row>
<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" ? (
<CountDownInput
disabled={this.state.username === "" || this.state.verifyType === ""}
placeHolder={i18next.t("code:Verify code")}
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}
disabled={this.state.username === "" || this.state.verifyType === ""}
onButtonClickArgs={[this.state.email, "email", Setting.getApplicationOrgName(this.state.application)]}
/>
) : (
<CountDownInput
disabled={this.state.username === "" || this.state.verifyType === ""}
placeHolder={i18next.t("code:Verify code")}
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}
disabled={this.state.username === "" || this.state.verifyType === ""}
onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationOrgName(this.state.application)]}
/>
)}
</Form.Item>

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

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

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

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