From 89dada611b16d8356d491cc597f62902f6a435f7 Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Mon, 14 Jun 2021 00:23:00 +0300
Subject: [PATCH 1/7] Add 404 and update navbar

---
 src/App.vue                  | 16 +++++++++++++
 src/blocks/Navbar.vue        | 17 ++++++++++----
 src/components/Dashboard.vue |  6 -----
 src/components/NotFound.vue  | 44 ++++++++++++++++++++++++++++++++++++
 src/router.ts                |  9 ++++++++
 5 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 src/components/NotFound.vue

diff --git a/src/App.vue b/src/App.vue
index 083049b..1b67ea1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,19 @@
 <template>
+  <navbar @create-server="servers.push($event)" />
   <router-view/>
+  <Footer />
 </template>
+
+<script lang='ts'>
+import { defineComponent } from 'vue'
+
+import Footer from './blocks/Footer.vue'
+import Navbar from './blocks/Navbar.vue'
+
+export default defineComponent({
+  components: {
+    Footer,
+    Navbar,
+  },
+})
+</script>
diff --git a/src/blocks/Navbar.vue b/src/blocks/Navbar.vue
index 36c89f1..3851ea8 100644
--- a/src/blocks/Navbar.vue
+++ b/src/blocks/Navbar.vue
@@ -21,11 +21,11 @@
 
     <div id="navbarBasicExample" :class="['navbar-menu', {'is-active': isMenuActive}]">
       <div class="navbar-start">
-        <a href="/dashboard" class="navbar-item">
+        <a v-if="username" @click="$router.push('/dashboard')" class="navbar-item">
           Панель управления
         </a>
 
-        <div class="navbar-item has-dropdown is-hoverable">
+        <div v-if="username" class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link">
             {{ username }}
           </a>
@@ -39,7 +39,7 @@
 
         <div class="navbar-item has-dropdown is-hoverable">
           <a class="navbar-link">
-            Другое
+            Помощь
           </a>
 
           <div class="navbar-dropdown is-boxed">
@@ -52,16 +52,25 @@
 
       <div class="navbar-end">
         <div class="navbar-item">
-          <div class="buttons">
+          <div v-if="username" class="buttons">
             <a href="#" class="button is-primary" @click="showModal = true">
               <strong>Создать сервер</strong>
             </a>
           </div>
+          <div v-if="!username" class="buttons">
+            <a class="button is-primary" @click="$router.push('/signup')">
+                <strong>Регистрация</strong>
+              </a>
+              <a class="button" @click="$router.push('/login')">
+                Вход
+              </a>
+          </div>
         </div>
       </div>
     </div>
 
     <server-modal
+      v-if="username"
       v-model:show="showModal"
       @create-server="$emit('create-server', $event)"
     />
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 57c209b..ce7d761 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,5 +1,4 @@
 <template>
-  <navbar @create-server="servers.push($event)" />
   <section class="section">
     <h1 class="title">Панель управления</h1>
       <div v-if="servers.length > 0" class="columns is-multiline is-variable is-1">
@@ -15,20 +14,15 @@
       Если вы нашли какую-то ошибку на сайте или у вас есть предложение по функционалу, напишите пожалуйста нам на <a href="mailto:support@donkey-engine.host">почту</a>
     </div>
   </section>
-  <Footer />
 </template>
 
 <script lang='ts'>
 import { defineComponent } from 'vue'
 
-import Footer from '../blocks/Footer.vue'
-import Navbar from '../blocks/Navbar.vue'
 import ServerItem from './ServerItem.vue'
 
 export default defineComponent({
   components: {
-    Footer,
-    Navbar,
     ServerItem,
   },
   data() {
diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
new file mode 100644
index 0000000..27bf042
--- /dev/null
+++ b/src/components/NotFound.vue
@@ -0,0 +1,44 @@
+<template>
+  <section class="hero is-large has-background-danger-light has-text-centered">
+  <div class="hero-body">
+      <h1 class="title is-1">
+        404
+      </h1>
+      <h2 class="subtitle is-3">
+        Ой... Похоже, такой страницы не существует.
+      </h2>
+      <p class='has-text-danger'>
+        <i :class="['fas fa-3x', currentIcon]"></i>
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      icons: [
+        'fa-frown',
+        'fa-sad-tear',
+        'fa-frown-open',
+        'fa-sad-cry',
+      ],
+      iconIndex: 0,
+    }
+  },
+  computed: {
+    currentIcon() {
+      return this.icons[this.iconIndex]
+    }
+  },
+  created() {
+    setInterval(() => {
+      this.iconIndex += 1
+      this.iconIndex = this.iconIndex >= this.icons.length ? 0 : this.iconIndex
+    }, 3000)
+  }
+})
+</script>
diff --git a/src/router.ts b/src/router.ts
index ef64a37..c53de4c 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -2,6 +2,7 @@ import { Component } from 'vue'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import Dashboard from './components/Dashboard.vue'
+import NotFound from './components/NotFound.vue'
 import SignUp from './components/SignUp.vue'
 import SignIn from './components/SignIn.vue'
 import store from './store'
@@ -31,6 +32,14 @@ const routes: RouteRecordRaw[] = [
       authRoute: true,
     },
   },
+  { 
+    path: '/404',
+    component: NotFound,
+  },
+  { 
+    path: '/:pathMatch(.*)*',
+    redirect: '/404',
+  },
 ]
 
 export const router = createRouter({

From e81d4012e56dc584597e0de45b45e99d39d36e48 Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Mon, 14 Jun 2021 00:38:38 +0300
Subject: [PATCH 2/7] Fix

---
 src/components/NotFound.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
index 27bf042..e8b593a 100644
--- a/src/components/NotFound.vue
+++ b/src/components/NotFound.vue
@@ -1,10 +1,10 @@
 <template>
   <section class="hero is-large has-background-danger-light has-text-centered">
   <div class="hero-body">
-      <h1 class="title is-1">
+      <h1 class="title">
         404
       </h1>
-      <h2 class="subtitle is-3">
+      <h2 class="subtitle">
         Ой... Похоже, такой страницы не существует.
       </h2>
       <p class='has-text-danger'>

From 22231507c5b460f3333b6f10b2440f570edfa19d Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Mon, 14 Jun 2021 00:40:36 +0300
Subject: [PATCH 3/7] Fix 2.0

---
 src/router.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index c53de4c..2fdb424 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -32,11 +32,11 @@ const routes: RouteRecordRaw[] = [
       authRoute: true,
     },
   },
-  { 
+  {
     path: '/404',
     component: NotFound,
   },
-  { 
+  {
     path: '/:pathMatch(.*)*',
     redirect: '/404',
   },

From 4aaa71f8d4ff98cd1cb8495a25f31f5543e27f98 Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Mon, 14 Jun 2021 16:41:17 +0300
Subject: [PATCH 4/7] Fix typings

---
 src/components/NotFound.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
index e8b593a..f0cd0b1 100644
--- a/src/components/NotFound.vue
+++ b/src/components/NotFound.vue
@@ -30,7 +30,7 @@ export default defineComponent({
     }
   },
   computed: {
-    currentIcon() {
+    currentIcon(): String {
       return this.icons[this.iconIndex]
     }
   },

From a7e81eddf0ad2dcf8ff60eb4fa5156f60278021d Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Sun, 20 Jun 2021 21:27:49 +0300
Subject: [PATCH 5/7] Add vuex support

---
 package-lock.json              | 25 +++++++++++++++++++++++--
 package.json                   |  3 ++-
 src/App.vue                    |  2 +-
 src/blocks/Navbar.vue          |  3 +--
 src/components/Dashboard.vue   | 12 ++++++++----
 src/components/ServerModal.vue |  4 +++-
 src/main.ts                    | 10 +++++++---
 src/store.ts                   | 31 ++++++++++++++++++++++++-------
 8 files changed, 69 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5abdc07..239740a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "bulma": "^0.9.2",
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.8"
+        "vue-router": "^4.0.8",
+        "vuex": "^4.0.1"
       },
       "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^4.18.0",
@@ -14627,6 +14628,17 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.1.tgz",
+      "integrity": "sha512-MddakQTAnImDkK1YhEESowKSU5KcjqHH3L1ScPx1lj6NzDDX0FuRBZqJoME5O7/nvj9puudDf6xnWU2w/cqI7g==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -17893,7 +17905,8 @@
       "version": "4.5.13",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.13.tgz",
       "integrity": "sha512-I1S9wZC7iI0Wn8kw8Zh+A2Qkf6s1M6vTGBkx8boXjuzfwEEyEHRxadsVCecZc8Mkpydo0nykj+MyYF96TKFuVA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.13",
@@ -28157,6 +28170,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.1.tgz",
+      "integrity": "sha512-MddakQTAnImDkK1YhEESowKSU5KcjqHH3L1ScPx1lj6NzDDX0FuRBZqJoME5O7/nvj9puudDf6xnWU2w/cqI7g==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index 88a2848..f425b44 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "bulma": "^0.9.2",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.8"
+    "vue-router": "^4.0.8",
+    "vuex": "^4.0.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
diff --git a/src/App.vue b/src/App.vue
index 1b67ea1..a52b654 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <navbar @create-server="servers.push($event)" />
+  <navbar/>
   <router-view/>
   <Footer />
 </template>
diff --git a/src/blocks/Navbar.vue b/src/blocks/Navbar.vue
index 3851ea8..ed3dcd3 100644
--- a/src/blocks/Navbar.vue
+++ b/src/blocks/Navbar.vue
@@ -72,7 +72,6 @@
     <server-modal
       v-if="username"
       v-model:show="showModal"
-      @create-server="$emit('create-server', $event)"
     />
   </nav>
 </template>
@@ -100,7 +99,7 @@ export default defineComponent({
     async signOut() {
       await this.$http.get('/logout/')
       localStorage.removeItem('user')
-      store.state.user = undefined
+      store.commit('removeUser')
       this.$router.push('/login')
     },
   },
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index ce7d761..8d03711 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -19,20 +19,24 @@
 <script lang='ts'>
 import { defineComponent } from 'vue'
 
+import store from '../store'
 import ServerItem from './ServerItem.vue'
 
 export default defineComponent({
   components: {
     ServerItem,
   },
-  data() {
-    return {
-      servers: [],
+  computed: {
+    servers() {
+      return store.state.servers
     }
   },
   async created() {
     const response = await this.$http.get('/servers/')
-    this.servers = response.data
+    store.commit({
+      type: 'setServers',
+      servers: response.data,
+    })
   },
 })
 </script>
diff --git a/src/components/ServerModal.vue b/src/components/ServerModal.vue
index 641d018..158e7e2 100644
--- a/src/components/ServerModal.vue
+++ b/src/components/ServerModal.vue
@@ -111,6 +111,8 @@ import { defineComponent } from "vue"
 import { useVuelidate } from "@vuelidate/core"
 import { required } from "@vuelidate/validators"
 
+import store from '../store'
+
 export default defineComponent({
   setup() {
     return { v$: useVuelidate() }
@@ -183,7 +185,7 @@ export default defineComponent({
       const { data } = await this.$http.post("/servers/", this.form)
       await this.$http.post(`/servers/${data.id}/build/`)
       this.pending = false
-      this.$emit("create-server", data)
+      store.state.servers.push(data)
       this.$emit("update:show", false)
     },
   },
diff --git a/src/main.ts b/src/main.ts
index c7f4e60..1e8ea1a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,10 +15,13 @@ const app = createApp({
     const user = localStorage.getItem('user')
     if (user) {
       try {
-        store.state.user = JSON.parse(user)
+        store.commit({
+          type: 'setUser',
+          user: JSON.parse(user)
+        })
       } catch (err) {
         localStorage.removeItem('user')
-        store.state.user = undefined
+        store.commit('removeUser')
       }
     }
   },
@@ -40,7 +43,7 @@ axios.interceptors.response.use(
   (error) => {
     if (error.response?.status === 403) {
       localStorage.removeItem('user')
-      store.state.user = undefined
+      store.commit('removeUser')
       return Promise.reject(error)
     }
     return Promise.reject(error)
@@ -48,6 +51,7 @@ axios.interceptors.response.use(
 )
 app.config.globalProperties.$http = axios
 app.use(router)
+app.use(store)
 app.mount('#app')
 
 declare module "@vue/runtime-core" {
diff --git a/src/store.ts b/src/store.ts
index ea8e962..b8ff51c 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,16 +1,33 @@
-import { reactive } from 'vue'
+import { createStore } from 'vuex'
 
-export interface User {
+interface User {
     id: number,
     username: string,
 }
 
+interface Server {}
+
 interface State {
     user?: User,
+    servers: Server[],
 }
 
-export default {
-    state: reactive({
-        user: undefined,
-    }) as State,
-}
+export default createStore({
+  state(): State {
+    return {
+      user: undefined,
+      servers: [],
+    }
+  },
+  mutations: {
+    setUser(state: State, payload) {
+      state.user = payload.user
+    },
+    removeUser(state: State) {
+      state.user = undefined
+    },
+    setServers(state: State, payload) {
+      state.servers = payload.servers
+    }
+  }
+})

From 67443bd1a0b0cff9b32105720623266f69e76c4f Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Sun, 20 Jun 2021 23:46:21 +0300
Subject: [PATCH 6/7] Fix typo

---
 src/components/ServerItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ServerItem.vue b/src/components/ServerItem.vue
index 49bf9fe..13d9ef9 100644
--- a/src/components/ServerItem.vue
+++ b/src/components/ServerItem.vue
@@ -128,7 +128,7 @@ export default defineComponent({
       if (this.server.status === ServerStatus.RUNNING) {
         return `${settings.SERVER_HOST_URL}:${this.server.port}`
       } else {
-        return 'Сервер не запущенн'
+        return 'Сервер не запущен'
       }
     }
   },

From e22bc0c851a05d6907a1271ddad479d0f0c15470 Mon Sep 17 00:00:00 2001
From: behindloader <simonsuprun@gmail.com>
Date: Mon, 21 Jun 2021 00:29:43 +0300
Subject: [PATCH 7/7] Import server interface

---
 src/store.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/store.ts b/src/store.ts
index b8ff51c..0150835 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,12 +1,11 @@
 import { createStore } from 'vuex'
+import { Server } from './interfaces'
 
 interface User {
     id: number,
     username: string,
 }
 
-interface Server {}
-
 interface State {
     user?: User,
     servers: Server[],