llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-23 18:54:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve default captcha UI

Browse Source
This commit is contained in:
Gucheng Wang 2023-03-02 21:40:27 +08:00
parent e50c832ff9
commit ca1b5feb78
2 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
authz/authz.go
View File

@ -160,7 +160,7 @@ func IsAllowed(subOwner string, subName string, method string, urlPath string, o
func isAllowedInDemoMode(subOwner string, subName string, method string, urlPath string, objOwner string, objName string) bool { func isAllowedInDemoMode(subOwner string, subName string, method string, urlPath string, objOwner string, objName string) bool {
if method == "POST" { if method == "POST" {
if strings.HasPrefix(urlPath, "/api/login") || urlPath == "/api/logout" || urlPath == "/api/signup" || urlPath == "/api/send-verification-code" || urlPath == "/api/send-email" { if strings.HasPrefix(urlPath, "/api/login") || urlPath == "/api/logout" || urlPath == "/api/signup" || urlPath == "/api/send-verification-code" || urlPath == "/api/send-email" || urlPath == "/api/verify-captcha" {
return true return true
} else if urlPath == "/api/update-user" { } else if urlPath == "/api/update-user" {
// Allow ordinary users to update their own information // Allow ordinary users to update their own information

66
web/src/common/CaptchaModal.js
View File

@ -38,6 +38,7 @@ export const CaptchaModal = ({
const [captchaToken, setCaptchaToken] = React.useState(""); const [captchaToken, setCaptchaToken] = React.useState("");
const [secret, setSecret] = React.useState(clientSecret); const [secret, setSecret] = React.useState(clientSecret);
const [secret2, setSecret2] = React.useState(clientSecret2); const [secret2, setSecret2] = React.useState(clientSecret2);
const defaultInputRef = React.useRef(null);
useEffect(() => { useEffect(() => {
setVisible(() => { setVisible(() => {
@ -67,6 +68,8 @@ export const CaptchaModal = ({
if (captchaType === "Default") { if (captchaType === "Default") {
setSecret(res.captchaId); setSecret(res.captchaId);
setCaptchaImg(res.captchaImage); setCaptchaImg(res.captchaImage);
defaultInputRef.current?.focus();
} else { } else {
setSecret(res.clientSecret); setSecret(res.clientSecret);
setSecret2(res.clientSecret2); setSecret2(res.clientSecret2);
@ -76,28 +79,31 @@ export const CaptchaModal = ({
const renderDefaultCaptcha = () => { const renderDefaultCaptcha = () => {
return ( return (
<Col> <Col style={{textAlign: "center"}}>
<Row <div style={{display: "inline-block"}}>
style={{ <Row
backgroundImage: `url('data:image/png;base64,${captchaImg}')`, style={{
backgroundRepeat: "no-repeat", backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
height: "80px", backgroundRepeat: "no-repeat",
width: "200px", height: "80px",
borderRadius: "5px", width: "200px",
border: "1px solid #ccc", borderRadius: "5px",
marginBottom: 10, border: "1px solid #ccc",
}} marginBottom: "20px",
/> }}
<Row>
<Input
autoFocus
value={captchaToken}
prefix={<SafetyOutlined />}
placeholder={i18next.t("general:Captcha")}
onPressEnter={handleOk}
onChange={(e) => setCaptchaToken(e.target.value)}
/> />
</Row> <Row>
<Input
ref={defaultInputRef}
style={{width: "200px"}}
value={captchaToken}
prefix={<SafetyOutlined />}
placeholder={i18next.t("general:Captcha")}
onPressEnter={handleOk}
onChange={(e) => setCaptchaToken(e.target.value)}
/>
</Row>
</div>
</Col> </Col>
); );
}; };
@ -129,14 +135,22 @@ export const CaptchaModal = ({
}; };
const renderFooter = () => { const renderFooter = () => {
let isOkDisabled = false;
if (captchaType === "Default") {
const regex = /^\d{5}$/;
if (!regex.test(captchaToken)) {
isOkDisabled = true;
}
}
if (canCancel) { if (canCancel) {
return [ return [
<Button key="cancel" onClick={handleCancel}>{i18next.t("user:Cancel")}</Button>, <Button key="cancel" onClick={handleCancel}>{i18next.t("user:Cancel")}</Button>,
<Button key="ok" type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>, <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
]; ];
} else { } else {
return [ return [
<Button key="ok" type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>, <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
]; ];
} }
}; };
@ -152,7 +166,11 @@ export const CaptchaModal = ({
width={348} width={348}
footer={renderFooter()} footer={renderFooter()}
> >
{renderCheck()} <div style={{marginTop: "20px", marginBottom: "50px"}}>
{
renderCheck()
}
</div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>
); );