Start gathering Profile pages under a tabbed page

resources/js/routes.js

@@ -11,7 +11,7 @@ import Register         from './views/auth/Register'
 import PasswordUpdate   from './views/auth/password/Update'
 import PasswordRequest  from './views/auth/password/Request'
 import PasswordReset    from './views/auth/password/Reset'
-import Profile          from './views/profile/Edit'
+import Profile          from './views/profile/Index'
 import Errors           from './views/Error'
 
 const router = new Router({
@@ -24,7 +24,7 @@ const router = new Router({
         { path: '/create', name: 'create',component: Create },
         { path: '/edit/:twofaccountId', name: 'edit',component: Edit },
 
-        { path: '/password/update', name: 'password.update',component: PasswordUpdate },
+        // { path: '/password/update', name: 'password.update',component: PasswordUpdate },
         { path: '/password/request', name: 'password.request', component: PasswordRequest },
         { path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },
 

resources/js/views/profile/Index.vue

@@ -0,0 +1,63 @@
+<template>
+	<div>
+		<div class="tabs is-toggle is-toggle-rounded is-small">
+		    <ul>
+                <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
+                    <a @click="selectTab(tab)">{{ tab.name }}</a>
+                </li>
+		    </ul>
+		</div>
+		<div>
+			<settings v-if="activeTab === 'settings'"></settings>
+			<account v-if="activeTab === 'account'"></account>
+			<password v-if="activeTab === 'password'"></password>
+		</div>
+	</div>
+</template>
+
+<script>
+
+    import Settings from './Settings'
+    import Account 	from './Account'
+    import Password from './Password'
+
+    export default {
+        data(){
+            return {
+                tabs: [
+                	{
+                		'name' : 'settings',
+                		'isActive': true
+                	},
+                	{
+                		'name' : 'account',
+                		'isActive': false
+                	},
+                	{
+                		'name' : 'password',
+                		'isActive': false
+                	},
+            	],
+            	activeTab: 'settings'
+            }
+        },
+
+        components: {
+        	Settings,
+            Account,
+            Password
+        },
+
+        methods: {
+            selectTab(selectedTab) {
+                this.tabs.forEach(tab => {
+                    tab.isActive = (tab.name == selectedTab.name);
+                    if( tab.name == selectedTab.name ) {
+                    	this.activeTab = selectedTab.name
+                    }
+                });
+            }
+        }
+    };
+
+</script>

resources/js/views/profile/Password.vue

@@ -0,0 +1,77 @@
+<template>
+    <form-wrapper :title="$t('auth.forms.change_password')" :fail="fail" :success="success">
+        <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
+            <div class="field">
+                <label class="label">{{ $t('auth.forms.current_password') }}</label>
+                <div class="control">
+                    <input id="currentPassword" type="password" class="input" v-model="form.currentPassword" />
+                </div>
+                <field-error :form="form" field="currentPassword" />
+            </div>
+            <div class="field">
+                <label class="label">{{ $t('auth.forms.new_password') }}</label>
+                <div class="control">
+                    <input id="password" type="password" class="input" v-model="form.password" />
+                </div>
+                <field-error :form="form" field="password" />
+            </div>
+            <div class="field">
+                <label class="label">{{ $t('auth.forms.confirm_password') }}</label>
+                <div class="control">
+                    <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
+                </div>
+                <field-error :form="form" field="password_confirmation" />
+            </div>
+            <div class="field is-grouped">
+                <div class="control">
+                    <v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
+                </div>
+                <div class="control">
+                    <router-link :to="{ name: 'profile' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+                </div>
+            </div>
+        </form>
+    </form-wrapper>
+</template>
+
+<script>
+
+    import Form from './../../components/Form'
+
+    export default {
+        data(){
+            return {
+                success: '',
+                fail: '',
+                form: new Form({
+                    currentPassword : '',
+                    password : '',
+                    password_confirmation : '',
+                })
+            }
+        },
+
+        methods : {
+            handleSubmit(e) {
+                e.preventDefault()
+
+                this.fail = ''
+                this.success = ''
+
+                this.form.patch('/api/password', {returnError: true})
+                .then(response => {
+
+                    this.success = response.data.message
+                })
+                .catch(error => {
+                    if( error.response.status === 400 ) {
+                        this.fail = error.response.data.message
+                    }
+                    else if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    }
+                });
+            }
+        },
+    }
+</script>

resources/js/views/profile/Settings.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        Settings
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data(){
+            return {
+
+            }
+        },
+
+        methods : {
+
+        },
+    }
+</script>