Skip to content

Commit 27ae514

Browse files
antoanLengerdjievantoanLengerdjiev
committed
UI login and register + Authservice
1 parent cb3729b commit 27ae514

27 files changed

+398
-165
lines changed

‎e2e/app.e2e-spec.ts

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎e2e/app.po.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎e2e/tsconfig.json

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎karma.conf.js

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@angular/router": "3.2.3",
2323
"body-parser": "^1.15.2",
2424
"core-js": "^2.4.1",
25-
"crypto": "0.0.3",
25+
2626
"express": "^4.14.0",
2727
"express-session": "^1.14.2",
2828
"mongoose": "^4.7.4",

‎protractor.conf.js

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎server/configurations/express.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = function ({ app }) {
99
app.use(express.static(path.join(__dirname, '/../../dist/')));
1010

1111
app.use(bodyParser.urlencoded({ extended: true }));
12+
app.use(bodyParser.json());
1213
app.use(session({
1314
secret: "42noissesterces",
1415
resave: true,

‎server/routes/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,27 @@ module.exports = function ({ app }) {
1717
.status(200)
1818
.sendFile(path.join(__dirname, '/../../dist/index.html'));
1919
});
20+
21+
let testUser = { username: 'test', password: 'test', firstName: 'Test', lastName: 'User' }
22+
23+
app.post('/api/authenticate', (req, res) => {
24+
let params = req.body
25+
console.log(req.body);
26+
if(params.username == testUser.username && params.password == testUser.password){
27+
let token = 'fake-jwt-token';
28+
console.log(token);
29+
res.json({
30+
result:token
31+
});
32+
}
33+
else{
34+
res.send().status(200);
35+
}
36+
});
37+
38+
app.post('/api/register', (req, res) => {
39+
let params = req.body;
40+
console.log(params);
41+
res.send().status(200);
42+
})
2043
};

‎src/app/app.component.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
<h1>
2-
{{title}}
3-
</h1>
1+
<body id = "page">
2+
<app-nav></app-nav>
3+
<router-outlet>
4+
</router-outlet>
5+
</body>

‎src/app/app.component.spec.ts

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎src/app/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'app-root',
55
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.css']
6+
styleUrls: ['./app.component.css',]
77
})
88
export class AppComponent {
99
title = 'app works!';

‎src/app/app.module.ts

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,45 @@
1-
import { BrowserModule } from '@angular/platform-browser';
2-
import { NgModule } from '@angular/core';
3-
import { FormsModule } from '@angular/forms';
1+
2+
import { RouterModule } from '@angular/router';
43
import { HttpModule } from '@angular/http';
4+
import { NgModule } from '@angular/core';
5+
import { BrowserModule } from '@angular/platform-browser';
6+
import {FormsModule} from '@angular/forms';
7+
import { appRoutes } from './config/routes';
58

69
import { AppComponent } from './app.component';
710

11+
// Pages
12+
import {HomeComponent} from './components/home.component/home.component';
13+
import {LoginComponent} from './components/login.component/login.component';
14+
import {NavComponent} from './components/app-nav.component/app-nav.component';
15+
import { RegisterComponent } from './components/register.component/register.component'
16+
17+
// Services
18+
import {AuthenticationService} from './services/authentication.service'
19+
//import {UserService} from './services/user.service';
20+
import {GlobalEventsManager} from './services/globalEventsManager'
21+
// Guards
22+
import {AuthGuard} from './guards/auth.guard';
23+
824
@NgModule({
9-
declarations: [
10-
AppComponent
11-
],
1225
imports: [
1326
BrowserModule,
27+
HttpModule,
1428
FormsModule,
15-
HttpModule
29+
RouterModule.forRoot(appRoutes, { useHash: true })
30+
],
31+
declarations: [
32+
AppComponent,
33+
HomeComponent,
34+
LoginComponent,
35+
NavComponent,
36+
RegisterComponent
1637
],
17-
providers: [],
18-
bootstrap: [AppComponent]
38+
bootstrap: [AppComponent],
39+
providers: [
40+
AuthenticationService,
41+
AuthGuard,
42+
GlobalEventsManager
43+
]
1944
})
2045
export class AppModule { }

‎src/app/components/app-nav.component/app-nav.component.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<header id="header">
2+
<nav class="navbar navbar-inverse">
3+
<div class="container-fluid">
4+
<div class="navbar-header">
5+
<a class="navbar-brand" href="#">Angular Project</a>
6+
</div>
7+
<ul class="nav navbar-nav">
8+
<li class="active"><a href="#home">Home</a></li>
9+
<li *ngIf="user"><a href="#home/myprofile">My Profile</a></li>
10+
</ul>
11+
<ul class="nav navbar-nav navbar-right"(login)="isAuth($event)">
12+
<li [style.display]="user? 'none' : 'inherit'"><a [routerLink]="['/register']"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
13+
<li [style.display]="user? 'none' : 'inherit'"><a [routerLink]="['/login']" id="nav-login" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
14+
<li [style.display]="user? 'inherit' : 'none'"><a [routerLink]="['/login']" id="nav-logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
15+
</ul>
16+
</div>
17+
</nav>
18+
</header>

‎src/app/components/app-nav.component/app-nav.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Component, OnInit, OnChanges, SimpleChanges, Input} from '@angular/core';
2+
import {AuthenticationService} from '../../services/authentication.service'
3+
import {GlobalEventsManager} from '../../services/globalEventsManager';
4+
5+
@Component({
6+
selector: 'app-nav',
7+
templateUrl: './app-nav.component.html'
8+
})
9+
export class NavComponent implements OnInit {
10+
11+
user: boolean = localStorage.getItem('currentUser') ? true : false;
12+
auth: AuthenticationService;
13+
14+
constructor(private globalEventsManager: GlobalEventsManager) {
15+
this.globalEventsManager.showNavBarEmitter.subscribe((mode)=> {
16+
// mode will be null the first time it is created, so you need to igonore it when null
17+
if (mode !== null) {
18+
this.user = mode;
19+
}
20+
});
21+
}
22+
23+
ngOnInit() {
24+
this.user = localStorage.getItem('currentUser') ? true : false;
25+
console.log(this.user);
26+
27+
}
28+
29+
}

‎src/app/components/home.component/home.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="col-md-6 col-md-offset-3">
2+
<h1>Home</h1>
3+
<p>You're logged in with JWT!!</p>
4+
</div>

‎src/app/components/home.component/home.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
import { User } from '../../models/user.model';
4+
5+
6+
@Component({
7+
templateUrl: './home.component.html'
8+
})
9+
10+
export class HomeComponent implements OnInit {
11+
12+
constructor() { }
13+
14+
15+
}

‎src/app/components/login.component/login.component.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="col-md-6 col-md-offset-3">
2+
<h2>Login</h2>
3+
<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
4+
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
5+
<label for="username">Username</label>
6+
<input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
7+
<div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
8+
</div>
9+
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
10+
<label for="password">Password</label>
11+
<input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
12+
<div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
13+
</div>
14+
<div class="form-group">
15+
<button [disabled]="loading" class="btn btn-primary">Login</button>
16+
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
17+
</div>
18+
<div *ngIf="error" class="alert alert-danger">{{error}}</div>
19+
</form>
20+
</div>

0 commit comments

Comments
 (0)