From 2c95ba5ea3b31973d315d2679ee168be463a8bd5 Mon Sep 17 00:00:00 2001 From: Jose Martinez Date: Wed, 13 Sep 2017 21:55:00 -0500 Subject: [PATCH 1/6] installed mongoose --- package.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 543a131..1cafb42 100644 --- a/package.json +++ b/package.json @@ -22,15 +22,16 @@ "@angular/upgrade": "^4.0.0", "body-parser": "~1.15.2", "cookie-parser": "~1.4.3", + "core-js": "^2.4.1", "debug": "~2.2.0", "express": "~4.14.0", "hbs": "~3.1.0", + "mongoose": "^4.11.11", "morgan": "~1.6.1", "reflect-metadata": "^0.1.3", - "core-js": "^2.4.1", "rxjs": "^5.2.0", - "zone.js": "^0.8.5", - "serve-favicon": "~2.3.0" + "serve-favicon": "~2.3.0", + "zone.js": "^0.8.5" }, "devDependencies": { "@types/core-js": "0.9.36", From 5757a3b3d798cbf81d97c28bcfd255e542185de1 Mon Sep 17 00:00:00 2001 From: Jose Martinez Date: Thu, 14 Sep 2017 16:30:29 -0500 Subject: [PATCH 2/6] end of MongoDB section --- app.js | 3 +++ models/message.js | 9 +++++++++ models/user.js | 15 +++++++++++++++ package.json | 1 + routes/app.js | 25 +++++++++++++++++-------- views/node.hbs | 6 +++--- 6 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 models/message.js create mode 100644 models/user.js diff --git a/app.js b/app.js index ce38cbf..e531732 100644 --- a/app.js +++ b/app.js @@ -4,11 +4,14 @@ var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); +var mongoose = require('mongoose'); var appRoutes = require('./routes/app'); var app = express(); +mongoose.connect('localhost:27017/angular4-node') + // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs'); diff --git a/models/message.js b/models/message.js new file mode 100644 index 0000000..12fd123 --- /dev/null +++ b/models/message.js @@ -0,0 +1,9 @@ +var mongoose = require('mongoose'); +var Schema = mongoose.Schema; + +var schema = new Schema({ + content: {type: String, required: true}, + user: {type: Schema.Types.ObjectId, ref: 'User'} +}); + +module.exports = mongoose.model('Message', schema); \ No newline at end of file diff --git a/models/user.js b/models/user.js new file mode 100644 index 0000000..11487fb --- /dev/null +++ b/models/user.js @@ -0,0 +1,15 @@ +var mongoose = require('mongoose'); +var Schema = mongoose.Schema; +var mongooseUniqueValidator = require('mongoose-unique-validator'); + +var schema = new Schema({ + firstName: {type: String, required: true}, + lastName: {type: String, required: true}, + password: {type: String, required: true}, + email: {type: String, required: true}, + messages: [{type: Schema.Types.ObjectId, ref: 'Message'}] +}); + +schema.plugin(mongooseUniqueValidator); + +module.exports = mongoose.model('User', schema); \ No newline at end of file diff --git a/package.json b/package.json index 1cafb42..d1e403b 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "express": "~4.14.0", "hbs": "~3.1.0", "mongoose": "^4.11.11", + "mongoose-unique-validator": "^1.0.6", "morgan": "~1.6.1", "reflect-metadata": "^0.1.3", "rxjs": "^5.2.0", diff --git a/routes/app.js b/routes/app.js index 5c71bdb..4520854 100644 --- a/routes/app.js +++ b/routes/app.js @@ -1,17 +1,26 @@ var express = require('express'); var router = express.Router(); +var User = require('../models/user'); router.get('/', function (req, res, next) { - res.render('index'); + User.findOne({}, function(err, doc){ + if(err) { + return res.send('Error!'); + } + res.render('node', {email: doc.email}); + }); }); -router.get('/message/:msg', function (req, res, next) { - res.render('node', {message: req.params.msg}); -}); - -router.post('/message', function(req, res, next) { - var message = req.body.message; - res.redirect('/message/' + message); +router.post('/', function(req, res, next) { + var email = req.body.email; + var user = new User({ + firstName: 'Max', + lastName: 'Schwarz', + password: 'super-secret', + email: email + }); + user.save(); + res.redirect('/'); }); module.exports = router; diff --git a/views/node.hbs b/views/node.hbs index 1051e25..85692da 100644 --- a/views/node.hbs +++ b/views/node.hbs @@ -1,6 +1,6 @@

A NodeJS View

-{{ message }} -
- +{{ email }} + +
\ No newline at end of file From c1cd0594bbe2d5933f3d7ac3d6246d6292a86c15 Mon Sep 17 00:00:00 2001 From: Jose Martinez Date: Sat, 16 Sep 2017 15:28:28 -0500 Subject: [PATCH 3/6] whole finished angular section.. should've done more commits --- assets/app/app.component.html | 6 ++- assets/app/app.component.ts | 5 ++- assets/app/app.module.ts | 24 +++++++++++- assets/app/app.routing.ts | 12 ++++++ assets/app/auth/auth.routes.ts | 11 ++++++ assets/app/auth/authentication.component.ts | 22 +++++++++++ assets/app/auth/logout.component.ts | 15 ++++++++ assets/app/auth/signin.component.html | 13 +++++++ assets/app/auth/signin.component.ts | 25 ++++++++++++ assets/app/auth/signup.component.html | 21 ++++++++++ assets/app/auth/signup.component.ts | 27 +++++++++++++ assets/app/auth/user.model.ts | 6 +++ assets/app/header.component.ts | 18 +++++++++ .../app/messages/message-input.component.html | 15 ++++++++ .../app/messages/message-input.component.ts | 18 +++++++++ assets/app/messages/message-list.component.ts | 26 +++++++++++++ assets/app/messages/message.component.html | 15 ++++++++ assets/app/messages/message.component.ts | 38 +++++++++++++++++++ assets/app/messages/message.model.ts | 13 +++++++ assets/app/messages/message.service.ts | 19 ++++++++++ assets/app/messages/messages.component.ts | 16 ++++++++ routes/app.js | 20 +--------- views/node.hbs | 6 --- 23 files changed, 362 insertions(+), 29 deletions(-) create mode 100644 assets/app/app.routing.ts create mode 100644 assets/app/auth/auth.routes.ts create mode 100644 assets/app/auth/authentication.component.ts create mode 100644 assets/app/auth/logout.component.ts create mode 100644 assets/app/auth/signin.component.html create mode 100644 assets/app/auth/signin.component.ts create mode 100644 assets/app/auth/signup.component.html create mode 100644 assets/app/auth/signup.component.ts create mode 100644 assets/app/auth/user.model.ts create mode 100644 assets/app/header.component.ts create mode 100644 assets/app/messages/message-input.component.html create mode 100644 assets/app/messages/message-input.component.ts create mode 100644 assets/app/messages/message-list.component.ts create mode 100644 assets/app/messages/message.component.html create mode 100644 assets/app/messages/message.component.ts create mode 100644 assets/app/messages/message.model.ts create mode 100644 assets/app/messages/message.service.ts create mode 100644 assets/app/messages/messages.component.ts delete mode 100644 views/node.hbs diff --git a/assets/app/app.component.html b/assets/app/app.component.html index ba7c290..b8ec799 100644 --- a/assets/app/app.component.html +++ b/assets/app/app.component.html @@ -1 +1,5 @@ -

Hello World!

\ No newline at end of file +
+ +
+ +
\ No newline at end of file diff --git a/assets/app/app.component.ts b/assets/app/app.component.ts index becfd00..19a4920 100644 --- a/assets/app/app.component.ts +++ b/assets/app/app.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { Message } from './messages/message.model'; +import { MessageService } from './messages/message.service'; @Component({ selector: 'my-app', - templateUrl: './app.component.html' + templateUrl: './app.component.html', + providers: [MessageService] }) export class AppComponent { diff --git a/assets/app/app.module.ts b/assets/app/app.module.ts index dbef480..eb0b76e 100644 --- a/assets/app/app.module.ts +++ b/assets/app/app.module.ts @@ -1,13 +1,33 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { AppComponent } from "./app.component"; +import { MessageComponent } from './messages/message.component'; +import { MessageListComponent } from './messages/message-list.component'; +import { MessageInputComponent } from './messages/message-input.component'; +import { MessagesComponent } from './messages/messages.component'; +import { AuthenticationComponent } from './auth/authentication.component'; +import { HeaderComponent } from './header.component'; +import { routing } from './app.routing'; +import { SigninComponent } from './auth/signin.component'; +import { SignupComponent } from './auth/signup.component'; +import { LogoutComponent } from './auth/logout.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + MessageComponent, + MessageListComponent, + MessageInputComponent, + MessagesComponent, + AuthenticationComponent, + HeaderComponent, + SigninComponent, + SignupComponent, + LogoutComponent ], - imports: [BrowserModule], + imports: [BrowserModule, FormsModule, routing, ReactiveFormsModule], bootstrap: [AppComponent] }) export class AppModule { diff --git a/assets/app/app.routing.ts b/assets/app/app.routing.ts new file mode 100644 index 0000000..c15f928 --- /dev/null +++ b/assets/app/app.routing.ts @@ -0,0 +1,12 @@ +import { Routes, RouterModule } from "@angular/router"; +import { MessagesComponent } from "./messages/messages.component"; +import { AuthenticationComponent } from "./auth/authentication.component"; +import { AUTH_ROUTES } from "./auth/auth.routes"; + +const APP_ROUTES: Routes = [ + { path: '', redirectTo: '/messages', pathMatch: 'full'}, + { path: 'messages', component: MessagesComponent }, + { path: 'auth', component: AuthenticationComponent, children: AUTH_ROUTES } +]; + +export const routing = RouterModule.forRoot(APP_ROUTES); \ No newline at end of file diff --git a/assets/app/auth/auth.routes.ts b/assets/app/auth/auth.routes.ts new file mode 100644 index 0000000..f6c5652 --- /dev/null +++ b/assets/app/auth/auth.routes.ts @@ -0,0 +1,11 @@ +import { Routes } from '@angular/router'; +import { SignupComponent } from './signup.component'; +import { SigninComponent } from './signin.component'; +import { LogoutComponent } from './logout.component'; + +export const AUTH_ROUTES: Routes = [ + { path: '', redirectTo: 'signin', pathMatch: 'full' }, + { path: 'signup', component: SignupComponent }, + { path: 'signin', component: SigninComponent }, + { path: 'logout', component: LogoutComponent } +]; \ No newline at end of file diff --git a/assets/app/auth/authentication.component.ts b/assets/app/auth/authentication.component.ts new file mode 100644 index 0000000..b8b4421 --- /dev/null +++ b/assets/app/auth/authentication.component.ts @@ -0,0 +1,22 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: 'app-authentication', + template: ` +
+ +
+
+ +
+ ` +}) +export class AuthenticationComponent { + +} \ No newline at end of file diff --git a/assets/app/auth/logout.component.ts b/assets/app/auth/logout.component.ts new file mode 100644 index 0000000..d1520bc --- /dev/null +++ b/assets/app/auth/logout.component.ts @@ -0,0 +1,15 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: 'app-logout', + template: ` +
+ +
+ ` +}) +export class LogoutComponent { + onLogout() { + + } +} \ No newline at end of file diff --git a/assets/app/auth/signin.component.html b/assets/app/auth/signin.component.html new file mode 100644 index 0000000..00b086d --- /dev/null +++ b/assets/app/auth/signin.component.html @@ -0,0 +1,13 @@ +
+
+
+ + +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/assets/app/auth/signin.component.ts b/assets/app/auth/signin.component.ts new file mode 100644 index 0000000..ff8c14f --- /dev/null +++ b/assets/app/auth/signin.component.ts @@ -0,0 +1,25 @@ +import { Component } from "@angular/core"; +import { FormGroup, FormControl, Validators } from "@angular/forms"; + +@Component({ + selector: 'app-signin', + templateUrl: './signin.component.html' +}) +export class SigninComponent { + myForm: FormGroup; + + onSubmit() { + console.log(this.myForm); + this.myForm.reset(); + } + + ngOnInit() { + this.myForm = new FormGroup({ + email: new FormControl(null, [ + Validators.required, + Validators.email + ]), + password: new FormControl(null, Validators.required) + }); + } +} \ No newline at end of file diff --git a/assets/app/auth/signup.component.html b/assets/app/auth/signup.component.html new file mode 100644 index 0000000..8dd4366 --- /dev/null +++ b/assets/app/auth/signup.component.html @@ -0,0 +1,21 @@ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
\ No newline at end of file diff --git a/assets/app/auth/signup.component.ts b/assets/app/auth/signup.component.ts new file mode 100644 index 0000000..c730841 --- /dev/null +++ b/assets/app/auth/signup.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from "@angular/core"; +import { FormGroup, FormControl, Validators } from "@angular/forms"; + +@Component({ + selector: 'app-signup', + templateUrl: './signup.component.html' +}) +export class SignupComponent implements OnInit { + myForm: FormGroup; + + onSubmit() { + console.log(this.myForm); + this.myForm.reset(); + } + + ngOnInit() { + this.myForm = new FormGroup({ + firstName: new FormControl(null, Validators.required), + lastName: new FormControl(null, Validators.required), + email: new FormControl(null, [ + Validators.required, + Validators.email + ]), + password: new FormControl(null, Validators.required) + }); + } +} \ No newline at end of file diff --git a/assets/app/auth/user.model.ts b/assets/app/auth/user.model.ts new file mode 100644 index 0000000..c6e2a1f --- /dev/null +++ b/assets/app/auth/user.model.ts @@ -0,0 +1,6 @@ +export class User { + constructor(public email: string, + public password: string, + public firstName?: string, + public lastName?: string ) {} +} \ No newline at end of file diff --git a/assets/app/header.component.ts b/assets/app/header.component.ts new file mode 100644 index 0000000..2940875 --- /dev/null +++ b/assets/app/header.component.ts @@ -0,0 +1,18 @@ +import { Component } from "@angular/core"; + +@Component({ + selector: 'app-header', + template: ` +
+ +
+ ` +}) +export class HeaderComponent { + +} \ No newline at end of file diff --git a/assets/app/messages/message-input.component.html b/assets/app/messages/message-input.component.html new file mode 100644 index 0000000..d131037 --- /dev/null +++ b/assets/app/messages/message-input.component.html @@ -0,0 +1,15 @@ +
+
+
+ + +
+ +
+
\ No newline at end of file diff --git a/assets/app/messages/message-input.component.ts b/assets/app/messages/message-input.component.ts new file mode 100644 index 0000000..7629020 --- /dev/null +++ b/assets/app/messages/message-input.component.ts @@ -0,0 +1,18 @@ +import { Component } from "@angular/core"; +import { MessageService } from "./message.service"; +import { Message } from "./message.model"; +import { NgForm } from "@angular/forms"; + +@Component({ + selector: 'app-message-input', + templateUrl: './message-input.component.html' +}) +export class MessageInputComponent { + constructor(private messageService: MessageService) {} + + onSubmit(form: NgForm) { + const message = new Message(form.value.content, 'Joe'); + this.messageService.addMessage(message); + form.resetForm(); + } +} \ No newline at end of file diff --git a/assets/app/messages/message-list.component.ts b/assets/app/messages/message-list.component.ts new file mode 100644 index 0000000..7c202a1 --- /dev/null +++ b/assets/app/messages/message-list.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from "@angular/core"; +import { Message } from "./message.model"; +import { MessageService } from "./message.service"; + + +@Component({ + selector: 'app-message-list', + template: ` +
+ + +
+ ` +}) +export class MessageListComponent implements OnInit { + messages: Message[] = []; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.messages = this.messageService.getMessages(); + } +} \ No newline at end of file diff --git a/assets/app/messages/message.component.html b/assets/app/messages/message.component.html new file mode 100644 index 0000000..970efd8 --- /dev/null +++ b/assets/app/messages/message.component.html @@ -0,0 +1,15 @@ + +
+
+ {{ message.content }} +
+
+
+ {{ message.username }} +
+
+ Edit + Delete +
+
+
\ No newline at end of file diff --git a/assets/app/messages/message.component.ts b/assets/app/messages/message.component.ts new file mode 100644 index 0000000..5e9b79a --- /dev/null +++ b/assets/app/messages/message.component.ts @@ -0,0 +1,38 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Message } from './message.model'; +import { MessageService } from './message.service'; + +@Component({ + selector: 'app-message', + templateUrl: './message.component.html', + styles: [ + ` + .author { + display: inline-block; + font-style: italic; + font-size: 12px; + width: 80%; + } + .config { + display: inline-block; + text-align: right; + font-size: 12px; + width: 19%; + } + ` + ] +}) +export class MessageComponent { + @Input() message: Message; + @Output() editClicked = new EventEmitter(); + + constructor(private messageService: MessageService) {} + + onEdit() { + this.editClicked.emit('a new value'); + } + + onDelete() { + this.messageService.deleteMessage(this.message); + } +} \ No newline at end of file diff --git a/assets/app/messages/message.model.ts b/assets/app/messages/message.model.ts new file mode 100644 index 0000000..5904047 --- /dev/null +++ b/assets/app/messages/message.model.ts @@ -0,0 +1,13 @@ +export class Message { + content: String; + username: string; + messageId: string; + userId: string; + + constructor(content: string, username: string, messageId?: string, userId?: string) { + this.content = content; + this.username = username; + this.messageId = messageId; + this.userId = userId; + } +} \ No newline at end of file diff --git a/assets/app/messages/message.service.ts b/assets/app/messages/message.service.ts new file mode 100644 index 0000000..89411ee --- /dev/null +++ b/assets/app/messages/message.service.ts @@ -0,0 +1,19 @@ +import {Message} from './message.model' + +export class MessageService { + private messages: Message[] = []; + + addMessage(message: Message) { + + this.messages.push(message); + console.log(this.messages); + } + + getMessages() { + return this.messages; + } + + deleteMessage(message: Message) { + this.messages.splice(this.messages.indexOf(message), 1); + } +} \ No newline at end of file diff --git a/assets/app/messages/messages.component.ts b/assets/app/messages/messages.component.ts new file mode 100644 index 0000000..206c2b9 --- /dev/null +++ b/assets/app/messages/messages.component.ts @@ -0,0 +1,16 @@ +import { Component } from "@angular/core"; + + +@Component({ + selector: 'app-messages', + template: ` +
+ +
+ +
+ ` +}) +export class MessagesComponent { + +} \ No newline at end of file diff --git a/routes/app.js b/routes/app.js index 4520854..b346d11 100644 --- a/routes/app.js +++ b/routes/app.js @@ -1,26 +1,8 @@ var express = require('express'); var router = express.Router(); -var User = require('../models/user'); router.get('/', function (req, res, next) { - User.findOne({}, function(err, doc){ - if(err) { - return res.send('Error!'); - } - res.render('node', {email: doc.email}); - }); -}); - -router.post('/', function(req, res, next) { - var email = req.body.email; - var user = new User({ - firstName: 'Max', - lastName: 'Schwarz', - password: 'super-secret', - email: email - }); - user.save(); - res.redirect('/'); + res.render('index'); }); module.exports = router; diff --git a/views/node.hbs b/views/node.hbs deleted file mode 100644 index 85692da..0000000 --- a/views/node.hbs +++ /dev/null @@ -1,6 +0,0 @@ -

A NodeJS View

-{{ email }} -
- - -
\ No newline at end of file From 36362973e8b0241381ea461eb49bf7ca1ddd8468 Mon Sep 17 00:00:00 2001 From: Jose Martinez Date: Sun, 17 Sep 2017 14:46:57 -0500 Subject: [PATCH 4/6] finished message linking --- app.js | 4 + assets/app/app.module.ts | 9 +- .../app/messages/message-input.component.html | 3 +- .../app/messages/message-input.component.ts | 33 +++++- assets/app/messages/message-list.component.ts | 7 +- assets/app/messages/message.component.ts | 7 +- assets/app/messages/message.service.ts | 57 +++++++++- routes/messages.js | 103 ++++++++++++++++++ routes/users.js | 0 9 files changed, 208 insertions(+), 15 deletions(-) create mode 100644 routes/messages.js create mode 100644 routes/users.js diff --git a/app.js b/app.js index e531732..ba1f90b 100644 --- a/app.js +++ b/app.js @@ -7,6 +7,8 @@ var bodyParser = require('body-parser'); var mongoose = require('mongoose'); var appRoutes = require('./routes/app'); +var messagesRoutes = require('./routes/messages.js'); +var usersRoutes = require('./routes/users.js'); var app = express(); @@ -31,6 +33,8 @@ app.use(function (req, res, next) { next(); }); +app.use('/message', messagesRoutes); +//app.use('/user', usersRoutes); app.use('/', appRoutes); // catch 404 and forward to error handler diff --git a/assets/app/app.module.ts b/assets/app/app.module.ts index eb0b76e..ccd7d51 100644 --- a/assets/app/app.module.ts +++ b/assets/app/app.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms' +import { HttpModule } from '@angular/http' import { AppComponent } from "./app.component"; import { MessageComponent } from './messages/message.component'; @@ -27,7 +28,13 @@ import { LogoutComponent } from './auth/logout.component'; SignupComponent, LogoutComponent ], - imports: [BrowserModule, FormsModule, routing, ReactiveFormsModule], + imports: [ + BrowserModule, + FormsModule, + routing, + ReactiveFormsModule, + HttpModule + ], bootstrap: [AppComponent] }) export class AppModule { diff --git a/assets/app/messages/message-input.component.html b/assets/app/messages/message-input.component.html index d131037..470c083 100644 --- a/assets/app/messages/message-input.component.html +++ b/assets/app/messages/message-input.component.html @@ -6,10 +6,11 @@ type="text" id="content" class="form-control" - ngModel + [ngModel]="message?.content" name="content" required> + \ No newline at end of file diff --git a/assets/app/messages/message-input.component.ts b/assets/app/messages/message-input.component.ts index 7629020..19ef0fe 100644 --- a/assets/app/messages/message-input.component.ts +++ b/assets/app/messages/message-input.component.ts @@ -1,4 +1,4 @@ -import { Component } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { MessageService } from "./message.service"; import { Message } from "./message.model"; import { NgForm } from "@angular/forms"; @@ -7,12 +7,37 @@ import { NgForm } from "@angular/forms"; selector: 'app-message-input', templateUrl: './message-input.component.html' }) -export class MessageInputComponent { +export class MessageInputComponent implements OnInit { + message: Message; + constructor(private messageService: MessageService) {} + ngOnInit() { + this.messageService.messageIsEdit.subscribe( + (message: Message) => this.message = message + ); + } + onSubmit(form: NgForm) { - const message = new Message(form.value.content, 'Joe'); - this.messageService.addMessage(message); + if(this.message) { + this.message.content = form.value.content; + this.messageService.updateMessage(this.message).subscribe( + result => console.log(result) + ); + this.message = null; + } else { + const message = new Message(form.value.content, 'Joe'); + this.messageService.addMessage(message) + .subscribe( + data => console.log(data), + error => console.error(error) + ); + } form.resetForm(); } + + onClear(form: NgForm) { + this.message = null; + form.reset(); + } } \ No newline at end of file diff --git a/assets/app/messages/message-list.component.ts b/assets/app/messages/message-list.component.ts index 7c202a1..08b7727 100644 --- a/assets/app/messages/message-list.component.ts +++ b/assets/app/messages/message-list.component.ts @@ -21,6 +21,11 @@ export class MessageListComponent implements OnInit { constructor(private messageService: MessageService) {} ngOnInit() { - this.messages = this.messageService.getMessages(); + this.messageService.getMessages() + .subscribe( + (messages: Message[]) => { + this.messages = messages; + } + ); } } \ No newline at end of file diff --git a/assets/app/messages/message.component.ts b/assets/app/messages/message.component.ts index 5e9b79a..71c9a36 100644 --- a/assets/app/messages/message.component.ts +++ b/assets/app/messages/message.component.ts @@ -29,10 +29,13 @@ export class MessageComponent { constructor(private messageService: MessageService) {} onEdit() { - this.editClicked.emit('a new value'); + this.messageService.editMessage(this.message); } onDelete() { - this.messageService.deleteMessage(this.message); + this.messageService.deleteMessage(this.message) + .subscribe( + result => console.log(result) + ); } } \ No newline at end of file diff --git a/assets/app/messages/message.service.ts b/assets/app/messages/message.service.ts index 89411ee..8550050 100644 --- a/assets/app/messages/message.service.ts +++ b/assets/app/messages/message.service.ts @@ -1,19 +1,64 @@ -import {Message} from './message.model' +import { Message } from './message.model' +import { Injectable, EventEmitter } from '@angular/core'; +import 'rxjs/Rx'; +import { Observable } from 'rxjs'; +import { Http, Headers, Response } from '@angular/http'; +@Injectable() export class MessageService { private messages: Message[] = []; + messageIsEdit = new EventEmitter(); - addMessage(message: Message) { - - this.messages.push(message); - console.log(this.messages); + constructor(private http: Http) {} + + addMessage(message: Message) { + const body = JSON.stringify(message); + const headers = new Headers({'Content-Type': 'application/json'}); + return this.http.post('http://localhost:3000/message', body, {headers: headers}) + .map((response: Response) => { + const result = response.json(); + const message = new Message(result.obj.content, 'Dummy', result.obj._id, null); + this.messages.push(message); + return message; + }) + .catch((error: Response) => Observable.throw(error.json())); + } + + editMessage(message: Message) { + this.messageIsEdit.emit(message); + } + + updateMessage(message: Message) { + const body = JSON.stringify(message); + const headers = new Headers({'Content-Type': 'application/json'}); + return this.http.patch('http://localhost:3000/message/' + message.messageId, body, {headers: headers}) + .map((response: Response) => response.json()) + .catch((error: Response) => Observable.throw(error.json())); } getMessages() { - return this.messages; + return this.http.get('http://localhost:3000/message') + .map((response: Response) => { + const messages = response.json().obj; + let transformedMessages: Message[] = []; + for (let message of messages) { + transformedMessages.push(new Message( + message.content, + 'Dummy', + message._id, + null) + ); + } + this.messages = transformedMessages; + return transformedMessages + }) + .catch((error: Response) => Observable.throw(error.json())); } deleteMessage(message: Message) { this.messages.splice(this.messages.indexOf(message), 1); + return this.http.delete('http://localhost:3000/message/' + message.messageId) + .map((response: Response) => response.json()) + .catch((error: Response) => Observable.throw(error.json())); } } \ No newline at end of file diff --git a/routes/messages.js b/routes/messages.js new file mode 100644 index 0000000..38fa1f0 --- /dev/null +++ b/routes/messages.js @@ -0,0 +1,103 @@ +var express = require('express'); +var router = express.Router(); + +var Message = require('../models/message'); + +router.get('/', function(req, res, next) { + Message.find() + .exec(function(err, messages) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + + res.status(201).json({ + message: 'Success!', + obj: messages + }); + }); +}); + +router.post('/', function(req, res, next) { + var message = new Message({ + content: req.body.content + }); + + message.save(function(err, result) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + + res.status(201).json({ + message: 'Saved message', + obj: result + }); + }); +}); + +router.patch('/:id', function(req, res, next) { + Message.findById(req.params.id, function(err, message) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + if(!message) { + return res.status(500).json({ + title: 'No message found!', + error: {message: 'Message not found!'} + }); + } + + message.content = req.body.content; + message.save(function(err, result) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + res.status(200).json({ + message: 'Updated message', + obj: result + }); + }); + }); +}); + +router.delete('/:id', function(req, res, next) { + Message.findById(req.params.id, function(err, message) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + if(!message) { + return res.status(500).json({ + title: 'No message found!', + error: {message: 'Message not found!'} + }); + } + message.remove(function(err, result) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + res.status(200).json({ + message: 'Deleted message', + obj: result + }); + }); + }); +}); + +module.exports = router; \ No newline at end of file diff --git a/routes/users.js b/routes/users.js new file mode 100644 index 0000000..e69de29 From 929b1260045cf0d53e01ab3026cf383fe25ecf49 Mon Sep 17 00:00:00 2001 From: Jose Martinez Date: Sun, 17 Sep 2017 20:33:25 -0500 Subject: [PATCH 5/6] finished auth and users --- app.js | 2 +- assets/app/app.module.ts | 2 + assets/app/auth/auth.service.ts | 42 +++++++++++++++ assets/app/auth/authentication.component.ts | 11 +++- assets/app/auth/logout.component.ts | 6 ++- assets/app/auth/signin.component.ts | 18 ++++++- assets/app/auth/signup.component.ts | 16 +++++- assets/app/messages/message.component.html | 2 +- assets/app/messages/message.component.ts | 4 ++ assets/app/messages/message.service.ts | 25 ++++++--- models/message.js | 9 ++++ package.json | 2 + routes/messages.js | 59 ++++++++++++++++---- routes/users.js | 60 +++++++++++++++++++++ 14 files changed, 234 insertions(+), 24 deletions(-) create mode 100644 assets/app/auth/auth.service.ts diff --git a/app.js b/app.js index ba1f90b..e61d1be 100644 --- a/app.js +++ b/app.js @@ -34,7 +34,7 @@ app.use(function (req, res, next) { }); app.use('/message', messagesRoutes); -//app.use('/user', usersRoutes); +app.use('/user', usersRoutes); app.use('/', appRoutes); // catch 404 and forward to error handler diff --git a/assets/app/app.module.ts b/assets/app/app.module.ts index ccd7d51..d532014 100644 --- a/assets/app/app.module.ts +++ b/assets/app/app.module.ts @@ -14,6 +14,7 @@ import { routing } from './app.routing'; import { SigninComponent } from './auth/signin.component'; import { SignupComponent } from './auth/signup.component'; import { LogoutComponent } from './auth/logout.component'; +import { AuthService } from './auth/auth.service'; @NgModule({ declarations: [ @@ -35,6 +36,7 @@ import { LogoutComponent } from './auth/logout.component'; ReactiveFormsModule, HttpModule ], + providers: [AuthService], bootstrap: [AppComponent] }) export class AppModule { diff --git a/assets/app/auth/auth.service.ts b/assets/app/auth/auth.service.ts new file mode 100644 index 0000000..fb891ed --- /dev/null +++ b/assets/app/auth/auth.service.ts @@ -0,0 +1,42 @@ +import { Injectable } from "@angular/core"; +import { Http, Headers, Response } from "@angular/http"; +import 'rxjs/Rx'; +import { Observable } from "rxjs/Observable"; + +import { User } from "./user.model"; + + +@Injectable() +export class AuthService { + constructor(private http: Http) {} + + signup(user: User) { + const body = JSON.stringify(user); + const headers = new Headers({'Content-Type': 'application/json'}); + return this.http.post('http://localhost:3000/user', body, {headers: headers}) + .map((response: Response) => { + console.log(response); + return response.json(); + }) + .catch((error: Response) => { + console.error(error); + return Observable.throw(error.json()); + }); + } + + signin(user: User) { + const body = JSON.stringify(user); + const headers = new Headers({'Content-Type': 'application/json'}); + return this.http.post('http://localhost:3000/user/signin', body, {headers: headers}) + .map((response: Response) => response.json()) + .catch((error: Response) => Observable.throw(error.json())); + } + + logout() { + localStorage.clear(); + } + + isLoggedIn() { + return localStorage.getItem('token') !== null; + } +} \ No newline at end of file diff --git a/assets/app/auth/authentication.component.ts b/assets/app/auth/authentication.component.ts index b8b4421..e0930aa 100644 --- a/assets/app/auth/authentication.component.ts +++ b/assets/app/auth/authentication.component.ts @@ -1,4 +1,5 @@ import { Component } from "@angular/core"; +import { AuthService } from "./auth.service"; @Component({ selector: 'app-authentication', @@ -7,8 +8,8 @@ import { Component } from "@angular/core"; @@ -19,4 +20,10 @@ import { Component } from "@angular/core"; }) export class AuthenticationComponent { + constructor(private authService: AuthService) {} + + isLoggedIn() { + return this.authService.isLoggedIn(); + } + } \ No newline at end of file diff --git a/assets/app/auth/logout.component.ts b/assets/app/auth/logout.component.ts index d1520bc..49b97e2 100644 --- a/assets/app/auth/logout.component.ts +++ b/assets/app/auth/logout.component.ts @@ -1,4 +1,6 @@ import { Component } from "@angular/core"; +import { AuthService } from "./auth.service"; +import { Router } from "@angular/router"; @Component({ selector: 'app-logout', @@ -9,7 +11,9 @@ import { Component } from "@angular/core"; ` }) export class LogoutComponent { + constructor(private authService: AuthService, private router: Router) {} onLogout() { - + this.authService.logout(); + this.router.navigate(['/auth', 'signin']); } } \ No newline at end of file diff --git a/assets/app/auth/signin.component.ts b/assets/app/auth/signin.component.ts index ff8c14f..cabceb9 100644 --- a/assets/app/auth/signin.component.ts +++ b/assets/app/auth/signin.component.ts @@ -1,5 +1,8 @@ import { Component } from "@angular/core"; import { FormGroup, FormControl, Validators } from "@angular/forms"; +import { User } from "./user.model"; +import { AuthService } from "./auth.service"; +import { Router } from "@angular/router"; @Component({ selector: 'app-signin', @@ -8,8 +11,19 @@ import { FormGroup, FormControl, Validators } from "@angular/forms"; export class SigninComponent { myForm: FormGroup; - onSubmit() { - console.log(this.myForm); + constructor(private authService: AuthService, private router: Router) {} + + onSubmit() { + const user = new User(this.myForm.value.email, this.myForm.value.password) + this.authService.signin(user) + .subscribe( + data => { + localStorage.setItem('token', data.token); + localStorage.setItem('userId', data.userId); + this.router.navigateByUrl('/'); + }, + error => console.error(error) + ) this.myForm.reset(); } diff --git a/assets/app/auth/signup.component.ts b/assets/app/auth/signup.component.ts index c730841..eb5c736 100644 --- a/assets/app/auth/signup.component.ts +++ b/assets/app/auth/signup.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from "@angular/core"; import { FormGroup, FormControl, Validators } from "@angular/forms"; +import { AuthService } from "./auth.service"; +import { User } from "./user.model"; @Component({ selector: 'app-signup', @@ -8,8 +10,20 @@ import { FormGroup, FormControl, Validators } from "@angular/forms"; export class SignupComponent implements OnInit { myForm: FormGroup; + constructor(private authService: AuthService) {} + onSubmit() { - console.log(this.myForm); + const user = new User( + this.myForm.value.email, + this.myForm.value.password, + this.myForm.value.firstName, + this.myForm.value.lastName + ); + this.authService.signup(user) + .subscribe( + data => console.log(data), + error => console.error(error) + ); this.myForm.reset(); } diff --git a/assets/app/messages/message.component.html b/assets/app/messages/message.component.html index 970efd8..6088f05 100644 --- a/assets/app/messages/message.component.html +++ b/assets/app/messages/message.component.html @@ -7,7 +7,7 @@
{{ message.username }}
-
+
Edit Delete
diff --git a/assets/app/messages/message.component.ts b/assets/app/messages/message.component.ts index 71c9a36..fb14830 100644 --- a/assets/app/messages/message.component.ts +++ b/assets/app/messages/message.component.ts @@ -38,4 +38,8 @@ export class MessageComponent { result => console.log(result) ); } + + belongsToUser() { + return localStorage.getItem('userId') == this.message.userId; + } } \ No newline at end of file diff --git a/assets/app/messages/message.service.ts b/assets/app/messages/message.service.ts index 8550050..edf146a 100644 --- a/assets/app/messages/message.service.ts +++ b/assets/app/messages/message.service.ts @@ -14,10 +14,17 @@ export class MessageService { addMessage(message: Message) { const body = JSON.stringify(message); const headers = new Headers({'Content-Type': 'application/json'}); - return this.http.post('http://localhost:3000/message', body, {headers: headers}) + const token = localStorage.getItem('token') + ? '?token=' + localStorage.getItem('token') + : ''; + return this.http.post('http://localhost:3000/message' + token, body, {headers: headers}) .map((response: Response) => { const result = response.json(); - const message = new Message(result.obj.content, 'Dummy', result.obj._id, null); + const message = new Message( + result.obj.content, + result.obj.user.firstName, + result.obj._id, + result.obj.user._id); this.messages.push(message); return message; }) @@ -31,7 +38,10 @@ export class MessageService { updateMessage(message: Message) { const body = JSON.stringify(message); const headers = new Headers({'Content-Type': 'application/json'}); - return this.http.patch('http://localhost:3000/message/' + message.messageId, body, {headers: headers}) + const token = localStorage.getItem('token') + ? '?token=' + localStorage.getItem('token') + : ''; + return this.http.patch('http://localhost:3000/message/' + message.messageId + token, body, {headers: headers}) .map((response: Response) => response.json()) .catch((error: Response) => Observable.throw(error.json())); } @@ -44,9 +54,9 @@ export class MessageService { for (let message of messages) { transformedMessages.push(new Message( message.content, - 'Dummy', + message.user.firstName, message._id, - null) + message.user._id) ); } this.messages = transformedMessages; @@ -57,7 +67,10 @@ export class MessageService { deleteMessage(message: Message) { this.messages.splice(this.messages.indexOf(message), 1); - return this.http.delete('http://localhost:3000/message/' + message.messageId) + const token = localStorage.getItem('token') + ? '?token=' + localStorage.getItem('token') + : ''; + return this.http.delete('http://localhost:3000/message/' + message.messageId + token) .map((response: Response) => response.json()) .catch((error: Response) => Observable.throw(error.json())); } diff --git a/models/message.js b/models/message.js index 12fd123..4dd79c8 100644 --- a/models/message.js +++ b/models/message.js @@ -1,9 +1,18 @@ var mongoose = require('mongoose'); var Schema = mongoose.Schema; +var User = require('./user'); + var schema = new Schema({ content: {type: String, required: true}, user: {type: Schema.Types.ObjectId, ref: 'User'} }); +schema.post('remove', function(message) { + User.findById(message.user, function(err, user) { + user.messages.pull(message._id); + user.save(); + }); +}); + module.exports = mongoose.model('Message', schema); \ No newline at end of file diff --git a/package.json b/package.json index d1e403b..02bdd1d 100644 --- a/package.json +++ b/package.json @@ -20,12 +20,14 @@ "@angular/platform-server": "^4.0.0", "@angular/router": "^4.0.0", "@angular/upgrade": "^4.0.0", + "bcryptjs": "^2.4.3", "body-parser": "~1.15.2", "cookie-parser": "~1.4.3", "core-js": "^2.4.1", "debug": "~2.2.0", "express": "~4.14.0", "hbs": "~3.1.0", + "jsonwebtoken": "^8.0.1", "mongoose": "^4.11.11", "mongoose-unique-validator": "^1.0.6", "morgan": "~1.6.1", diff --git a/routes/messages.js b/routes/messages.js index 38fa1f0..c129cbc 100644 --- a/routes/messages.js +++ b/routes/messages.js @@ -1,10 +1,13 @@ var express = require('express'); var router = express.Router(); +var jwt = require('jsonwebtoken'); var Message = require('../models/message'); +var User = require('../models/user'); router.get('/', function(req, res, next) { Message.find() + .populate('user', 'firstName') .exec(function(err, messages) { if(err) { return res.status(500).json({ @@ -20,27 +23,51 @@ router.get('/', function(req, res, next) { }); }); -router.post('/', function(req, res, next) { - var message = new Message({ - content: req.body.content +router.use('/', function(req, res, next) { + jwt.verify(req.query.token, 'secret', function(err, decoded) { + if(err) { + return res.status(401).json({ + title: 'Not Authenticated', + error: err + }); + } + next(); }); +}); - message.save(function(err, result) { +router.post('/', function(req, res, next) { + var decoded = jwt.decode(req.query.token); + User.findById(decoded.user._id, function(err, user) { if(err) { return res.status(500).json({ title: 'An error occurred', error: err }); } - - res.status(201).json({ - message: 'Saved message', - obj: result + var message = new Message({ + content: req.body.content, + user: user._id }); - }); + + message.save(function(err, result) { + if(err) { + return res.status(500).json({ + title: 'An error occurred', + error: err + }); + } + user.messages.push(result); + user.save(); + res.status(201).json({ + message: 'Saved message', + obj: result + }); + }); + }); }); router.patch('/:id', function(req, res, next) { + var decoded = jwt.decode(req.query.token); Message.findById(req.params.id, function(err, message) { if(err) { return res.status(500).json({ @@ -54,7 +81,12 @@ router.patch('/:id', function(req, res, next) { error: {message: 'Message not found!'} }); } - + if(message.user != decoded.user._id) { + return res.status(401).json({ + title: 'Not Authenticated', + error: {message: 'Users do not match'} + }); + } message.content = req.body.content; message.save(function(err, result) { if(err) { @@ -72,6 +104,7 @@ router.patch('/:id', function(req, res, next) { }); router.delete('/:id', function(req, res, next) { + var decoded = jwt.decode(req.query.token); Message.findById(req.params.id, function(err, message) { if(err) { return res.status(500).json({ @@ -85,6 +118,12 @@ router.delete('/:id', function(req, res, next) { error: {message: 'Message not found!'} }); } + if(message.user != decoded.user._id) { + return res.status(401).json({ + title: 'Not Authenticated', + error: {message: 'Users do not match'} + }); + } message.remove(function(err, result) { if(err) { return res.status(500).json({ diff --git a/routes/users.js b/routes/users.js index e69de29..8e8baf2 100644 --- a/routes/users.js +++ b/routes/users.js @@ -0,0 +1,60 @@ +var express = require('express'); +var router = express.Router(); +var bcrypt = require('bcryptjs'); +var jwt = require('jsonwebtoken'); + +var User = require('../models/user'); + +router.post('/', function(req, res, next) { + var user = new User({ + firstName: req.body.firstName, + lastName: req.body.lastName, + password: bcrypt.hashSync(req.body.password, 10), + email: req.body.email, + }); + user.save(function(err, result){ + if(err) { + return res.status(500).json({ + title: 'An error occurred', + errors: err + }); + } + res.status(201).json({ + message: 'User created', + obj: result + }); + }); +}); + +router.post('/signin', function(req, res, next) { + User.findOne({email: req.body.email}, function(err, user){ + if (err) { + return res.status(500).json({ + title: 'An error occurred', + errors: err + }); + } + if (!user) { + return res.status(401).json({ + title: 'Login failed', + errors: { message: 'Invalid login credentials'} + }); + } + if(!bcrypt.compareSync(req.body.password, user.password)) { + return res.status(401).json({ + title: 'Login failed', + errors: { message: 'Invalid login credentials'} + }); + } + + //gut + var token = jwt.sign({user: user}, 'secret', {expiresIn: 7200}); + res.status(200).json({ + message: 'Successfully logged in', + token: token, + userId: user._id + }); + }); +}); + +module.exports = router; \ No newline at end of file From 2a8c2a173d4ed575cfda38184cefa680533c826e Mon Sep 17 00:00:00 2001 From: Jose Martinez Date: Sun, 17 Sep 2017 21:14:54 -0500 Subject: [PATCH 6/6] finished errors section --- assets/app/app.component.html | 3 +- assets/app/app.module.ts | 7 +++-- assets/app/auth/auth.service.ts | 10 +++++-- assets/app/errors/error.component.html | 19 +++++++++++++ assets/app/errors/error.component.ts | 39 ++++++++++++++++++++++++++ assets/app/errors/error.model.ts | 3 ++ assets/app/errors/error.service.ts | 11 ++++++++ assets/app/messages/message.service.ts | 23 +++++++++++---- 8 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 assets/app/errors/error.component.html create mode 100644 assets/app/errors/error.component.ts create mode 100644 assets/app/errors/error.model.ts create mode 100644 assets/app/errors/error.service.ts diff --git a/assets/app/app.component.html b/assets/app/app.component.html index b8ec799..44cf02d 100644 --- a/assets/app/app.component.html +++ b/assets/app/app.component.html @@ -2,4 +2,5 @@
-
\ No newline at end of file + + \ No newline at end of file diff --git a/assets/app/app.module.ts b/assets/app/app.module.ts index d532014..b5caed5 100644 --- a/assets/app/app.module.ts +++ b/assets/app/app.module.ts @@ -15,6 +15,8 @@ import { SigninComponent } from './auth/signin.component'; import { SignupComponent } from './auth/signup.component'; import { LogoutComponent } from './auth/logout.component'; import { AuthService } from './auth/auth.service'; +import { ErrorComponent } from './errors/error.component'; +import { ErrorService } from './errors/error.service'; @NgModule({ declarations: [ @@ -27,7 +29,8 @@ import { AuthService } from './auth/auth.service'; HeaderComponent, SigninComponent, SignupComponent, - LogoutComponent + LogoutComponent, + ErrorComponent ], imports: [ BrowserModule, @@ -36,7 +39,7 @@ import { AuthService } from './auth/auth.service'; ReactiveFormsModule, HttpModule ], - providers: [AuthService], + providers: [AuthService, ErrorService], bootstrap: [AppComponent] }) export class AppModule { diff --git a/assets/app/auth/auth.service.ts b/assets/app/auth/auth.service.ts index fb891ed..9f3b3c5 100644 --- a/assets/app/auth/auth.service.ts +++ b/assets/app/auth/auth.service.ts @@ -4,11 +4,12 @@ import 'rxjs/Rx'; import { Observable } from "rxjs/Observable"; import { User } from "./user.model"; +import { ErrorService } from "../errors/error.service"; @Injectable() export class AuthService { - constructor(private http: Http) {} + constructor(private http: Http, private errorService: ErrorService) {} signup(user: User) { const body = JSON.stringify(user); @@ -19,7 +20,7 @@ export class AuthService { return response.json(); }) .catch((error: Response) => { - console.error(error); + this.errorService.handleError(error.json()); return Observable.throw(error.json()); }); } @@ -29,7 +30,10 @@ export class AuthService { const headers = new Headers({'Content-Type': 'application/json'}); return this.http.post('http://localhost:3000/user/signin', body, {headers: headers}) .map((response: Response) => response.json()) - .catch((error: Response) => Observable.throw(error.json())); + .catch((error: Response) => { + this.errorService.handleError(error.json()); + return Observable.throw(error.json()); + }); } logout() { diff --git a/assets/app/errors/error.component.html b/assets/app/errors/error.component.html new file mode 100644 index 0000000..a58858d --- /dev/null +++ b/assets/app/errors/error.component.html @@ -0,0 +1,19 @@ +
+
+
+
+
+
{{ error?.title }}
+ +
+
+

{{ error?.message }}

+
+
+ +
+
+
+
\ No newline at end of file diff --git a/assets/app/errors/error.component.ts b/assets/app/errors/error.component.ts new file mode 100644 index 0000000..dac5d71 --- /dev/null +++ b/assets/app/errors/error.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit } from "@angular/core"; +import { Error } from "./error.model"; +import { ErrorService } from "./error.service"; + +@Component({ + selector: 'app-error', + templateUrl: './error.component.html', + styles: [ + ` + .backdrop { + background-color: rgba(0,0,0,0.6); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + } + ` + ] +}) +export class ErrorComponent implements OnInit { + + constructor(private errorService: ErrorService) {} + + ngOnInit() { + this.errorService.errorOcurred.subscribe( + (error: Error) => { + this.error = error; + this.display = 'block'; + } + ); + } + error: Error; + display = 'none'; + + onErrorHandled() { + this.display = 'none'; + } +} \ No newline at end of file diff --git a/assets/app/errors/error.model.ts b/assets/app/errors/error.model.ts new file mode 100644 index 0000000..36aeaf4 --- /dev/null +++ b/assets/app/errors/error.model.ts @@ -0,0 +1,3 @@ +export class Error { + constructor(public title: string, public message: string) {} +} \ No newline at end of file diff --git a/assets/app/errors/error.service.ts b/assets/app/errors/error.service.ts new file mode 100644 index 0000000..e1595ca --- /dev/null +++ b/assets/app/errors/error.service.ts @@ -0,0 +1,11 @@ +import { EventEmitter } from "@angular/core"; +import { Error } from "./error.model"; + +export class ErrorService { + errorOcurred = new EventEmitter(); + + handleError(error: any) { + const errorData = new Error(error.title, error.error.message); + this.errorOcurred.emit(errorData); + } +} \ No newline at end of file diff --git a/assets/app/messages/message.service.ts b/assets/app/messages/message.service.ts index edf146a..967a4e4 100644 --- a/assets/app/messages/message.service.ts +++ b/assets/app/messages/message.service.ts @@ -3,13 +3,14 @@ import { Injectable, EventEmitter } from '@angular/core'; import 'rxjs/Rx'; import { Observable } from 'rxjs'; import { Http, Headers, Response } from '@angular/http'; +import { ErrorService } from '../errors/error.service'; @Injectable() export class MessageService { private messages: Message[] = []; messageIsEdit = new EventEmitter(); - constructor(private http: Http) {} + constructor(private http: Http, private errorService: ErrorService) {} addMessage(message: Message) { const body = JSON.stringify(message); @@ -28,7 +29,10 @@ export class MessageService { this.messages.push(message); return message; }) - .catch((error: Response) => Observable.throw(error.json())); + .catch((error: Response) => { + this.errorService.handleError(error.json()); + return Observable.throw(error.json()); + }); } editMessage(message: Message) { @@ -43,7 +47,10 @@ export class MessageService { : ''; return this.http.patch('http://localhost:3000/message/' + message.messageId + token, body, {headers: headers}) .map((response: Response) => response.json()) - .catch((error: Response) => Observable.throw(error.json())); + .catch((error: Response) => { + this.errorService.handleError(error.json()); + return Observable.throw(error.json()); + }); } getMessages() { @@ -62,7 +69,10 @@ export class MessageService { this.messages = transformedMessages; return transformedMessages }) - .catch((error: Response) => Observable.throw(error.json())); + .catch((error: Response) => { + this.errorService.handleError(error.json()); + return Observable.throw(error.json()); + }); } deleteMessage(message: Message) { @@ -72,6 +82,9 @@ export class MessageService { : ''; return this.http.delete('http://localhost:3000/message/' + message.messageId + token) .map((response: Response) => response.json()) - .catch((error: Response) => Observable.throw(error.json())); + .catch((error: Response) => { + this.errorService.handleError(error.json()); + return Observable.throw(error.json()); + }); } } \ No newline at end of file