Skip to content

Commit e5fec91

Browse files
AnthonyNahasAnthonyNahas
committed
feat(package): added the first draft of ngx-auth-firebaseui-login comp. #316 
1 parent ecda449 commit e5fec91

10 files changed

+540
-228
lines changed

‎demo/src/app/home/home.component.html‎

Lines changed: 226 additions & 225 deletions
Large diffs are not rendered by default.

‎demo/src/app/shared/shared.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {BadgesComponent} from './badges/badges.component';
2020
import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';
2121
import {HighlightModule} from 'ngx-highlightjs';
2222
import {MatPagesModule} from '@angular-material-extensions/pages';
23+
import {MatCheckboxModule} from '@angular/material/checkbox';
2324

2425
@NgModule({
2526
imports: [
@@ -55,7 +56,8 @@ import {MatPagesModule} from '@angular-material-extensions/pages';
5556
MatIconModule,
5657
MatTooltipModule,
5758
MatInputModule,
58-
MatRippleModule
59+
MatRippleModule,
60+
MatCheckboxModule
5961
],
6062
declarations: [
6163
HeaderComponent,

‎demo/src/ngx-auth-firebaseui_theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
@import '../node_modules/@angular/material/theming';
2+
@import "app/home/ngx-auth-firebaseui-login/login.theme";
23
// Plus imports for other components in your app.
34

5+
// Define a mixin for easier access
6+
@mixin components-theme($theme) {
7+
@include login-theme($theme);
8+
}
9+
410
// Include the common styles for Angular Material. We include this here so that you only
511
// have to load a single css file for Angular Material in your app.
612
// Be sure that you only ever include this mixin once!
@@ -22,3 +28,5 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-
2228
// Alternatively, you can import and @include the theme mixins for each component
2329
// that you are using.
2430
@include angular-material-theme($candy-app-theme);
31+
32+
@include components-theme($candy-app-theme);

‎demo/tslint.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@
125125
"component-selector": [
126126
true,
127127
"element",
128-
"app",
129128
"kebab-case"
130129
],
131130
"no-output-on-prefix": true,

‎src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<div id="login" fxLayout="column">
2+
3+
<div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
4+
5+
<!-- <div id="login-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">-->
6+
<div id="login-form">
7+
8+
<div class="logo">
9+
<img src="assets/images/logos/fuse.svg">
10+
</div>
11+
12+
<div class="title">LOGIN TO YOUR ACCOUNT</div>
13+
14+
<form name="loginForm" [formGroup]="loginForm" novalidate>
15+
16+
<mat-form-field>
17+
<input matInput placeholder="Email" formControlName="email">
18+
<mat-icon matSuffix color="primary">email</mat-icon>
19+
<mat-error *ngIf="loginForm.get('email').hasError('required')">
20+
Email is required
21+
</mat-error>
22+
<mat-error
23+
*ngIf="!loginForm.get('email').hasError('required') &&
24+
loginForm.get('email').hasError('email')">
25+
Please enter a valid email address
26+
</mat-error>
27+
</mat-form-field>
28+
29+
<mat-form-field>
30+
<input matInput type="password" placeholder="Password" formControlName="password">
31+
<mat-icon matSuffix color="primary">lock</mat-icon>
32+
<mat-error>
33+
Password is required
34+
</mat-error>
35+
</mat-form-field>
36+
37+
<div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column"
38+
fxLayoutAlign="space-between center">
39+
<mat-checkbox class="remember-me" aria-label="Remember Me">
40+
Remember Me
41+
</mat-checkbox>
42+
43+
<button mat-button class="forgot-password" color="primary" type="button">
44+
Forgot Password?
45+
</button>
46+
</div>
47+
48+
<button mat-raised-button color="accent" class="submit-button" aria-label="LOG IN"
49+
[disabled]="loginForm.invalid">
50+
LOGIN
51+
</button>
52+
53+
</form>
54+
55+
<div class="separator">
56+
<span class="text">OR</span>
57+
</div>
58+
59+
<button mat-raised-button class="google">
60+
Log in with Google
61+
</button>
62+
63+
<button mat-raised-button class="facebook">
64+
Log in with Facebook
65+
</button>
66+
67+
<div class="register" fxLayout="column" fxLayoutAlign="center center">
68+
<span class="text">Don't have an account?</span>
69+
<button mat-button color="primary" type="button">Create an account</button>
70+
</div>
71+
72+
</div>
73+
74+
</div>
75+
76+
</div>

‎src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.scss‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
ngx-auth-firebaseui-login {
2+
3+
#login-form-wrapper {
4+
flex: 1 0 auto;
5+
padding: 32px;
6+
7+
@media screen and (max-width: 599px) {
8+
padding: 16px;
9+
}
10+
11+
#login-form {
12+
width: 384px;
13+
max-width: 384px;
14+
padding: 32px;
15+
text-align: center;
16+
//@include mat-elevation(16);
17+
18+
@media screen and (max-width: 599px) {
19+
padding: 24px;
20+
width: 100%;
21+
}
22+
23+
.logo {
24+
width: 128px;
25+
margin: 32px auto;
26+
}
27+
28+
.title {
29+
font-size: 20px;
30+
margin: 16px 0 32px 0;
31+
}
32+
33+
form {
34+
width: 100%;
35+
text-align: left;
36+
37+
mat-form-field {
38+
width: 100%;
39+
}
40+
41+
mat-checkbox {
42+
margin: 0;
43+
}
44+
45+
.remember-forgot-password {
46+
font-size: 13px;
47+
margin-top: 8px;
48+
49+
.remember-me {
50+
margin-bottom: 16px
51+
}
52+
53+
.forgot-password {
54+
font-size: 13px;
55+
font-weight: 500;
56+
margin-bottom: 16px
57+
}
58+
}
59+
60+
.submit-button {
61+
width: 220px;
62+
margin: 16px auto;
63+
display: block;
64+
65+
@media screen and (max-width: 599px) {
66+
width: 90%;
67+
}
68+
}
69+
}
70+
71+
.register {
72+
margin: 32px auto 24px auto;
73+
font-weight: 500;
74+
75+
.text {
76+
margin-right: 8px;
77+
}
78+
}
79+
80+
.separator {
81+
font-size: 15px;
82+
font-weight: 600;
83+
margin: 24px auto;
84+
position: relative;
85+
overflow: hidden;
86+
width: 100px;
87+
88+
.text {
89+
display: inline-flex;
90+
position: relative;
91+
padding: 0 8px;
92+
z-index: 9999;
93+
94+
&:before,
95+
&:after {
96+
content: '';
97+
display: block;
98+
width: 30px;
99+
position: absolute;
100+
top: 10px;
101+
border-top: 1px solid;
102+
}
103+
104+
&:before {
105+
right: 100%;
106+
}
107+
108+
&:after {
109+
left: 100%;
110+
}
111+
}
112+
}
113+
114+
button {
115+
116+
&.google,
117+
&.facebook {
118+
width: 192px;
119+
text-transform: none;
120+
color: #FFFFFF;
121+
font-size: 13px;
122+
margin-bottom: 8px;
123+
}
124+
125+
@media screen and (max-width: 599px) {
126+
width: 80%;
127+
}
128+
129+
&.google {
130+
background-color: #D73D32;
131+
}
132+
133+
&.facebook {
134+
background-color: rgb(63, 92, 154);
135+
}
136+
}
137+
}
138+
}
139+
}

‎src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { NgxAuthFirebaseuiLoginComponent } from './ngx-auth-firebaseui-login.component';
4+
5+
describe('NgxAuthFirebaseuiLoginComponent', () => {
6+
let component: NgxAuthFirebaseuiLoginComponent;
7+
let fixture: ComponentFixture<NgxAuthFirebaseuiLoginComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ NgxAuthFirebaseuiLoginComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(NgxAuthFirebaseuiLoginComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
2+
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
3+
4+
@Component({
5+
selector: 'ngx-auth-firebaseui-login',
6+
templateUrl: './ngx-auth-firebaseui-login.component.html',
7+
styleUrls: ['./ngx-auth-firebaseui-login.component.scss'],
8+
encapsulation: ViewEncapsulation.None,
9+
})
10+
export class NgxAuthFirebaseuiLoginComponent implements OnInit {
11+
12+
loginForm: FormGroup;
13+
14+
constructor(private _formBuilder: FormBuilder) {
15+
}
16+
17+
ngOnInit() {
18+
this.loginForm = this._formBuilder.group({
19+
email: ['', [Validators.required, Validators.email]],
20+
password: ['', Validators.required]
21+
});
22+
}
23+
24+
}

‎src/module/components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.theme.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@mixin login-theme($theme) {
2+
3+
$background: map-get($theme, background);
4+
$foreground: map-get($theme, foreground);
5+
$is-dark: map-get($theme, is-dark);
6+
7+
ngx-auth-firebaseui-login {
8+
9+
#login {
10+
11+
#login-form-wrapper {
12+
13+
#login-form {
14+
@if ($is-dark) {
15+
background: mat-color($mat-indigo, 600);
16+
} @else {
17+
background: map-get($background, card);
18+
}
19+
20+
.separator {
21+
color: map-get($foreground, divider);
22+
23+
.text {
24+
25+
&:before,
26+
&:after {
27+
border-top-color: map-get($foreground, divider);
28+
}
29+
}
30+
}
31+
}
32+
}
33+
}
34+
}
35+
}

‎src/module/ngx-auth-firebase-u-i.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {LoggedInGuard} from './guards/logged-in.guard';
3333
import {NgxAuthFirebaseuiAvatarComponent} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component';
3434
import {RouterModule} from '@angular/router';
3535
import {ngxAuthFirebaseUIConfigFactory} from './interfaces/config.interface';
36+
import {NgxAuthFirebaseuiLoginComponent} from './components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component';
3637

3738
// Export module's public API
3839
// components
@@ -41,6 +42,7 @@ export {UserComponent} from './components/ngx-auth-firebaseui-user/user.componen
4142
export {NgxAuthFirebaseuiAvatarComponent, LinkMenuItem} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component';
4243
export {AuthProvidersComponent, Theme, Layout} from './components/providers/auth.providers.component';
4344
export {LegalityDialogComponent} from './components/legality-dialog/legality-dialog.component';
45+
export {NgxAuthFirebaseuiLoginComponent} from './components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component';
4446
// services
4547
export {AuthProcessService, AuthProvider} from './services/auth-process.service';
4648
export {FirestoreSyncService} from './services/firestore-sync.service';
@@ -106,7 +108,8 @@ export const UserProvidedConfigToken = new InjectionToken<NgxAuthFirebaseUIConfi
106108
NgxAuthFirebaseuiAvatarComponent,
107109
AuthProvidersComponent,
108110
EmailConfirmationComponent,
109-
LegalityDialogComponent
111+
LegalityDialogComponent,
112+
NgxAuthFirebaseuiLoginComponent
110113
],
111114
entryComponents: [
112115
UserComponent,

0 commit comments

Comments
 (0)