michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Improve SSO display on login page (#150)

Browse source 
sort SSO providers by alphabetical order, and reset provider list on homeserver change (to avoid having them if the homeserver is invalid)
This commit is contained in:
Zalax 2021-10-27 15:39:35 +02:00 committed by GitHub
parent ac364e5ab7
commit ef161bbb31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app/molecules/sso-buttons/SSOButtons.jsx
View file

@ -10,6 +10,9 @@ function SSOButtons({ homeserver }) {
const [identityProviders, setIdentityProviders] = useState([]);
useEffect(() => {
// Reset sso proviers to avoid displaying sso icons if the homeserver is not valid
setIdentityProviders([]);
// If the homeserver passed in is not a fully-qualified domain name, do not update.
if (!homeserver.match('^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{2,})+$')) {
return;
@ -49,16 +52,19 @@ function SSOButtons({ homeserver }) {
<Text>OR</Text>
</div>
<div className="sso-buttons__container">
{identityProviders.sort((idp) => !!idp.imageSrc).map((idp) => (
<SSOButton
key={idp.id}
homeserver={idp.homeserver}
id={idp.id}
name={idp.name}
type={idp.type}
imageSrc={idp.imageSrc}
/>
))}
{identityProviders
// Sort by alphabetical order
.sort((idp, idp2) => !!idp.imageSrc && idp.name > idp2.name)
.map((idp) => (
<SSOButton
key={idp.id}
homeserver={idp.homeserver}
id={idp.id}
name={idp.name}
type={idp.type}
imageSrc={idp.imageSrc}
/>
))}
</div>
</div>
);