feat: user can upload ID card info (#2040)

* feat:user can upload ID card(#1999)

Signed-off-by: baihhh <2542274498@qq.com>

* feat: user can upload ID card, add diff languages

Signed-off-by: baihhh <2542274498@qq.com>

---------

Signed-off-by: baihhh <2542274498@qq.com>
This commit is contained in:
Baihhh
2023-07-06 20:36:32 +08:00
committed by GitHub
parent 96250aa70a
commit bc1c4d32f0
14 changed files with 203 additions and 30 deletions

View File

@ -53,6 +53,8 @@ class UserEditPage extends React.Component {
mode: props.location.mode !== undefined ? props.location.mode : "edit",
loading: true,
returnUrl: null,
idCardInfo: ["ID card front", "ID card back", "ID card with person"],
idCardKey: ["idCardFront", "idCardBack", "idCardWithPerson"],
};
}
@ -269,6 +271,12 @@ class UserEditPage extends React.Component {
}
}
if (accountItem.name === "ID card info" || accountItem.name === "ID card") {
if (this.state.user.properties?.isIdCardVerified === "true") {
disabled = true;
}
}
let isKeysGenerated = false;
if (this.state.user.accessKey !== "" && this.state.user.accessKey !== "") {
isKeysGenerated = true;
@ -365,20 +373,11 @@ class UserEditPage extends React.Component {
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("general:Avatar"), i18next.t("general:Avatar - Tooltip"))} :
</Col>
<Col span={22} >
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Preview")}:
</Col>
<Col span={22} >
<a target="_blank" rel="noreferrer" href={this.state.user.avatar}>
<img src={this.state.user.avatar} alt={this.state.user.avatar} height={90} style={{marginBottom: "20px"}} />
</a>
</Col>
</Row>
<Row style={{marginTop: "20px"}}>
<CropperDivModal buttonText={`${i18next.t("user:Upload a photo")}...`} title={i18next.t("user:Upload a photo")} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} />
</Row>
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Preview")}:
</Col>
<Col>
{this.renderImage(this.state.user.avatar, i18next.t("user:Upload a photo"), i18next.t("user:Set new profile picture"), "avatar", false)}
</Col>
</Row>
);
@ -536,12 +535,33 @@ class UserEditPage extends React.Component {
{Setting.getLabel(i18next.t("user:ID card"), i18next.t("user:ID card - Tooltip"))} :
</Col>
<Col span={22} >
<Input value={this.state.user.idCard} onChange={e => {
<Input value={this.state.user.idCard} disabled={disabled} onChange={e => {
this.updateUserField("idCard", e.target.value);
}} />
</Col>
</Row>
);
} else if (accountItem.name === "ID card info") {
return (
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("user:ID card info"), i18next.t("user:ID card info - Tooltip"))} :
</Col>
<Col span={22} >
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
{i18next.t("general:Preview")}:
</Col>
{
this.state.idCardInfo.map((key, index) => {
const newKey = this.state.idCardKey[index];
return this.renderImage(this.state.user.properties[newKey] || "", this.getIdCardType(key), this.getIdCardText(key), newKey, disabled);
})
}
</Row>
</Col>
</Row>
);
} else if (accountItem.name === "Homepage") {
return (
<Row style={{marginTop: "20px"}} >
@ -942,6 +962,25 @@ class UserEditPage extends React.Component {
}
}
renderImage(imgUrl, title, set, tag, disabled) {
return (
<Col span={4} style={{textAlign: "center", margin: "auto"}} key={tag}>
{
imgUrl ?
<a target="_blank" rel="noreferrer" href={imgUrl} style={{marginBottom: "10px"}}>
<img src={imgUrl} alt={imgUrl} height={90} style={{marginBottom: "20px"}} />
</a>
:
<Col style={{height: "78%", border: "1px dotted grey", borderRadius: 3, marginBottom: 5}}>
<div style={{fontSize: 30, margin: 10}}>+</div>
<div style={{verticalAlign: "middle", marginBottom: 10}}>{`请上传${title}...`}</div>
</Col>
}
<CropperDivModal disabled={disabled} tag={tag} setTitle={set} buttonText={`${title}...`} title={title} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} />
</Col>
);
}
renderUser() {
return (
<Card size="small" title={
@ -967,6 +1006,30 @@ class UserEditPage extends React.Component {
);
}
getIdCardType(key) {
if (key === "ID card front") {
return i18next.t("user:ID card front");
} else if (key === "ID card back") {
return i18next.t("user:ID card back");
} else if (key === "ID card with person") {
return i18next.t("user:ID card with person");
} else {
return "Unknown Id card type";
}
}
getIdCardText(key) {
if (key === "ID card front") {
return i18next.t("user:Upload ID card front picture");
} else if (key === "ID card back") {
return i18next.t("user:Upload ID card back picture");
} else if (key === "ID card with person") {
return i18next.t("user:Upload ID card with person picture");
} else {
return "Unknown Id card text";
}
}
submitUserEdit(needExit) {
const user = Setting.deepCopy(this.state.user);
UserBackend.updateUser(this.state.organizationName, this.state.userName, user)