fix normal user phone edit control

This commit is contained in:
Gucheng Wang 2023-02-25 11:47:34 +08:00
parent 8fbd5b1a74
commit d104a292e7
3 changed files with 25 additions and 43 deletions

View File

@ -223,10 +223,6 @@ export function countryFlag(country) {
return <img src={`${StaticBaseUrl}/flag-icons/${country.code}.svg`} alt={country.name} height={20} style={{marginRight: 10}} />; return <img src={`${StaticBaseUrl}/flag-icons/${country.code}.svg`} alt={country.name} height={20} style={{marginRight: 10}} />;
} }
export function getPhoneCodeFromCountryCode(countryCode) {
return phoneNumber.isSupportedCountry(countryCode) ? phoneNumber.getCountryCallingCode(countryCode) : "";
}
export function initServerUrl() { export function initServerUrl() {
// const hostname = window.location.hostname; // const hostname = window.location.hostname;
// if (hostname === "localhost") { // if (hostname === "localhost") {

View File

@ -285,21 +285,14 @@ class UserEditPage extends React.Component {
{Setting.getLabel(i18next.t("general:Email"), i18next.t("general:Email - Tooltip"))} : {Setting.getLabel(i18next.t("general:Email"), i18next.t("general:Email - Tooltip"))} :
</Col> </Col>
<Col style={{paddingRight: "20px"}} span={11} > <Col style={{paddingRight: "20px"}} span={11} >
{Setting.isLocalAdminUser(this.props.account) ? <Input
(<Input value={this.state.user.email} value={this.state.user.email}
style={{width: "280Px"}} style={{width: "280Px"}}
disabled={disabled} disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
onChange={e => { onChange={e => {
this.updateUserField("email", e.target.value); this.updateUserField("email", e.target.value);
}} />) : }}
(<Select virtual={false} value={this.state.user.email} />
style={{width: "280Px"}}
options={[Setting.getItem(this.state.user.email, this.state.user.email)]}
disabled={disabled}
onChange={e => {
this.updateUserField("email", e.target.value);
}} />)
}
</Col> </Col>
<Col span={Setting.isMobile() ? 22 : 11} > <Col span={Setting.isMobile() ? 22 : 11} >
{/* backend auto get the current user, so admin can not edit. Just self can reset*/} {/* backend auto get the current user, so admin can not edit. Just self can reset*/}
@ -314,31 +307,23 @@ class UserEditPage extends React.Component {
{Setting.getLabel(i18next.t("general:Phone"), i18next.t("general:Phone - Tooltip"))} : {Setting.getLabel(i18next.t("general:Phone"), i18next.t("general:Phone - Tooltip"))} :
</Col> </Col>
<Col style={{paddingRight: "20px"}} span={11} > <Col style={{paddingRight: "20px"}} span={11} >
{Setting.isLocalAdminUser(this.props.account) ? <Input.Group compact style={{width: "280Px"}}>
<Input.Group compact style={{width: "280Px"}}> <PhoneNumberInput
<PhoneNumberInput style={{width: "30%"}}
style={{width: "30%"}} disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
value={this.state.user.countryCode} value={this.state.user.countryCode}
onChange={(value) => { onChange={(value) => {
this.updateUserField("countryCode", value); this.updateUserField("countryCode", value);
}} }}
countryCodes={this.state.application?.organizationObj.countryCodes} countryCodes={this.state.application?.organizationObj.countryCodes}
/> />
<Input value={this.state.user.phone} <Input value={this.state.user.phone}
style={{width: "70%"}} style={{width: "70%"}}
disabled={disabled} disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
onChange={e => {
this.updateUserField("phone", e.target.value);
}} />
</Input.Group>
:
(<Select virtual={false} value={this.state.user.phone === "" ? null : `+${Setting.getPhoneCodeFromCountryCode(this.state.user.countryCode)} ${this.state.user.phone}`}
options={this.state.user.phone === "" ? null : [Setting.getItem(`+${Setting.getPhoneCodeFromCountryCode(this.state.user.countryCode)} ${this.state.user.phone}`, this.state.user.phone)]}
disabled={disabled}
style={{width: "280px"}}
onChange={e => { onChange={e => {
this.updateUserField("phone", e.target.value); this.updateUserField("phone", e.target.value);
}} />)} }} />
</Input.Group>
</Col> </Col>
<Col span={Setting.isMobile() ? 24 : 11} > <Col span={Setting.isMobile() ? 24 : 11} >
{this.isSelf() ? (<ResetModal application={this.state.application} disabled={disabled} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} />) : null} {this.isSelf() ? (<ResetModal application={this.state.application} disabled={disabled} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} />) : null}

View File

@ -19,7 +19,7 @@ import React from "react";
const {Option} = Select; const {Option} = Select;
export default function PhoneNumberInput(props) { export default function PhoneNumberInput(props) {
const {onChange, style, showSearch} = props; const {onChange, style, disabled, showSearch} = props;
const value = props.value ?? "CN"; const value = props.value ?? "CN";
const countryCodes = props.countryCodes ?? []; const countryCodes = props.countryCodes ?? [];
@ -31,6 +31,7 @@ export default function PhoneNumberInput(props) {
<Select <Select
virtual={false} virtual={false}
style={style} style={style}
disabled={disabled}
value={value} value={value}
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
optionLabelProp={"label"} optionLabelProp={"label"}