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

UI improvement in SSO

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-10-24 17:33:56 +05:30
parent ed62d06b5e
commit 4022e4969d
2 changed files with 50 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,8 @@ import './SSOButtons.scss';
import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth'; import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth';
import Text from '../../atoms/text/Text';
function SSOButtons({ homeserver }) { function SSOButtons({ homeserver }) {
const [identityProviders, setIdentityProviders] = useState([]); const [identityProviders, setIdentityProviders] = useState([]);
@ -39,23 +41,15 @@ function SSOButtons({ homeserver }) {
}); });
}, [homeserver]); }, [homeserver]);
// TODO Render all non-icon providers at the end so that they are never inbetween icons. if (identityProviders.length === 0) return <></>;
return ( return (
<div className="sso-buttons"> <div className="sso-buttons">
{identityProviders.map((idp) => { <div className="sso-buttons__divider">
if (idp.imageSrc == null || idp.imageSrc === undefined || idp.imageSrc === '') { <Text>OR</Text>
return ( </div>
<button <div className="sso-buttons__container">
key={idp.id} {identityProviders.sort((idp) => !!idp.imageSrc).map((idp) => (
type="button"
onClick={() => { startSsoLogin(homeserver, idp.type, idp.id); }}
className="sso-buttons__fallback-text text-b1"
>
{`Log in with ${idp.name}`}
</button>
);
}
return (
<SSOButton <SSOButton
key={idp.id} key={idp.id}
homeserver={idp.homeserver} homeserver={idp.homeserver}
@ -64,8 +58,8 @@ function SSOButtons({ homeserver }) {
type={idp.type} type={idp.type}
imageSrc={idp.imageSrc} imageSrc={idp.imageSrc}
/> />
); ))}
})} </div>
</div> </div>
); );
} }
@ -73,12 +67,18 @@ function SSOButtons({ homeserver }) {
function SSOButton({ function SSOButton({
homeserver, id, name, type, imageSrc, homeserver, id, name, type, imageSrc,
}) { }) {
const isImageAvail = !!imageSrc;
function handleClick() { function handleClick() {
startSsoLogin(homeserver, type, id); startSsoLogin(homeserver, type, id);
} }
return ( return (
<button type="button" className="sso-button" onClick={handleClick}> <button
<img className="sso-button__img" src={imageSrc} alt={name} /> type="button"
className={`sso-btn${!isImageAvail ? ' sso-btn__text-only' : ''}`}
onClick={handleClick}
>
{isImageAvail && <img className="sso-btn__img" src={imageSrc} alt={name} />}
{!isImageAvail && <Text>{`Login with ${name}`}</Text>}
</button> </button>
); );
} }

50
src/app/molecules/sso-buttons/SSOButtons.scss
View file

@ -1,31 +1,43 @@
.sso-buttons { .sso-buttons {
margin-top: var(--sp-extra-loose); &__divider {
display: flex;
align-items: center;
display: flex; &::before,
justify-content: center; &::after {
flex-wrap: wrap; flex: 1;
content: '';
&__fallback-text { margin: var(--sp-tight);
margin: var(--sp-tight) 0px; border-bottom: 1px solid var(--bg-surface-border);
}
flex-basis: 100%; }
text-align: center; &__container {
margin-bottom: var(--sp-extra-loose);
color: var(--bg-primary); display: flex;
cursor: pointer; justify-content: center;
flex-wrap: wrap;
} }
} }
.sso-button { .sso-btn {
margin-bottom: var(--sp-normal); margin: var(--sp-tight);
display: inline-flex;
display: flex;
justify-content: center; justify-content: center;
flex-basis: 20%;
cursor: pointer; cursor: pointer;
&__img { &__img {
height: var(--av-normal); height: var(--av-small);
width: var(--av-small);
}
&__text-only {
flex-basis: 100%;
text-align: center;
margin: var(--sp-tight) 0px;
cursor: pointer;
& .text {
color: var(--tc-link);
}
} }
} }