Get account pages working

Author: DaneEveritt

resources/assets/scripts/components/dashboard/Account.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import Navigation from "../core/Navigation";
+import Flash from "../Flash";
+import UpdateEmail from "./account/UpdateEmail";
+import ChangePassword from "./account/ChangePassword";
+import TwoFactorAuthentication from "./account/TwoFactorAuthentication";
+import Modal from "../core/Modal";
+
+export default Vue.component('account', {
+    components: {
+        TwoFactorAuthentication,
+        Modal,
+        ChangePassword,
+        UpdateEmail,
+        Flash,
+        Navigation
+    },
+
+    data: function () {
+        return {
+            modalVisible: false,
+        };
+    },
+
+    methods: {
+        openModal: function () {
+            this.modalVisible = true;
+            window.events.$emit('two_factor:open');
+        },
+    },
+
+    template: `
+        <div>
+            <navigation/>
+            <div class="container animate fadein mt-2 sm:mt-6">
+                <modal :show="modalVisible" v-on:close="modalVisible = false">
+                    <TwoFactorAuthentication v-on:close="modalVisible = false"/>
+                </modal>
+                <flash container="mt-2 sm:mt-6 mb-2"/>
+                <div class="flex flex-wrap">
+                    <div class="w-full md:w-1/2">
+                        <div class="sm:m-4 md:ml-0">
+                            <update-email class="mb-4 sm:mb-8"/>
+                            <div class="content-box text-center mb-4 sm:mb-0">
+                                <button class="btn btn-green btn-sm" type="submit" id="grid-open-two-factor-modal"
+                                        v-on:click="openModal"
+                                >Configure 2-Factor Authentication</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="w-full md:w-1/2">
+                        <change-password class="sm:m-4 md:mr-0"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+})

resources/assets/scripts/components/dashboard/Account.vue

@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import { isObject } from 'lodash';
+import {AxiosError} from "axios";
+
+export default Vue.component('change-password', {
+    data: function () {
+        return {
+            current: '',
+            newPassword: '',
+            confirmNew: '',
+        };
+    },
+
+    methods: {
+        submitForm: function () {
+            this.$flash.clear();
+            this.$validator.pause();
+
+            window.axios.put(this.route('api.client.account.update-password'), {
+                current_password: this.current,
+                password: this.newPassword,
+                password_confirmation: this.confirmNew,
+            })
+                .then(() => this.current = '')
+                .then(() => {
+                    this.newPassword = '';
+                    this.confirmNew = '';
+
+                    this.$flash.success(this.$t('dashboard.account.password.updated'));
+                })
+                .catch((err: AxiosError) => {
+                    if (!err.response) {
+                        this.$flash.error('There was an error with the network request. Please try again.');
+                        console.error(err);
+                        return;
+                    }
+
+                    const response = err.response;
+                    if (response.data && isObject(response.data.errors)) {
+                        response.data.errors.forEach((error: any) => {
+                            this.$flash.error(error.detail);
+                        });
+                    }
+                })
+                .then(() => {
+                    this.$validator.resume();
+                    (this.$refs.current as HTMLElement).focus();
+                })
+        }
+    },
+
+    template: `
+        <div id="change-password-container" :class>
+            <form method="post" v-on:submit.prevent="submitForm">
+                <div class="content-box">
+                    <h2 class="mb-6 text-grey-darkest font-medium">{{ $t('dashboard.account.password.title') }}</h2>
+                    <div class="mt-6">
+                        <label for="grid-password-current" class="input-label">{{ $t('strings.password') }}</label>
+                        <input id="grid-password-current" name="current_password" type="password" class="input" required
+                               ref="current"
+                               v-model="current"
+                        >
+                    </div>
+                    <div class="mt-6">
+                        <label for="grid-password-new" class="input-label">{{ $t('strings.new_password') }}</label>
+                        <input id="grid-password-new" name="password" type="password" class="input" required
+                               :class="{ error: errors.has('password') }"
+                               v-model="newPassword"
+                               v-validate="'min:8'"
+                        >
+                        <p class="input-help error" v-show="errors.has('password')">{{ errors.first('password') }}</p>
+                        <p class="input-help">{{ $t('dashboard.account.password.requirements') }}</p>
+                    </div>
+                    <div class="mt-6">
+                        <label for="grid-password-new-confirm" class="input-label">{{ $t('strings.confirm_password') }}</label>
+                        <input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required
+                               :class="{ error: errors.has('password_confirmation') }"
+                               v-model="confirmNew"
+                               v-validate="{is: newPassword}"
+                               data-vv-as="password"
+                        >
+                        <p class="input-help error" v-show="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}</p>
+                    </div>
+                    <div class="mt-6 text-right">
+                        <button class="btn btn-blue btn-sm text-right" type="submit">{{ $t('strings.save') }}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    `,
+});