Finish auth migration, now to make it work

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

@@ -0,0 +1,93 @@
+import Vue from 'vue';
+import {isObject} from 'lodash';
+import {AxiosError, AxiosResponse} from "axios";
+
+export default Vue.component('forgot-password', {
+    props: {
+        email: {type: String, required: true},
+    },
+    mounted: function () {
+        (this.$refs.email as HTMLElement).focus();
+    },
+    data: function () {
+        return {
+            X_CSRF_TOKEN: window.X_CSRF_TOKEN,
+            errors: [],
+            submitDisabled: false,
+            showSpinner: false,
+        };
+    },
+    methods: {
+        updateEmail: function (event: { target: HTMLInputElement }) {
+            this.$data.submitDisabled = false;
+            this.$emit('update-email', event.target.value);
+        },
+
+        submitForm: function () {
+            this.$data.submitDisabled = true;
+            this.$data.showSpinner = true;
+            this.$data.errors = [];
+            this.$flash.clear();
+
+            window.axios.post(this.route('auth.forgot-password'), {
+                email: this.$props.email,
+            })
+                .then((response: AxiosResponse) => {
+                    if (!(response.data instanceof Object)) {
+                        throw new Error('An error was encountered while processing this request.');
+                    }
+
+                    this.$data.submitDisabled = false;
+                    this.$data.showSpinner = false;
+                    this.$flash.success(response.data.status);
+                    this.$router.push({name: 'login'});
+                })
+                .catch((err: AxiosError) => {
+                    this.$data.showSpinner = false;
+                    if (!err.response) {
+                        return console.error(err);
+                    }
+
+                    const response = err.response;
+                    if (response.data && isObject(response.data.errors)) {
+                        response.data.errors.forEach((error: any) => {
+                            this.$flash.error(error.detail);
+                        });
+                    }
+                });
+        }
+    },
+    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-email" type="email" aria-labelledby="grid-email-label" required
+                           ref="email"
+                           v-bind:class="{ 'has-content': email.length > 0 }"
+                           v-bind:readonly="showSpinner"
+                           v-bind:value="email"
+                           v-on:input="updateEmail($event)"
+                    />
+                    <label for="grid-email" id="grid-email-label">{{ $t('strings.email') }}</label>
+                    <p class="text-grey-darker text-xs">{{ $t('auth.forgot_password.label_help') }}</p>
+                </div>
+            </div>
+            <div>
+                <button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="submitDisabled">
+                    <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }">&nbsp;</span>
+                    <span v-bind:class="{ hidden: showSpinner }">
+                        {{ $t('auth.forgot_password.button') }}
+                    </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="Go to login"
+                             :to="{ name: 'login' }"
+                >
+                    {{ $t('auth.go_to_login') }}
+                </router-link>
+            </div>
+        </form>
+    `,
+})