Implemented settings page. Added user overview and partially change password function. Still some stuff todo.

Author: michelvocks

frontend/client/App.vue

@@ -226,4 +226,74 @@ html {
   color: #4da2fc !important;
 }
 
+/* Table styles */
+.global-search-input {
+  background-color: #19191b !important;
+  color: white !important;
+  border-color: #2a2735 !important;
+}
+
+.progress-bar-middle {
+  position: relative;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  top: 50%; 
+}
+
+.progress-bar-height {
+  height: 50px;
+}
+
+.table td {
+  border: 0 !important;
+  color: #8c91a0 !important;
+  text-align: center !important;
+}
+
+.table th {
+  border-top: solid black 2px !important;
+  border-bottom: solid black 2px !important;
+  color: #4da2fc !important;
+}
+
+.table thead th {
+  color: #4da2fc;
+  text-align: center !important;
+}
+
+.table-own-bordered {
+  border-collapse: separate !important;
+  border: solid black 2px;
+  border-radius: 6px;
+}
+
+.responsive {
+  overflow-x: auto !important;
+}
+
+.table-footer {
+  border: solid black 2px !important;
+  border-radius: 6px;
+  margin-top: 10px !important;
+  color: whitesmoke !important;
+}
+
+.table-footer select {
+  color: #4da2fc !important;
+}
+
+.pagination-controls a span {
+  color: #4da2fc !important;
+}
+
+.pagination-controls .info {
+  color: whitesmoke !important;
+}
+
+.empty-table-text {
+  color: #8c91a0;
+  text-align: center;
+}
+
 </style>

frontend/client/store/modules/menu/index.js

@@ -10,8 +10,7 @@ const state = {
       name: 'Overview',
       path: '/overview',
       meta: {
-        icon: 'fa-th',
-        link: 'overview.vue'
+        icon: 'fa-th'
       },
       component: lazyLoading('overview', true)
     },
@@ -22,6 +21,14 @@ const state = {
         icon: 'fa-plus'
       },
       component: lazyLoading('pipeline/create')
+    },
+    {
+      name: 'Settings',
+      path: '/settings',
+      meta: {
+        icon: 'fa-cogs'
+      },
+      component: lazyLoading('settings', true)
     }
   ]
 }

frontend/client/views/pipeline/create.vue

@@ -401,75 +401,6 @@ export default {
 </script>
 
 <style lang="scss">
-.global-search-input {
-  background-color: #19191b !important;
-  color: white !important;
-  border-color: #2a2735 !important;
-}
-
-.progress-bar-middle {
-  position: relative;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  top: 50%; 
-}
-
-.progress-bar-height {
-  height: 50px;
-}
-
-.table td {
-  border: 0 !important;
-  color: #8c91a0 !important;
-  text-align: center !important;
-}
-
-.table th {
-  border-top: solid black 2px !important;
-  border-bottom: solid black 2px !important;
-  color: #4da2fc !important;
-}
-
-.table thead th {
-  color: #4da2fc;
-  text-align: center !important;
-}
-
-.table-own-bordered {
-  border-collapse: separate !important;
-  border: solid black 2px;
-  border-radius: 6px;
-}
-
-.responsive {
-  overflow-x: auto !important;
-}
-
-.table-footer {
-  border: solid black 2px !important;
-  border-radius: 6px;
-  margin-top: 10px !important;
-  color: whitesmoke !important;
-}
-
-.table-footer select {
-  color: #4da2fc !important;
-}
-
-.pagination-controls a span {
-  color: #4da2fc !important;
-}
-
-.pagination-controls .info {
-  color: whitesmoke !important;
-}
-
-.empty-table-text {
-  color: #8c91a0;
-  text-align: center;
-}
-
 .credentials-modal {
   text-align: center;
   background-color: #2a2735;

frontend/client/views/pipeline/detail.vue

@@ -379,74 +379,6 @@ export default {
 </script>
 
 <style lang="scss">
-.global-search-input {
-  background-color: #19191b !important;
-  color: white !important;
-  border-color: #2a2735 !important;
-}
-
-.progress-bar-middle {
-  position: relative;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-  top: 50%; 
-}
-
-.progress-bar-height {
-  height: 50px;
-}
-
-.table td {
-  border: 0 !important;
-  color: #8c91a0 !important;
-  text-align: center !important;
-}
-
-.table th {
-  border-top: solid black 2px !important;
-  border-bottom: solid black 2px !important;
-  color: #4da2fc !important;
-}
-
-.table thead th {
-  color: #4da2fc;
-  text-align: center !important;
-}
-
-.table-own-bordered {
-  border-collapse: separate !important;
-  border: solid black 2px;
-  border-radius: 6px;
-}
-
-.responsive {
-  overflow-x: auto !important;
-}
-
-.table-footer {
-  border: solid black 2px !important;
-  border-radius: 6px;
-  margin-top: 10px !important;
-  color: whitesmoke !important;
-}
-
-.table-footer select {
-  color: #4da2fc !important;
-}
-
-.pagination-controls a span {
-  color: #4da2fc !important;
-}
-
-.pagination-controls .info {
-  color: whitesmoke !important;
-}
-
-.empty-table-text {
-  color: #8c91a0;
-  text-align: center;
-}
 
 #pipeline-detail {
   width: 100%;