Skip to content

Commit bc3cb71

Browse files
dr-epdr-ep
authored
Added styles for known oidc providers (#99)
* Added styles for known oidc providers * Added real openid configuration urls * Added currect issuers and Auth0 logo * Changed prefix for Microsoft oidc profile
1 parent f6d4e1d commit bc3cb71

File tree

9 files changed

+157
-23
lines changed

9 files changed

+157
-23
lines changed

‎src/LoginDialog/LoginDialog.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,6 @@
5959
}
6060
}
6161

62-
.auth-opt {
63-
display: flex;
64-
flex-direction: column;
65-
66-
.authbtn {
67-
margin: 0 0 3% 0;
68-
}
69-
}
70-
7162
@media (max-width: $mobileWidth - 1) {
7263
.logindialog {
7364
height: 100%;

‎src/LoginDialog/OidcLoginButtons.scss‎

Lines changed: 102 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,112 @@
11
@import './../theme/common.scss';
22

3-
.authbtn {
3+
.oidcloginbuttons {
4+
display: flex;
5+
flex-direction: column;
6+
7+
&__button {
48
position: relative;
5-
display: inline-block;
9+
display: block;
610
text-align: center;
711
font-size: 14px;
812
border: 1px solid #FFFFFF;
913
color: #ffffff;
1014
cursor: pointer;
11-
padding: 10px 15px;
15+
height: 50px;
1216
background-color: grey;
13-
}
17+
margin-bottom: 16px;
18+
19+
.oidcloginbuttons__buttoncontent {
20+
display: inline-flex;
21+
align-items: center;
22+
23+
&::before {
24+
content: '';
25+
display: none;
26+
width: 30px;
27+
height: 30px;
28+
margin-right: 16px;
29+
background-size: contain;
30+
background-repeat: no-repeat;
31+
background-position: center;
32+
}
33+
34+
}
35+
36+
&--auth0 {
37+
background-color: #dc5e37;
38+
color: #fff;
39+
40+
.oidcloginbuttons__buttoncontent {
41+
&:before {
42+
display: inline-block;
43+
width: 50px;
44+
background-image: url('./../images/oidc-provider-logos/auth0.svg');
45+
}
46+
}
47+
}
48+
49+
&--microsoft {
50+
border: solid 1px #333;
51+
background-color: white;
52+
color: #333;
53+
54+
.oidcloginbuttons__buttoncontent {
55+
&:before {
56+
display: inline-block;
57+
width: 50px;
58+
background-image: url('./../images/oidc-provider-logos/microsoft.svg');
59+
}
60+
}
61+
}
1462

15-
.Keycloak {
16-
background-color:#1eb9e1
17-
}
18-
.Auth0 {
19-
background-color: #f95624
20-
}
63+
&--okta {
64+
background-color: #0079bb;
65+
color: #fff;
66+
67+
.oidcloginbuttons__buttoncontent {
68+
&:before {
69+
display: inline-block;
70+
width: 50px;
71+
background-image: url('./../images/oidc-provider-logos/okta.png');
72+
}
73+
}
74+
}
75+
76+
&--google {
77+
border: solid 1px #333;
78+
background-color: white;
79+
color: #333;
80+
81+
.oidcloginbuttons__buttoncontent {
82+
&:before {
83+
display: inline-block;
84+
background-image: url('./../images/oidc-provider-logos/google.png');
85+
}
86+
}
87+
}
88+
89+
&--apple {
90+
background-color: black;
91+
92+
.oidcloginbuttons__buttoncontent {
93+
&:before {
94+
display: inline-block;
95+
background-image: url('./../images/oidc-provider-logos/apple.png');
96+
}
97+
}
98+
}
99+
100+
&--salesforce {
101+
background-color: #00a1e0;
102+
103+
.oidcloginbuttons__buttoncontent {
104+
&:before {
105+
display: inline-block;
106+
width: 50px;
107+
background-image: url('./../images/oidc-provider-logos/salesforce.svg');
108+
}
109+
}
110+
}
111+
}
112+
}

‎src/LoginDialog/OidcLoginButtons.tsx‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,29 @@ import { generateOidcLoginRedirectUrl } from './OidcUtilities';
1111

1212
import './OidcLoginButtons.scss';
1313

14+
const knownProfilePrefixes: { [key: string]: string } = {
15+
'https://auth0.auth0.com': 'auth0',
16+
'https://login.live.com': 'microsoft',
17+
'https://elasticpath.okta.com': 'okta',
18+
'https://accounts.google.com': 'google',
19+
'https://appleid.apple.com': 'apple',
20+
'https://login.salesforce.com': 'salesforce',
21+
};
22+
23+
function knownOidcProfileName(profile: any) {
24+
if (!profile?.meta?.issuer) {
25+
return 'unknown';
26+
}
27+
28+
for (const p of Object.keys(knownProfilePrefixes)) {
29+
if (profile.meta.issuer.startsWith(p)) {
30+
return knownProfilePrefixes[p];
31+
}
32+
}
33+
34+
return 'unknown';
35+
}
36+
1437
export const OidcLoginButtons: React.FC = () => {
1538
const { authenticationSettings, isLoadingOidcProfiles, oidcProfiles } = useCustomerAuthenticationSettings()
1639
const [ isLoading ] = useState(false);
@@ -28,16 +51,18 @@ export const OidcLoginButtons: React.FC = () => {
2851
const clientId = `${authenticationSettings?.data.meta.client_id}`;
2952

3053
return (
31-
<div className="auth-opt">
54+
<div className="oidcloginbuttons">
3255
{isLoadingOidcProfiles && (
3356
<div key="oidcLoginButtonLoader" className="epminiLoader" />
3457
)}
3558

3659
{oidcProfiles && (
37-
oidcProfiles.data.map((profile:any)=>{
60+
oidcProfiles.data.map((profile:any) => {
3861
return (
39-
<button key={`${profile.name}`} className={`authbtn ${profile.name}`} onClick={()=>handleOidcButtonClicked(profile, clientId)}>
40-
{isLoading ? 'Loading' : `Login with ${profile.name}`}
62+
<button key={`${profile.name}`} className={`oidcloginbuttons__button oidcloginbuttons__button--${knownOidcProfileName(profile)}`} onClick={()=>handleOidcButtonClicked(profile, clientId)}>
63+
<div className="oidcloginbuttons__buttoncontent">
64+
{isLoading ? 'Loading' : `Login with ${profile.name}`}
65+
</div>
4166
</button>
4267
);
4368
})

‎src/images/oidc-provider-logos/apple.png‎

6.8 KB
Loading

‎src/images/oidc-provider-logos/auth0.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/images/oidc-provider-logos/google.png‎

78 KB
Loading

‎src/images/oidc-provider-logos/microsoft.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/images/oidc-provider-logos/okta.png‎

30.1 KB
Loading

‎src/images/oidc-provider-logos/salesforce.svg‎

Lines changed: 6 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)