Update i18n in login with routes and add 404 page

Frontend Angular 4/src/app/app-routing.module.ts

@@ -5,13 +5,15 @@ import { AuthGuard } from './shared/guards/auth.guard';
 
 const routes: Routes = [
     { path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard] },
-    { path: 'login', loadChildren: './login/login.module#LoginModule' },
+    { path: 'login', loadChildren: './login/login.module#LoginModule', data: { language: navigator.language && (navigator.language.split('-')[0] == 'es' || navigator.language.split('-')[0] == 'en') ? navigator.language.split('-')[0] : 'es' }},
+    { path: 'es/login', loadChildren: './login/login.module#LoginModule', data: { language: 'es' }},
+    { path: 'en/login', loadChildren: './login/login.module#LoginModule', data: { language: 'en' }},
     { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
     { path: '**', redirectTo: 'not-found' }
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes, { useHash: true })],
+    imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
 export class AppRoutingModule { }

Frontend Angular 4/src/app/layout/layout.component.ts

@@ -11,10 +11,14 @@ import { TranslateService } from '@ngx-translate/core';
     providers: [GHCIService]
 })
 export class LayoutComponent implements OnInit {
-    constructor(public router: Router, public translate: TranslateService) { }
+    translateService: any;
+
+    constructor(public router: Router, public translate: TranslateService) {
+        this.translateService = translate;
+    }
     ngOnInit() {
         if (this.router.url === '/') {
-            this.router.navigate(['/login']);
+            this.router.navigate(['/'+this.translateService.get('i18n.code').value+'/login']);
         }
     }
 }

Frontend Angular 4/src/app/login/login.component.html

@@ -17,7 +17,7 @@
                             class="form-control input-underline input-lg"
                             placeholder='{{ "i18n.object.password" | translate | titleCase }}'>
                     </div>
-                    <div class="form-group" style="margin-bottom: 0px; text-align: left;">
+                    <!-- <div class="form-group" style="margin-bottom: 0px; text-align: left;">
                         <div ngbDropdown class="d-inline-block language-switcher">
                             <button class="btn btn-outline-secondary" id="input-lang" ngbDropdownToggle>
                                 <span class="flag-icon flag-icon-{{model.language.flagCode}}"></span>
@@ -34,7 +34,7 @@
                                 </div>
                             </div>
                         </div>
-                     </div>
+                     </div> -->
                 </div>
 
                 <a class="btn rounded-btn" style="background: transparent;color: white;cursor: pointer;width: 159px;margin-right: 3px;" (click)=login()> {{ "i18n.action.login" | translate | titleCase }} </a>

Frontend Angular 4/src/app/login/login.component.ts

@@ -33,15 +33,21 @@ export class LoginComponent implements OnInit {
         private router: Router,
         private sessionService: SessionService,
         private authenticationService: AuthenticationService,
-        public translate: TranslateService
+        public translate: TranslateService,
         ) { }
 
     ngOnInit() {
-        let currentSession = sessionStorage.getItem("currentUser"); 
-        let langCode = currentSession ? JSON.parse(currentSession).language : 'es';
-        if (langCode) {
-            this.model.language = this.getLanguageElementByCode(langCode);
-        }
+        console.log('this.route', this.route.snapshot.data['language']);
+        console.log('return', this.route.snapshot.queryParams['returnUrl']);
+        
+        // let currentSession = sessionStorage.getItem("currentUser"); 
+        // let langCode = currentSession ? JSON.parse(currentSession).language : 'es';
+        // if (langCode) {
+        //     this.model.language = this.getLanguageElementByCode(langCode);
+        // }
+
+        this.model.language = this.getLanguageElementByCode(this.route.snapshot.data['language']);
+        this.translate.use(this.model.language.code);
 
         // reset login status
         this.authenticationService.logout();

Frontend Angular 4/src/app/not-found/not-found-routing.module.ts

@@ -7,7 +7,9 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [
+    RouterModule.forChild(routes)
+  ],
   exports: [RouterModule]
 })
 export class NotFoundRoutingModule {

Frontend Angular 4/src/app/not-found/not-found.component.html

 <div class="welcome-page">
     <div class="row">
         <div class="col-md-10 push-md-1">
-            <h1>404 - Page Not Found</h1>
-            <p class="lead">This page does not exist</p>
+            <h1>404 - {{ "i18n.msg.404.title" | translate }}</h1>
+            <p class="lead">{{ "i18n.msg.404.descrp" | translate }}</p>
             <p class="lead">
-                <a class="btn rounded-btn" [routerLink]="['/login']">Restart</a>
+                <a class="btn rounded-btn" [routerLink]="[urlLogin]">
+                    {{ "i18n.msg.404.return" | translate }}
+                </a>
             </p>
         </div>
     </div>

Frontend Angular 4/src/app/not-found/not-found.component.ts

 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-not-found',
     templateUrl: './not-found.component.html',
     styleUrls: ['not-found.component.scss']
 })
-export class NotFoundComponent { }
+export class NotFoundComponent { 
+    translateService: any;
+    urlLogin: string;
+
+    constructor(public translate: TranslateService) {
+        this.translateService = translate;
+        this.urlLogin = '/'+this.translateService.get('i18n.code').value+'/login';
+    }
+}

Frontend Angular 4/src/app/not-found/not-found.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
+import { I18nModule } from '../shared/modules/translate/i18n.module';
 import { NotFoundComponent } from './not-found.component';
 import { NotFoundRoutingModule } from './not-found-routing.module';
 
 @NgModule({
     imports: [
+        I18nModule,
         NotFoundRoutingModule,
         RouterModule
     ],

Frontend Angular 4/src/app/shared/components/header/header.component.ts

@@ -4,6 +4,7 @@ import { AuthenticationService } from '../../services/authentication.service';
 import { SessionService } from '../../services/session.service';
 import { GHCIService } from '../../services/ghci.service';
 import { Usuario } from '../../objects/usuario';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-header',
@@ -12,11 +13,14 @@ import { Usuario } from '../../objects/usuario';
 })
 export class HeaderComponent implements OnInit {
     usuario: Usuario;
+    translateService: any;
     constructor(
         private authService: AuthenticationService, 
         private router : Router, 
         private sessionService : SessionService,
-        private ghciService : GHCIService) {
+        private ghciService : GHCIService,
+        public translate: TranslateService) {
+        this.translateService = translate;
         this.usuario = authService.getUser();
     }
     ngOnInit() {}
@@ -34,6 +38,6 @@ export class HeaderComponent implements OnInit {
     logout(){
         this.sessionService.reset();
         this.ghciService.desconectarWS();
-        this.router.navigate(['/login']);
+        this.router.navigate(['/'+this.translateService.get('i18n.code').value+'/login']);
     }
 }

Frontend Angular 4/src/app/shared/guards/auth.guard.ts

 import { Injectable } from '@angular/core';
 import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable()
 export class AuthGuard implements CanActivate {
+  translateService: any;
 
-	constructor(private router: Router){
-
+	constructor(private router: Router, public translate: TranslateService){
+    this.translateService = translate;
 	}
 
   canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
@@ -14,7 +16,7 @@ export class AuthGuard implements CanActivate {
     if(sessionStorage.getItem('currentUser')){
     	return true;
     }
-    this.router.navigate(['/login']);
+    this.router.navigate(['/'+this.translateService.get('i18n.code').value+'/login']);
     return false;
   }
 }
\ No newline at end of file

Frontend Angular 4/src/app/shared/services/ghci.service.ts

@@ -4,7 +4,7 @@ import { Observable, Subject } from 'rxjs/Rx';
 import { WebsocketService } from './websocket.service';
 import { AuthenticationService } from './authentication.service';
 import { GHCI_URL } from '../config';
-
+import { TranslateService } from '@ngx-translate/core';
 
 declare var $:any;
 declare var that :any ;
@@ -29,12 +29,14 @@ export class GHCIService {
 	private warningText :string = "";
 	private lastError : number = -1;
 	private lastWarning :number = -1;
+    translateService: any;
 
 	private console_error_class : string = "jqconsole-asd";
 
 	consoleBuffer = [];
 
-	constructor(private authService:AuthenticationService,private router: Router){
+	constructor(private authService:AuthenticationService,private router: Router, public translate: TranslateService){
+		this.translateService = translate;
 		console.log("contructor ghci");
 		this.conectarWS(GHCI_URL, authService.getUser().cedula, authService.getToken(), authService.getLanguage());
 		setInterval( this.checkConnection.bind(this), 5000);	
@@ -89,7 +91,7 @@ export class GHCIService {
 			this.connection.onclose = function(reason){
 				//Codigo que indica la falta de permisos (sesion expirada por ejemplo)
 				if(reason.code == 1008){
-					this.router.navigate(['/login']);
+					this.router.navigate(['/'+this.translateService.get('i18n.code').value+'/login']);
 				}
 				console.log('Conexión con web socket cerrada',reason);
 			}.bind(this)

Frontend Angular 4/src/app/shared/services/haskell.service.ts

@@ -6,20 +6,26 @@ import { Archivo, Evaluacion } from '../objects/archivo';
 import { Grupo } from '../objects/grupo';
 
 import { SERVER } from '../config';
-
+import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from './authentication.service';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 
 @Injectable()
 export class HaskellService {
+  translateService: any;
 
   /**
    * Creates a new HaskellService with the injected Http.
    * @param {Http} http - The injected Http.
    * @constructor
    */
-   constructor(private http: Http, private router: Router, private authService: AuthenticationService) {}
+   constructor(
+      private http: Http, private router: Router,
+      private authService: AuthenticationService,
+      public translate: TranslateService) {
+    this.translateService = translate;
+   }
 
    getArchivos(cedula:string): Observable<Archivo[]> {
      let headers = new Headers({ 'Content-Type': 'application/json', 'Authorization':'Bearer '+this.authService.getToken() });
@@ -111,7 +117,7 @@ export class HaskellService {
     */
     private handleError (error: any) {
       if(error.status == 401){
-        this.router.navigate(['/login']);
+        this.router.navigate(['/'+this.translateService.get('i18n.code').value+'/login']);
       }
       // In a real world app, we might use a remote logging infrastructure
       // We'd also dig deeper into the error to get a better message

Frontend Angular 4/src/app/shared/services/usuario.service.ts

@@ -3,7 +3,7 @@ import { Router } from '@angular/router';
 import { Http, Headers, Response, RequestOptions } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import { Usuario, Configuracion } from '../objects/usuario';
-
+import { TranslateService } from '@ngx-translate/core';
 import { AuthenticationService } from './authentication.service';
 import 'rxjs/add/operator/map'
 import 'rxjs/add/operator/catch'
@@ -12,7 +12,14 @@ import { SERVER } from '../config';
 
 @Injectable()
 export class UsuarioService {
-    constructor(private http: Http, private router: Router, private authService: AuthenticationService) {}
+    translateService: any;
+
+    constructor(
+        private http: Http, private router: Router,
+        private authService: AuthenticationService,
+        public translate: TranslateService) {
+            this.translateService = translate;
+        }
 
     actualizarConfiguracion(cedula: string, config: Configuracion) {
         let headers = new Headers({ 'Content-Type': 'application/json', 'Authorization':'Bearer '+this.authService.getToken()  });
@@ -29,7 +36,7 @@ export class UsuarioService {
 
     private handleError(error: any) {
         if(error.status == 401){
-            this.router.navigate(['/login']);
+            this.router.navigate(['/'+this.translateService.get('i18n.code').value+'/login']);
         }
         let errMsg = (error.message) ? error.message :
             error.status ? `${error.status} - ${error.statusText}` : 'Server error';

Frontend Angular 4/src/assets/i18n/en.json

 {
     "i18n" : {
+        "code" : "en",
         "action" : {
             "login" : "login",
             "new" : "new",
@@ -68,6 +69,11 @@
             }
         },
         "msg" : {
+            "404" : {
+                "title": "Page Not Found",
+                "descrp": "Sorry, this page does not exist.",
+                "return": "Return"
+            },
             "codemirror" : {
                 "fontSize" : "Font Size",
                 "functionWarnings": "Show warnings of use of functions",

Frontend Angular 4/src/assets/i18n/es.json

 {
     "i18n" : {
+        "code" : "es",
         "action" : {
             "login" : "iniciar sesión",
             "new" : "nuevo",
@@ -68,6 +69,11 @@
             }
         },
         "msg" : {
+            "404" : {
+                "title": "Página no encontrada",
+                "descrp": "Lo sentimos, esta páina no existe.",
+                "return": "Volver"
+            },
             "codemirror" : {
                 "fontSize" : "Tamaño de fuente",
                 "functionWarnings": "Mostrar advertencias de uso de funciones",