Profile info and profile settings now works + removed unnecessary code

Author: jeroenouw

docs/FEATURES.md

@@ -12,6 +12,7 @@
 * Auth Guard
 * Profile
 * Profile image animation
+* Profile settings
 * Password reset
 * Alerts
 * 360 view

docs/TODO.md

@@ -1,7 +1,7 @@
 All improvements to this repo will first be done in the development branch.
 
 ## To Do List 
-* Make every component responsive
+* Make every component responsive (flex-layout)
 
 ## To Finish List (known issues)
 ### Auth
@@ -11,7 +11,6 @@ All improvements to this repo will first be done in the development branch.
 
 ### Profile
 * Profile image uploading
-* Profile settings (change settings)
 * Messaging layout and functionality
 
 ### Tests

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngxmatfire",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "author": "Jeroen Ouwehand",
   "description": "Full stack starter app with Angular 4, Material Design and Firebase.",
   "keywords": [

src/app/components/profile/profile-settings.component.html

@@ -2,31 +2,31 @@
     <md-card> 
     <h3>My profile settings</h3>
 
-    <form class="form" (ngSubmit)="onUpdateUserInfo(sv)" #sv="ngForm">
-
-        <md-input-container class="form-group">
-            <input mdInput placeholder="Username" id="displayName" name="displayName" ngModel required>
-        </md-input-container>
-
-        <md-input-container class="form-group">
-            <textarea mdInput placeholder="Short Bio" rows="8" id="bio" name="bio" ngModel required></textarea>
-        </md-input-container>
-
-        <hr>
-        
-        <md-card-actions class="button">
-            <button md-raised-button class="primary" type="submit">Save Settings</button>
-        </md-card-actions> 
-
-        <md-card-actions class="button">
-            <button md-raised-button class="primary" (click)="onLogout()">Logout</button>
-        </md-card-actions>   
-
-    </form>
-
-    <md-card-actions class="button">
-        <button md-raised-button class="primary" (click)="onPasswordReset()">Reset Password</button>
-    </md-card-actions> 
+        <form class="form" (ngSubmit)="onUpdateUserInfo(sv)" #sv="ngForm">
+
+            <md-input-container class="form-group">
+                <input mdInput placeholder="Username" id="displayName" name="displayName" [(ngModel)]="displayName" required>
+            </md-input-container>
+
+            <md-input-container class="form-group">
+                <textarea mdInput placeholder="Short Bio" rows="6" id="bio" name="bio" [(ngModel)]="bio" required></textarea>
+            </md-input-container>
+
+            <hr>
+            
+            <md-card-actions class="button">
+                <button md-raised-button class="primary" type="submit">Save Settings</button>
+            </md-card-actions> 
+
+            <md-card-actions class="button">
+                <button md-raised-button class="primary" (click)="onLogout()">Logout</button>
+            </md-card-actions>   
+            
+            <md-card-actions class="button">
+                <button md-raised-button class="primary" (click)="onPasswordReset()">Reset Password</button>
+            </md-card-actions> 
+
+        </form>
 
     </md-card>
  </div>

src/app/components/profile/profile-settings.component.ts

@@ -12,7 +12,9 @@ import { Profile, AuthService, AlertService, UserService } from '../shared';
   styleUrls: ['./profile-settings.component.scss']
 })
 export class ProfileSettingsComponent implements OnInit {
-  uid: any;
+  uid = firebase.auth().currentUser.uid; 
+  displayName: string = "Your username";
+  bio: any = "Your bio";
 
   constructor(
     private authService: AuthService,
@@ -21,7 +23,11 @@ export class ProfileSettingsComponent implements OnInit {
   }
 
   ngOnInit() {
-  }
+    firebase.database().ref().child(`users/${this.uid}`).once('value').then((snap) => {
+      this.displayName = snap.val().displayName;
+      this.bio = snap.val().bio;
+    });
+  } 
 
   onPasswordReset() {
     this.userService.sendUserPasswordResetEmail();

src/app/components/profile/profile.component.html

@@ -1,19 +1,17 @@
 <div class="profile">
   <md-card>
-    
     <div [@imageAnimation]='state' (click)="animateImage()" class="avatar"><img [src]="fullImagePath"></div>
-  
-  <md-card-header>
-    <md-card-title><h3>{{profileTitle}}</h3></md-card-title>
-    <md-card-title><h4>{{userEmail()}}</h4>
-      <md-card-subtitle id="displayName" name="displayName" ngModel>({{userName()}})</md-card-subtitle>
-      <md-card-subtitle>{{user.uid}}</md-card-subtitle>
-    </md-card-title>
-  </md-card-header>
 
-    <hr />
+    <md-card-header>
+      <md-card-title><h3>{{profileTitle}}</h3></md-card-title>
+      <md-card-title><h4>{{userEmail()}}</h4>
+        <md-card-subtitle>{{displayName}}</md-card-subtitle>
+      </md-card-title>
+    </md-card-header>
 
-    <!-- <md-card-subtitle>{{profileBio}}</md-card-subtitle> -->
+    <hr>
+    
+    <md-card-subtitle>{{bio}}</md-card-subtitle>
 
       <md-card-actions class="button">
           <button md-raised-button class="primary" (click)="onPasswordReset()">Reset my password</button>

src/app/components/profile/profile.component.scss

@@ -4,7 +4,7 @@
 
 md-card {
     width: 400px;
-    height: 390px;
+    height: 460px;
     margin: 100px auto;
 }
 
@@ -38,5 +38,7 @@ a:hover {
 }
 
 .button {
+    position: absolute;
+    bottom: 35px;
     margin: 0 auto;
 }

src/app/components/profile/profile.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+
 import * as firebase from 'firebase';
 
 import { User, Profile, UserService, AlertService } from '../shared';
@@ -28,35 +28,23 @@ import { User, Profile, UserService, AlertService } from '../shared';
   ]
 })
 export class ProfileComponent implements OnInit {
-  profile: Profile;
-  currentUser: User;
-  user: {uid: any};
   uid = firebase.auth().currentUser.uid;
 
   fullImagePath: string;
   profileTitle: string = 'My profile';
-  displayName: any;
-  bio: any;
+  displayName: string = "Your username";
+  bio: any = "Your bio";
 
   state = 'small';
 
-  constructor(private route: ActivatedRoute,
-              private userService: UserService,
-              private alertService: AlertService) {
-              this.fullImagePath = '/assets/img/mb-bg-04.png';
+  constructor(
+    private route: ActivatedRoute,
+    private userService: UserService,
+    private alertService: AlertService) {
+    this.fullImagePath = '/assets/img/mb-bg-04.png';
   }
 
   ngOnInit() {
-    this.user = {
-      uid: this.route.snapshot.params['uid']  
-    };
-    this.route.params
-      .subscribe(
-        (params: Params) => {
-          this.user.uid = params['uid'];
-        }
-      );
-      
     firebase.database().ref().child('users/' + this.uid).once('value').then((snap) => {
       this.displayName  = snap.val().displayName, 
       this.bio = snap.val().bio
@@ -72,11 +60,6 @@ export class ProfileComponent implements OnInit {
     return firebase.auth().currentUser.email;
   }
 
-  userName() {
-    this.userService.getUserProfileInformation();
-    return firebase.auth().currentUser.displayName;
-  }
-
   onPasswordReset() {
     this.userService.sendUserPasswordResetEmail();
     this.alertService.showToaster('Reset password is sent to your email');