Finishing off the first iteration on login UI
This makes the following changes:
- Improve CountryDropdown by allowing all countries to be displayed at once and using PNGs for performance (trading of quality - the pngs are scaled down from 32px to 25px)
- "I want to sign in with" dropdown to select login method
- MXID login field that suffixes HS domain (whether custom or matrix.org) and prefixes "@"
- Email field which is secretly the same as the username field but with a different placeholder
- No more login flickering when changing ServerConfig (!) fixes https://github.com/vector-im/riot-web/issues/1517
This implements most of the design in https://github.com/vector-im/riot-web/issues/3524 but neglects the phone number login:

This will be updated in another PR to implement desired things:
- Country code visible once a country has been selected (propbably but as a prefix to the phone number input box.
- Use square flags
- Move CountryDropdown above phone input and make it show the full country name when not expanded
- Auto-select country based on IP
This commit is contained in:
parent
566a315242
commit
9cd7914ea5
6 changed files with 207 additions and 151 deletions
|
@ -248,13 +248,10 @@ export default class Dropdown extends React.Component {
|
|||
</MenuOption>
|
||||
);
|
||||
});
|
||||
|
||||
if (!this.state.searchQuery && this.props.searchEnabled) {
|
||||
options.push(
|
||||
<div key="_searchprompt" className="mx_Dropdown_searchPrompt">
|
||||
Type to search...
|
||||
</div>
|
||||
);
|
||||
if (options.length === 0) {
|
||||
return [<div className="mx_Dropdown_option">
|
||||
No results
|
||||
</div>];
|
||||
}
|
||||
return options;
|
||||
}
|
||||
|
@ -317,7 +314,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,
|
||||
searchEnabled: React.PropTypes.bool,
|
||||
// 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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue