mohiit1502/bookstore-angular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

latest

Browse Source
This commit is contained in:
Le Deng
2017-03-07 11:28:04 -05:00
parent a69c5327a8
commit 27341a9112
8 changed files with 152 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
store-front/src/app/app.module.ts
View File

@@ -12,12 +12,14 @@ import { HomeComponent } from './components/home/home.component';
import { NavBarComponent } from './components/nav-bar/nav-bar.component';
import { LoginService } from './services/login.service';
import { MyAccountComponent } from './components/my-account/my-account.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
NavBarComponent
NavBarComponent,
MyAccountComponent
],
imports: [
BrowserModule,

5
store-front/src/app/app.routing.ts
View File

@@ -5,6 +5,7 @@ import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './components/home/home.component';
import {MyAccountComponent} from './components/my-account/my-account.component';
const appRoutes: Routes = [
@@ -16,6 +17,10 @@ const appRoutes: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'myAccount',
component: MyAccountComponent
}
];

6
store-front/src/app/components/home/home.component.html
View File

@@ -15,21 +15,21 @@
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-body">
<a th:href="@{/bookshelf}"> <img src="../../../assets/image/bestseller.png" class="img-responsive" /></a>
<img src="../../../assets/image/bestseller.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-body">
<a th:href="@{/hours}"><img src="../../../assets/image/hours.png" class="img-responsive" /></a>
<img src="../../../assets/image/hours.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-default">
<div class="panel-body">
<a th:href="@{/faq}"><img src="../../../assets/image/faq.png" class="img-responsive" /></a>
<img src="../../../assets/image/faq.png" class="img-responsive" />
</div>
</div>
</div>

0
store-front/src/app/components/my-account/my-account.component.css Normal file
View File

64
store-front/src/app/components/my-account/my-account.component.html Normal file
View File

@@ -0,0 +1,64 @@
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2 class="section-headline"><span>My Account</span></h2>
</div>
<div class="col-xs-4">
<img src="../../../assets/image/logo.png" class="img-responsive right" style="width:400px; z-index: 1;" />
</div>
<img class="img-responsive" src="../../../assets/image/wood.png" style="position: absolute;margin-top: 90px;z-index: -2;" />
</div>
<hr style="position: absolute; width:85%; height:6px; background-color: #333; z-index: -1; margin-top: -170px " />
<div class="row" style="margin-top: 30px;">
<div class="col-xs-3"></div>
<div class="col-xs-9">
<div class="panel-group">
<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()">
<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" />
<p style="color: #828282;"> Enter your username</p>
</div>
<div class="form-group">
<label for="password">Password *</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="credential.password" required="required" />
<p style="color: #828282;"> Enter the password that accompanies your username
</p>
</div>
<button md-raised-button type="submit" class="mat-primary">Log in</button>
</form>
</div>
</md-tab>
<md-tab label="Forget Password">Content 2</md-tab>
</md-tab-group>
</div>
</div>
</div>
</div>
</div>
</div>

28
store-front/src/app/components/my-account/my-account.component.spec.ts Normal file
View File

@@ -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 { MyAccountComponent } from './my-account.component';
describe('MyAccountComponent', () => {
let component: MyAccountComponent;
let fixture: ComponentFixture<MyAccountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MyAccountComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyAccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

47
store-front/src/app/components/my-account/my-account.component.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Component, OnInit } from '@angular/core';
import {AppConst} from '../../constants/app-const';
import {Router} from "@angular/router";
import {LoginService} from "../../services/login.service";
@Component({
selector: 'app-my-account',
templateUrl: './my-account.component.html',
styleUrls: ['./my-account.component.css']
})
export class MyAccountComponent implements OnInit {
private serverPath = AppConst.serverPath;
private loginError:boolean = false;
private loggedIn = false;
private credential = {'username':'', 'password':''};
constructor (private loginService: LoginService, private router: Router){
}
onSubmit() {
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;
}
);
}
ngOnInit() {
this.loginService.checkSession().subscribe(
res => {
this.loggedIn=true;
},
error => {
this.loggedIn=false;
}
);
}
}

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

@@ -3,7 +3,7 @@
<div class="container">
<div class="navbar-header">
<!-- The mobile navbar-toggle button can be safely removed since you do not need it in a non-responsive implementation -->
<a class="navbar-brand pointer" >LE'S BOOKSTORE</a>
<a class="navbar-brand pointer" routerLink="/home" routerLinkActive="active">LE'S BOOKSTORE</a>
</div>
<!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
<div id="navbar">
@@ -20,7 +20,7 @@
<li>
</li>
<li ><a md-button >LOGOUT</a></li>
<li ><a md-button routerLink="/myAccount" routerLinkActive="active">MY ACCOUNT</a></li>
</ul>
</div>
<!--/.nav-collapse -->