Loads username on login and can edit user details
This commit is contained in:
piratefinn
parent
620282e9ac
commit
cc1076332b
9 changed files with 341 additions and 7 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -41,6 +41,9 @@ testem.log
|
|||
/e2e/*.js
|
||||
/e2e/*.map
|
||||
|
||||
# local env variable
|
||||
/src/environments/environment.local.ts
|
||||
|
||||
# =========================
|
||||
# Operating System Files
|
||||
# =========================
|
||||
|
|
|
|||
|
|
@ -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
109
src/app/components/account-edit.component.html
Normal 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
128
src/app/components/account-edit.component.ts
Normal 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 );
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
// 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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Reference in a new issue