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

View File

@ -8,7 +8,6 @@ import Create from './views/twofaccounts/Create'
import Edit from './views/twofaccounts/Edit' import Edit from './views/twofaccounts/Edit'
import Login from './views/auth/Login' import Login from './views/auth/Login'
import Register from './views/auth/Register' import Register from './views/auth/Register'
import PasswordUpdate from './views/auth/password/Update'
import PasswordRequest from './views/auth/password/Request' import PasswordRequest from './views/auth/password/Request'
import PasswordReset from './views/auth/password/Reset' import PasswordReset from './views/auth/password/Reset'
import Profile from './views/profile/Index' import Profile from './views/profile/Index'
@ -24,7 +23,6 @@ const router = new Router({
{ path: '/create', name: 'create',component: Create }, { path: '/create', name: 'create',component: Create },
{ path: '/edit/:twofaccountId', name: 'edit',component: Edit }, { 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/request', name: 'password.request', component: PasswordRequest },
{ path: '/password/reset/:token', name: 'password.reset', component: PasswordReset }, { 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> <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)"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="field"> <div class="field">
<label class="label">{{ $t('auth.forms.name') }}</label> <label class="label">{{ $t('auth.forms.name') }}</label>
@ -16,7 +16,7 @@
<field-error :form="form" field="email" /> <field-error :form="form" field="email" />
</div> </div>
<div class="field"> <div class="field">
<label class="label">{{ $t('auth.forms.password') }}</label> <label class="label">{{ $t('auth.forms.current_password') }}</label>
<div class="control"> <div class="control">
<input id="password" type="password" class="input" v-model="form.password" /> <input id="password" type="password" class="input" v-model="form.password" />
</div> </div>
@ -26,14 +26,9 @@
<div class="control"> <div class="control">
<v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button> <v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
</div> </div>
<div class="control">
<router-link :to="{ name: 'accounts' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
</div>
</div> </div>
</form> </form>
<p><router-link :to="{ name: 'password.update' }" class="is-link">{{ $t('auth.forms.change_your_password') }}</router-link></p>
</form-wrapper> </form-wrapper>
</template> </template>
<script> <script>

View File

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

View File

@ -1,13 +1,6 @@
<template> <template>
<form-wrapper :title="$t('auth.forms.change_password')" :fail="fail" :success="success"> <form-wrapper :title="$t('auth.forms.change_password')" :fail="fail" :success="success">
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <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"> <div class="field">
<label class="label">{{ $t('auth.forms.new_password') }}</label> <label class="label">{{ $t('auth.forms.new_password') }}</label>
<div class="control"> <div class="control">
@ -16,19 +9,23 @@
<field-error :form="form" field="password" /> <field-error :form="form" field="password" />
</div> </div>
<div class="field"> <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"> <div class="control">
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" /> <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
</div> </div>
<field-error :form="form" field="password_confirmation" /> <field-error :form="form" field="password_confirmation" />
</div> </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="field is-grouped">
<div class="control"> <div class="control">
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button> <v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
</div> </div>
<div class="control">
<router-link :to="{ name: 'profile' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
</div>
</div> </div>
</form> </form>
</form-wrapper> </form-wrapper>

View File

@ -1,15 +1,34 @@
<template> <template>
<div> <form-wrapper :title="$t('settings.forms.edit_settings')" :fail="fail" :success="success">
Settings <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
</div> <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> </template>
<script> <script>
import Form from './../../components/Form'
export default { export default {
data(){ data(){
return { return {
success: '',
fail: '',
form: new Form({
FirstSetting: ''
})
} }
}, },

View File

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

View File

@ -19,5 +19,5 @@
'profile' => 'Profile', 'profile' => 'Profile',
'edit' => 'Edit', 'edit' => 'Edit',
'delete' => 'Delete', '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',
],
];