imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finishing off the first iteration on login UI

Browse source 
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:
![login_with_msisdn](30a921fc-1dfc-11e7-95d1-76f619da1402.png)

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:
Luke Barnard 2017-04-21 11:37:08 +01:00
parent 566a315242
commit 9cd7914ea5
6 changed files with 207 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,8 +33,6 @@ function countryMatchesSearchQuery(query, country) {
return false;
}
const MAX_DISPLAYED_ROWS = 2;
export default class CountryDropdown extends React.Component {
constructor(props) {
super(props);
@ -64,7 +62,7 @@ export default class CountryDropdown extends React.Component {
// Unicode Regional Indicator Symbol letter 'A'
const RIS_A = 0x1F1E6;
const ASCII_A = 65;
return charactersToImageNode(iso2,
return charactersToImageNode(iso2, true,
RIS_A + (iso2.charCodeAt(0) - ASCII_A),
RIS_A + (iso2.charCodeAt(1) - ASCII_A),
);
@ -93,10 +91,6 @@ export default class CountryDropdown extends React.Component {
displayedCountries = COUNTRIES;
}
if (displayedCountries.length > MAX_DISPLAYED_ROWS) {
displayedCountries = displayedCountries.slice(0, MAX_DISPLAYED_ROWS);
}
const options = displayedCountries.map((country) => {
return <div key={country.iso2}>
{this._flagImgForIso2(country.iso2)}