From a3f952b346a5f65a02d9412997ea07a3eb3daa86 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 14 Jun 2020 01:05:27 +0300
Subject: [PATCH] Redo 404 Error page

---
 src/lang/en.js              |   6 +-
 src/views/errorPage/404.vue | 236 ++++++------------------------------
 2 files changed, 40 insertions(+), 202 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index f73fe226..d631bc8d 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -75,9 +75,13 @@ export default {
   },
   errLog: {
     error401: 'Oops! 401 Error',
+    error404: 'Oops! 404 Error',
+    pageNotFound: 'Page not found',
+    correctUrl: 'Please make sure you URL is correct',
     unauth: 'Unauthorized',
     back: 'Back',
-    login: 'Login'
+    login: 'Login',
+    homePage: 'Home Page'
   },
   navbar: {
     logOut: 'Log Out',
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index d20a4ef4..1ce4ab42 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -1,17 +1,13 @@
 <template>
-  <div class="wscn-http404-container">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
-      </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please make sure you URL is correct</div>
-        <router-link to="/" class="bullshit__return-home">Go to the home page</router-link>
+  <div class="error-page-container">
+    <div class="error-page">
+      <i class="el-icon-warning"/>
+      <h1 class="error-title">{{ $t('errLog.error404') }}</h1>
+      <h2 class="error-title">{{ $t('errLog.pageNotFound') }}</h2>
+      <h2 class="error-title">{{ $t('errLog.correctUrl') }}</h2>
+      <div class="buttons-group">
+        <el-button @click="back">{{ $t('errLog.back') }}</el-button>
+        <el-button type="primary" @click="goToHomePage">{{ $t('errLog.homePage') }}</el-button>
       </div>
     </div>
   </div>
@@ -21,205 +17,43 @@
 
 export default {
   name: 'Page404',
-  computed: {
-    message() {
-      return 'There is nothing here'
+  methods: {
+    back() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/login' })
+      } else {
+        this.$router.go(-1)
+      }
+    },
+    goToHomePage() {
+      this.$router.push({ path: '/' })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
-  position: absolute;
-  top: 40%;
-  left: 50%;
-}
-.wscn-http404 {
-  position: relative;
-  width: 1200px;
-  padding: 0 50px;
-  overflow: hidden;
-  .pic-404 {
-    position: relative;
-    float: left;
-    width: 600px;
+  .error-page-container {
+    min-height: 100%;
+    width: 100%;
+    background-color: #2d3a4b;
     overflow: hidden;
-    &__parent {
-      width: 100%;
+    .buttons-group {
+      margin-top: 4em;
     }
-    &__child {
-      position: absolute;
-      &.left {
-        width: 80px;
-        top: 17px;
-        left: 220px;
-        opacity: 0;
-        animation-name: cloudLeft;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      &.mid {
-        width: 46px;
-        top: 10px;
-        left: 420px;
-        opacity: 0;
-        animation-name: cloudMid;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1.2s;
-      }
-      &.right {
-        width: 62px;
-        top: 100px;
-        left: 500px;
-        opacity: 0;
-        animation-name: cloudRight;
-        animation-duration: 2s;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-        animation-delay: 1s;
-      }
-      @keyframes cloudLeft {
-        0% {
-          top: 17px;
-          left: 220px;
-          opacity: 0;
-        }
-        20% {
-          top: 33px;
-          left: 188px;
-          opacity: 1;
-        }
-        80% {
-          top: 81px;
-          left: 92px;
-          opacity: 1;
-        }
-        100% {
-          top: 97px;
-          left: 60px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudMid {
-        0% {
-          top: 10px;
-          left: 420px;
-          opacity: 0;
-        }
-        20% {
-          top: 40px;
-          left: 360px;
-          opacity: 1;
-        }
-        70% {
-          top: 130px;
-          left: 180px;
-          opacity: 1;
-        }
-        100% {
-          top: 160px;
-          left: 120px;
-          opacity: 0;
-        }
-      }
-      @keyframes cloudRight {
-        0% {
-          top: 100px;
-          left: 500px;
-          opacity: 0;
-        }
-        20% {
-          top: 120px;
-          left: 460px;
-          opacity: 1;
-        }
-        80% {
-          top: 180px;
-          left: 340px;
-          opacity: 1;
-        }
-        100% {
-          top: 200px;
-          left: 300px;
-          opacity: 0;
-        }
-      }
+    .el-icon-warning {
+      font-size: 4.2em;
+      color: #eee;
+      margin: 0 auto;
     }
-  }
-  .bullshit {
-    position: relative;
-    float: left;
-    width: 300px;
-    padding: 30px 0;
-    overflow: hidden;
-    &__oops {
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 40px;
-      color: #1482f0;
-      opacity: 0;
-      margin-bottom: 20px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-fill-mode: forwards;
-    }
-    &__headline {
-      font-size: 20px;
-      line-height: 24px;
-      color: #222;
-      font-weight: bold;
-      opacity: 0;
-      margin-bottom: 10px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-    }
-    &__info {
-      font-size: 13px;
-      line-height: 21px;
-      color: grey;
-      opacity: 0;
-      margin-bottom: 30px;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.2s;
-      animation-fill-mode: forwards;
-    }
-    &__return-home {
-      display: block;
-      float: left;
-      width: 165px;
-      height: 36px;
-      background: #1482f0;
-      border-radius: 100px;
+    .error-page {
+      width: 45rem;
+      max-width: 100%;
+      margin: 16rem auto;
       text-align: center;
-      color: #ffffff;
-      opacity: 0;
-      font-size: 14px;
-      line-height: 36px;
-      cursor: pointer;
-      animation-name: slideUp;
-      animation-duration: 0.5s;
-      animation-delay: 0.3s;
-      animation-fill-mode: forwards;
     }
-    @keyframes slideUp {
-      0% {
-        transform: translateY(60px);
-        opacity: 0;
-      }
-      100% {
-        transform: translateY(0);
-        opacity: 1;
-      }
+    .error-title {
+      color: #eee;
     }
   }
-}
 </style>