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

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

@ -13,7 +13,7 @@
// limitations under the License.
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 AuthBackend from "./AuthBackend";
import * as ProviderButton from "./ProviderButton";
@ -198,6 +198,10 @@ class SignupPage extends React.Component {
onFinish(values) {
const application = this.getApplicationObj();
if (Array.isArray(values.gender)) {
values.gender = values.gender.join(", ");
}
const params = new URLSearchParams(window.location.search);
values.plan = params.get("plan");
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>
);
} else if (signupItem.name === "Email" || signupItem.name === "Phone" || signupItem.name === "Email or Phone" || signupItem.name === "Phone or Email") {
@ -403,7 +409,9 @@ 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>
{
signupItem.rule !== "No verification" &&
@ -432,7 +440,8 @@ class SignupPage extends React.Component {
const renderPhoneItem = () => {
return (
<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>
<Form.Item
name="countryCode"
@ -524,7 +533,7 @@ class SignupPage extends React.Component {
return (
<React.Fragment>
<Row style={{marginTop: "30px", marginBottom: "20px"}} >
<Row style={{marginTop: "30px", marginBottom: "20px"}}>
<Radio.Group style={{width: "400px"}} buttonStyle="solid" onChange={e => {
this.setState({
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>
);
} else if (signupItem.name === "Agreement") {
@ -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: "Display name", displayName: i18next.t("general:Display name")},
{name: "Affiliation", displayName: i18next.t("user:Affiliation")},
{name: "Gender", displayName: i18next.t("user:Gender")},
{name: "Country/Region", displayName: i18next.t("user:Country/Region")},
{name: "ID card", displayName: i18next.t("user:ID card")},
{name: "Password", displayName: i18next.t("general:Password")},