feat: support more field in signup page

This commit is contained in:
okatu-loli
2024-09-24 17:40:38 +08:00
parent 7081a504b5
commit d769dc5199
4 changed files with 180 additions and 0 deletions

View File

@ -202,6 +202,18 @@ class SignupPage extends React.Component {
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");
@ -734,6 +746,165 @@ class SignupPage extends React.Component {
</Form.Item>
);
}
} else if (signupItem.name === "Bio") {
if (!signupItem.type || signupItem === "") {
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>
);
}
} else if (signupItem.name === "Tag") {
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>
);
}
} else if (signupItem.name === "Education") {
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>
);
}
}
}

View File

@ -101,6 +101,9 @@ class SignupTable extends React.Component {
{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")},