mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-25 20:26:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Initial commit on riot-web#3524 (login UI update)

Browse source
This commit is contained in:
Luke Barnard 2017-04-19 10:08:04 +01:00
parent 1189368aab
commit 566a315242
3 changed files with 55 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/views/elements/Dropdown.js
View file

@ -249,7 +249,7 @@ export default class Dropdown extends React.Component {
);
});
if (!this.state.searchQuery) {
if (!this.state.searchQuery && this.props.searchEnabled) {
options.push(
<div key="_searchprompt" className="mx_Dropdown_searchPrompt">
Type to search...
@ -267,16 +267,20 @@ export default class Dropdown extends React.Component {
let menu;
if (this.state.expanded) {
currentValue = <input type="text" className="mx_Dropdown_option"
ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
onKeyUp={this._onInputKeyUp}
onChange={this._onInputChange}
value={this.state.searchQuery}
/>;
if (this.props.searchEnabled) {
currentValue = <input type="text" className="mx_Dropdown_option"
ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
onKeyUp={this._onInputKeyUp}
onChange={this._onInputChange}
value={this.state.searchQuery}
/>;
}
menu = <div className="mx_Dropdown_menu" style={menuStyle}>
{this._getMenuOptions()}
</div>;
} else {
}
if (!currentValue) {
const selectedChild = this.props.getShortOption ?
this.props.getShortOption(this.props.value) :
this.childrenByKey[this.props.value];
@ -313,6 +317,7 @@ Dropdown.propTypes = {
onOptionChange: React.PropTypes.func.isRequired,
// Called when the value of the search field changes
onSearchChange: React.PropTypes.func,
searchEnabled: React.PropTypes.boolean,
// Function that, given the key of an option, returns
// a node representing that option to be displayed in the
// box itself as the currently-selected option (ie. as

2
src/components/views/login/CountryDropdown.js
View file

@ -111,7 +111,7 @@ export default class CountryDropdown extends React.Component {
return <Dropdown className={this.props.className}
onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
menuWidth={298} getShortOption={this._flagImgForIso2}
value={value}
value={value} searchEnabled={true}
>
{options}
</Dropdown>

59
src/components/views/login/PasswordLogin.js
View file

@ -60,6 +60,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
password: this.props.initialPassword,
phoneCountry: this.props.initialPhoneCountry,
phoneNumber: this.props.initialPhoneNumber,
loginType: "mxid",
};
},
@ -88,6 +89,10 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
this.props.onUsernameChanged(ev.target.value);
},
onLoginTypeChange: function(loginType) {
this.setState({loginType: loginType});
},
onPhoneCountryChanged: function(country) {
this.setState({phoneCountry: country});
this.props.onPhoneCountryChanged(country);
@ -120,28 +125,46 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
});
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
return (
<div>
<form onSubmit={this.onSubmitForm}>
const Dropdown = sdk.getComponent('elements.Dropdown');
const loginType = {
'email':
<input className="mx_Login_field mx_Login_username" type="text"
name="username" // make it a little easier for browser's remember-password
value={this.state.username} onChange={this.onUsernameChanged}
placeholder="Email or user name" autoFocus />
or
<div className="mx_Login_phoneSection">
<CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
className="mx_Login_phoneCountry"
value={this.state.phoneCountry}
/>
<input type="text" ref="phoneNumber"
onChange={this.onPhoneNumberChanged}
placeholder="Mobile phone number"
className="mx_Login_phoneNumberField mx_Login_field"
value={this.state.phoneNumber}
name="phoneNumber"
/>
placeholder="Email or user name" autoFocus />,
'mxid':
<input className="mx_Login_field mx_Login_username" type="text"
name="username" // make it a little easier for browser's remember-password
value={this.state.username} onChange={this.onUsernameChanged}
placeholder="Email or user name" autoFocus />,
'phone': <div className="mx_Login_phoneSection">
<CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
className="mx_Login_phoneCountry"
value={this.state.phoneCountry}
/>
<input type="text" ref="phoneNumber"
onChange={this.onPhoneNumberChanged}
placeholder="Mobile phone number"
className="mx_Login_phoneNumberField mx_Login_field"
value={this.state.phoneNumber}
name="phoneNumber"
/>
</div>
}[this.state.loginType];
return (
<div>
<form onSubmit={this.onSubmitForm}>
<div className="mx_Login_type_container">
<label className="mx_Login_type_label">I want to sign in with my</label>
<Dropdown className="mx_Login_type_dropdown" value={this.state.loginType} onOptionChange={this.onLoginTypeChange}>
<span key="mxid">Matrix ID</span>
<span key="email">Email</span>
<span key="phone">Phone</span>
</Dropdown>
</div>
<br />
{loginType}
<input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
name="password"
value={this.state.password} onChange={this.onPasswordChanged}