day 7 - basic message of the moment

client/app-routing.module.ts

@@ -5,6 +5,11 @@ import { VegetablesAppComponent } from './day-001-vegetables/vegetables-app.comp
 import { MessagesComponent } from './day-007-messages/messages.component';
 
 const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'message-of-the-moment',
+    },
     {
         path: 'tour-of-vegetables',
         component: VegetablesAppComponent

client/day-007-messages/messages.component.ts

@@ -1,11 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { MessagesService } from './messages.service';
 
 @Component({
     template: `
-        <p>Test</p>
-    `
+        <h2>Message of the Moment</h2>
+        <p style="padding-right: 40px"><em>{{currentMessage}}</em></p>
+        <p style="padding-top: 40px">Would you like to set the message of the moment, for all to see?<p>
+        <p>Or at least... until the next person sets it...?</p>
+        <label>New Message of the Moment: </label>
+        <input [(ngModel)]="newMessage" placeholder="I think carrots are just ok." />
+        <button (click)="submitMessage()">Declare this message to be the Message of the Moment</button>
+    `,
+    providers: [MessagesService]
 })
 
-export class MessagesComponent {
+export class MessagesComponent implements OnInit {
+
+    currentMessage: string = '';
+    newMessage: string;
 
+    constructor(private messagesService: MessagesService) {
+
+    }
+
+    ngOnInit(): void {
+        this.messagesService.getMessageOfTheMoment().then(message => this.currentMessage = message);
+    }
+
+    submitMessage(): void {
+        this.messagesService.postMessage(this.newMessage).then(message => this.currentMessage = message);
+    }
+
+
 }

client/day-007-messages/messages.service.ts

@@ -1,6 +1,32 @@
 import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response } from '@angular/http';
 
 @Injectable()
 export class MessagesService {
 
+    constructor(private http: Http) { 
+
+    }
+
+    getMessageOfTheMoment(): Promise<string> {
+        return this.http.get('api/get-message-of-the-moment')
+        .toPromise()
+        .then(response => response.json().message)
+        .catch(this.handleError);
+    }
+
+    postMessage (message: string): Promise<string> {
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        let options = new RequestOptions({ headers: headers });
+
+        return this.http.post('api/post-message', { message }, options)
+            .toPromise()
+            .then(response => response.json().message)
+            .catch(this.handleError);
+    }
+
+    private handleError(error: any): Promise<any> {
+        console.error('Oh noooo! An error occurred', error); // for demo purposes only
+        return Promise.reject(error.message || error);
+    }
 }

package.json

@@ -26,6 +26,7 @@
     "core-js": "^2.4.1",
     "debug": "^2.2.0",
     "express": "^4.14.0",
+    "express-sanitizer": "^1.0.1",
     "morgan": "^1.7.0",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",

server/app.js

@@ -1,4 +1,5 @@
 var express = require('express');
+var expressSanitizer = require('express-sanitizer');
 var path = require('path');
 var favicon = require('serve-favicon');
 var logger = require('morgan');
@@ -14,6 +15,7 @@ var app = express();
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
+app.use(expressSanitizer());
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, '../dist')));
 app.use(express.static(path.join(__dirname, '../public')));

server/routes/api.js

@@ -1,8 +1,27 @@
 var express = require('express');
 var router = express.Router();
 
+let messageOfTheMoment = "If you ever fall off the Sears Tower, just go real limp, because maybe you'll look like a dummy and people will try to catch you because, hey, free dummy.";
+
 router.get('/test', function(req, res, next) {
   res.json({'testMessage': 'everything is going to be ok', 'someNumber': 457});
 });
 
+router.get('/get-message-of-the-moment', function(req, res, next) {
+  res.json({'message': messageOfTheMoment});
+});
+
+router.post('/post-message', function(req, res, next) {
+  if(req.body.message && req.body.message.length < 500) {
+    let unsafeMessage = req.body.message;
+    let sanitizedMessage = req.sanitize(req.body.message);
+    console.log('New message of the moment (unsafe): ' + unsafeMessage);
+    console.log('New message of the moment (clean) : ' + sanitizedMessage);
+    messageOfTheMoment = sanitizedMessage;
+    res.json({'message': sanitizedMessage});
+  } else {
+    res.json({'error': 'message not set'});
+  }
+});
+
 module.exports = router;