latest

store-front/src/app/app.module.ts

@@ -12,14 +12,17 @@ import { HomeComponent } from './components/home/home.component';
 import { NavBarComponent } from './components/nav-bar/nav-bar.component';
 
 import { LoginService } from './services/login.service';
+import { UserService } from './services/user.service';
 import { MyAccountComponent } from './components/my-account/my-account.component';
+import { MyProfileComponent } from './components/my-profile/my-profile.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     NavBarComponent,
-    MyAccountComponent
+    MyAccountComponent,
+    MyProfileComponent
   ],
   imports: [
     BrowserModule,
@@ -29,7 +32,8 @@ import { MyAccountComponent } from './components/my-account/my-account.component
     MaterialModule
   ],
   providers: [
-    LoginService
+    LoginService,
+    UserService
   ],
   bootstrap: [AppComponent]
 })

store-front/src/app/components/my-account/my-account.component.html

@@ -16,29 +16,10 @@
                 <div class="panel panel-default panel-faq" style="border: none;">
                     <div class="panel-body" style="background-color: #ededed; margin-top: 20px;">
                         <md-tab-group>
-                            <md-tab label="New Account">
-                                <div style="margin-top:20px;">
-                                    <div class="alert alert-info" *ngIf="emailSent">An email has been sent to email address you just registered. Please validate your email address and update your password info.</div>
-                                    <form (ngSubmit)="onSubmit()">
-                                        <div class="form-group">
-                                            <label for="newUsername">Username *</label>&nbsp;<span *ngIf="usernameExists" style="color:red;">Username already exists. Choose a different one.</span>
-                                            <input required="required" type="text" class="form-control" id="newUsername" name="username" [(ngModel)]="username" />
-                                            <p style="color: #828282;"> Enter your username, special charaters are not allowed.
-                                            </p>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="email">Email address *</label>&nbsp;<span *ngIf="emailExists" style="color:red;">Email already exists. Choose a different one.</span>
-                                            <input required="required" type="email" class="form-control" id="email" name="email" [(ngModel)]="email" />
-                                            <p style="color: #828282;"> A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</p>
-                                        </div>
-                                        <button md-raised-button type="submit" class="mat-primary">Create new account</button>
-                                    </form>
-                                </div>
-                            </md-tab>
                             <md-tab label="Login">
                                 <div style="margin-top:20px;">
                                     <div *ngIf="loginError" style="color:red;">Incorrect username or password.</div>
-                                    <form (ngSubmit)="onSubmit()">
+                                    <form (ngSubmit)="onLogin()">
                                         <div class="form-group">
                                             <label for="username">Username *</label>
                                             <input type="text" class="form-control" id="username" name="username" [(ngModel)]="credential.username" required="required" autofocus="autofocus" />
@@ -54,7 +35,39 @@
                                     </form>
                                 </div>
                             </md-tab>
-                            <md-tab label="Forget Password">Content 2</md-tab>
+                            <md-tab label="New Account">
+                                <div style="margin-top:20px;">
+                                    <div class="alert alert-info" *ngIf="emailSent">An email has been sent to email address you just registered. Please validate your email address and update your password info.</div>
+                                    <form (ngSubmit)="onNewAccount()">
+                                        <div class="form-group">
+                                            <label for="newUsername">Username *</label>&nbsp;<span *ngIf="usernameExists" style="color:red;">Username already exists. Choose a different one.</span>
+                                            <input required="required" type="text" class="form-control" id="newUsername" name="username" [(ngModel)]="username" />
+                                            <p style="color: #828282;"> Enter your username, special charaters are not allowed.
+                                            </p>
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="email">Email address *</label>&nbsp;<span *ngIf="emailExists" style="color:red;">Email already exists. Choose a different one.</span>
+                                            <input required="required" type="email" class="form-control" id="email" name="email" [(ngModel)]="email" />
+                                            <p style="color: #828282;"> A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</p>
+                                        </div>
+                                        <button md-raised-button type="submit" class="mat-primary">Create new account</button>
+                                    </form>
+                                </div>
+                            </md-tab>
+                            <md-tab label="Forget Password">
+                                <div style="margin-top:20px;">
+                                    <div *ngIf="emailNotExists" class="alert alert-danger">Email doesn't exists.</div>
+                                    <div *ngIf="forgetPasswordEmailSent" class="alert alert-success">Email sent.</div>
+                                    <form (ngSubmit)="onForgetPassword()" method="post">
+                                        <div class="form-group">
+                                            <label for="recoverEmail">Your Email *</label>
+                                            <input type="text" class="form-control" id="recoverEmail" name="email" />
+                                            <p style="color: #828282;"> Enter your registered email address.</p>
+                                        </div>
+                                        <button md-raised-button type="submit" class="mat-primary">Submit</button>
+                                    </form>
+                                </div>
+                            </md-tab>
                         </md-tab-group>
                     </div>
                 </div>

store-front/src/app/components/my-account/my-account.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {AppConst} from '../../constants/app-const';
 import {Router} from "@angular/router";
 import {LoginService} from "../../services/login.service";
+import {UserService} from "../../services/user.service";
 
 @Component({
   selector: 'app-my-account',
@@ -15,10 +16,20 @@ export class MyAccountComponent implements OnInit {
   private loggedIn = false;
   private credential = {'username':'', 'password':''};
 
-  constructor (private loginService: LoginService, private router: Router){
+  private emailSent:boolean = false;
+  private usernameExists:boolean = false;
+  private emailExists:boolean = false;
+  private username:string;
+  private email:string;
+
+  private emailNotExists: boolean = false;
+  private forgetPasswordEmailSent: boolean = false;
+  private recoverEmail:string;
+
+  constructor (private loginService: LoginService, private userService: UserService, private router: Router){
   }
 
-  onSubmit() {
+  onLogin() {
     this.loginService.sendCredential(this.credential.username, this.credential.password).subscribe(
       res=>{
         console.log(res);
@@ -33,6 +44,43 @@ export class MyAccountComponent implements OnInit {
     );
   }
 
+  onNewAccount() {
+    this.usernameExists=false;
+    this.emailExists=false;
+    this.emailSent = false;
+    
+    this.userService.newUser(this.username, this.email).subscribe(
+      res => {
+        console.log(res);
+        this.emailSent = true;
+      },
+      error => {
+        console.log(error.text());
+        let errorMessage=error.text();
+        if (errorMessage==="usernameExists") this.usernameExists=true;
+        if (errorMessage==="emailExists") this.emailExists=true;
+      }
+    );
+  }
+
+  onForgetPassword() {
+    this.forgetPasswordEmailSent = false;
+    this.emailNotExists = false;
+    
+    this.userService.retrievePassword(this.recoverEmail).subscribe(
+      res => {
+        console.log(res);
+        this.emailSent = true;
+      },
+      error => {
+        console.log(error.text());
+        let errorMessage=error.text();
+        if (errorMessage==="usernameExists") this.usernameExists=true;
+        if (errorMessage==="emailExists") this.emailExists=true;
+      }
+    );
+  }
+
   ngOnInit() {
     this.loginService.checkSession().subscribe(
       res => {

store-front/src/app/components/my-profile/my-profile.component.html

@@ -0,0 +1,3 @@
+<p>
+  my-profile works!
+</p>

store-front/src/app/components/my-profile/my-profile.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { MyProfileComponent } from './my-profile.component';
+
+describe('MyProfileComponent', () => {
+  let component: MyProfileComponent;
+  let fixture: ComponentFixture<MyProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

store-front/src/app/components/my-profile/my-profile.component.ts

@@ -0,0 +1,94 @@
+import { Component, OnInit } from '@angular/core';
+import {AppConst} from '../../constants/app-const';
+import {Router} from "@angular/router";
+import {LoginService} from "../../services/login.service";
+import {UserService} from "../../services/user.service";
+
+@Component({
+  selector: 'app-my-profile',
+  templateUrl: './my-profile.component.html',
+  styleUrls: ['./my-profile.component.css']
+})
+export class MyProfileComponent implements OnInit {
+
+  private serverPath = AppConst.serverPath;
+  private loginError:boolean = false;
+  private loggedIn = false;
+  private credential = {'username':'', 'password':''};
+
+  private emailSent:boolean = false;
+  private usernameExists:boolean = false;
+  private emailExists:boolean = false;
+  private username:string;
+  private email:string;
+
+  private emailNotExists: boolean = false;
+  private forgetPasswordEmailSent: boolean = false;
+  private recoverEmail:string;
+
+  constructor (private loginService: LoginService, private userService: UserService, private router: Router){
+  }
+
+  onLogin() {
+    this.loginService.sendCredential(this.credential.username, this.credential.password).subscribe(
+      res=>{
+        console.log(res);
+        localStorage.setItem("xAuthToken", res.json().token);
+        this.loggedIn=true;
+        location.reload();
+    	this.router.navigate(['/home']);
+      },
+      error=>{
+        this.loggedIn=false;
+      }
+    );
+  }
+
+  onNewAccount() {
+    this.usernameExists=false;
+    this.emailExists=false;
+    this.emailSent = false;
+    
+    this.userService.newUser(this.username, this.email).subscribe(
+      res => {
+        console.log(res);
+        this.emailSent = true;
+      },
+      error => {
+        console.log(error.text());
+        let errorMessage=error.text();
+        if (errorMessage==="usernameExists") this.usernameExists=true;
+        if (errorMessage==="emailExists") this.emailExists=true;
+      }
+    );
+  }
+
+  onForgetPassword() {
+    this.forgetPasswordEmailSent = false;
+    this.emailNotExists = false;
+    
+    this.userService.retrievePassword(this.recoverEmail).subscribe(
+      res => {
+        console.log(res);
+        this.emailSent = true;
+      },
+      error => {
+        console.log(error.text());
+        let errorMessage=error.text();
+        if (errorMessage==="usernameExists") this.usernameExists=true;
+        if (errorMessage==="emailExists") this.emailExists=true;
+      }
+    );
+  }
+
+  ngOnInit() {
+    this.loginService.checkSession().subscribe(
+      res => {
+        this.loggedIn=true;
+      },
+      error => {
+        this.loggedIn=false;
+      }
+    );
+
+}

store-front/src/app/components/nav-bar/nav-bar.component.html

@@ -20,7 +20,8 @@
                 <li>
                     
                 </li>
-                <li ><a md-button routerLink="/myAccount" routerLinkActive="active">MY ACCOUNT</a></li>
+                <li *ngIf="!loggedIn" ><a md-button routerLink="/myAccount" routerLinkActive="active">MY ACCOUNT</a></li>
+                <li *ngIf="loggedIn"><a md-button (click)="logout()">LOGOUT</a></li>
             </ul>
         </div>
         <!--/.nav-collapse -->

store-front/src/app/services/user.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UserService]
+    });
+  });
+
+  it('should ...', inject([UserService], (service: UserService) => {
+    expect(service).toBeTruthy();
+  }));
+});

store-front/src/app/services/user.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import {AppConst} from '../constants/app-const';
+import {Http, Headers} from '@angular/http';
+
+@Injectable()
+export class UserService {
+  private serverPath:string = AppConst.serverPath;
+  
+  constructor(private http:Http) { }
+
+  newUser(username:string, email:string) {
+    let url = this.serverPath+"/user/newUser";
+    let userInfo = {
+    	"username" : username,
+    	"email" : email
+    };
+    let tokenHeader = new Headers ({
+      'Content-Type': 'application/json',
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.post(url, JSON.stringify(userInfo), {headers : tokenHeader});
+  }
+
+  retrievePassword(email:string) {
+    let url = this.serverPath+"/user/forgetPassword";
+    let userInfo = {
+    	"email" : email
+    };
+    let tokenHeader = new Headers ({
+      'Content-Type': 'application/json',
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.post(url, JSON.stringify(userInfo), {headers : tokenHeader});
+  }
+}