Undo the ts setting in vue components, begin migration to Vue.component setup

resources/assets/scripts/components/Flash.vue

@@ -12,7 +12,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     import MessageBox from './MessageBox.vue';
 
     export default {

resources/assets/scripts/components/MessageBox.vue

@@ -5,7 +5,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'message-box',
         props: {

resources/assets/scripts/components/auth/ForgotPassword.vue

@@ -36,7 +36,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'forgot-password',
         props: {

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>
+    `,
+});

resources/assets/scripts/components/auth/Login.vue

@@ -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>

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>
+    `,
+});

resources/assets/scripts/components/auth/LoginForm.vue

@@ -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>

resources/assets/scripts/components/auth/ResetPassword.vue

@@ -55,7 +55,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ResetPassword",
         props: {

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 () {

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',

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'

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';

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';

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';
 

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 {

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';
 

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';
 

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 () {

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,

resources/assets/scripts/components/server/ServerAllocations.vue

@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerAllocations"
     }

resources/assets/scripts/components/server/ServerSchedules.vue

@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerSchedules"
     }

resources/assets/scripts/components/server/ServerSettings.vue

@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerSettings"
     }

resources/assets/scripts/components/server/ServerSubusers.vue

@@ -2,7 +2,7 @@
 
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "ServerSubusers"
     }

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']),
         },

resources/assets/scripts/components/server/components/ProgressBar.vue

@@ -11,7 +11,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: 'progress-bar',
         props: {

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';
 

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';

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: {

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 {

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';

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';
 

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']),

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';

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';

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';