Merge remote-tracking branch 'origin/master'

Author: AnthonyNahas

docs/ngx-auth-firebaseui-avatar.md

@@ -92,9 +92,13 @@ or more advanced
 |:---------------------|:------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
 | canLogout          | `Input()` | `boolean`     | true | whether to render the logout button
 | links              | `Input()` | `LinkMenuItem[]`    | - | additional routes and links to add to the component
+| mode               | `Input()` | `string: 'default' | 'simple'` | `default` | in which mode show details in the menu
+| canViewAccount     | `Input()` | `boolean`     | true | whether to render the profile button to view account
 | canDeleteAccount   | `Input()` | `boolean`     | true | whether to render the delete account button
 | canEditAccount     | `Input()` | `boolean`     | true | whether to render the edit account button
-| onSignOut          | `Output()`| void        | - | this will be fired when the user signs out
+| textProfile        | `Input()` | `string`      | `Profile` | text at the profile button
+| textSignOut        | `Input()` | `string`      | `Sign Out` | text at the sign out button
+| onSignOut          | `Output()`| void          | - | this will be fired when the user signs out
 
 
 ```ts

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.html

@@ -1,4 +1,5 @@
 <button *ngIf="user"
+        class="ngx-auth-firebaseui-avatar-button"
         [matMenuTriggerFor]="posXMenu"
         [matTooltip]="user?.displayName"
         [style.background-image]="'url(' + user?.photoURL + ')'"
@@ -8,11 +9,12 @@
   <span *ngIf="!user?.photoURL">{{displayNameInitials || ''}}</span>
 </button>
 
-<mat-menu #posXMenu="matMenu" class="before" xPosition="before">
-  <div fxLayout="row" fxLayout.xs="column" style="padding-left: 10px; padding-right: 10px">
+<mat-menu #posXMenu="matMenu" class="before ngx-auth-firebaseui-avatar-menu" xPosition="before" >
+  <div fxLayout="row" fxLayout.xs="column" style="padding-left: 10px; padding-right: 10px" [ngStyle]="{ 'padding-top.px': layout === 'default' ? 0 : 10 }">
     <button [style.background-image]="'url(' + user?.photoURL + ')'"
             mat-fab
-            style="background-size: cover">
+            style="background-size: cover"
+            *ngIf="layout === 'default'">
       <span *ngIf="!user?.photoURL">{{displayNameInitials || ''}}</span>
     </button>
     <div fxLayout="column" style="padding-left: 10px; padding-right: 10px">
@@ -21,15 +23,15 @@
     </div>
   </div>
 
-  <div fxFlex="100" fxLayout="column">
+  <div fxFlex="100" fxLayout="column" [ngStyle]="{ 'padding-bottom.px': layout === 'default' ? 0 : 10 } ">
     <div *ngFor="let menuItem of links" class="links-menu">
       <button (click)="menuItem?.callback()" mat-menu-item>
         <mat-icon>{{menuItem?.icon}}</mat-icon>
         {{menuItem?.text}}</button>
     </div>
-    <button (click)="openProfile()" color="primary" fxLayoutAlign="center" mat-raised-button>Profile
+    <button *ngIf="canViewAccount" (click)="openProfile()" color="primary" fxLayoutAlign="center" mat-raised-button>{{ textProfile }}
     </button>
-    <button (click)="signOut()" *ngIf="canLogout" color="warn" fxLayoutAlign="center" mat-raised-button>Sign Out
+    <button (click)="signOut()" *ngIf="canLogout" color="warn" fxLayoutAlign="center" mat-raised-button>{{ textSignOut }}
     </button>
   </div>
 </mat-menu>

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui-avatar/ngx-auth-firebaseui-avatar.component.ts

@@ -19,18 +19,30 @@ export interface LinkMenuItem {
 })
 export class NgxAuthFirebaseuiAvatarComponent implements OnInit {
 
+  @Input()
+  layout: 'default' | 'simple' = 'default';
+
   @Input()
   canLogout = true;
 
   @Input()
   links: LinkMenuItem[];
 
+  @Input()
+  canViewAccount = true;
+
   @Input()
   canDeleteAccount = true;
 
   @Input()
   canEditAccount = true;
 
+  @Input()
+  textProfile = 'Profile';
+
+  @Input()
+  textSignOut = 'Sign Out';
+
   // tslint:disable-next-line:no-output-on-prefix
   @Output()
   onSignOut: EventEmitter<void> = new EventEmitter();

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui/auth.component.html

@@ -31,7 +31,7 @@
       <div class="user-email mat-body-2">{{ user?.email }}</div>
       <div class="actions">
         <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
-        <a [routerLink]="goBackURL" class="go-back-button action-button" color="primary"
+        <a *ngIf="verifyEmailGoBackText" [routerLink]="goBackURL" class="go-back-button action-button" color="primary"
            mat-stroked-button>{{ verifyEmailGoBackText }}</a>
         <button (click)="signOut()" class="sign-out-button action-button" color="warn"
                 mat-stroked-button>{{ signOutText }}</button>

projects/ngx-auth-firebaseui/src/lib/components/ngx-auth-firebaseui/auth.component.ts

@@ -106,7 +106,7 @@ export class AuthComponent implements OnInit, AfterViewInit, OnChanges, OnDestro
   // See email-confirmation component
   @Input() verifyEmailTitleText: string;
   @Input() verifyEmailConfirmationText: string;
-  @Input() verifyEmailGoBackText = 'Go back';
+  @Input() verifyEmailGoBackText: string;
   @Input() sendNewVerificationEmailText: string;
   @Input() signOutText = 'Sign out';
 

src/app/app.component.html

@@ -335,7 +335,12 @@
 
   </a>
 
-  <ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>
+  DEFAULT <ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>
+  SIMPLE <ngx-auth-firebaseui-avatar [layout]="'simple'"
+                              [canViewAccount]="false"
+                              [textProfile]="'My profile'"
+                              [textSignOut]="'Logout'"></ngx-auth-firebaseui-avatar>
+
 </div>
 
 <div class="content" role="main">

src/styles.scss

@@ -2,3 +2,8 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+// Custom CSS style for avatar mat-menu
+.ngx-auth-firebaseui-avatar-menu {
+    margin-top: 5px;
+}