Merge pull request #29 from MycroftAI/not-found-page

added a library application to build a standard 404 page

frontend/internet/angular.json

@@ -30,9 +30,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": []
           },
@@ -91,9 +91,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": [],
             "assets": [
@@ -190,9 +190,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": []
           },
@@ -267,9 +267,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": [],
             "assets": [
@@ -366,9 +366,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": []
           },
@@ -443,9 +443,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": [],
             "assets": [
@@ -577,9 +577,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": []
           },
@@ -638,9 +638,9 @@
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": [
+              "includePaths": [
-                    "./src/stylesheets"
+                "./src/stylesheets"
-                ]
+              ]
             },
             "scripts": [],
             "assets": [
@@ -690,7 +690,42 @@
           }
         }
       }
+    },
+    "page-not-found": {
+      "root": "projects/page-not-found",
+      "sourceRoot": "projects/page-not-found/src",
+      "projectType": "library",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/page-not-found/tsconfig.lib.json",
+            "project": "projects/page-not-found/ng-package.json"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/page-not-found/src/test.ts",
+            "tsConfig": "projects/page-not-found/tsconfig.spec.json",
+            "karmaConfig": "projects/page-not-found/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/page-not-found/tsconfig.lib.json",
+              "projects/page-not-found/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "internet"
-}
+}

frontend/internet/projects/market/src/app/app-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { PageNotFoundComponent } from 'page-not-found';
 
 const routes: Routes = [
     { path: '', redirectTo: '/skills', pathMatch: 'full' },

frontend/internet/projects/market/src/app/app.component.scss

@@ -1,9 +1,3 @@
-#app-body {
-    margin-left: 3vw;
-    margin-right: 3vw;
-    margin-top: 30px;
-}
-
 img {
     height: 20px;
     margin-top: -7px;

frontend/internet/projects/market/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AppService } from './app.service';
 import { GlobalnavModule } from 'globalnav';
+import { PageNotFoundModule } from 'page-not-found';
 import { MaterialModule } from './shared/material.module';
 import { SkillsModule } from './skills/skills.module';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@@ -20,6 +21,7 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
             GlobalnavModule,
             HttpClientModule,
             MaterialModule,
+            PageNotFoundModule,
             SkillsModule,
             AppRoutingModule
         ],

frontend/internet/projects/page-not-found/karma.conf.js

@@ -0,0 +1,31 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

frontend/internet/projects/page-not-found/ng-package.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/page-not-found",
+    "lib": {
+        "entryFile": "src/public_api.ts",
+        "cssUrl": "inline"
+    }
+}

frontend/internet/projects/page-not-found/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "page-not-found",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^7.0.0",
+    "@angular/core": "^7.0.0"
+  }
+}

frontend/internet/projects/page-not-found/src/lib/page-not-found.component.html

@@ -0,0 +1,9 @@
+<div id="page-not-found-bg" fxLayout="row" fxLayoutAlign="start stretch">
+    <div id="page-not-found-fg" fxFlex fxLayout="column" fxLayoutAlign="center center">
+        <div class="mat-h1" fxFlex="5" fxFlexOffset="20">PAGE NOT FOUND</div>
+        <div class="page-not-found-logo" fxFlex="30"></div>
+        <div fxFlex fxFlexOffset="5">
+            <button mat-raised-button class="back-button" (click)="navigateBack()">GO BACK</button>
+        </div>
+    </div>
+</div>

frontend/internet/projects/page-not-found/src/lib/page-not-found.component.scss

@@ -0,0 +1,22 @@
+#page-not-found-bg {
+    background-color: #22a7f0;
+    height: 100vh;
+}
+
+#page-not-found-fg {
+    .mat-h1 {
+        font-size: 32px;
+        font-weight: bold;
+    }
+    .page-not-found-logo {
+        background: url("mycroft-not-found-logo.svg") no-repeat;
+        height: 200px;
+        width: 200px;
+    }
+
+    .back-button {
+        background-color: #2c3e50;
+        color: white;
+    }
+}
+

frontend/internet/projects/page-not-found/src/lib/page-not-found.component.ts

@@ -0,0 +1,16 @@
+import { Component} from '@angular/core';
+
+@Component({
+    selector: 'lib-page-not-found',
+    templateUrl: './page-not-found.component.html',
+    styleUrls: ['./page-not-found.component.scss']
+})
+export class PageNotFoundComponent {
+
+  constructor() { }
+
+  navigateBack() {
+      window.history.back();
+  }
+
+}

frontend/internet/projects/page-not-found/src/lib/page-not-found.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+@NgModule({
+  imports: [
+      FlexLayoutModule,
+      MatButtonModule
+  ],
+  declarations: [
+      PageNotFoundComponent
+  ],
+  exports: [
+      PageNotFoundComponent
+  ]
+})
+export class PageNotFoundModule { }

frontend/internet/projects/page-not-found/src/lib/page-not-found.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PageNotFoundService {
+
+  constructor() { }
+}

frontend/internet/projects/page-not-found/src/public_api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of page-not-found
+ */
+
+export * from './lib/page-not-found.service';
+export * from './lib/page-not-found.component';
+export * from './lib/page-not-found.module';

frontend/internet/projects/page-not-found/src/test.ts

@@ -0,0 +1,22 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

frontend/internet/projects/page-not-found/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

frontend/internet/projects/page-not-found/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

frontend/internet/projects/page-not-found/tslint.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "lib",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "lib",
+            "kebab-case"
+        ]
+    }
+}

frontend/internet/projects/sso/src/app/app-routing.module.ts

@@ -3,13 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { LoginComponent } from './login/login.component';
 import { LogoutComponent } from './logout/logout.component';
-// import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { PageNotFoundComponent } from 'page-not-found';
 
 const routes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'logout', component: LogoutComponent },
     { path: '', redirectTo: '/login', pathMatch: 'full' },
-    // { path: '**', component: PageNotFoundComponent }
+    { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

frontend/internet/projects/sso/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { BackgroundModule } from './background/background.module';
 import { LoginModule } from './login/login.module';
 import { LogoutModule } from './logout/logout.module';
+import { PageNotFoundModule } from 'page-not-found';
 
 @NgModule({
     declarations: [ AppComponent ],
@@ -18,6 +19,7 @@ import { LogoutModule } from './logout/logout.module';
         FlexLayoutModule,
         LoginModule,
         LogoutModule,
+        PageNotFoundModule,
         AppRoutingModule
     ],
     providers: [ ],

frontend/internet/tsconfig.json

@@ -23,6 +23,12 @@
       ],
       "globalnav/*": [
         "dist/globalnav/*"
+      ],
+      "page-not-found": [
+        "dist/page-not-found"
+      ],
+      "page-not-found/*": [
+        "dist/page-not-found/*"
       ]
     }
   }