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:
parent
ac364e5ab7
commit
ef161bbb31
1 changed files with 16 additions and 10 deletions
|
@ -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,7 +52,10 @@ 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
|
||||||
|
// Sort by alphabetical order
|
||||||
|
.sort((idp, idp2) => !!idp.imageSrc && idp.name > idp2.name)
|
||||||
|
.map((idp) => (
|
||||||
<SSOButton
|
<SSOButton
|
||||||
key={idp.id}
|
key={idp.id}
|
||||||
homeserver={idp.homeserver}
|
homeserver={idp.homeserver}
|
||||||
|
|
Loading…
Reference in a new issue