OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert registration phone number to Field component 

Now that we have prefix support in the Field component, we can also convert the
phone number with country dropdown on registration.
pull/21833/head
J. Ryan Stinnett 2019-03-05 15:16:07 +00:00
parent 26b2aa174b
commit 5b1d361577
3 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/structures/auth/_Login.scss
View File

@ -95,6 +95,7 @@ limitations under the License.
flex: 1 1 auto; flex: 1 1 auto;
} }
// TODO-START: Remove up to TODO-END when all the country dropdowns are in Fields
.mx_Login_field_prefix { .mx_Login_field_prefix {
height: 38px; height: 38px;
padding: 0px 5px; padding: 0px 5px;
@ -141,3 +142,4 @@ limitations under the License.
margin: 3px; margin: 3px;
vertical-align: top; vertical-align: top;
} }
// TODO-END: Remove from TODO-START when all the country dropdowns are in Fields

11
res/css/views/elements/_Field.scss
View File

@ -140,3 +140,14 @@ limitations under the License.
background-color: $field-focused-label-bg-color; background-color: $field-focused-label-bg-color;
color: $greyed-fg-color; color: $greyed-fg-color;
} }
// Customise other components when placed inside a Field
.mx_Field .mx_Dropdown_input {
border: initial;
border-radius: initial;
}
.mx_Field .mx_CountryDropdown {
width: 67px;
}

43
src/components/views/auth/RegistrationForm.js
View File

@ -357,32 +357,27 @@ module.exports = React.createClass({
const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown'); const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
let phoneSection; let phoneSection;
if (threePidLogin && this._authStepIsUsed('m.login.msisdn')) { if (threePidLogin && this._authStepIsUsed('m.login.msisdn')) {
const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ? const phoneLabel = this._authStepIsRequired('m.login.msisdn') ?
_t("Phone") : _t("Phone") :
_t("Phone (optional)"); _t("Phone (optional)");
phoneSection = ( const phoneCountry = <CountryDropdown
<div className="mx_Login_phoneSection"> value={this.state.phoneCountry}
<CountryDropdown ref="phone_country" isSmall={true}
className="mx_Login_phoneCountry mx_Login_field_prefix" showPrefix={true}
value={this.state.phoneCountry} onOptionChange={this.onPhoneCountryChange}
isSmall={true} />;
showPrefix={true}
onOptionChange={this.onPhoneCountryChange} phoneSection = <Field
/> className={this._classForField(FIELD_PHONE_NUMBER)}
<input type="text" ref="phoneNumber" id="mx_RegistrationForm_phoneNumber"
placeholder={phonePlaceholder} ref="phoneNumber"
defaultValue={this.props.defaultPhoneNumber} type="text"
className={this._classForField( label={phoneLabel}
FIELD_PHONE_NUMBER, defaultValue={this.props.defaultPhoneNumber}
'mx_Login_phoneNumberField', value={this.state.phoneNumber}
'mx_Login_field', prefix={phoneCountry}
'mx_Login_field_has_prefix', onBlur={this.onPhoneNumberBlur}
)} />;
onBlur={this.onPhoneNumberBlur}
value={this.state.phoneNumber}
/>
</div>
);
} }
const registerButton = ( const registerButton = (