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

feat: support more field in signup page

Browse Source
This commit is contained in:
okatu-loli
2024-09-24 16:08:50 +08:00
parent db878a890e
commit 96a03de8d3
2 changed files with 108 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
web/src/auth/SignupPage.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, Form, Input, Radio, Result, Row, message} from "antd"; import {Button, Form, Input, Radio, Result, Row, Select, message} from "antd";
import * as Setting from "../Setting"; import * as Setting from "../Setting";
import * as AuthBackend from "./AuthBackend"; import * as AuthBackend from "./AuthBackend";
import * as ProviderButton from "./ProviderButton"; import * as ProviderButton from "./ProviderButton";
@ -198,6 +198,10 @@ class SignupPage extends React.Component {
onFinish(values) { onFinish(values) {
const application = this.getApplicationObj(); const application = this.getApplicationObj();
if (Array.isArray(values.gender)) {
values.gender = values.gender.join(", ");
}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
values.plan = params.get("plan"); values.plan = params.get("plan");
values.pricing = params.get("pricing"); values.pricing = params.get("pricing");
@ -366,7 +370,9 @@ class SignupPage extends React.Component {
}, },
]} ]}
> >
<RegionSelect className="signup-region-select" onChange={(value) => {this.setState({region: value});}} /> <RegionSelect className="signup-region-select" onChange={(value) => {
this.setState({region: value});
}} />
</Form.Item> </Form.Item>
); );
} else if (signupItem.name === "Email" || signupItem.name === "Phone" || signupItem.name === "Email or Phone" || signupItem.name === "Phone or Email") { } else if (signupItem.name === "Email" || signupItem.name === "Phone" || signupItem.name === "Email or Phone" || signupItem.name === "Phone or Email") {
@ -403,27 +409,29 @@ class SignupPage extends React.Component {
}, },
]} ]}
> >
<Input className="signup-email-input" placeholder={signupItem.placeholder} disabled={this.state.invitation !== undefined && this.state.invitation.email !== ""} onChange={e => this.setState({email: e.target.value})} /> <Input className="signup-email-input" placeholder={signupItem.placeholder}
disabled={this.state.invitation !== undefined && this.state.invitation.email !== ""}
onChange={e => this.setState({email: e.target.value})} />
</Form.Item> </Form.Item>
{ {
signupItem.rule !== "No verification" && signupItem.rule !== "No verification" &&
<Form.Item <Form.Item
name="emailCode" name="emailCode"
className="signup-email-code" className="signup-email-code"
label={signupItem.label ? signupItem.label : i18next.t("code:Email code")} label={signupItem.label ? signupItem.label : i18next.t("code:Email code")}
rules={[{ rules={[{
required: required, required: required,
message: i18next.t("code:Please input your verification code!"), message: i18next.t("code:Please input your verification code!"),
}]} }]}
> >
<SendCodeInput <SendCodeInput
className="signup-email-code-input" className="signup-email-code-input"
disabled={!this.state.validEmail} disabled={!this.state.validEmail}
method={"signup"} method={"signup"}
onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(application)]} onButtonClickArgs={[this.state.email, "email", Setting.getApplicationName(application)]}
application={application} application={application}
/> />
</Form.Item> </Form.Item>
} }
</React.Fragment> </React.Fragment>
); );
@ -432,7 +440,8 @@ class SignupPage extends React.Component {
const renderPhoneItem = () => { const renderPhoneItem = () => {
return ( return (
<React.Fragment> <React.Fragment>
<Form.Item className="signup-phone" label={signupItem.label ? signupItem.label : i18next.t("general:Phone")} required={required}> <Form.Item className="signup-phone"
label={signupItem.label ? signupItem.label : i18next.t("general:Phone")} required={required}>
<Input.Group compact> <Input.Group compact>
<Form.Item <Form.Item
name="countryCode" name="countryCode"
@ -487,26 +496,26 @@ class SignupPage extends React.Component {
</Form.Item> </Form.Item>
{ {
signupItem.rule !== "No verification" && signupItem.rule !== "No verification" &&
<Form.Item <Form.Item
name="phoneCode" name="phoneCode"
className="phone-code" className="phone-code"
label={signupItem.label ? signupItem.label : i18next.t("code:Phone code")} label={signupItem.label ? signupItem.label : i18next.t("code:Phone code")}
rules={[ rules={[
{ {
required: required, required: required,
message: i18next.t("code:Please input your phone verification code!"), message: i18next.t("code:Please input your phone verification code!"),
}, },
]} ]}
> >
<SendCodeInput <SendCodeInput
className="signup-phone-code-input" className="signup-phone-code-input"
disabled={!this.state.validPhone} disabled={!this.state.validPhone}
method={"signup"} method={"signup"}
onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(application)]} onButtonClickArgs={[this.state.phone, "phone", Setting.getApplicationName(application)]}
application={application} application={application}
countryCode={this.form.current?.getFieldValue("countryCode")} countryCode={this.form.current?.getFieldValue("countryCode")}
/> />
</Form.Item> </Form.Item>
} }
</React.Fragment> </React.Fragment>
); );
@ -524,7 +533,7 @@ class SignupPage extends React.Component {
return ( return (
<React.Fragment> <React.Fragment>
<Row style={{marginTop: "30px", marginBottom: "20px"}} > <Row style={{marginTop: "30px", marginBottom: "20px"}}>
<Radio.Group style={{width: "400px"}} buttonStyle="solid" onChange={e => { <Radio.Group style={{width: "400px"}} buttonStyle="solid" onChange={e => {
this.setState({ this.setState({
emailOrPhoneMode: e.target.value, emailOrPhoneMode: e.target.value,
@ -618,7 +627,8 @@ class SignupPage extends React.Component {
}, },
]} ]}
> >
<Input className="signup-invitation-code-input" placeholder={signupItem.placeholder} disabled={this.state.invitation !== undefined && this.state.invitation !== ""} /> <Input className="signup-invitation-code-input" placeholder={signupItem.placeholder}
disabled={this.state.invitation !== undefined && this.state.invitation !== ""} />
</Form.Item> </Form.Item>
); );
} else if (signupItem.name === "Agreement") { } else if (signupItem.name === "Agreement") {
@ -633,7 +643,7 @@ class SignupPage extends React.Component {
<Button type="primary" htmlType="submit" className="signup-button"> <Button type="primary" htmlType="submit" className="signup-button">
{i18next.t("account:Sign Up")} {i18next.t("account:Sign Up")}
</Button> </Button>
&nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp; &nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp;
<a className="signup-link" onClick={() => { <a className="signup-link" onClick={() => {
const linkInStorage = sessionStorage.getItem("signinUrl"); const linkInStorage = sessionStorage.getItem("signinUrl");
if (linkInStorage !== null && linkInStorage !== "") { if (linkInStorage !== null && linkInStorage !== "") {
@ -671,6 +681,59 @@ class SignupPage extends React.Component {
}) })
); );
} else if (signupItem.name === "Gender") {
if (!signupItem.type) {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
}
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
} }
} }

1
web/src/table/SignupTable.js
View File

@ -100,6 +100,7 @@ class SignupTable extends React.Component {
{name: "ID", displayName: i18next.t("general:ID")}, {name: "ID", displayName: i18next.t("general:ID")},
{name: "Display name", displayName: i18next.t("general:Display name")}, {name: "Display name", displayName: i18next.t("general:Display name")},
{name: "Affiliation", displayName: i18next.t("user:Affiliation")}, {name: "Affiliation", displayName: i18next.t("user:Affiliation")},
{name: "Gender", displayName: i18next.t("user:Gender")},
{name: "Country/Region", displayName: i18next.t("user:Country/Region")}, {name: "Country/Region", displayName: i18next.t("user:Country/Region")},
{name: "ID card", displayName: i18next.t("user:ID card")}, {name: "ID card", displayName: i18next.t("user:ID card")},
{name: "Password", displayName: i18next.t("general:Password")}, {name: "Password", displayName: i18next.t("general:Password")},