fix(package): added onLoginRequested event in ngx-auth-firebaseui-register #323

Author: AnthonyNahas

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

@@ -55,13 +55,19 @@
           </mat-error>
         </mat-form-field>
 
-        <div *ngIf="this.tosUrl || this.privacyPolicyUrl"
-             class="terms"
-             fxLayout="row" fxLayoutAlign="center center">
+        <!--        <div *ngIf="this.tosUrl || this.privacyPolicyUrl"-->
+        <div
+          class="terms"
+          fxLayout="row" fxLayoutAlign="center center"
+          [@animate]="{value:'*',params:{duration:'250ms',y:'100px'}}">
           <mat-checkbox aria-label="I read and accept" name="terms" required>
             <span>{{readAncAcceptText}}</span>
+            <span>&nbsp;</span>
+            <a target="_blank"
+               [href]="this.tosUrl">
+              Terms of Service and Conditions
+            </a>
           </mat-checkbox>
-          <button mat-button [color]="color">{{termsAndConditionsText}}</button>
         </div>
 
         <button
@@ -80,7 +86,9 @@
           {{alreadyHaveAccountText}}
         </span>
         <button mat-button
+                type="button"
                 [color]="colorAccent"
+                (click)="onLoginRequested.emit()"
                 [@animate]="{ value: '*', params: { x: '-100px' } }">
           {{loginButtonText}}
         </button>

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

@@ -135,4 +135,8 @@ ngx-auth-firebaseui-register {
       }
     }
   }
+  ::ng-deep .mat-checkbox-label {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }

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

@@ -1,4 +1,4 @@
-import {Component, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID, ViewEncapsulation} from '@angular/core';
+import {Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID, ViewEncapsulation} from '@angular/core';
 import {AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
 import {MatFormFieldAppearance, ThemePalette} from '@angular/material';
 import {Subject, Subscription} from 'rxjs';
@@ -72,6 +72,7 @@ export class NgxAuthFirebaseuiRegisterComponent implements OnInit, OnDestroy {
   // Events
   @Output() onSuccess: any;
   @Output() onError: any;
+  @Output() onLoginRequested: EventEmitter<void> = new EventEmitter<void>();
 
   registerForm: FormGroup;
   onErrorSubscription: Subscription;