feat(package): enhanced - i18n and more | ngx-auth-firebaseui-login…

… comp. #316

demo/src/ngx-auth-firebaseui_theme.scss

@@ -1,11 +1,11 @@
 @import '../node_modules/@angular/material/theming';
-@import "app/home/ngx-auth-firebaseui-login/login.theme";
+//@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);
-}
+//@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.
@@ -29,4 +29,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-
 // that you are using.
 @include angular-material-theme($candy-app-theme);
 
-@include components-theme($candy-app-theme);
+//@include components-theme($candy-app-theme);

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

@@ -5,15 +5,15 @@
     <!--    <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 *ngIf="logoUrl" class="logo">
+        <img [src]="logoUrl" alt="logo">
       </div>
 
-      <div class="title">LOGIN TO YOUR ACCOUNT</div>
+      <div class="title">{{titleText}}</div>
 
       <form name="loginForm" [formGroup]="loginForm" novalidate>
 
-        <mat-form-field>
+        <mat-form-field [appearance]="appearance">
           <input matInput placeholder="Email" formControlName="email">
           <mat-icon matSuffix color="primary">email</mat-icon>
           <mat-error *ngIf="loginForm.get('email').hasError('required')">
@@ -26,7 +26,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
+        <mat-form-field [appearance]="appearance">
           <input matInput type="password" placeholder="Password" formControlName="password">
           <mat-icon matSuffix color="primary">lock</mat-icon>
           <mat-error>
@@ -37,36 +37,40 @@
         <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
+            {{rememberMeText}}
           </mat-checkbox>
 
-          <button mat-button class="forgot-password" color="primary" type="button">
-            Forgot Password?
+          <button *ngIf="resetPasswordEnabled"
+                  mat-button
+                  class="forgot-password"
+                  color="primary"
+                  type="button">
+            {{forgotPasswordText}}
           </button>
         </div>
 
         <button mat-raised-button color="accent" class="submit-button" aria-label="LOG IN"
                 [disabled]="loginForm.invalid">
-          LOGIN
+          {{loginButtonText}}
         </button>
 
       </form>
 
       <div class="separator">
-        <span class="text">OR</span>
+        <span class="text">{{orLabelText}}</span>
       </div>
 
       <button mat-raised-button class="google">
-        Log in with Google
+        Google
       </button>
 
       <button mat-raised-button class="facebook">
-        Log in with Facebook
+        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>
+        <span class="text">{{dontHaveAnAccountText}}</span>
+        <button mat-button color="primary" type="button">{{createAccountButtonText}}</button>
       </div>
 
     </div>

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

@@ -1,5 +1,7 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {MatFormFieldAppearance} from '@angular/material';
+import {AuthProvider} from '../../..';
 
 @Component({
   selector: 'ngx-auth-firebaseui-login',
@@ -9,8 +11,26 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 })
 export class NgxAuthFirebaseuiLoginComponent implements OnInit {
 
+  logoUrl: string;
   loginForm: FormGroup;
 
+  @Input() providers: string[] | string = AuthProvider.ALL; //  google, facebook, twitter, github as array or all as one single string
+  @Input() appearance: MatFormFieldAppearance;
+  @Input() resetPasswordEnabled = true;
+
+  // i18n
+  @Input() titleText = 'LOGIN TO YOUR ACCOUNT';
+  @Input() rememberMeText = 'Remember Me';
+  @Input() loginButtonText = 'LOGIN';
+  @Input() orLabelText = 'OR';
+  @Input() forgotPasswordText = 'Forgot Password?';
+  @Input() dontHaveAnAccountText = 'Don\'t have an account?';
+  @Input() createAccountButtonText = 'Create an account';
+
+  // Events
+  @Output() onSuccess: any;
+  @Output() onError: any;
+
   constructor(private _formBuilder: FormBuilder) {
   }
 

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

@@ -55,6 +55,7 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro
   @Input() messageOnAuthSuccess: string;
   @Input() messageOnAuthError: string;
 
+  // Events
   @Output() onSuccess: any;
   @Output() onError: any;
   @Output() selectedTabChange: EventEmitter<MatTabChangeEvent> = new EventEmitter();

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

@@ -100,7 +100,8 @@ export const UserProvidedConfigToken = new InjectionToken<NgxAuthFirebaseUIConfi
     EmailConfirmationComponent,
     // LoggedInGuard,
     AngularFireAuthModule,
-    AngularFirestoreModule
+    AngularFirestoreModule,
+    NgxAuthFirebaseuiLoginComponent
   ],
   declarations: [
     AuthComponent,