Login: Show SAML login button if SAML is enabled (#19591)

* Show SAML login button if SAML is enabled

Move logic inside LoginServiceButtons

* Prevent from rendering login-oauth div if no login service is enabled
This commit is contained in:
Sofia Papagiannaki 2019-10-03 15:35:38 +02:00 committed by Torkel Ödegaard
parent e16064b9b0
commit a62dea47b4
2 changed files with 39 additions and 22 deletions

View File

@ -41,24 +41,7 @@ export const LoginPage: FC = () => {
/>
) : null}
{isOauthEnabled ? (
<>
<div className="text-center login-divider">
<div>
<div className="login-divider-line" />
</div>
<div>
<span className="login-divider-text">{disableLoginForm ? null : <span>or</span>}</span>
</div>
<div>
<div className="login-divider-line" />
</div>
</div>
<div className="clearfix" />
<LoginServiceButtons />
</>
) : null}
<LoginServiceButtons />
{!disableUserSignUp ? <UserSignup /> : null}
</div>
<CSSTransition

View File

@ -46,11 +46,39 @@ export interface LoginServices {
[key: string]: LoginService;
}
const LoginDivider = () => {
return (
<>
<div className="text-center login-divider">
<div>
<div className="login-divider-line" />
</div>
<div>
<span className="login-divider-text">{config.disableLoginForm ? null : <span>or</span>}</span>
</div>
<div>
<div className="login-divider-line" />
</div>
</div>
<div className="clearfix" />
</>
);
};
export const LoginServiceButtons = () => {
const keyNames = Object.keys(loginServices());
const serviceElements = keyNames.map(key => {
const serviceElementsEnabled = keyNames.filter(key => {
const service: LoginService = loginServices()[key];
return service.enabled ? (
return service.enabled;
});
if (serviceElementsEnabled.length === 0) {
return null;
}
const serviceElements = serviceElementsEnabled.map(key => {
const service: LoginService = loginServices()[key];
return (
<a
key={key}
className={`btn btn-medium btn-service btn-service--${service.className || key} login-btn`}
@ -60,8 +88,14 @@ export const LoginServiceButtons = () => {
<i className={`btn-service-icon fa fa-${service.icon ? service.icon : key}`} />
Sign in with {service.name}
</a>
) : null;
);
});
return <div className="login-oauth text-center">{serviceElements}</div>;
const divider = LoginDivider();
return (
<>
{divider}
<div className="login-oauth text-center">{serviceElements}</div>
</>
);
};