Error page generator

package.json

@@ -49,6 +49,6 @@
     "protractor": "^5.4.1",
     "ts-node": "~7.0.1",
     "tslint": "~5.11.0",
-    "typescript": "^3.1.1"
+    "typescript": "^3.1.6"
   }
 }

src/app/app-routing.module.ts

@@ -9,13 +9,18 @@ import { LoginComponent } from './core/login/login.component';
 import { SignupComponent } from './core/signup/signup.component';
 import { SingleCertificateComponent } from './organization/single-certificate/single-certificate.component';
 import { AuthGuard } from './guards/auth.guard';
+import { ErrorPageComponent } from './error-page/error-page.component';
+import { ForbiddenPageComponent } from './forbidden-page/forbidden-page.component';
 
 const routes: Routes = [
   { path: '', component: LoginComponent},
   { path: 'organization', component: OrganizationComponent, canActivate: [AuthGuard] },
   { path: 'student', component: StudentComponent, canActivate: [AuthGuard] },
   { path: 'signin', component: LoginComponent },
   { path: 'signup', component: SignupComponent },
+  { path: 'error-page', component: ErrorPageComponent },
+  { path: 'forbidden-page', component: ForbiddenPageComponent },
+  {path: '**', redirectTo: '/error-page'},
   { path: 'issue/single', component: SingleCertificateComponent, canActivate: [AuthGuard]}
 ];
 

src/app/app.module.ts

@@ -21,6 +21,8 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { SingleCertificateComponent } from './organization/single-certificate/single-certificate.component';
 
 import { AuthGuard } from './guards/auth.guard';
+import { ErrorPageComponent } from './error-page/error-page.component';
+import { ForbiddenPageComponent } from './forbidden-page/forbidden-page.component';
 
 @NgModule({
   declarations: [
@@ -33,6 +35,8 @@ import { AuthGuard } from './guards/auth.guard';
     FooterComponent,
     NavbarComponent,
     SingleCertificateComponent,
+    ErrorPageComponent,
+    ForbiddenPageComponent,
   ],
   imports: [
     BrowserModule,

src/app/error-page/error-page.component.css

@@ -0,0 +1,96 @@
+* {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+}
+
+#notfound {
+    position: relative;
+    height: 100vh;
+}
+
+#notfound .notfound {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.notfound {
+    max-width: 767px;
+    width: 100%;
+    line-height: 1.4;
+    padding: 0px 15px;
+}
+
+.notfound .notfound-404 {
+    position: relative;
+    height: 150px;
+    line-height: 150px;
+    margin-bottom: 25px;
+}
+
+.notfound .notfound-404 h1 {
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 186px;
+    font-weight: 900;
+    margin: 0px;
+    text-transform: uppercase;
+    background: url('../../assets/text.png');
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: cover;
+    background-position: center;
+}
+
+.notfound h2 {
+    font-family: 'Titillium Web', sans-serif;
+    font-size: 26px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.notfound p {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 0px;
+    text-transform: uppercase;
+}
+
+.notfound a {
+    font-family: 'Titillium Web', sans-serif;
+    display: inline-block;
+    text-transform: uppercase;
+    color: #fff;
+    text-decoration: none;
+    border: none;
+    background: #5c91fe;
+    padding: 10px 40px;
+    font-size: 14px;
+    font-weight: 700;
+    border-radius: 1px;
+    margin-top: 15px;
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
+}
+
+.notfound a:hover {
+    opacity: 0.8;
+}
+
+@media only screen and (max-width: 767px) {
+    .notfound .notfound-404 {
+        height: 110px;
+        line-height: 110px;
+    }
+    .notfound .notfound-404 h1 {
+        font-size: 120px;
+    }
+}

src/app/error-page/error-page.component.html

@@ -0,0 +1,12 @@
+<div id="notfound">
+    <div class="notfound">
+        <div class="notfound-404">
+            <h1>404</h1>
+        </div>
+        <br>
+        <h2>Oops! This Page Could Not Be Found</h2>
+        <br>
+        <p>Sorry but the page you are looking for does not exist, have been removed. name changed or is temporarily unavailable</p>
+        <a [routerLink]="['/student']">Go Back!</a>
+    </div>
+</div>

src/app/error-page/error-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-error-page',
+  templateUrl: './error-page.component.html',
+  styleUrls: ['./error-page.component.css']
+})
+export class ErrorPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/forbidden-page/forbidden-page.component.css

@@ -0,0 +1,91 @@
+.base {
+    background-color: #332851;
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    flex-direction: column;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+h1 {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    font-family: 'Ubuntu', sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 30vw;
+    display: block;
+    margin: 0;
+    color: #9ae1e2;
+    position: relative;
+    z-index: 0;
+    animation: colors .4s ease-in-out forwards;
+    animation-delay: 1.7s;
+}
+
+&:before {
+    content: "U";
+    position: absolute;
+    top: -9%;
+    right: 40%;
+    transform: rotate(180deg);
+    font-size: 15vw;
+    color: #f6c667;
+    z-index: -1;
+    text-align: center;
+    animation: lock .2s ease-in-out forwards;
+    animation-delay: 1.5s;
+}
+
+h2 {
+    font-family: 'Cabin', sans-serif;
+    color: #9ae1e2;
+    font-size: 5vw;
+    margin: 0;
+    text-transform: uppercase;
+    text-align: center;
+    animation: colors .4s ease-in-out forwards;
+    animation-delay: 2s;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+h5 {
+    font-family: 'Cabin', sans-serif;
+    color: #9ae1e2;
+    font-size: 2vw;
+    margin: 0;
+    text-align: center;
+    opacity: 0;
+    animation: show 2s ease-in-out forwards;
+    color: #ca3074;
+    animation-delay: 3s;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+@keyframes lock {
+    50% {
+        top: -4%;
+    }
+    100% {
+        top: -6%;
+    }
+}
+
+@keyframes colors {
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        color: #ca3074;
+    }
+}
+
+@keyframes show {
+    100% {
+        opacity: 1;
+    }
+}

src/app/forbidden-page/forbidden-page.component.html

@@ -0,0 +1,7 @@
+<div class="base">
+    <h1>403</h1>
+    <h2>Access forbidden</h2>
+    <a [routerLink]="['/']">
+        <h5>(I'm sorry buddy...)</h5>
+    </a>
+</div>

src/app/forbidden-page/forbidden-page.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-forbidden-page',
+  templateUrl: './forbidden-page.component.html',
+  styleUrls: ['./forbidden-page.component.css']
+})
+export class ForbiddenPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/guards/auth.guard.ts

@@ -10,8 +10,9 @@ export class AuthGuard implements CanActivate {
   canActivate(): boolean {
     if (this.mAuth.isAuthenticated()) {
       return true;
-    }else {
-      this.router.navigate(['/']);
+
+    } else {
+      this.router.navigate(['/forbidden-page']);
       return false;
     }
   }