Improve SSO display on login page (#150)

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

View file

@ -10,6 +10,9 @@ function SSOButtons({ homeserver }) {
const [identityProviders, setIdentityProviders] = useState([]); const [identityProviders, setIdentityProviders] = useState([]);
useEffect(() => { 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 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,})+$')) { if (!homeserver.match('^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{2,})+$')) {
return; return;
@ -49,16 +52,19 @@ function SSOButtons({ homeserver }) {
<Text>OR</Text> <Text>OR</Text>
</div> </div>
<div className="sso-buttons__container"> <div className="sso-buttons__container">
{identityProviders.sort((idp) => !!idp.imageSrc).map((idp) => ( {identityProviders
<SSOButton // Sort by alphabetical order
key={idp.id} .sort((idp, idp2) => !!idp.imageSrc && idp.name > idp2.name)
homeserver={idp.homeserver} .map((idp) => (
id={idp.id} <SSOButton
name={idp.name} key={idp.id}
type={idp.type} homeserver={idp.homeserver}
imageSrc={idp.imageSrc} id={idp.id}
/> name={idp.name}
))} type={idp.type}
imageSrc={idp.imageSrc}
/>
))}
</div> </div>
</div> </div>
); );