implementing gallery photo rendering

backend/middlewares/AuthenticationMWs.ts

@@ -34,23 +34,20 @@ export class AuthenticationMWs extends BaseMWs{
     
     public static login(req:Request, res:Response, next:NextFunction){
         //not enough parameter
-       if ((typeof req.body === 'undefined') || (typeof req.body.logincredential === 'undefined') || (typeof req.body.logincredential.username === 'undefined') ||
+       if ((typeof req.body === 'undefined') || (typeof req.body.loginCredential === 'undefined') || (typeof req.body.loginCredential.username === 'undefined') ||
-            (typeof req.body.logincredential.password === 'undefined')) {
+            (typeof req.body.loginCredential.password === 'undefined')) {
             return next();
         }
 
         //lets find the user
         UserManager.findOne({
-              username: req.body.logincredential.username
+              username: req.body.loginCredential.username,
+              password: req.body.loginCredential.password
         }, (err, result) => {
             if ((err) || (!result)) {
                 return super.renderError(res,new Error(ErrorCodes.CREDENTIAL_NOT_FOUND));
             }
 
-            //check password
-            if (result.password !== req.body.logincredential.password) {
-                return super.renderError(res,new Error(ErrorCodes.CREDENTIAL_NOT_FOUND));
-            }
 
             req.session.user = result;
 
@@ -61,6 +58,10 @@ export class AuthenticationMWs extends BaseMWs{
 
 
     public static renderUser(req:Request, res:Response, next:NextFunction){
+        if(!(req.session.user)){
+            return super.renderError(res,new Error(ErrorCodes.GENERAL_ERROR));
+        }
+
         let user = Utils.clone(req.session.user);
         delete user.password;
         super.renderMessage(res,user);

backend/routes/GalleryRouter.ts

@@ -16,7 +16,7 @@ export class GalleryRouter{
 
     private addDirectoryList() {
         this.app.get(["/api/gallery/:directory","/api/gallery/"],
-         //   AuthenticationMWs.authenticate,
+            AuthenticationMWs.authenticate,
             GalleryMWs.listDirectory
         );
     };
@@ -24,7 +24,7 @@ export class GalleryRouter{
 
     private addGetImage() {
         this.app.get(["/api/gallery/:directory/:image","/api/gallery/:image"],
-          //  AuthenticationMWs.authenticate,
+            AuthenticationMWs.authenticate,
             GalleryMWs.renderImage
         );
     };

backend/routes/PublicRouter.ts

@@ -10,7 +10,7 @@ export class PublicRouter{
         this.app.use('/node_modules',_express.static(_path.resolve(__dirname, './../../node_modules')));
 
         var renderIndex = (req: _express.Request, res: _express.Response) => {
-            res.sendFile(_path.resolve(__dirname, './../frontend/index.html'));
+            res.sendFile(_path.resolve(__dirname, './../../frontend/index.html'));
         };
         this.app.get(['/login',"/gallery"], renderIndex);
 

backend/server.ts

@@ -2,6 +2,7 @@
 
 import * as _express from 'express';
 import * as _session from 'express-session';
+import * as _bodyParser from 'body-parser';
 import * as _debug from 'debug';
 import * as _http from 'http';
 import {PublicRouter} from "./routes/PublicRouter";
@@ -39,7 +40,12 @@ export class Server {
             resave: true,
             saveUninitialized: false
         }));
- 
+
+        /**
+         * Parse parameters in POST
+         */
+        // for parsing application/json
+        this.app.use(_bodyParser.json());
 
         new PublicRouter(this.app);
         new UserRouter(this.app);

common/entities/LoginCredential.ts

@@ -1,5 +1,5 @@
 export class LoginCredential{
-    constructor(public username?:string, public password?:string){
+    constructor(public username:string = null, public password:string = null){
 
     }
 }

frontend/app/app.component.ts

@@ -10,6 +10,7 @@ import {User} from "../../common/entities/User";
 import {Router, Location} from "angular2/router";
 import {HTTP_PROVIDERS} from "angular2/http";
 import {UserService} from "./model/user.service";
+import {GalleryService} from "./gallery/gallery.service";
 
 
 
@@ -22,6 +23,7 @@ import {UserService} from "./model/user.service";
         HTTP_PROVIDERS,
         ROUTER_PROVIDERS,
         UserService,
+        GalleryService,
         AuthenticationService
     ]
 })

frontend/app/gallery/gallery.component.html

@@ -1 +1,4 @@
-<h1>Gallery</h1>
+<h1>Gallery</h1>
+<div *ngIf="directory" *ngFor="#photo of directory.photos" >
+  <gallery-photo *ngIf="photo" [photo]="photo" >a photo</gallery-photo>
+</div>

frontend/app/gallery/gallery.component.ts

@@ -2,15 +2,26 @@
 
 import {Component, OnInit} from 'angular2/core';
 import {AuthenticationService} from "../model/authentication.service";
-import {Router,Location} from "angular2/router";
+import {Router, Location, RouteParams} from "angular2/router";
+import {GalleryService} from "./gallery.service";
+import {Directory} from "../../../common/entities/Directory";
+import {Message} from "../../../common/entities/Message";
+import {GalleryPhotoComponent} from "./photo/photo.gallery.component";
 
 @Component({
     selector: 'gallery',
-    templateUrl: 'app/gallery/gallery.component.html'
+    templateUrl: 'app/gallery/gallery.component.html',
+    directives:[GalleryPhotoComponent]
 })
 export class GalleryComponent implements OnInit{
 
-    constructor(private _authService: AuthenticationService, private _router: Router, private _location:Location) {
+    directory:Directory = new Directory(-1,"","/",new Date(),[],[]);
+    
+    constructor(private _galleryService:GalleryService,
+                private _params: RouteParams,
+                private _authService: AuthenticationService,
+                private _router: Router,
+                private _location:Location) {
         
     }
 
@@ -18,7 +29,18 @@ export class GalleryComponent implements OnInit{
         if (!this._authService.isAuthenticated()) {
             this._location.replaceState('/'); // clears browser history so they can't navigate with back button
             this._router.navigate(['Login']);
+            return;
         }
+        let directoryName = this._params.get('directory');
+        directoryName = directoryName ? directoryName : "";
+        this._galleryService.getDirectory(directoryName).then(( message:Message<Directory>) => {
+            if(message.errors){
+                //TODO: implement
+                return;
+            }
+
+            this.directory = message.result;
+        });
     }
     
 }

frontend/app/gallery/gallery.service.ts

@@ -0,0 +1,25 @@
+///<reference path="../../browser.d.ts"/>
+
+import {Injectable} from 'angular2/core'; 
+import {NetworkService} from "../model/network.service";
+import {Http} from "angular2/http";
+import {Message} from "../../../common/entities/Message";
+import {Directory} from "../../../common/entities/Directory"; 
+
+@Injectable()
+export class GalleryService  extends NetworkService{
+ 
+
+    constructor(_http:Http){
+        super(_http);
+    }
+
+    public getDirectory(directoryName:string): Promise<Message<Directory>>{
+        return this.getJson("/gallery/"+directoryName);
+    }
+
+
+ 
+
+
+}

frontend/app/gallery/photo/photo.gallery.component.html

@@ -0,0 +1 @@
+<img [src]="getPhotoPath()" width="200px">

frontend/app/gallery/photo/photo.gallery.component.ts

@@ -0,0 +1,21 @@
+///<reference path="../../../browser.d.ts"/>
+
+import {Component, Input, OnInit} from 'angular2/core';
+import {Photo} from "../../../../common/entities/Photo";
+
+@Component({
+    selector: 'gallery-photo',
+    templateUrl: 'app/gallery/photo/photo.gallery.component.html'
+})
+export class GalleryPhotoComponent{
+    @Input() photo: Photo;
+    
+    constructor() {
+    }
+
+    getPhotoPath(){
+        return "/api/gallery/"+this.photo.name;
+    }
+    
+}
+

frontend/app/login/login.component.ts

@@ -23,7 +23,7 @@ export class LoginComponent implements OnInit{
         }
     }
 
-    onLogin(){
+    onLogin(){ 
         this._authService.login(this.loginCredential);
     }
 }

frontend/app/model/authentication.service.ts

@@ -20,7 +20,7 @@ export class AuthenticationService{
     public login(credential:LoginCredential){
         this._userService.login(credential).then( (message:Message<User>) =>{
             console.log(message);
-            if(message.errors && message.errors.length > 0){
+            if(message.errors){
                 console.log(message.errors);
             }else{
                 this._user = message.result;

frontend/app/model/network.service.ts

@@ -11,30 +11,37 @@ export class NetworkService{
     constructor(protected _http:Http){
     }
 
-    private callJson(method:string, url:string, data:any = {}){
+    private callJson<T>(method:string, url:string, data:any = {}): Promise<T>{
-        let body = JSON.stringify({ data });
+        let body = JSON.stringify( data );
         let headers = new Headers({ 'Content-Type': 'application/json' });
         let options = new RequestOptions({ headers: headers });
-        console.log(this._http.post(this._baseUrl+url, body, options));
+
+        if(method == "get"){
+            return this._http[method](this._baseUrl+url, options)
+                .toPromise()
+                .then(res => <Message<any>> res.json())
+                .catch(NetworkService.handleError);
+        }
+        
         return this._http[method](this._baseUrl+url, body, options)
             .toPromise()
             .then(res => <Message<any>> res.json())
             .catch(NetworkService.handleError);
     }
 
-    protected postJson(url:string, data:any  = {}){
+    protected postJson<T>(url:string, data:any  = {}): Promise<T>{
         return this.callJson("post",url,data);
     }
 
-    protected putJson(url:string, data:any  = {}){
+    protected putJson<T>(url:string, data:any  = {}): Promise<T>{
         return this.callJson("put",url,data);
     }
-    protected getJson(url:string, data:any  = {}){
+    protected getJson<T>(url:string): Promise<T>{
-        return this.callJson("get",url,data);
+        return this.callJson("get",url);
     }
 
 
-    protected deleteJson(url:string, data:any  = {}){
+    protected deleteJson<T>(url:string, data:any  = {}): Promise<T>{
         return this.callJson("delete",url,data);
     }
 

frontend/app/model/user.service.ts

@@ -4,6 +4,8 @@ import {Injectable} from 'angular2/core';
 import {LoginCredential} from "../../../common/entities/LoginCredential"; 
 import {Http} from "angular2/http";
 import {NetworkService} from "./network.service";
+import {User} from "../../../common/entities/User";
+import {Message} from "../../../common/entities/Message";
 
 @Injectable()
 export class UserService extends NetworkService{
@@ -15,8 +17,8 @@ export class UserService extends NetworkService{
     }
 
 
-    public login(credential:LoginCredential){
+    public login(credential:LoginCredential): Promise<Message<User>>{
-        return this.postJson("/user/login",credential);
+        return this.postJson("/user/login",{"loginCredential": credential});
     }
 
   

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "angular2": "^2.0.0-beta.11",
+    "body-parser": "^1.15.0",
     "core-js": "^2.2.1",
     "debug": "^2.2.0",
     "es6-promise": "^3.1.2",