feat(package): added the first draft of ngx-auth-firebaseui-login c…

…omp. #316

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

@@ -20,6 +20,7 @@ import {BadgesComponent} from './badges/badges.component';
 import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';
 import {HighlightModule} from 'ngx-highlightjs';
 import {MatPagesModule} from '@angular-material-extensions/pages';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @NgModule({
   imports: [
@@ -55,7 +56,8 @@ import {MatPagesModule} from '@angular-material-extensions/pages';
     MatIconModule,
     MatTooltipModule,
     MatInputModule,
-    MatRippleModule
+    MatRippleModule,
+    MatCheckboxModule
   ],
   declarations: [
     HeaderComponent,

demo/src/ngx-auth-firebaseui_theme.scss

@@ -1,6 +1,12 @@
 @import '../node_modules/@angular/material/theming';
+@import "app/home/ngx-auth-firebaseui-login/login.theme";
 // Plus imports for other components in your app.
 
+// Define a mixin for easier access
+@mixin components-theme($theme) {
+  @include login-theme($theme);
+}
+
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // 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-
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include angular-material-theme($candy-app-theme);
+
+@include components-theme($candy-app-theme);

demo/tslint.json

@@ -125,7 +125,6 @@
     "component-selector": [
       true,
       "element",
-      "app",
       "kebab-case"
     ],
     "no-output-on-prefix": true,

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

@@ -0,0 +1,76 @@
+<div id="login" fxLayout="column">
+
+  <div id="login-form-wrapper" fxLayout="column" fxLayoutAlign="center center">
+
+    <!--    <div id="login-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">-->
+    <div id="login-form">
+
+      <div class="logo">
+        <img src="assets/images/logos/fuse.svg">
+      </div>
+
+      <div class="title">LOGIN TO YOUR ACCOUNT</div>
+
+      <form name="loginForm" [formGroup]="loginForm" novalidate>
+
+        <mat-form-field>
+          <input matInput placeholder="Email" formControlName="email">
+          <mat-icon matSuffix color="primary">email</mat-icon>
+          <mat-error *ngIf="loginForm.get('email').hasError('required')">
+            Email is required
+          </mat-error>
+          <mat-error
+            *ngIf="!loginForm.get('email').hasError('required') &&
+                                loginForm.get('email').hasError('email')">
+            Please enter a valid email address
+          </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+          <input matInput type="password" placeholder="Password" formControlName="password">
+          <mat-icon matSuffix color="primary">lock</mat-icon>
+          <mat-error>
+            Password is required
+          </mat-error>
+        </mat-form-field>
+
+        <div class="remember-forgot-password" fxLayout="row" fxLayout.xs="column"
+             fxLayoutAlign="space-between center">
+          <mat-checkbox class="remember-me" aria-label="Remember Me">
+            Remember Me
+          </mat-checkbox>
+
+          <button mat-button class="forgot-password" color="primary" type="button">
+            Forgot Password?
+          </button>
+        </div>
+
+        <button mat-raised-button color="accent" class="submit-button" aria-label="LOG IN"
+                [disabled]="loginForm.invalid">
+          LOGIN
+        </button>
+
+      </form>
+
+      <div class="separator">
+        <span class="text">OR</span>
+      </div>
+
+      <button mat-raised-button class="google">
+        Log in with Google
+      </button>
+
+      <button mat-raised-button class="facebook">
+        Log in with Facebook
+      </button>
+
+      <div class="register" fxLayout="column" fxLayoutAlign="center center">
+        <span class="text">Don't have an account?</span>
+        <button mat-button color="primary" type="button">Create an account</button>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

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

@@ -0,0 +1,139 @@
+ngx-auth-firebaseui-login {
+
+  #login-form-wrapper {
+    flex: 1 0 auto;
+    padding: 32px;
+
+    @media screen and (max-width: 599px) {
+      padding: 16px;
+    }
+
+    #login-form {
+      width: 384px;
+      max-width: 384px;
+      padding: 32px;
+      text-align: center;
+      //@include mat-elevation(16);
+
+      @media screen and (max-width: 599px) {
+        padding: 24px;
+        width: 100%;
+      }
+
+      .logo {
+        width: 128px;
+        margin: 32px auto;
+      }
+
+      .title {
+        font-size: 20px;
+        margin: 16px 0 32px 0;
+      }
+
+      form {
+        width: 100%;
+        text-align: left;
+
+        mat-form-field {
+          width: 100%;
+        }
+
+        mat-checkbox {
+          margin: 0;
+        }
+
+        .remember-forgot-password {
+          font-size: 13px;
+          margin-top: 8px;
+
+          .remember-me {
+            margin-bottom: 16px
+          }
+
+          .forgot-password {
+            font-size: 13px;
+            font-weight: 500;
+            margin-bottom: 16px
+          }
+        }
+
+        .submit-button {
+          width: 220px;
+          margin: 16px auto;
+          display: block;
+
+          @media screen and (max-width: 599px) {
+            width: 90%;
+          }
+        }
+      }
+
+      .register {
+        margin: 32px auto 24px auto;
+        font-weight: 500;
+
+        .text {
+          margin-right: 8px;
+        }
+      }
+
+      .separator {
+        font-size: 15px;
+        font-weight: 600;
+        margin: 24px auto;
+        position: relative;
+        overflow: hidden;
+        width: 100px;
+
+        .text {
+          display: inline-flex;
+          position: relative;
+          padding: 0 8px;
+          z-index: 9999;
+
+          &:before,
+          &:after {
+            content: '';
+            display: block;
+            width: 30px;
+            position: absolute;
+            top: 10px;
+            border-top: 1px solid;
+          }
+
+          &:before {
+            right: 100%;
+          }
+
+          &:after {
+            left: 100%;
+          }
+        }
+      }
+
+      button {
+
+        &.google,
+        &.facebook {
+          width: 192px;
+          text-transform: none;
+          color: #FFFFFF;
+          font-size: 13px;
+          margin-bottom: 8px;
+        }
+
+        @media screen and (max-width: 599px) {
+          width: 80%;
+        }
+
+        &.google {
+          background-color: #D73D32;
+        }
+
+        &.facebook {
+          background-color: rgb(63, 92, 154);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxAuthFirebaseuiLoginComponent } from './ngx-auth-firebaseui-login.component';
+
+describe('NgxAuthFirebaseuiLoginComponent', () => {
+  let component: NgxAuthFirebaseuiLoginComponent;
+  let fixture: ComponentFixture<NgxAuthFirebaseuiLoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NgxAuthFirebaseuiLoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxAuthFirebaseuiLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,24 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'ngx-auth-firebaseui-login',
+  templateUrl: './ngx-auth-firebaseui-login.component.html',
+  styleUrls: ['./ngx-auth-firebaseui-login.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class NgxAuthFirebaseuiLoginComponent implements OnInit {
+
+  loginForm: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) {
+  }
+
+  ngOnInit() {
+    this.loginForm = this._formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', Validators.required]
+    });
+  }
+
+}

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

@@ -0,0 +1,35 @@
+@mixin login-theme($theme) {
+
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark: map-get($theme, is-dark);
+
+  ngx-auth-firebaseui-login {
+
+    #login {
+
+      #login-form-wrapper {
+
+        #login-form {
+          @if ($is-dark) {
+            background: mat-color($mat-indigo, 600);
+          } @else {
+            background: map-get($background, card);
+          }
+
+          .separator {
+            color: map-get($foreground, divider);
+
+            .text {
+
+              &:before,
+              &:after {
+                border-top-color: map-get($foreground, divider);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -33,6 +33,7 @@ import {LoggedInGuard} from './guards/logged-in.guard';
 import {NgxAuthFirebaseuiAvatarComponent} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component';
 import {RouterModule} from '@angular/router';
 import {ngxAuthFirebaseUIConfigFactory} from './interfaces/config.interface';
+import {NgxAuthFirebaseuiLoginComponent} from './components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component';
 
 // Export module's public API
 // components
@@ -41,6 +42,7 @@ export {UserComponent} from './components/ngx-auth-firebaseui-user/user.componen
 export {NgxAuthFirebaseuiAvatarComponent, LinkMenuItem} from './components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component';
 export {AuthProvidersComponent, Theme, Layout} from './components/providers/auth.providers.component';
 export {LegalityDialogComponent} from './components/legality-dialog/legality-dialog.component';
+export {NgxAuthFirebaseuiLoginComponent} from './components/ngx-auth-firebaseui-login/ngx-auth-firebaseui-login.component';
 // services
 export {AuthProcessService, AuthProvider} from './services/auth-process.service';
 export {FirestoreSyncService} from './services/firestore-sync.service';
@@ -106,7 +108,8 @@ export const UserProvidedConfigToken = new InjectionToken<NgxAuthFirebaseUIConfi
     NgxAuthFirebaseuiAvatarComponent,
     AuthProvidersComponent,
     EmailConfirmationComponent,
-    LegalityDialogComponent
+    LegalityDialogComponent,
+    NgxAuthFirebaseuiLoginComponent
   ],
   entryComponents: [
     UserComponent,