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

Author: DaneEveritt

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

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

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

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

@@ -28,7 +28,7 @@
     </form>
 </template>
 
-<script lang="ts">
+<script>
     export default {
         name: "two-factor-form",
         data: function () {

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

@@ -11,7 +11,7 @@
     </transition>
 </template>
 
-<script lang="ts">
+<script>
     import { XIcon } from 'vue-feather-icons';
     export default {
         name: 'modal',