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}} />;
}
export function getPhoneCodeFromCountryCode(countryCode) {
return phoneNumber.isSupportedCountry(countryCode) ? phoneNumber.getCountryCallingCode(countryCode) : "";
}
export function initServerUrl() {
// const hostname = window.location.hostname;
// 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"))} :
</Col>
<Col style={{paddingRight: "20px"}} span={11} >
{Setting.isLocalAdminUser(this.props.account) ?
(<Input value={this.state.user.email}
style={{width: "280Px"}}
disabled={disabled}
onChange={e => {
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);
}} />)
}
<Input
value={this.state.user.email}
style={{width: "280Px"}}
disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
onChange={e => {
this.updateUserField("email", e.target.value);
}}
/>
</Col>
<Col span={Setting.isMobile() ? 22 : 11} >
{/* 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"))} :
</Col>
<Col style={{paddingRight: "20px"}} span={11} >
{Setting.isLocalAdminUser(this.props.account) ?
<Input.Group compact style={{width: "280Px"}}>
<PhoneNumberInput
style={{width: "30%"}}
value={this.state.user.countryCode}
onChange={(value) => {
this.updateUserField("countryCode", value);
}}
countryCodes={this.state.application?.organizationObj.countryCodes}
/>
<Input value={this.state.user.phone}
style={{width: "70%"}}
disabled={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"}}
<Input.Group compact style={{width: "280Px"}}>
<PhoneNumberInput
style={{width: "30%"}}
disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
value={this.state.user.countryCode}
onChange={(value) => {
this.updateUserField("countryCode", value);
}}
countryCodes={this.state.application?.organizationObj.countryCodes}
/>
<Input value={this.state.user.phone}
style={{width: "70%"}}
disabled={!Setting.isLocalAdminUser(this.props.account) ? true : disabled}
onChange={e => {
this.updateUserField("phone", e.target.value);
}} />)}
}} />
</Input.Group>
</Col>
<Col span={Setting.isMobile() ? 24 : 11} >
{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;
export default function PhoneNumberInput(props) {
const {onChange, style, showSearch} = props;
const {onChange, style, disabled, showSearch} = props;
const value = props.value ?? "CN";
const countryCodes = props.countryCodes ?? [];
@ -31,6 +31,7 @@ export default function PhoneNumberInput(props) {
<Select
virtual={false}
style={style}
disabled={disabled}
value={value}
dropdownMatchSelectWidth={false}
optionLabelProp={"label"}