Skip to content

Commit 832d81a

Browse files
AnthonyNahasAnthonyNahas
committed
feat(package): added microsoft and yahoo as auth providers #232 
1 parent a5dfaad commit 832d81a

File tree

7 files changed

+182
-37
lines changed

7 files changed

+182
-37
lines changed

‎package-lock.json‎

Lines changed: 56 additions & 29 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,9 @@
7777
"@angular/platform-server": "^7.2.15",
7878
"@babel/preset-es2015": "^7.0.0-beta.53",
7979
"@compodoc/gulp-compodoc": "^0.0.10",
80-
"@types/jasmine": "^3.3.12",
80+
"@types/jasmine": "^3.3.13",
8181
"@types/jest": "^24.0.13",
82-
"@types/lodash": "^4.14.129",
82+
"@types/lodash": "^4.14.132",
8383
"@types/node": "^10.14.7",
8484
"angular-cli-ghpages": "^0.5.3",
8585
"angular2-template-loader": "0.6.2",
@@ -89,7 +89,7 @@
8989
"commitplease": "3.2.0",
9090
"conventional-github-releaser": "2.0.2",
9191
"copy-webpack-plugin": "^5.0.3",
92-
"core-js": "^2.6.6",
92+
"core-js": "^2.6.9",
9393
"css-loader": "^2.1.1",
9494
"cssnano": "^4.1.10",
9595
"del": "3.0.0",
@@ -121,7 +121,7 @@
121121
"postcss-strip-inline-comments": "0.1.5",
122122
"pump": "^3.0.0",
123123
"raw-loader": "^1.0.0",
124-
"rollup": "^1.12.3",
124+
"rollup": "^1.12.5",
125125
"rollup-plugin-commonjs": "^9.2.2",
126126
"rollup-plugin-node-resolve": "^4.2.4",
127127
"rollup-plugin-sourcemaps": "0.4.2",
@@ -136,7 +136,7 @@
136136
"tsickle": "^0.34.3",
137137
"tslint": "^5.16.0",
138138
"typescript": "~3.2.4",
139-
"webpack": "^4.32.0",
139+
"webpack": "^4.32.2",
140140
"webpack-cli": "^3.3.2",
141141
"webpack-dev-middleware": "^3.7.0",
142142
"webpack-dev-server": "^3.4.1",

‎src/module/components/providers/auth.providers.component.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,20 @@
3535
<mat-icon svgIcon="github"></mat-icon>
3636
GitHub
3737
</button>
38+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
39+
mat-button
40+
[ngClass.xs]="{'space-full-xs':true}"
41+
(click)="authProcess.signInWith(authProvider.Microsoft)">
42+
<mat-icon svgIcon="microsoft"></mat-icon>
43+
Microsoft
44+
</button>
45+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
46+
mat-button
47+
[ngClass.xs]="{'space-full-xs':true}"
48+
(click)="authProcess.signInWith(authProvider.Yahoo)">
49+
<mat-icon svgIcon="yahoo"></mat-icon>
50+
Yahoo
51+
</button>
3852
</div>
3953

4054
<!--classic-->
@@ -71,6 +85,20 @@
7185
(click)="authProcess.signInWith(authProvider.Github)">
7286
GitHub
7387
</button>
88+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
89+
mat-button
90+
class="microsoft-classic"
91+
[ngClass.xs]="{'space-full-xs':true}"
92+
(click)="authProcess.signInWith(authProvider.Microsoft)">
93+
Microsoft
94+
</button>
95+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
96+
mat-button
97+
class="yahoo-classic"
98+
[ngClass.xs]="{'space-full-xs':true}"
99+
(click)="authProcess.signInWith(authProvider.Yahoo)">
100+
Yahoo
101+
</button>
74102
</div>
75103

76104
<!--stroked-->
@@ -107,6 +135,20 @@
107135
(click)="authProcess.signInWith(authProvider.Github)">
108136
GitHub
109137
</button>
138+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
139+
mat-stroked-button
140+
class="microsoft-classic"
141+
[ngClass.xs]="{'space-full-xs':true}"
142+
(click)="authProcess.signInWith(authProvider.Microsoft)">
143+
Microsoft
144+
</button>
145+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
146+
mat-stroked-button
147+
class="yahoo-classic"
148+
[ngClass.xs]="{'space-full-xs':true}"
149+
(click)="authProcess.signInWith(authProvider.Yahoo)">
150+
Yahoo
151+
</button>
110152
</div>
111153

112154
<!--raised-->
@@ -143,6 +185,20 @@
143185
(click)="authProcess.signInWith(authProvider.Github)">
144186
GitHub
145187
</button>
188+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
189+
mat-raised-button
190+
class="microsoft-raised"
191+
[ngClass.xs]="{'space-full-xs':true}"
192+
(click)="authProcess.signInWith(authProvider.Microsoft)">
193+
Microsoft
194+
</button>
195+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
196+
mat-raised-button
197+
class="yahoo-raised"
198+
[ngClass.xs]="{'space-full-xs':true}"
199+
(click)="authProcess.signInWith(authProvider.Yahoo)">
200+
Yahoo
201+
</button>
146202
</div>
147203

148204
<!--fab-->
@@ -174,6 +230,18 @@
174230
(click)="authProcess.signInWith(authProvider.Github)">
175231
<mat-icon svgIcon="github"></mat-icon>
176232
</button>
233+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
234+
mat-fab
235+
class="microsoft"
236+
(click)="authProcess.signInWith(authProvider.Microsoft)">
237+
<mat-icon svgIcon="microsoft"></mat-icon>
238+
</button>
239+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
240+
mat-fab
241+
class="yahoo-raised"
242+
(click)="authProcess.signInWith(authProvider.Yahoo)">
243+
<mat-icon svgIcon="yahoo"></mat-icon>
244+
</button>
177245
</div>
178246

179247
<!--mini-fab-->
@@ -207,5 +275,17 @@
207275
(click)="authProcess.signInWith(authProvider.Github)">
208276
<mat-icon svgIcon="github"></mat-icon>
209277
</button>
278+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
279+
mat-mini-fab
280+
class="microsoft"
281+
(click)="authProcess.signInWith(authProvider.Microsoft)">
282+
<mat-icon svgIcon="microsoft"></mat-icon>
283+
</button>
284+
<button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
285+
mat-mini-fab
286+
class="yahoo-raised"
287+
(click)="authProcess.signInWith(authProvider.Yahoo)">
288+
<mat-icon svgIcon="yahoo"></mat-icon>
289+
</button>
210290
</div>
211291
</div>

‎src/module/components/providers/auth.providers.component.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ $facebook: #385899;
33
$twitter: #1da1f2;
44
$github: #000000;
55
$phone: #02bd7e;
6+
$microsoft: #00A4EF;
7+
$microsoft_fab: #f8f9fa;
8+
$yahoo: #720e9e;
69

710
:host {
811
display: block;
@@ -51,6 +54,14 @@ $phone: #02bd7e;
5154
background-color: $github;
5255
}
5356

57+
.microsoft-raised {
58+
background-color: $microsoft;
59+
}
60+
61+
.yahoo-raised {
62+
background-color: $yahoo;
63+
}
64+
5465
.phone-raised {
5566
background-color: $phone;
5667
}
@@ -74,6 +85,14 @@ $phone: #02bd7e;
7485
color: $github !important;
7586
}
7687

88+
.microsoft-classic {
89+
color: $microsoft !important;
90+
}
91+
92+
.yahoo-classic {
93+
color: $yahoo !important;
94+
}
95+
7796
.phone-classic {
7897
color: $phone;
7998
}
@@ -87,3 +106,6 @@ $phone: #02bd7e;
87106
}
88107
}
89108

109+
button.microsoft {
110+
background: $microsoft_fab;
111+
}

‎src/module/components/providers/auth.providers.component.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ describe('AuthProvidersComponent', function () {
115115
it('should create by default all available providers button', () => {
116116
const div = fixture.debugElement.query(By.all());
117117
expect(div.name).toEqual('div');
118-
// should create the 4 buttons
119-
expect(div.children[0].children.length).toBe(4);
118+
// should create the 6 buttons
119+
expect(div.children[0].children.length).toBe(6);
120120
// console.log('div.children.length', div.children[0].children.length);
121121

122122
for (const child of div.children[0].children) {

‎src/module/components/providers/auth.providers.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export class AuthProvidersComponent {
3232
layout: string = Layout.ROW;
3333

3434
@Input()
35-
providers: string[] | string = AuthProvider.ALL; // google, facebook, twitter, github
35+
providers: string[] | string = AuthProvider.ALL; // google, facebook, twitter, github, mirosoft, yahoo
3636

3737
themes = Theme;
3838
authProvider = AuthProvider;
@@ -51,6 +51,10 @@ export class AuthProvidersComponent {
5151
_sanitizer.bypassSecurityTrustResourceUrl('/assets/mdi/twitter.svg'))
5252
.addSvgIcon('github',
5353
_sanitizer.bypassSecurityTrustResourceUrl('/assets/mdi/github-circle.svg'))
54+
.addSvgIcon('microsoft',
55+
_sanitizer.bypassSecurityTrustResourceUrl('/assets/mdi/microsoft.svg'))
56+
.addSvgIcon('yahoo',
57+
_sanitizer.bypassSecurityTrustResourceUrl('/assets/mdi/yahoo.svg'))
5458
.addSvgIcon('phone',
5559
_sanitizer.bypassSecurityTrustResourceUrl('/assets/phone.svg'));
5660
}

0 commit comments

Comments
 (0)