From cc1076332bc46783719738a4ebac4309675b1200 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Fri, 28 Jul 2017 19:30:35 +0100 Subject: [PATCH] Loads username on login and can edit user details --- .gitignore | 3 + src/app/app.routing.ts | 2 +- .../components/account-edit.component.html | 109 +++++++++++++++ src/app/components/account-edit.component.ts | 128 ++++++++++++++++++ .../components/components-routing.module.ts | 8 ++ src/app/components/components.module.ts | 6 +- src/app/layouts/full-layout.component.html | 7 +- src/app/layouts/full-layout.component.ts | 8 +- src/app/providers/api-service.ts | 77 ++++++++++- 9 files changed, 341 insertions(+), 7 deletions(-) create mode 100644 src/app/components/account-edit.component.html create mode 100644 src/app/components/account-edit.component.ts diff --git a/.gitignore b/.gitignore index 658b421..f82ac9f 100644 --- a/.gitignore +++ b/.gitignore @@ -41,6 +41,9 @@ testem.log /e2e/*.js /e2e/*.map +# local env variable +/src/environments/environment.local.ts + # ========================= # Operating System Files # ========================= diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index 169e050..f47f099 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -15,7 +15,7 @@ export const routes: Routes = [ { path: '', component: FullLayoutComponent, - // canActivate: [AuthGuard], + canActivate: [AuthGuard], data: { title: 'Home' }, diff --git a/src/app/components/account-edit.component.html b/src/app/components/account-edit.component.html new file mode 100644 index 0000000..53b2e4e --- /dev/null +++ b/src/app/components/account-edit.component.html @@ -0,0 +1,109 @@ +
+
+
+
+
+ Update Account Info + Required Data marked in bold. +
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+
+ +
+ + This is a help text +
+
+
+
+ +
+
+
+
+
+
diff --git a/src/app/components/account-edit.component.ts b/src/app/components/account-edit.component.ts new file mode 100644 index 0000000..8ef11fd --- /dev/null +++ b/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 ); + } + ); + } + +} diff --git a/src/app/components/components-routing.module.ts b/src/app/components/components-routing.module.ts index 32f43f4..cf5a2b4 100644 --- a/src/app/components/components-routing.module.ts +++ b/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, diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index f98ef2d..8ad1177 100644 --- a/src/app/components/components.module.ts +++ b/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, diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 2b892a5..1924cc4 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -19,7 +19,7 @@
  • admin@bootstrapmaster.com - admin + {{displayName}}
    @@ -38,7 +38,7 @@ Notifications42
    Lock account - Logout + Logout
  • @@ -63,6 +63,9 @@
    • Leaderboards +
      • +
    • + Edit Account
    • Add Data diff --git a/src/app/layouts/full-layout.component.ts b/src/app/layouts/full-layout.component.ts index 7334954..eafb194 100644 --- a/src/app/layouts/full-layout.component.ts +++ b/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() diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index d6f2e34..9280d7e 100644 --- a/src/app/providers/api-service.ts +++ b/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) {