mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-20 19:57:44 +02:00
Set up the Account settings view
This commit is contained in:
Bubka
parent
9d72525b38
commit
fec9e3d440
@ -6,15 +6,15 @@
|
||||
'id' : 'lnkTabOptions'
|
||||
},
|
||||
// {
|
||||
// 'name' : wTrans('settings.account'),
|
||||
// 'view' : 'settings.account',
|
||||
// 'id' : 'lnkTabAccount'
|
||||
// },
|
||||
// {
|
||||
// 'name' : wTrans('settings.oauth'),
|
||||
// 'view' : 'settings.oauth.tokens',
|
||||
// 'id' : 'lnkTabOAuth'
|
||||
// },
|
||||
{
|
||||
'name' : trans('settings.account'),
|
||||
'view' : 'settings.account',
|
||||
'id' : 'lnkTabAccount'
|
||||
},
|
||||
{
|
||||
'name' : trans('settings.webauthn'),
|
||||
'view' : 'settings.webauthn.devices',
|
||||
|
||||
4
resources/js_vue3/router/index.js
vendored
4
resources/js_vue3/router/index.js
vendored
@ -20,8 +20,8 @@ import PasswordRequest from '../views/auth/password/Request.vue'
|
||||
import WebauthnLost from '../views/auth/webauthn/Lost.vue'
|
||||
// import WebauthnRecover from './views/auth/webauthn/Recover.vue'
|
||||
import SettingsOptions from '../views/settings/Options.vue'
|
||||
// import SettingsAccount from './views/settings/Account.vue'
|
||||
// import SettingsOAuth from './views/settings/OAuth.vue'
|
||||
import SettingsAccount from '../views/settings/Account.vue'
|
||||
import SettingsWebAuthn from '../views/settings/WebAuthn.vue'
|
||||
import EditCredential from '../views/settings/Credentials/Edit.vue'
|
||||
// import GeneratePAT from './views/settings/PATokens/Create.vue'
|
||||
@ -48,9 +48,9 @@ const router = createRouter({
|
||||
// { path: '/group/:groupId/edit', name: 'editGroup', component: EditGroup, meta: { middlewares: [authGuard] }, props: true },
|
||||
|
||||
{ path: '/settings/options', name: 'settings.options', component: SettingsOptions, meta: { middlewares: [authGuard], showAbout: true } },
|
||||
// { path: '/settings/account', name: 'settings.account', component: SettingsAccount, meta: { middlewares: [authGuard], showAbout: true } },
|
||||
// { path: '/settings/oauth', name: 'settings.oauth.tokens', component: SettingsOAuth, meta: { middlewares: [authGuard], showAbout: true } },
|
||||
// { path: '/settings/oauth/pat/create', name: 'settings.oauth.generatePAT', component: GeneratePAT, meta: { middlewares: [authGuard], showAbout: true } },
|
||||
{ path: '/settings/account', name: 'settings.account', component: SettingsAccount, meta: { middlewares: [authGuard], showAbout: true } },
|
||||
{ path: '/settings/webauthn/:credentialId/edit', name: 'settings.webauthn.editCredential', component: EditCredential, meta: { middlewares: [authGuard], showAbout: true }, props: true },
|
||||
{ path: '/settings/webauthn', name: 'settings.webauthn.devices', component: SettingsWebAuthn, meta: { middlewares: [authGuard], showAbout: true } },
|
||||
|
||||
|
||||
160
resources/js_vue3/views/settings/Account.vue
Normal file
160
resources/js_vue3/views/settings/Account.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<script setup>
|
||||
import Form from '@/components/formElements/Form'
|
||||
import SettingTabs from '@/layouts/SettingTabs.vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useNotifyStore } from '@/stores/notify'
|
||||
import { UseColorMode } from '@vueuse/components'
|
||||
|
||||
const $2fauth = inject('2fauth')
|
||||
const user = useUserStore()
|
||||
const notify = useNotifyStore()
|
||||
const router = useRouter()
|
||||
const returnTo = useStorage($2fauth.prefix + 'returnTo', 'accounts')
|
||||
|
||||
const formProfile = reactive(new Form({
|
||||
name : user.name,
|
||||
email : user.email,
|
||||
password : '',
|
||||
}))
|
||||
const formPassword = reactive(new Form({
|
||||
currentPassword : '',
|
||||
password : '',
|
||||
password_confirmation : '',
|
||||
}))
|
||||
const formDelete = reactive(new Form({
|
||||
password : '',
|
||||
}))
|
||||
|
||||
/**
|
||||
* submit user profile changes
|
||||
*/
|
||||
function submitProfile(e) {
|
||||
|
||||
formProfile.put('/user', {returnError: true})
|
||||
.then(response => {
|
||||
user.$patch({
|
||||
name: response.data.name,
|
||||
email: response.data.email,
|
||||
isAdmin: response.data.is_admin,
|
||||
})
|
||||
notify.info({ text: trans('auth.forms.profile_saved') })
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.status === 400 ) {
|
||||
notify.alert({ text: error.response.data.message })
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
notify.error(error.response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* submit password change
|
||||
*/
|
||||
function submitPassword(e) {
|
||||
|
||||
formPassword.patch('/user/password', {returnError: true})
|
||||
.then(response => {
|
||||
formPassword.password = ''
|
||||
formPassword.formPassword = ''
|
||||
formPassword.password_confirmation = ''
|
||||
notify.info({ text: response.data.message })
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.status === 400 ) {
|
||||
notify.alert({ text: error.response.data.message })
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
notify.error(error.response)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* submit user account deletion
|
||||
*/
|
||||
function submitDelete(e) {
|
||||
|
||||
if(confirm(trans('auth.confirm.delete_account'))) {
|
||||
formDelete.delete('/user', {returnError: true})
|
||||
.then(response => {
|
||||
notify.info({ text: trans('auth.forms.user_account_successfully_deleted') })
|
||||
router.push({ name: 'register' });
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.status === 400 ) {
|
||||
notify.alert({ text: error.response.data.message })
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
notify.error(error.response)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeRouteLeave((to) => {
|
||||
if (! to.name.startsWith('settings.') && to.name === 'login') {
|
||||
notify.clear()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<SettingTabs :activeTab="'settings.account'" />
|
||||
<div class="options-tabs">
|
||||
<FormWrapper>
|
||||
<div v-if="user.isAdmin" class="notification is-warning">
|
||||
{{ $t('settings.you_are_administrator') }}
|
||||
</div>
|
||||
<form @submit.prevent="submitProfile" @keydown="formProfile.onKeydown($event)">
|
||||
<div v-if="$2fauth.config.proxyAuth" class="notification is-warning has-text-centered" v-html="$t('auth.user_account_controlled_by_proxy')" />
|
||||
<h4 class="title is-4 has-text-grey-light">{{ $t('settings.profile') }}</h4>
|
||||
<fieldset :disabled="$2fauth.config.proxyAuth">
|
||||
<FormField v-model="formProfile.name" fieldName="name" :fieldError="formProfile.errors.get('name')" label="auth.forms.name" :maxLength="255" autofocus />
|
||||
<FormField v-model="formProfile.email" fieldName="email" :fieldError="formProfile.errors.get('email')" inputType="email" label="auth.forms.email" :maxLength="255" autofocus />
|
||||
<FormField v-model="formProfile.password" fieldName="password" :fieldError="formProfile.errors.get('password')" inputType="password" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
|
||||
<FormButtons :isBusy="formProfile.isBusy" caption="commons.update" />
|
||||
</fieldset>
|
||||
</form>
|
||||
<form @submit.prevent="submitPassword" @keydown="formPassword.onKeydown($event)">
|
||||
<h4 class="title is-4 pt-6 has-text-grey-light">{{ $t('settings.change_password') }}</h4>
|
||||
<fieldset :disabled="$2fauth.config.proxyAuth">
|
||||
<FormPasswordField v-model="formPassword.password" fieldName="password" :fieldError="formPassword.errors.get('password')" :autocomplete="'new-password'" :showRules="true" label="auth.forms.password" />
|
||||
<FormPasswordField v-model="formPassword.password_confirmation" :showRules="false" fieldName="password_confirmation" :fieldError="formPassword.errors.get('password_confirmation')" inputType="password" :autocomplete="'new-password'" label="auth.forms.confirm_new_password" />
|
||||
<FormField v-model="formPassword.currentPassword" fieldName="currentPassword" :fieldError="formPassword.errors.get('currentPassword')" inputType="password" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
|
||||
<FormButtons :isBusy="formPassword.isBusy" caption="auth.forms.change_password" />
|
||||
</fieldset>
|
||||
</form>
|
||||
<form id="frmDeleteAccount" @submit.prevent="submitDelete" @keydown="formDelete.onKeydown($event)">
|
||||
<h4 class="title is-4 pt-6 has-text-danger">{{ $t('auth.forms.delete_account') }}</h4>
|
||||
<div class="field is-size-7-mobile">
|
||||
{{ $t('auth.forms.delete_your_account_and_reset_all_data')}}
|
||||
</div>
|
||||
<fieldset :disabled="$2fauth.config.proxyAuth">
|
||||
<FormField v-model="formDelete.password" fieldName="password" :fieldError="formDelete.errors.get('password')" inputType="password" :autocomplete="'off'" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
|
||||
<FormButtons :isBusy="formDelete.isBusy" caption="auth.forms.delete_your_account" submitId="btnDeleteAccount" color="is-danger" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</FormWrapper>
|
||||
</div>
|
||||
<VueFooter :showButtons="true">
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<UseColorMode v-slot="{ mode }">
|
||||
<RouterLink
|
||||
id="btnClose"
|
||||
:to="{ name: returnTo }"
|
||||
class="button is-rounded"
|
||||
:class="{'is-dark' : mode === 'dark'}"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
:aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
|
||||
{{ $t('commons.close') }}
|
||||
</RouterLink>
|
||||
</UseColorMode>
|
||||
</p>
|
||||
</VueFooter>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user