From 6330d6579f5a87cbd4ba624f968a114e9f32a47a Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 29 Dec 2018 19:24:52 -0800
Subject: [PATCH] Undo the ts setting in vue components, begin migration to
 Vue.component setup

---
 resources/assets/scripts/components/Flash.vue |   2 +-
 .../assets/scripts/components/MessageBox.vue  |   2 +-
 .../components/auth/ForgotPassword.vue        |   2 +-
 .../assets/scripts/components/auth/Login.ts   |  36 ++++++
 .../assets/scripts/components/auth/Login.vue  |  46 -------
 .../scripts/components/auth/LoginForm.ts      | 112 +++++++++++++++++
 .../scripts/components/auth/LoginForm.vue     | 115 ------------------
 .../scripts/components/auth/ResetPassword.vue |   2 +-
 .../scripts/components/auth/TwoFactorForm.vue |   2 +-
 .../assets/scripts/components/core/Modal.vue  |   2 +-
 .../scripts/components/core/Navigation.vue    |   2 +-
 .../scripts/components/dashboard/Account.vue  |   2 +-
 .../components/dashboard/Dashboard.vue        |   2 +-
 .../components/dashboard/ServerBox.vue        |   2 +-
 .../dashboard/account/ChangePassword.vue      |   2 +-
 .../account/TwoFactorAuthentication.vue       |   2 +-
 .../dashboard/account/UpdateEmail.vue         |   2 +-
 .../assets/scripts/components/forms/CSRF.vue  |   2 +-
 .../scripts/components/server/Server.vue      |   4 +-
 .../components/server/ServerAllocations.vue   |   2 +-
 .../components/server/ServerSchedules.vue     |   2 +-
 .../components/server/ServerSettings.vue      |   2 +-
 .../components/server/ServerSubusers.vue      |   2 +-
 .../server/components/PowerButtons.vue        |   4 +-
 .../server/components/ProgressBar.vue         |   2 +-
 .../database/CreateDatabaseModal.vue          |   2 +-
 .../components/database/DatabaseRow.vue       |   2 +-
 .../database/DeleteDatabaseModal.vue          |   2 +-
 .../filemanager/FileManagerContextMenu.vue    |   2 +-
 .../filemanager/FileManagerFileRow.vue        |   2 +-
 .../filemanager/FileManagerFolderRow.vue      |   2 +-
 .../components/server/subpages/Console.vue    |   4 +-
 .../components/server/subpages/Databases.vue  |   2 +-
 .../server/subpages/FileManager.vue           |   2 +-
 resources/assets/scripts/router.ts            |   2 +-
 35 files changed, 179 insertions(+), 198 deletions(-)
 create mode 100644 resources/assets/scripts/components/auth/Login.ts
 delete mode 100644 resources/assets/scripts/components/auth/Login.vue
 create mode 100644 resources/assets/scripts/components/auth/LoginForm.ts
 delete mode 100644 resources/assets/scripts/components/auth/LoginForm.vue

diff --git a/resources/assets/scripts/components/Flash.vue b/resources/assets/scripts/components/Flash.vue
index 860d94749..8da4dfd5a 100644
--- a/resources/assets/scripts/components/Flash.vue
+++ b/resources/assets/scripts/components/Flash.vue
@@ -12,7 +12,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import MessageBox from './MessageBox.vue';
 
     export default {
diff --git a/resources/assets/scripts/components/MessageBox.vue b/resources/assets/scripts/components/MessageBox.vue
index 7e8159558..b552f7747 100644
--- a/resources/assets/scripts/components/MessageBox.vue
+++ b/resources/assets/scripts/components/MessageBox.vue
@@ -5,7 +5,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'message-box',
         props: {
diff --git a/resources/assets/scripts/components/auth/ForgotPassword.vue b/resources/assets/scripts/components/auth/ForgotPassword.vue
index 8259e1fca..6f40f2df8 100644
--- a/resources/assets/scripts/components/auth/ForgotPassword.vue
+++ b/resources/assets/scripts/components/auth/ForgotPassword.vue
@@ -36,7 +36,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'forgot-password',
         props: {
diff --git a/resources/assets/scripts/components/auth/Login.ts b/resources/assets/scripts/components/auth/Login.ts
new file mode 100644
index 000000000..4247f2bf4
--- /dev/null
+++ b/resources/assets/scripts/components/auth/Login.ts
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import LoginForm from "./LoginForm";
+
+export default Vue.component('login', {
+    data: function () {
+        return {
+            user: {
+                email: ''
+            },
+        };
+    },
+    components: {
+        LoginForm,
+    },
+    methods: {
+        onUpdateEmail: function (value: string) {
+            this.$data.user.email = value;
+        },
+    },
+    template: `
+        <div>
+            <!--<flash container="mb-2"/>-->
+            <login-form
+                    v-if="this.$route.name === 'login'"
+                    v-bind:user="user"
+                    v-on:update-email="onUpdateEmail"
+            />
+            <!--<forgot-password-->
+                    <!--v-if="this.$route.name === 'forgot-password'"-->
+                    <!--v-bind:email="user.email"-->
+                    <!--v-on:update-email="onUpdateEmail"-->
+            <!--/>-->
+            <!--<two-factor-form v-if="this.$route.name === 'checkpoint'" />-->
+        </div>
+    `,
+});
diff --git a/resources/assets/scripts/components/auth/Login.vue b/resources/assets/scripts/components/auth/Login.vue
deleted file mode 100644
index a3bea6c8f..000000000
--- a/resources/assets/scripts/components/auth/Login.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <div>
-        <flash container="mb-2"/>
-        <login-form
-                v-if="this.$route.name === 'login'"
-                v-bind:user="user"
-                v-on:update-email="onUpdateEmail"
-        />
-        <forgot-password
-                v-if="this.$route.name === 'forgot-password'"
-                v-bind:email="user.email"
-                v-on:update-email="onUpdateEmail"
-        />
-        <two-factor-form v-if="this.$route.name === 'checkpoint'" />
-    </div>
-</template>
-
-<script lang="ts">
-    import Flash from '../Flash.vue';
-    import ForgotPassword from "./ForgotPassword.vue";
-    import LoginForm from "./LoginForm.vue";
-    import TwoFactorForm from "./TwoFactorForm.vue";
-    import Vue from 'vue';
-
-    export default Vue.extend({
-        name: 'login',
-        data: function () {
-            return {
-                user: {
-                    email: ''
-                },
-            };
-        },
-        methods: {
-            onUpdateEmail: function (value) {
-                this.$data.user.email = value;
-            },
-        },
-        components: {
-            Flash,
-            TwoFactorForm,
-            ForgotPassword,
-            LoginForm,
-        },
-    });
-</script>
diff --git a/resources/assets/scripts/components/auth/LoginForm.ts b/resources/assets/scripts/components/auth/LoginForm.ts
new file mode 100644
index 000000000..3ca24ec86
--- /dev/null
+++ b/resources/assets/scripts/components/auth/LoginForm.ts
@@ -0,0 +1,112 @@
+import Vue from 'vue';
+import {isObject} from 'lodash';
+
+export default Vue.component('login-form', {
+    props: {
+        user: {
+            type: Object,
+            required: false,
+            default: function () {
+                return {
+                    email: '',
+                    password: '',
+                };
+            },
+        }
+    },
+    data: function () {
+        return {
+            showSpinner: false,
+        }
+    },
+    mounted: function () {
+        (this.$refs.email as HTMLElement).focus();
+    },
+    methods: {
+        // Handle a login request eminating from the form. If 2FA is required the
+        // user will be presented with the 2FA modal window.
+        submitForm: function () {
+            const self = this;
+            this.$data.showSpinner = true;
+
+            this.$flash.clear();
+            this.$store.dispatch('auth/login', {user: this.$props.user.email, password: this.$props.user.password})
+                .then(response => {
+                    if (response.complete) {
+                        return window.location = response.intended;
+                    }
+
+                    this.$props.user.password = '';
+                    this.$data.showSpinner = false;
+                    this.$router.push({name: 'checkpoint', query: {token: response.token}});
+                })
+                .catch(err => {
+                    this.$props.user.password = '';
+                    this.$data.showSpinner = false;
+                    (this.$refs.password as HTMLElement).focus();
+                    this.$store.commit('auth/logout');
+
+                    if (!err.response) {
+                        return console.error(err);
+                    }
+
+                    const response = err.response;
+                    if (response.data && isObject(response.data.errors)) {
+                        response.data.errors.forEach(function (error: any) {
+                            self.$flash.error(error.detail);
+                        });
+                    }
+                });
+        },
+
+        // Update the email address associated with the login form
+        // so that it is populated in the parent model automatically.
+        updateEmail: function (event: { target: HTMLInputElement }) {
+            this.$emit('update-email', event.target.value);
+        }
+    },
+    template: `
+        <form class="login-box" method="post"
+              v-on:submit.prevent="submitForm"
+        >
+            <div class="flex flex-wrap -mx-3 mb-6">
+                <div class="input-open">
+                    <input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
+                           ref="email"
+                           :class="{ 'has-content' : user.email.length > 0 }"
+                           :readonly="showSpinner"
+                           :value="user.email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <label id="grid-username-label" for="grid-username">{{ $t('strings.user_identifier') }}</label>
+                </div>
+            </div>
+            <div class="flex flex-wrap -mx-3 mb-6">
+                <div class="input-open">
+                    <input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
+                           ref="password"
+                           :class="{ 'has-content' : user.password && user.password.length > 0 }"
+                           :readonly="showSpinner"
+                           v-model="user.password"
+                    />
+                    <label id="grid-password-label" for="grid-password">{{ $t('strings.password') }}</label>
+                </div>
+            </div>
+            <div>
+                <button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
+                        v-bind:disabled="showSpinner">
+                    <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
+                    <span v-bind:class="{ hidden: showSpinner }">
+                        {{ $t('auth.sign_in') }}
+                    </span>
+                </button>
+            </div>
+            <div class="pt-6 text-center">
+                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
+                             :to="{ name: 'forgot-password' }">
+                    {{ $t('auth.forgot_password.label') }}
+                </router-link>
+            </div>
+        </form>
+    `,
+});
diff --git a/resources/assets/scripts/components/auth/LoginForm.vue b/resources/assets/scripts/components/auth/LoginForm.vue
deleted file mode 100644
index 84770b379..000000000
--- a/resources/assets/scripts/components/auth/LoginForm.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <div>
-        <form class="login-box" method="post"
-              v-on:submit.prevent="submitForm"
-        >
-            <div class="flex flex-wrap -mx-3 mb-6">
-                <div class="input-open">
-                    <input class="input open-label" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required
-                           ref="email"
-                           :class="{ 'has-content' : user.email.length > 0 }"
-                           :readonly="showSpinner"
-                           :value="user.email"
-                           v-on:input="updateEmail($event)"
-                    />
-                    <label id="grid-username-label" for="grid-username">{{ $t('strings.user_identifier') }}</label>
-                </div>
-            </div>
-            <div class="flex flex-wrap -mx-3 mb-6">
-                <div class="input-open">
-                    <input class="input open-label" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required
-                           ref="password"
-                           :class="{ 'has-content' : user.password && user.password.length > 0 }"
-                           :readonly="showSpinner"
-                           v-model="user.password"
-                    />
-                    <label id="grid-password-label" for="grid-password">{{ $t('strings.password') }}</label>
-                </div>
-            </div>
-            <div>
-                <button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in"
-                        v-bind:disabled="showSpinner">
-                    <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
-                    <span v-bind:class="{ hidden: showSpinner }">
-                        {{ $t('auth.sign_in') }}
-                    </span>
-                </button>
-            </div>
-            <div class="pt-6 text-center">
-                <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password"
-                             :to="{ name: 'forgot-password' }">
-                    {{ $t('auth.forgot_password.label') }}
-                </router-link>
-            </div>
-        </form>
-    </div>
-</template>
-
-<script lang="ts">
-    export default {
-        name: 'login-form',
-        props: {
-            user: {
-                type: Object,
-                required: false,
-                default: function () {
-                    return {
-                        email: '',
-                        password: '',
-                    };
-                },
-            }
-        },
-        data: function () {
-            return {
-                showSpinner: false,
-            }
-        },
-        mounted: function () {
-            this.$refs.email.focus();
-        },
-        methods: {
-            // Handle a login request eminating from the form. If 2FA is required the
-            // user will be presented with the 2FA modal window.
-            submitForm: function () {
-                const self = this;
-                this.$data.showSpinner = true;
-
-                this.clearFlashes();
-                this.$store.dispatch('auth/login', { user: this.$props.user.email, password: this.$props.user.password })
-                    .then(response => {
-                        if (response.complete) {
-                            return window.location = response.intended;
-                        }
-
-                        this.$props.user.password = '';
-                        this.$data.showSpinner = false;
-                        this.$router.push({name: 'checkpoint', query: {token: response.token}});
-                    })
-                    .catch(err => {
-                        this.$props.user.password = '';
-                        this.$data.showSpinner = false;
-                        this.$refs.password.focus();
-                        this.$store.commit('auth/logout');
-
-                        if (!err.response) {
-                            return console.error(err);
-                        }
-
-                        const response = err.response;
-                        if (response.data && _.isObject(response.data.errors)) {
-                            response.data.errors.forEach(function (error) {
-                                self.error(error.detail);
-                            });
-                        }
-                    });
-            },
-
-            // Update the email address associated with the login form
-            // so that it is populated in the parent model automatically.
-            updateEmail: function (event) {
-                this.$emit('update-email', event.target.value);
-            }
-        }
-    }
-</script>
diff --git a/resources/assets/scripts/components/auth/ResetPassword.vue b/resources/assets/scripts/components/auth/ResetPassword.vue
index 1e84e2738..451b78ac8 100644
--- a/resources/assets/scripts/components/auth/ResetPassword.vue
+++ b/resources/assets/scripts/components/auth/ResetPassword.vue
@@ -55,7 +55,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ResetPassword",
         props: {
diff --git a/resources/assets/scripts/components/auth/TwoFactorForm.vue b/resources/assets/scripts/components/auth/TwoFactorForm.vue
index 6301cded9..8c800af2d 100644
--- a/resources/assets/scripts/components/auth/TwoFactorForm.vue
+++ b/resources/assets/scripts/components/auth/TwoFactorForm.vue
@@ -28,7 +28,7 @@
     </form>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "two-factor-form",
         data: function () {
diff --git a/resources/assets/scripts/components/core/Modal.vue b/resources/assets/scripts/components/core/Modal.vue
index 4cbef2c24..3f7db17f6 100644
--- a/resources/assets/scripts/components/core/Modal.vue
+++ b/resources/assets/scripts/components/core/Modal.vue
@@ -11,7 +11,7 @@
     </transition>
 </template>
 
-<script lang="ts">
+<script>
     import { XIcon } from 'vue-feather-icons';
     export default {
         name: 'modal',
diff --git a/resources/assets/scripts/components/core/Navigation.vue b/resources/assets/scripts/components/core/Navigation.vue
index f9bf82415..92b485b27 100644
--- a/resources/assets/scripts/components/core/Navigation.vue
+++ b/resources/assets/scripts/components/core/Navigation.vue
@@ -67,7 +67,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import debounce from 'lodash/debounce';
     import { mapState } from 'vuex';
     import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
diff --git a/resources/assets/scripts/components/dashboard/Account.vue b/resources/assets/scripts/components/dashboard/Account.vue
index 92bd7fa8c..f23f5dc8c 100644
--- a/resources/assets/scripts/components/dashboard/Account.vue
+++ b/resources/assets/scripts/components/dashboard/Account.vue
@@ -25,7 +25,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import Navigation from '../core/Navigation';
     import Flash from '../Flash';
     import UpdateEmail from './account/UpdateEmail';
diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index 6614ada5f..ae436826d 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/resources/assets/scripts/components/dashboard/Dashboard.vue
@@ -27,7 +27,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import debounce from 'lodash/debounce';
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.vue b/resources/assets/scripts/components/dashboard/ServerBox.vue
index 917d28573..90a816f04 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.vue
+++ b/resources/assets/scripts/components/dashboard/ServerBox.vue
@@ -35,7 +35,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import get from 'lodash/get';
     import differenceInSeconds from 'date-fns/difference_in_seconds';
 
diff --git a/resources/assets/scripts/components/dashboard/account/ChangePassword.vue b/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
index f1b631c35..494c76be2 100644
--- a/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
+++ b/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
@@ -38,7 +38,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import isObject from 'lodash/isObject';
 
     export default {
diff --git a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
index f52054185..387f275e8 100644
--- a/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
+++ b/resources/assets/scripts/components/dashboard/account/TwoFactorAuthentication.vue
@@ -62,7 +62,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import Vue from 'vue';
     import isObject from 'lodash/isObject';
 
diff --git a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
index 42e1a811c..a228480a1 100644
--- a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
+++ b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
@@ -26,7 +26,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { isObject, get } from 'lodash';
     import { mapState, mapActions } from 'vuex';
 
diff --git a/resources/assets/scripts/components/forms/CSRF.vue b/resources/assets/scripts/components/forms/CSRF.vue
index 5e6eccb96..b421a91da 100644
--- a/resources/assets/scripts/components/forms/CSRF.vue
+++ b/resources/assets/scripts/components/forms/CSRF.vue
@@ -2,7 +2,7 @@
     <input type="hidden" name="_token" v-bind:value="X_CSRF_TOKEN" />
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'csrf',
         data: function () {
diff --git a/resources/assets/scripts/components/server/Server.vue b/resources/assets/scripts/components/server/Server.vue
index 4b73b31d3..4bf27fbb5 100644
--- a/resources/assets/scripts/components/server/Server.vue
+++ b/resources/assets/scripts/components/server/Server.vue
@@ -63,20 +63,18 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon } from 'vue-feather-icons'
     import Navigation from '../core/Navigation';
     import ProgressBar from './components/ProgressBar';
     import { mapState } from 'vuex';
     import io from 'socket.io-client';
-    import { Socketio } from '../../mixins/socketio/index';
 
     import PowerButtons from './components/PowerButtons';
     import Flash from '../Flash';
 
     export default {
         name: 'server',
-        mixins: [Socketio],
         components: {
             Flash, PowerButtons, ProgressBar, Navigation,
             TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon,
diff --git a/resources/assets/scripts/components/server/ServerAllocations.vue b/resources/assets/scripts/components/server/ServerAllocations.vue
index ecd5295f7..87fca2233 100644
--- a/resources/assets/scripts/components/server/ServerAllocations.vue
+++ b/resources/assets/scripts/components/server/ServerAllocations.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerAllocations"
     }
diff --git a/resources/assets/scripts/components/server/ServerSchedules.vue b/resources/assets/scripts/components/server/ServerSchedules.vue
index c5a04d509..358962e40 100644
--- a/resources/assets/scripts/components/server/ServerSchedules.vue
+++ b/resources/assets/scripts/components/server/ServerSchedules.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerSchedules"
     }
diff --git a/resources/assets/scripts/components/server/ServerSettings.vue b/resources/assets/scripts/components/server/ServerSettings.vue
index 8b9e177c9..41dcdc539 100644
--- a/resources/assets/scripts/components/server/ServerSettings.vue
+++ b/resources/assets/scripts/components/server/ServerSettings.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerSettings"
     }
diff --git a/resources/assets/scripts/components/server/ServerSubusers.vue b/resources/assets/scripts/components/server/ServerSubusers.vue
index d40a107da..969ba0a07 100644
--- a/resources/assets/scripts/components/server/ServerSubusers.vue
+++ b/resources/assets/scripts/components/server/ServerSubusers.vue
@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerSubusers"
     }
diff --git a/resources/assets/scripts/components/server/components/PowerButtons.vue b/resources/assets/scripts/components/server/components/PowerButtons.vue
index 37c88f45a..c2f0afadd 100644
--- a/resources/assets/scripts/components/server/components/PowerButtons.vue
+++ b/resources/assets/scripts/components/server/components/PowerButtons.vue
@@ -22,14 +22,12 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import Status from '../../../helpers/statuses';
-    import { Socketio } from '../../../mixins/socketio/index';
     import { mapState } from 'vuex';
 
     export default {
         name: 'power-buttons',
-        mixins: [Socketio],
         computed: {
             ...mapState('socket', ['connected', 'status']),
         },
diff --git a/resources/assets/scripts/components/server/components/ProgressBar.vue b/resources/assets/scripts/components/server/components/ProgressBar.vue
index 3fbe8c450..e4a123c55 100644
--- a/resources/assets/scripts/components/server/components/ProgressBar.vue
+++ b/resources/assets/scripts/components/server/components/ProgressBar.vue
@@ -11,7 +11,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'progress-bar',
         props: {
diff --git a/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue b/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
index 6a67704c1..35cff9478 100644
--- a/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
+++ b/resources/assets/scripts/components/server/components/database/CreateDatabaseModal.vue
@@ -35,7 +35,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import MessageBox from '../../../MessageBox';
     import get from 'lodash/get';
 
diff --git a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
index 0db55b9b6..159ac7561 100644
--- a/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
+++ b/resources/assets/scripts/components/server/components/database/DatabaseRow.vue
@@ -41,7 +41,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { LockIcon, Trash2Icon, DatabaseIcon } from 'vue-feather-icons';
     import Modal from '../../../core/Modal';
     import DeleteDatabaseModal from './DeleteDatabaseModal';
diff --git a/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue b/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
index f2c495bb8..aed842d82 100644
--- a/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
+++ b/resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue
@@ -18,7 +18,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'delete-database-modal',
         props: {
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue b/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
index b3cd59217..74e768103 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/FileManagerContextMenu.vue
@@ -51,7 +51,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon } from 'vue-feather-icons';
 
     export default {
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue b/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
index 9a8caf586..7aef9b80b 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/FileManagerFileRow.vue
@@ -14,7 +14,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import * as Helpers from '../../../../helpers/index';
     import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
     import FileManagerContextMenu from './FileManagerContextMenu';
diff --git a/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue b/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
index 6b6e59a78..cf7b47197 100644
--- a/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
+++ b/resources/assets/scripts/components/server/components/filemanager/FileManagerFolderRow.vue
@@ -14,7 +14,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { FolderIcon } from 'vue-feather-icons';
     import { formatDate } from '../../../../helpers/index';
 
diff --git a/resources/assets/scripts/components/server/subpages/Console.vue b/resources/assets/scripts/components/server/subpages/Console.vue
index 53d75d58b..38acc7fbe 100644
--- a/resources/assets/scripts/components/server/subpages/Console.vue
+++ b/resources/assets/scripts/components/server/subpages/Console.vue
@@ -24,16 +24,14 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { Terminal } from 'xterm';
     import * as TerminalFit from 'xterm/lib/addons/fit/fit';
     import {mapState} from 'vuex';
-    import {Socketio} from '../../../mixins/socketio/index';
 
     Terminal.applyAddon(TerminalFit);
 
     export default {
-        mixins: [Socketio],
         name: 'console-page',
         computed: {
             ...mapState('socket', ['connected']),
diff --git a/resources/assets/scripts/components/server/subpages/Databases.vue b/resources/assets/scripts/components/server/subpages/Databases.vue
index c4024aab7..1425c77c0 100644
--- a/resources/assets/scripts/components/server/subpages/Databases.vue
+++ b/resources/assets/scripts/components/server/subpages/Databases.vue
@@ -29,7 +29,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import { DatabaseIcon, LockIcon, Trash2Icon } from 'vue-feather-icons';
     import map from 'lodash/map';
     import filter from 'lodash/filter';
diff --git a/resources/assets/scripts/components/server/subpages/FileManager.vue b/resources/assets/scripts/components/server/subpages/FileManager.vue
index 2684702ed..be7618829 100644
--- a/resources/assets/scripts/components/server/subpages/FileManager.vue
+++ b/resources/assets/scripts/components/server/subpages/FileManager.vue
@@ -41,7 +41,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
 import map from 'lodash/map';
 import { mapState } from 'vuex';
 import FileManagerFileRow from '../components/filemanager/FileManagerFileRow';
diff --git a/resources/assets/scripts/router.ts b/resources/assets/scripts/router.ts
index 1ed1bf63d..cc992d84b 100644
--- a/resources/assets/scripts/router.ts
+++ b/resources/assets/scripts/router.ts
@@ -4,7 +4,7 @@ import store from './store/index';
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
 // Base Vuejs Templates
-import Login from './components/auth/Login.vue';
+import Login from './components/auth/Login';
 import Dashboard from './components/dashboard/Dashboard.vue';
 import Account from './components/dashboard/Account.vue';
 import ResetPassword from './components/auth/ResetPassword.vue';