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

Add loading and countdown status to the verification code sending button

Browse Source
This commit is contained in:
jianmaikj
2021-12-21 12:58:01 +08:00
parent 7cfece3019
commit 782b9e229a
3 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,14 +30,21 @@ export const CountDownInput = (props) => {
const [captchaImg, setCaptchaImg] = React.useState(""); const [captchaImg, setCaptchaImg] = React.useState("");
const [checkType, setCheckType] = React.useState(""); const [checkType, setCheckType] = React.useState("");
const [checkId, setCheckId] = React.useState(""); const [checkId, setCheckId] = React.useState("");
const [buttonDisabled, setButtonDisabled] = React.useState(false); const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
const [buttonLoading, setButtonLoading] = React.useState(false);
const countDown = (leftTime) => { const handleCountDown = (leftTime = 60) => {
if (leftTime === 0) { let leftTimeSecond = leftTime
setButtonDisabled(false); setButtonLeftTime(leftTimeSecond)
const countDown = () => {
leftTimeSecond--;
setButtonLeftTime(leftTimeSecond)
if (leftTimeSecond === 0) {
return; return;
} }
setTimeout(() => countDown(leftTime - 1), 1000); setTimeout(countDown, 1000);
}
setTimeout(countDown, 1000);
} }
const handleOk = () => { const handleOk = () => {
@ -50,11 +57,12 @@ export const CountDownInput = (props) => {
Util.showMessage("error", i18next.t("login:Invalid Email or phone")) Util.showMessage("error", i18next.t("login:Invalid Email or phone"))
return; return;
} }
setButtonLoading(true)
UserBackend.sendCode(checkType, checkId, key, ...onButtonClickArgs).then(res => { UserBackend.sendCode(checkType, checkId, key, ...onButtonClickArgs).then(res => {
setKey(""); setKey("");
setButtonLoading(false)
if (res) { if (res) {
setButtonDisabled(true) handleCountDown(60);
countDown(60);
} }
}) })
} }
@ -94,7 +102,8 @@ export const CountDownInput = (props) => {
}} }}
/> />
<Row> <Row>
<Input autoFocus value={key} prefix={<SafetyOutlined />} 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>
) )
@ -114,10 +123,9 @@ export const CountDownInput = (props) => {
placeholder={i18next.t("code:Enter your code")} 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 style={{fontSize: 14}} type={"primary"} disabled={disabled || buttonLeftTime > 0}
<div style={{fontSize: 14}}> loading={buttonLoading}>
{i18next.t("code:Send Code")} {buttonLeftTime > 0 ? `${buttonLeftTime} s` : buttonLoading ? i18next.t("code:Sending Code") : i18next.t("code:Send Code")}
</div>
</Button> </Button>
} }
onSearch={loadHumanCheck} onSearch={loadHumanCheck}

3
web/src/locales/en/data.json
View File

@ -40,7 +40,8 @@
"Please input your phone verification code!": "Please input your phone verification code!", "Please input your phone verification code!": "Please input your phone verification code!",
"Please input your verification code!": "Please input your verification code!", "Please input your verification code!": "Please input your verification code!",
"Send Code": "Send Code", "Send Code": "Send Code",
"Submit and complete": "Submit and complete" "Submit and complete": "Submit and complete",
"Sending Code": "Sending"
}, },
"forget": { "forget": {
"Account": "Account", "Account": "Account",

3
web/src/locales/zh/data.json
View File

@ -40,7 +40,8 @@
"Please input your phone verification code!": "请输入您的手机验证码！", "Please input your phone verification code!": "请输入您的手机验证码！",
"Please input your verification code!": "请输入您的验证码！", "Please input your verification code!": "请输入您的验证码！",
"Send Code": "发送验证码", "Send Code": "发送验证码",
"Submit and complete": "完成提交" "Submit and complete": "完成提交",
"Sending Code": "发送中"
}, },
"forget": { "forget": {
"Account": "账号", "Account": "账号",