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

feat: support single-choice and multi-choices in signup page (#3234)

Browse Source 
* feat: add custom signup field

* feat: support more field in signup page

* feat: support more field in signup page

* feat: support more field in signup page

* feat: Reduce code duplication in form item rendering

* feat: Simplify gender and info checks using includes

* feat: update translate

* Revert "feat: update translate"

This reverts commit 669334c716.

* feat: address feedback from hsluoyz
This commit is contained in:
千石
2024-09-25 12:48:37 +08:00
committed by GitHub
parent 74543b9533
commit 097adac871
5 changed files with 68 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
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";
@ -50,6 +50,38 @@ const formItemLayout = {
},
};
const renderFormItem = (signupItem) => {
const commonProps = {
name: signupItem.name.toLowerCase(),
label: signupItem.label || signupItem.name,
rules: [
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
],
};
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item {...commonProps}>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item {...commonProps}>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
};
export const tailFormItemLayout = {
wrapperCol: {
xs: {
@ -198,6 +230,22 @@ class SignupPage extends React.Component {
onFinish(values) {
const application = this.getApplicationObj();
if (Array.isArray(values.gender)) {
values.gender = values.gender.join(", ");
}
if (Array.isArray(values.bio)) {
values.bio = values.bio.join(", ");
}
if (Array.isArray(values.tag)) {
values.tag = values.tag.join(", ");
}
if (Array.isArray(values.education)) {
values.education = values.education.join(", ");
}
const params = new URLSearchParams(window.location.search);
values.plan = params.get("plan");
values.pricing = params.get("pricing");
@ -238,6 +286,7 @@ class SignupPage extends React.Component {
}
renderFormItem(application, signupItem) {
const validItems = ["Gender", "Bio", "Tag", "Education"];
if (!signupItem.visible) {
return null;
}
@ -366,7 +415,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") {
@ -669,8 +720,9 @@ class SignupPage extends React.Component {
</span>
);
})
);
} else if (validItems.includes(signupItem.name)) {
return renderFormItem(signupItem);
}
}

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

@ -100,6 +100,10 @@ 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: "Bio", displayName: i18next.t("user:Bio")},
{name: "Tag", displayName: i18next.t("user:Tag")},
{name: "Education", displayName: i18next.t("user:Education")},
{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")},