Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Loads username on login and can edit user details

Browse source
This commit is contained in:
piratefinn 2017-07-28 19:30:35 +01:00
parent 620282e9ac
commit cc1076332b
9 changed files with 341 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

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

2
src/app/app.routing.ts
View file

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

109
src/app/components/account-edit.component.html Normal file
View file

@ -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>

128
src/app/components/account-edit.component.ts Normal file
View file

@ -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 );
}
);
}
}

8
src/app/components/components-routing.module.ts
View file

@ -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,

6
src/app/components/components.module.ts
View file

@ -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,

7
src/app/layouts/full-layout.component.html
View file

@ -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>

8
src/app/layouts/full-layout.component.ts
View file

@ -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()

77
src/app/providers/api-service.ts
View file

@ -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) {