feat(assets): added verification's email status and onAccountDeleted …

…output event
AnthonyNahas · May 23, 2018 · 0f3b889 · 0f3b889
1 parent 985fc1a
commit 0f3b889
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/src/module/components/user/user.component.html b/src/module/components/user/user.component.html
@@ -1,7 +1,27 @@
 <mat-card *ngIf="auth.authState| async as user">
-  <mat-card-header fxLayoutAlign="center center">
-    <img mat-card-avatar [src]="user.photoURL">
+
+  <mat-card-header fxLayout="column" fxLayoutAlign="center center">
+
+    <img mat-card-avatar [src]="authProcess.getUserPhotoUrl()">
+
+    <div *ngIf="user.emailVerified; then emailVerified else emailNotVerified"></div>
+    <ng-template #emailVerified>
+      <mat-icon color="primary"
+                matTooltip="email is verified"
+                matTooltipPosition="after">
+        verified_user
+      </mat-icon>
+    </ng-template>
+    <ng-template #emailNotVerified>
+      <mat-icon color="warn"
+                matTooltip="email is not verified"
+                matTooltipPosition="after">
+        warning
+      </mat-icon>
+    </ng-template>
+
   </mat-card-header>
+
   <mat-card-content>
     <div fxLayoutAlign="center">
       <button mat-raised-button [color]="editMode ? 'warn' : 'primary' " class="edit-button"
@@ -29,7 +49,7 @@
     </ng-template>
     <ng-template #defaultActions>
       <button mat-button color="primary" (click)="auth.auth.signOut()">Sign out</button>
-      <button mat-button color="warn" (click)="user.delete()">Delete account</button>
+      <button mat-button color="warn" (click)="deleteAccount()">Delete account</button>
     </ng-template>
   </mat-card-actions>
 </mat-card>
diff --git a/src/module/components/user/user.component.ts b/src/module/components/user/user.component.ts
@@ -1,6 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {AngularFireAuth} from 'angularfire2/auth';
 import {MatSnackBar} from '@angular/material';
+import {AuthProcessService} from '../../services/auth-process.service';
 
 @Component({
   selector: 'ngx-auth-firebaseui-user',
@@ -9,9 +10,13 @@ import {MatSnackBar} from '@angular/material';
 })
 export class UserComponent implements OnInit {
 
+  @Output()
+  onAccountDeleted: EventEmitter<void> = new EventEmitter();
+
   editMode: boolean;
 
   constructor(public auth: AngularFireAuth,
+              public authProcess: AuthProcessService,
               private snackBar: MatSnackBar) {
   }
 
@@ -25,4 +30,26 @@ export class UserComponent implements OnInit {
     // user.updateEmail()
     this.snackBar.open('Sorry! This feature is under development', 'Ok');
   }
+
+  /**
+   * Delete the account of the current firebase user
+   *
+   * On Success, emit the <onAccountDeleted> event and toast a msg!#
+   * Otherwise, log the and toast and error msg!
+   *
+   */
+  async deleteAccount() {
+    try {
+      await this.authProcess.deleteAccount();
+      this.onAccountDeleted.emit();
+      this.snackBar.open('Your account has been successfully deleted!', 'OK', {
+        duration: 5000
+      })
+    } catch (error) {
+      console.log('Error while delete user\'s account', error);
+      this.snackBar.open('Error occurred while deleting your account!', 'OK', {
+        duration: 5000
+      })
+    }
+  }
 }