From a7c810136b92a97d5a95abb845a8de91e099d8e4 Mon Sep 17 00:00:00 2001
From: Isaac Grynsztein <IsaacMGrynsztein@gmail.com>
Date: Sun, 26 Apr 2020 17:33:29 -0400
Subject: [PATCH] Added basic user profile component

---
 src/app/app.component.html                    |  4 +++
 src/app/app.component.ts                      |  7 +++++
 src/app/app.module.ts                         |  4 ++-
 .../user-profile-dialog.component.html        | 23 +++++++++++++++
 .../user-profile-dialog.component.scss        |  0
 .../user-profile-dialog.component.spec.ts     | 25 +++++++++++++++++
 .../user-profile-dialog.component.ts          | 28 +++++++++++++++++++
 7 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/app/dialogs/user-profile-dialog/user-profile-dialog.component.html
 create mode 100644 src/app/dialogs/user-profile-dialog/user-profile-dialog.component.scss
 create mode 100644 src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts
 create mode 100644 src/app/dialogs/user-profile-dialog/user-profile-dialog.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0e03fe9..5de160c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -14,6 +14,10 @@
                 <div class="flex-column" style="text-align: right; align-items: flex-end;">
                     <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
                     <mat-menu #menuSettings="matMenu">
+                        <button (click)="openProfileDialog()" *ngIf="postsService.isLoggedIn" mat-menu-item>
+                            <mat-icon>person</mat-icon>
+                            <span i18n="Profile menu label">Profile</span>
+                        </button>
                         <button (click)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
                           <mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
                           <span i18n="Dark mode toggle label">Dark</span>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 52441b5..08e81cb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -23,6 +23,7 @@ import { THEMES_CONFIG } from '../themes';
 import { SettingsComponent } from './settings/settings.component';
 import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
+import { UserProfileDialogComponent } from './dialogs/user-profile-dialog/user-profile-dialog.component';
 
 @Component({
   selector: 'app-root',
@@ -196,5 +197,11 @@ onSetTheme(theme, old_theme) {
     });
   }
 
+  openProfileDialog() {
+    const dialogRef = this.dialog.open(UserProfileDialogComponent, {
+      width: '60vw'
+    });
+  }
+
 }
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6b57f5f..0334c6a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -59,6 +59,7 @@ import { UpdateProgressDialogComponent } from './dialogs/update-progress-dialog/
 import { ShareMediaDialogComponent } from './dialogs/share-media-dialog/share-media-dialog.component';
 import { LoginComponent } from './components/login/login.component';
 import { DownloadsComponent } from './components/downloads/downloads.component';
+import { UserProfileDialogComponent } from './dialogs/user-profile-dialog/user-profile-dialog.component';
 registerLocaleData(es, 'es');
 
 export function isVisible({ event, element, scrollContainer, offset }: IsVisibleProps<any>) {
@@ -89,7 +90,8 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     UpdateProgressDialogComponent,
     ShareMediaDialogComponent,
     LoginComponent,
-    DownloadsComponent
+    DownloadsComponent,
+    UserProfileDialogComponent
   ],
   imports: [
     CommonModule,
diff --git a/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.html b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.html
new file mode 100644
index 0000000..26b621c
--- /dev/null
+++ b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.html
@@ -0,0 +1,23 @@
+<h4 mat-dialog-title i18n="User profile dialog title">Your Profile</h4>
+
+<mat-dialog-content>
+    <div *ngIf="postsService.isLoggedIn && postsService.user">
+        <div>
+            <strong><ng-container i18n="Name">Name:</ng-container></strong>&nbsp;{{postsService.user.name}}
+        </div>
+        <div>
+            <strong><ng-container i18n="UID">UID:</ng-container></strong>&nbsp;{{postsService.user.uid}}
+        </div>
+        <div>
+            <strong><ng-container i18n="Created">Created:</ng-container></strong>&nbsp;{{postsService.user.created ? postsService.user.created : 'N/A'}}
+        </div>
+        <div style="margin-top: 10px;">
+            <button (click)="logoutClicked()" mat-flat-button color="warn"><ng-container i18n="Logout">Logout</ng-container></button>
+        </div>
+    </div>
+
+    <div *ngIf="!postsService.isLoggedIn || !postsService.user">
+        <h5><mat-icon>warn</mat-icon><ng-container i18n="Not logged in notification">You are not logged in.</ng-container></h5>
+        <button (click)="loginClicked()" mat-raised-button color="primary"><ng-container i18n="Login">Login</ng-container></button>
+    </div>
+</mat-dialog-content>
diff --git a/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.scss b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts
new file mode 100644
index 0000000..364e28b
--- /dev/null
+++ b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserProfileDialogComponent } from './user-profile-dialog.component';
+
+describe('UserProfileDialogComponent', () => {
+  let component: UserProfileDialogComponent;
+  let fixture: ComponentFixture<UserProfileDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserProfileDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserProfileDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.ts b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.ts
new file mode 100644
index 0000000..17d8c86
--- /dev/null
+++ b/src/app/dialogs/user-profile-dialog/user-profile-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { PostsService } from 'app/posts.services';
+import { Router } from '@angular/router';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-user-profile-dialog',
+  templateUrl: './user-profile-dialog.component.html',
+  styleUrls: ['./user-profile-dialog.component.scss']
+})
+export class UserProfileDialogComponent implements OnInit {
+
+  constructor(public postsService: PostsService, private router: Router, public dialogRef: MatDialogRef<UserProfileDialogComponent>) { }
+
+  ngOnInit(): void {
+  }
+
+  loginClicked() {
+    this.router.navigate(['/login']);
+    this.dialogRef.close();
+  }
+
+  logoutClicked() {
+    this.postsService.logout();
+    this.dialogRef.close();
+  }
+
+}