Complete gathering Profile pages under a tabbed page

This commit is contained in:
Bubka 2020-02-12 23:24:35 +01:00
parent 4a85c1fd92
commit 7c1efb8d25
10 changed files with 102 additions and 123 deletions

View File

@ -13,7 +13,7 @@ export default {
"login": "Login",
"email": "Email",
"password": "Password",
"confirm_password": "Confirm password",
"confirm_new_password": "Confirm new password",
"dont_have_account_yet": "Don't have your account yet?",
"already_register": "Already registered?",
"password_do_not_match": "Password do not match",
@ -26,6 +26,7 @@ export default {
"send_password_reset_link": "Send password reset link",
"change_your_password": "Change your password",
"password_successfully_changed": "Password successfully changed ",
"edit_account": "Edit account",
"profile_saved": "Profile successfully updated!"
}
},
@ -35,7 +36,8 @@ export default {
"copy_to_clipboard": "Copy to clipboard",
"profile": "Profile",
"edit": "Edit",
"delete": "Delete"
"delete": "Delete",
"save": "Save"
},
"errors": {
"resource_not_found": "Resource not found",
@ -62,6 +64,15 @@ export default {
"token": "This password reset token is invalid.",
"user": "We can't find a user with that e-mail address."
},
"settings": {
"settings": "Settings",
"account": "Account",
"password": "Password",
"confirm": [],
"forms": {
"edit_settings": "Edit settings"
}
},
"twofaccounts": {
"service": "Service",
"account": "Account",

View File

@ -8,7 +8,6 @@ import Create from './views/twofaccounts/Create'
import Edit from './views/twofaccounts/Edit'
import Login from './views/auth/Login'
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/Index'
@ -24,7 +23,6 @@ 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/request', name: 'password.request', component: PasswordRequest },
{ path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },

View File

@ -1,77 +0,0 @@
<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>

View File

@ -1,5 +1,5 @@
<template>
<form-wrapper :title="$t('commons.profile')" :fail="fail" :success="success">
<form-wrapper :title="$t('auth.forms.edit_account')" :fail="fail" :success="success">
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="field">
<label class="label">{{ $t('auth.forms.name') }}</label>
@ -16,7 +16,7 @@
<field-error :form="form" field="email" />
</div>
<div class="field">
<label class="label">{{ $t('auth.forms.password') }}</label>
<label class="label">{{ $t('auth.forms.current_password') }}</label>
<div class="control">
<input id="password" type="password" class="input" v-model="form.password" />
</div>
@ -26,14 +26,9 @@
<div class="control">
<v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
</div>
<div class="control">
<router-link :to="{ name: 'accounts' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
</div>
</div>
</form>
<p><router-link :to="{ name: 'password.update' }" class="is-link">{{ $t('auth.forms.change_your_password') }}</router-link></p>
</form-wrapper>
</template>
<script>

View File

@ -1,18 +1,26 @@
<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>
<div>
<div class="columns is-centered">
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<div class="tabs is-centered is-fullwidth">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
</div>
</div>
<settings v-if="activeTab === $t('settings.settings')"></settings>
<account v-if="activeTab === $t('settings.account')"></account>
<password v-if="activeTab === $t('settings.password')"></password>
<vue-footer :showButtons="true">
<!-- Cancel button -->
<p class="control">
<router-link :to="{ name: 'accounts' }" class="button is-dark is-rounded">{{ $t('commons.cancel') }}</router-link>
</p>
</vue-footer>
</div>
</template>
<script>
@ -26,19 +34,19 @@
return {
tabs: [
{
'name' : 'settings',
'name' : this.$t('settings.settings'),
'isActive': true
},
{
'name' : 'account',
'name' : this.$t('settings.account'),
'isActive': false
},
{
'name' : 'password',
'name' : this.$t('settings.password'),
'isActive': false
},
],
activeTab: 'settings'
activeTab: this.$t('settings.settings')
}
},

View File

@ -1,13 +1,6 @@
<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">
@ -16,19 +9,23 @@
<field-error :form="form" field="password" />
</div>
<div class="field">
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
<label class="label">{{ $t('auth.forms.confirm_new_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">
<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 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>

View File

@ -1,15 +1,34 @@
<template>
<div>
Settings
</div>
<form-wrapper :title="$t('settings.forms.edit_settings')" :fail="fail" :success="success">
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="field">
<label class="label">{{ $t('auth.forms.name') }}</label>
<div class="control">
<input id="FirstSetting" type="text" class="input" v-model="form.FirstSetting" autofocus />
</div>
<field-error :form="form" field="FirstSetting" />
</div>
<div class="field is-grouped">
<div class="control">
<v-button :isLoading="form.isBusy" >{{ $t('commons.save') }}</v-button>
</div>
</div>
</form>
</form-wrapper>
</template>
<script>
import Form from './../../components/Form'
export default {
data(){
return {
success: '',
fail: '',
form: new Form({
FirstSetting: ''
})
}
},

View File

@ -25,7 +25,7 @@
'login' => 'Login',
'email' => 'Email',
'password' => 'Password',
'confirm_password' => 'Confirm password',
'confirm_new_password' => 'Confirm new password',
'dont_have_account_yet' => 'Don\'t have your account yet?',
'already_register' => 'Already registered?',
'password_do_not_match' => 'Password do not match',
@ -38,6 +38,7 @@
'send_password_reset_link' => 'Send password reset link',
'change_your_password' => 'Change your password',
'password_successfully_changed' => 'Password successfully changed ',
'edit_account' => 'Edit account',
'profile_saved' => 'Profile successfully updated!'
],

View File

@ -19,5 +19,5 @@
'profile' => 'Profile',
'edit' => 'Edit',
'delete' => 'Delete',
'save' => 'Save'
];

View File

@ -0,0 +1,27 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Settings Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used during authentication for various
| messages that we need to display to the user. You are free to modify
| these language lines according to your application's requirements.
|
*/
'settings' => 'Settings',
'account' => 'Account',
'password' => 'Password',
'confirm' => [
],
'forms' => [
'edit_settings' => 'Edit settings',
],
];