feat(package): added ngx-auth-firebaseui-avatar component

Author: AnthonyNahas

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

@@ -18,13 +18,16 @@
     <div fxLayout="column" style="padding-left: 10px; padding-right: 10px">
       <strong mat-card-title>{{user?.displayName}}</strong>
       <em mat-card-subtitle style="font-style: italic">{{user?.email}}</em>
+    </div>
+  </div>
 
-      <button mat-raised-button color="primary" (click)="openProfile()">Profile</button>
-      <!--<a [routerLink]="['/profile']" [queryParams]="{id:user?._id}" mat-raised-button color="primary">Profile</a>-->
+  <div fxLayout="column" fxFlex="100">
+    <div *ngFor="let menuItem of links">
+      <button mat-menu-item (click)="menuItem.callback">{{menuItem.text}}</button>
     </div>
+    <button mat-raised-button fxLayoutAlign="center" color="primary" (click)="openProfile()">Profile
+    </button>
+    <button *ngIf="canLogout" mat-raised-button fxLayoutAlign="center" color="warn" (click)="signOut()">Sign Out
+    </button>
   </div>
-  <!--<button fxLayoutAlign="center center" mat-menu-item (click)="onPower()">-->
-  <!--<mat-icon>power_settings_new</mat-icon>-->
-  <!--{{isLoggedIn? ('APP.UI.BUTTON.LOGOUT' | translate) : ('APP.UI.BUTTON.LOGIN' | translate) }}-->
-  <!--</button>-->
 </mat-menu>

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

@@ -0,0 +1,3 @@
+.mat-raised-button {
+  margin: 0.2rem 1rem;
+}

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

@@ -1,17 +1,32 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/auth';
 import {User} from 'firebase';
 import {Observable} from 'rxjs';
 import {MatDialog} from '@angular/material';
 import {UserComponent} from '../../..';
 
+export interface LinkMenuItem {
+  text: string;
+  icon?: string;
+  callback?: Function;
+}
+
 @Component({
   selector: 'ngx-auth-firebaseui-avatar',
   templateUrl: './ngx-auth-firebaseui-avatar.component.html',
   styleUrls: ['./ngx-auth-firebaseui-avatar.component.scss']
 })
 export class NgxAuthFirebaseuiAvatarComponent implements OnInit {
 
+  @Input()
+  canLogout = true;
+
+  @Input()
+  links: LinkMenuItem[];
+
+  @Output()
+  onSignOut: EventEmitter<void> = new EventEmitter();
+
   user: User;
   user$: Observable<User | null>;
   displayNameInitials: string;
@@ -41,4 +56,15 @@ export class NgxAuthFirebaseuiAvatarComponent implements OnInit {
   openProfile() {
     this.dialog.open(UserComponent);
   }
+
+  async signOut() {
+    try {
+      await this.afa.auth.signOut();
+      // Sign-out successful.
+      this.onSignOut.emit();
+    } catch (e) {
+      // An error happened.
+      console.error('An error happened while signing out!', e);
+    }
+  }
 }