|
|
|
|
@ -149,24 +149,27 @@ export const LoginServiceButtons = () => { |
|
|
|
|
|
|
|
|
|
if (hasServices) { |
|
|
|
|
return ( |
|
|
|
|
<Stack direction="column"> |
|
|
|
|
<LoginDivider /> |
|
|
|
|
{Object.entries(enabledServices).map(([key, service]) => { |
|
|
|
|
const serviceName = service.name; |
|
|
|
|
return ( |
|
|
|
|
<LinkButton |
|
|
|
|
key={key} |
|
|
|
|
className={getButtonStyleFor(service, styles, theme)} |
|
|
|
|
href={`login/${service.hrefName ? service.hrefName : key}`} |
|
|
|
|
target="_self" |
|
|
|
|
fullWidth |
|
|
|
|
> |
|
|
|
|
<Icon className={styles.buttonIcon} name={service.icon} /> |
|
|
|
|
<Trans i18nKey="login.services.sing-in-with-prefix">Sign in with {{ serviceName }}</Trans> |
|
|
|
|
</LinkButton> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</Stack> |
|
|
|
|
// TODO: Remove extra div when Stack supports width
|
|
|
|
|
<div style={{ width: '100%' }}> |
|
|
|
|
<Stack direction={'column'}> |
|
|
|
|
<LoginDivider /> |
|
|
|
|
{Object.entries(enabledServices).map(([key, service]) => { |
|
|
|
|
const serviceName = service.name; |
|
|
|
|
return ( |
|
|
|
|
<LinkButton |
|
|
|
|
key={key} |
|
|
|
|
className={getButtonStyleFor(service, styles, theme)} |
|
|
|
|
href={`login/${service.hrefName ? service.hrefName : key}`} |
|
|
|
|
target="_self" |
|
|
|
|
fullWidth |
|
|
|
|
> |
|
|
|
|
<Icon className={styles.buttonIcon} name={service.icon} /> |
|
|
|
|
<Trans i18nKey="login.services.sing-in-with-prefix">Sign in with {{ serviceName }}</Trans> |
|
|
|
|
</LinkButton> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</Stack> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|