Loads username on login and can edit user details

.gitignore

@@ -41,6 +41,9 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
+# local env variable
+/src/environments/environment.local.ts
+
 # =========================
 # Operating System Files
 # =========================

src/app/app.routing.ts

@@ -15,7 +15,7 @@ export const routes: Routes = [
   {
     path: '',
     component: FullLayoutComponent,
-	// canActivate: [AuthGuard],
+	  canActivate: [AuthGuard],
     data: {
       title: 'Home'
     },

src/app/components/account-edit.component.html

@@ -0,0 +1,109 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Update Account Info</strong>
+          <small>Required Data marked in <strong>bold</strong>.</small>
+        </div>
+        <form class="form-horizontal" [formGroup]="settingForm">
+          <div class="card-block">
+            <div class="form-group row">
+              <label class="col-md-3 form-control-label" for="text-input"><strong>Confirm Current Password</strong></label>
+              <div class="col-md-9">
+                <input type="password" class="form-control" formControlName="password">
+                <span class="help-block">This is a help text</span>
+              </div>
+            </div>
+          </div>
+          <div class="card-block">
+            <div class="form-group row">
+              <label class="col-md-3 form-control-label" for="text-input"><strong>Email</strong></label>
+              <div class="col-md-9">
+                <input type="text" class="form-control" formControlName="email">
+                <span class="help-block">This is a help text</span>
+              </div>
+            </div>
+          </div>
+          <div class="card-block">
+            <div class="form-group row">
+              <label class="col-md-3 form-control-label" for="text-input">Enter New Password</label>
+              <div class="col-md-9">
+                <input type="password" class="form-control" formControlName="new_password">
+                <span class="help-block">This is a help text</span>
+              </div>
+            </div>
+          </div>
+          <div class="card-block">
+            <div class="form-group row">
+              <label class="col-md-3 form-control-label" for="text-input"><strong>Postcode</strong></label>
+              <div class="col-md-9">
+                <input type="text" class="form-control" formControlName="postcode">
+                <span class="help-block">This is a help text</span>
+              </div>
+            </div>
+          </div>
+         </form>
+         <div [ngSwitch]="accountType">
+         <div *ngSwitchCase="'organisation'">
+         <form class="form-horizontal" [formGroup]="settingOrganisationForm" (ngSubmit)="onSubmitOrganisation()">
+           <div class="card-block">
+              <div class="form-group row">
+                <label class="col-md-3 form-control-label" for="text-input"><strong>Business Name</strong></label>
+                <div class="col-md-9">
+                  <input type="text" class="form-control" formControlName="name">
+                  <span class="help-block">This is a help text</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-block">
+              <div class="form-group row">
+                <label class="col-md-3 form-control-label" for="text-input"><strong>Street Name</strong></label>
+                <div class="col-md-9">
+                  <input type="text" class="form-control" formControlName="street_name">
+                  <span class="help-block">This is a help text</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-block">
+              <div class="form-group row">
+                <label class="col-md-3 form-control-label" for="text-input"><strong>Location</strong></label>
+                <div class="col-md-9">
+                  <input type="text" class="form-control" formControlName="town">
+                  <span class="help-block">This is a help text</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
+            </div>
+          </form>
+          </div>
+          <div *ngSwitchCase="'customer'">
+          <form class="form-horizontal" [formGroup]="settingCustomerForm" (ngSubmit)="onSubmitCustomer()">
+           <div class="card-block">
+              <div class="form-group row">
+                <label class="col-md-3 form-control-label" for="text-input"><strong>Full Name</strong></label>
+                <div class="col-md-9">
+                  <input type="text" class="form-control" formControlName="full_name">
+                  <span class="help-block">This is a help text</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-block">
+              <div class="form-group row">
+                <label class="col-md-3 form-control-label" for="text-input"><strong>Display Name</strong></label>
+                <div class="col-md-9">
+                  <input type="text" class="form-control" formControlName="display_name">
+                  <span class="help-block">This is a help text</span>
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
+            </div>
+          </form>
+      </div>
+    </div>
+  </div><!--/.row-->
+</div>

src/app/components/account-edit.component.ts

@@ -0,0 +1,128 @@
+import { Component, OnInit } from '@angular/core';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+import { Http, Response } from '@angular/http';
+import { ApiService } from '../providers/api-service';
+import 'rxjs/add/operator/map';
+
+@Component({
+  templateUrl: 'account-edit.component.html',
+  providers: [ApiService]
+})
+export class AccountEditComponent {
+  settingForm: FormGroup;
+  settingOrganisationForm: FormGroup;
+  settingCustomerForm: FormGroup;
+  accountType: any;
+
+  constructor(
+  private http: Http,
+	private formBuilder: FormBuilder,
+	private api: ApiService,
+	) {	
+	  this.settingForm = this.formBuilder.group({
+      email        : ['', [Validators.required]],
+      postcode     : ['', [Validators.required]],
+      password     : ['', [Validators.required]],
+      new_password : [''],
+	  }); 
+    this.settingOrganisationForm = this.formBuilder.group({
+      name         : ['', [Validators.required]],
+      street_name  : ['', [Validators.required]],
+      town         : ['', [Validators.required]],
+	  });
+    this.settingCustomerForm = this.formBuilder.group({
+      full_name     : ['', [Validators.required]],
+      display_name  : ['', [Validators.required]],
+    });
+  }
+  
+  ngOnInit(): void {
+    this.api.accountFullLoad().subscribe(
+      result => {
+        console.log(result);
+        this.settingForm.setValue({
+          email:        result.email,
+          postcode:     result.postcode,
+          password:     '',
+          new_password: '',
+        });
+        this.settingOrganisationForm.patchValue({
+          name:         result.name,
+          street_name:  result.street_name,
+          town:         result.town,
+        });
+        this.settingCustomerForm.patchValue({
+          full_name:    result.full_name,
+          display_name: result.display_name,
+        });
+        this.api.setUserInfo( result.email, result.display_name );
+        this.accountType = ( result.name == null ? 'customer' : 'organisation' );
+      },
+      error => {
+        console.log( error._body );
+      }
+    );
+  }
+  
+  onSubmitOrganisation() {
+	 console.log(this.settingForm.valid);
+	if (!this.settingForm.valid && !this.settingOrganisationForm.valid) {
+		console.log("Not Valid!");
+		return;
+	}
+  
+  let settingForm = this.settingForm.value;
+	let settingOrganisationForm = this.settingOrganisationForm.value;
+	
+  let data = {
+    email:        settingForm.email,
+    postcode:     settingForm.postcode,
+    password:     settingForm.password,
+    new_password: settingForm.new_password,
+    name:         settingOrganisationForm.name,
+    street_name:  settingOrganisationForm.street_name,
+    town:         settingOrganisationForm.town,
+  }
+	this.api
+    .accountEditUpdate(data)
+    .subscribe(
+      result => {
+        console.log('data submitted!');
+      },
+      error => {
+        console.log( error._body );
+      }
+    );
+  }
+  
+  onSubmitCustomer() {
+	 console.log(this.settingForm.valid);
+	if (!this.settingForm.valid && !this.settingCustomerForm.valid) {
+		console.log("Not Valid!");
+		return;
+	}
+  
+  let settingForm = this.settingForm.value;
+	let settingCustomerForm = this.settingCustomerForm.value;
+	
+  let data = {
+    email:        settingForm.email,
+    postcode:     settingForm.postcode,
+    password:     settingForm.password,
+    new_password: settingForm.new_password,
+    full_name:    settingCustomerForm.full_name,
+    display_name: settingCustomerForm.display_name,
+  }
+	this.api
+    .accountEditUpdate(data)
+    .subscribe(
+      result => {
+        console.log('data submitted!');
+      },
+      error => {
+        console.log( error._body );
+      }
+    );
+  }
+
+}

src/app/components/components-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { LeaderboardsComponent } from './leaderboards.component';
+import { AccountEditComponent } from './account-edit.component';
 import { AddDataComponent } from './add-data.component';
 import { ButtonsComponent } from './buttons.component';
 import { CardsComponent } from './cards.component';
@@ -26,6 +27,13 @@ const routes: Routes = [
           title: 'Leaderboards'
         }
       },
+      {
+        path: 'account-edit',
+        component: AccountEditComponent,
+        data: {
+          title: 'Edit Account'
+        }
+      },
       {
         path: 'add-data',
         component: AddDataComponent,

src/app/components/components.module.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
-// Pagesto be used in Production
+// Pages to be used in Production
 import { LeaderboardsComponent } from './leaderboards.component';
 import { AddDataComponent } from './add-data.component';
+import { AccountEditComponent } from './account-edit.component';
 
 // Buttons Component
 import { ButtonsComponent } from './buttons.component';
@@ -30,6 +32,7 @@ import { ComponentsRoutingModule } from './components-routing.module';
 
 @NgModule({
   imports: [
+    CommonModule,
     ComponentsRoutingModule,
     BsDropdownModule.forRoot(),
     FormsModule,
@@ -39,6 +42,7 @@ import { ComponentsRoutingModule } from './components-routing.module';
   ],
   declarations: [
     LeaderboardsComponent,
+    AccountEditComponent,
     AddDataComponent,
     ButtonsComponent,
     CardsComponent,

src/app/layouts/full-layout.component.html

@@ -19,7 +19,7 @@
     <li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
       <a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
         <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
-        <span class="d-md-down-none">admin</span>
+        <span class="d-md-down-none">{{displayName}}</span>
       </a>
       <div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
 
@@ -38,7 +38,7 @@
         <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Notifications<span class="badge badge-primary">42</span></a>
         <div class="divider"></div>
         <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock account</a>
-        <a class="dropdown-item" (click)="userlogout()"><i class="fa fa-lock"></i> Logout</a>
+        <a class="dropdown-item" (click)="userLogout()"><i class="fa fa-lock"></i> Logout</a>
       </div>
     </li>
     <li class="nav-item d-md-down-none">
@@ -63,6 +63,9 @@
           <ul class="nav-dropdown-items">
             <li class="nav-item">
               <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/leaderboards']"><i class="icon-puzzle"></i> Leaderboards</a>
+            </li>
+             <li class="nav-item">
+              <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/account-edit']"><i class="icon-puzzle"></i> Edit Account</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" routerLinkActive="active" [routerLink]="['/components/add-data']"><i class="icon-puzzle"></i> Add Data</a>

src/app/layouts/full-layout.component.ts

@@ -12,6 +12,7 @@ export class FullLayoutComponent implements OnInit {
   moneySpentThisMonth: any;
   pointsTotal: any;
   averageTransactionToday: any;
+  displayName: any;
   
   constructor(
   private api: ApiService,
@@ -42,9 +43,12 @@ export class FullLayoutComponent implements OnInit {
     this.status.isopen = !this.status.isopen;
   }
 
-  ngOnInit(): void {}
+  // getDisplayName function from api didnt work
+  ngOnInit(): void {
+    this.displayName = localStorage.getItem('displayname') || 'User';
+  }
   
-  userlogout() {
+  userLogout() {
 	console.log('logout clicked');
 	this.api
 	  .logout()

src/app/providers/api-service.ts

@@ -50,7 +50,13 @@ export class ApiService {
       data
     ).map( response => response.json() );
     login_event.subscribe(
-      result => {  this.setSessionKey(result.session_key) }
+      result => {  
+      this.setSessionKey(result.session_key); 
+      this.setUserInfo(
+        data.email,
+        result.display_name,
+        );
+      }
     );
     return login_event;
   }
@@ -73,6 +79,75 @@ export class ApiService {
 	  ).map( response => response.json() );
   }
   
+  // Handles user data interaction
+  
+  // Checks for login status
+
+  public hasLoggedIn() {
+    return this.getSessionKey() ? true : false;
+  }
+
+  // Pulls user info to store locally on login
+
+  public setUserInfo(
+    email: string,
+    display_name: string) {
+    console.log("set UserInfo");
+    localStorage.setItem('email',email);
+    localStorage.setItem('displayname',display_name);
+  }
+  
+  // Used for getting account details and updating
+  
+  public accountFullLoad() {
+	  let key = this.sessionKey;
+	  return this.http.post(
+      this.apiUrl + '/user',
+      { session_key : key },
+	  ).map( response => response.json() );
+  }
+  
+  public accountEditUpdate(data) {
+	  data.session_key = this.sessionKey;
+	  return this.http.post(
+      this.apiUrl + '/user/account',
+      data
+	  ).map( response => response.json() );
+  }
+
+  // Deletes account details on logout
+
+  public removeUserInfo() {
+    console.log("remove UserInfo");
+    localStorage.removeItem('email');
+    localStorage.removeItem('displayname');
+  }
+
+  public getFullName() {
+    console.log("get Full Name");
+    localStorage.getItem('fullname');
+  }
+
+  public getDisplayName() {
+    console.log("get Display Name");
+    localStorage.getItem('displayname');
+  }
+
+  public getPostcode() {
+    console.log("get Postcode");
+    localStorage.getItem('postcode');
+  }
+
+  public getYearOfBirth() {
+    console.log("get Year of Birth");
+    localStorage.getItem('yearofbirth');
+  }
+
+  public getEmail() {
+    console.log("get email");
+    localStorage.getItem('email');
+  }
+  
   // Leaderboard Api
   
   public leaderboard_fetch(data) {