2FAuth/resources/js/views/admin/users/Manage.vue

305 lines
13 KiB
Vue

<script setup>
import CopyButton from '@/components/CopyButton.vue'
import userService from '@/services/userService'
import { useNotifyStore } from '@/stores/notify'
import { UseColorMode } from '@vueuse/components'
import { useUserStore } from '@/stores/user'
const notify = useNotifyStore()
const router = useRouter()
const route = useRoute()
const user = useUserStore()
const isFetching = ref(false)
const managedUser = ref(null)
const listUserPreferences = ref(null)
const props = defineProps({
userId: [Number, String]
})
onMounted(async () => {
await getUser()
})
/**
* Gets the user from backend
*/
async function getUser() {
isFetching.value = true
userService.getById(props.userId, {returnError: true})
.then(response => {
managedUser.value = response.data
})
.catch(error => {
notify.error(error)
})
.finally(() => {
isFetching.value = false
})
}
/**
* Resends a pwd reset email to the user
*/
async function resendPasswordEmail() {
if (! confirmForYourself()) {
return false
}
if (confirm(trans('admin.confirm.purge_password_reset_request')) === true) {
await userService.resendPasswordEmail(managedUser.value.info.id)
managedUser.value.password_reset = null
}
}
/**
* Resets the user password
*/
async function resetPassword() {
if (! confirmForYourself()) {
return false
}
if (confirm(trans('admin.confirm.request_password_reset')) === true) {
userService.resetPassword(managedUser.value.info.id, { returnError: true })
.then(response => {
managedUser.value = response.data
notify.success({ text: trans('admin.password_successfully_reset') })
})
.catch(error => {
if(error.response.status === 400) {
notify.alert({ text: error.response.data.reason })
}
else notify.error(error)
})
}
}
/**
* Set admin role
*
* @param {string} preference
* @param {boolean} isAdmin
*/
function saveAdminRole(isAdmin) {
if(isAdmin === false && managedUser.value.info.id === user.id) {
if (! confirm(trans('admin.confirm.demote_own_account'))) {
nextTick().then(() => {
managedUser.value.info.is_admin = true
})
return
}
}
userService.update(managedUser.value.info.id, { 'is_admin': isAdmin }).then(response => {
managedUser.value.info.is_admin = response.data.info.is_admin
notify.success({ text: trans('admin.user_role_updated') })
})
.catch(error => {
notify.error(error)
})
}
/**
* submit user account deletion
*/
function deleteUser() {
if (! confirmForYourself()) {
return false
}
if(confirm(trans('admin.confirm.delete_account'))) {
userService.delete(managedUser.value.info.id, { returnError: true }).then(response => {
notify.success({ text: trans('auth.forms.user_account_successfully_deleted') })
router.push({ name: 'admin.users' });
})
.catch(error => {
if( error.response.status === 403 ) {
notify.alert({ text: error.response.data.message })
}
else {
notify.error(error.response)
}
})
}
}
/**
* submit user account deletion
*/
function revokePATs() {
if (! confirmForYourself()) {
return false
}
userService.revokePATs(managedUser.value.info.id).then(response => {
managedUser.value.valid_personal_access_tokens = 0
notify.success({ text: trans('admin.pats_succesfully_revoked') })
})
}
/**
* submit user account deletion
*/
function revokeWebauthnCredentials() {
if (! confirmForYourself()) {
return false
}
userService.revokeWebauthnCredentials(managedUser.value.info.id).then(response => {
managedUser.value.valid_personal_access_tokens = 0
notify.success({ text: trans('admin.security_devices_succesfully_revoked') })
})
}
/**
* Confirmation for modification on own account
*/
function confirmForYourself() {
if(managedUser.value.info.id === user.id) {
if (! confirm(trans('admin.confirm.edit_own_account'))) {
return false
}
}
return true
}
</script>
<template>
<ResponsiveWidthWrapper>
<h1 class="title has-text-grey-dark mb-6">
{{ $t('admin.user_management') }}
</h1>
<!-- <button class="button is-text is-pulled-right" @click="getUser()">.</button> -->
<!-- loader -->
<div v-if="isFetching || ! managedUser" class="has-text-centered">
<span class="is-size-4">
<FontAwesomeIcon :icon="['fas', 'spinner']" spin />
</span>
</div>
<div v-else>
<div class="mb-6" :class="managedUser.info.is_admin ? 'is-left-bordered-warning' : 'is-left-bordered-link'">
<UseColorMode v-slot="{ mode }">
<p class="title is-4" :class="{ 'has-text-grey-lighter' : mode == 'dark' }">
<span class="has-text-weight-light has-text-grey-dark is-pulled-right">#{{ managedUser.info.id }}</span>{{ managedUser.info.name }}</p>
</UseColorMode>
<p class="subtitle is-6 block">{{ managedUser.info.email }}</p>
</div>
<div v-if="managedUser.info.oauth_provider" class="notification is-dark is-size-7-mobile has-text-centered">
{{ $t('admin.account_bound_to_x_via_oauth', { provider: managedUser.info.oauth_provider }) }}
</div>
<div class="block">
<!-- otp as dot -->
<FormCheckbox v-model="managedUser.info.is_admin" @update:model-value="val => saveAdminRole(val === true)" fieldName="is_admin" label="admin.forms.is_admin.label" help="admin.forms.is_admin.help" />
</div>
<h2 class="title is-4 has-text-grey-light">{{ $t('admin.access') }}</h2>
<div class="block">
<div class="list-item is-size-6 is-size-6-mobile has-text-grey">
<div class="mb-3 is-flex is-justify-content-space-between">
<div>
<span class="has-text-weight-bold">{{ $t('auth.forms.password') }}</span>
</div>
<div>
<div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }">
<!-- resend email button -->
<button v-if="managedUser.password_reset" class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
{{ $t('admin.resend_email') }}
</button>
<!-- reset password button -->
<button class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
{{ $t('admin.reset_password') }}
</button>
</UseColorMode>
</div>
</div>
</div>
<div class="is-size-7 is-size-7-mobile has-text-grey-dark">
<span v-if="managedUser.password_reset === 0" v-html="$t('admin.password_request_expired')" class="is-block block"></span>
<span v-else-if="managedUser.password_reset" v-html="$t('admin.password_requested_on_t', { datetime: managedUser.password_reset })" class="is-block block"></span>
<span v-if="managedUser.password_reset" v-html="$t('admin.resend_email_help')" class="is-block block"></span>
<span v-html="$t('admin.reset_password_help')" class="is-block block"></span>
</div>
</div>
<div class="list-item is-size-6 is-size-6-mobile has-text-grey is-flex is-justify-content-space-between">
<div>
<span class="has-text-weight-bold">{{ $t('settings.personal_access_tokens') }}</span>
<span class="is-block is-family-primary is-size-7 is-size-7-mobile has-text-grey-dark">
{{ $t('admin.user_has_x_active_pat', { count: managedUser.valid_personal_access_tokens }) }}
</span>
</div>
<div v-if="managedUser.valid_personal_access_tokens > 0">
<div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }">
<!-- manage link -->
<button class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
{{ $t('settings.revoke') }}
</button>
</UseColorMode>
</div>
</div>
</div>
<div class="list-item is-size-6 is-size-6-mobile has-text-grey is-flex is-justify-content-space-between">
<div>
<span class="has-text-weight-bold">{{ $t('auth.webauthn.security_devices') }}</span>
<span class="is-block is-size-7 is-size-7-mobile has-text-grey-dark">
{{ $t('admin.user_has_x_security_devices', { count: managedUser.webauthn_credentials }) }}
</span>
</div>
<div v-if="managedUser.webauthn_credentials > 0">
<div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }">
<!-- manage link -->
<button class="button tag is-pulled-right has-background-link" :class="mode == 'dark' ? 'is-dark' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
{{ $t('settings.revoke') }}
</button>
</UseColorMode>
</div>
</div>
</div>
</div>
<h2 class="title is-4 has-text-grey-light">{{ $t('settings.preferences') }}</h2>
<div class="about-debug box is-family-monospace is-size-7">
<!-- <button id="btnCopyUserPreferences" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listUserPreferences.innerText)">
<FontAwesomeIcon :icon="['fas', 'copy']" />
</button> -->
<CopyButton id="btnCopyEnvVars" :token="listUserPreferences?.innerText" />
<ul ref="listUserPreferences" id="listUserPreferences">
<li v-for="(value, preference) in managedUser.info.preferences" :value="value" :key="preference">
<b>{{preference}}</b>: <span class="has-text-grey">{{value}}</span>
</li>
</ul>
</div>
<h2 class="title is-4 has-text-grey-light">{{ $t('admin.logs') }}</h2>
<div class="block">
<ul class="is-size-6 is-size-7-mobile">
<li>{{ $t('admin.last_seen_on_date', { date: managedUser.info.last_seen_at }) }}</li>
<li>{{ $t('admin.registered_on_date', { date: managedUser.info.created_at }) }}</li>
<li>{{ $t('admin.updated_on_date', { date: managedUser.info.updated_at }) }}</li>
</ul>
</div>
<!-- danger zone -->
<h2 class="title is-4 has-text-danger">{{ $t('admin.danger_zone') }}</h2>
<div class="is-left-bordered-danger">
<div class="block is-size-6 is-size-7-mobile">
{{ $t('admin.delete_this_user_legend') }}
<span class="is-block has-text-grey has-text-weight-bold">
{{ $t('admin.this_is_not_soft_delete') }}
</span>
</div>
<button class="button is-danger" @click="deleteUser" title="delete">
{{ $t('admin.delete_this_user') }}
</button>
</div>
</div>
<!-- footer -->
<VueFooter :showButtons="true">
<ButtonBackCloseCancel :returnTo="{ name: 'admin.users' }" action="back" />
</VueFooter>
</ResponsiveWidthWrapper>
</template>