vuefilemanager/resources/js/views/User/Password.vue

<template>
    <div v-if="user">

		<!--2fa authentication-->
        <div v-if="! user.data.attributes.socialite_account" class="card shadow-card">
            <FormLabel icon="smartphone">
                {{ $t('2fa.settings.title') }}
            </FormLabel>
            <AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="! user.data.attributes.two_factor_authentication">
                <SwitchInput v-model="user.data.attributes.two_factor_authentication" class="switch" :state="user.data.attributes.two_factor_authentication" />
            </AppInputSwitch>
            <AppInputButton v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')" :is-last="true">
                <ButtonBase class="w-full" button-style="secondary" @click.native="showRecoveryCodes">
                    {{ $t('popup_2fa.codes_button') }}
                </ButtonBase>
            </AppInputButton>
        </div>

		<!--Get personal api keys-->
        <div class="card shadow-card">
            <FormLabel icon="key">
                {{ $t('personal_token.section_title') }}
            </FormLabel>
            <InfoBox v-if="tokens.length === 0">
                <p>{{ $t("personal_token.section_description") }}</p>
            </InfoBox>

			<div class="mb-5">
				<div v-if="tokens.length > 0" class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="token in tokens" :key="token.id">
					<div class="leading-none">
						<b class="text-sm font-bold leading-none">
							{{ token.name }}
						</b>
						<time class="text-xs text-gray-500 pt-2 leading-none block">
							{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}
						</time>
					</div>
					<div class="text-right">
						<div @click="confirmDeleteToken(token)" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
							<Trash2Icon size="15" class="opacity-75" />
						</div>
					</div>
				</div>
			</div>

            <ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="sm:w-auto w-full">
                {{ $t('personal_token.create_token') }}
            </ButtonBase>
        </div>

		<!--Change password-->
		<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="card shadow-card">
			<FormLabel>
				{{ $t('user_password.title') }}
			</FormLabel>

			<ValidationProvider tag="div" mode="passive" name="Current Password" rules="required" v-slot="{ errors }">
				<AppInputText :title="$t('Current Password')" :error="errors[0]">
					<input v-model="passwordForm.current" :placeholder="$t('Current password')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}" />
				</AppInputText>
			</ValidationProvider>

			<ValidationProvider tag="div" mode="passive" name="New Password" rules="required" v-slot="{ errors }">
				<AppInputText :title="$t('page_create_password.label_new_pass')" :error="errors[0]">
					<input v-model="passwordForm.password" :placeholder="$t('page_create_password.label_new_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}" />
				</AppInputText>
			</ValidationProvider>

			<ValidationProvider tag="div" mode="passive" name="Confirm Your Password" rules="required" v-slot="{ errors }">
				<AppInputText :title="$t('page_create_password.label_confirm_pass')" :error="errors[0]">
					<input v-model="passwordForm.password_confirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red': errors[0]}" />
				</AppInputText>
			</ValidationProvider>

			<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full">
				{{ $t('profile.store_pass') }}
			</ButtonBase>
		</ValidationObserver>
    </div>
</template>

<script>
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
	import SwitchInput from "../../components/Others/Forms/SwitchInput";
	import FormLabel from "../../components/Others/Forms/FormLabel";
	import ButtonBase from "../../components/FilesView/ButtonBase";
	import InfoBox from "../../components/Others/Forms/InfoBox";
	import AppInputSwitch from "../../components/Admin/AppInputSwitch"
	import AppInputButton from "../../components/Admin/AppInputButton"
	import AppInputText from "../../components/Admin/AppInputText"
	import {required} from 'vee-validate/dist/rules'
	import {XIcon, Trash2Icon} from 'vue-feather-icons'
	import {events} from '/resources/js/bus'
	import {mapGetters} from 'vuex'
	import axios from 'axios'

	export default {
		name: 'Password',
		components: {
			ValidationProvider,
			ValidationObserver,
			AppInputButton,
			AppInputSwitch,
			AppInputText,
			SwitchInput,
			ButtonBase,
			FormLabel,
			Trash2Icon,
			required,
			InfoBox,
			XIcon,
		},
		computed: {
			...mapGetters([
				'user',
			])
		},
		watch: {
			'user.data.attributes.two_factor_authentication': function (val) {
				val ? this.enable2faPopup() : this.disable2faPopup()
			}
		},
		data() {
			return {
				passwordForm: {
					current: undefined,
					password: undefined,
					password_confirmation: undefined,
				},
				isLoading: false,
				tokens: [],
			}
		},
		methods: {
			async resetPassword() {

				// Validate fields
				const isValid = await this.$refs.password.validate();

				if (!isValid) return;

				// Send request to get user reset link
				axios
					.post(this.$store.getters.api + '/user/password', this.passwordForm)
					.then(() => {

						// Reset inputs
						this.passwordForm = {
							current: undefined,
							password: undefined,
							password_confirmation: undefined,
						}

						// Reset errors
						this.$refs.password.reset()

						// Show success message
						events.$emit('success:open', {
							title: this.$t('popup_pass_changed.title'),
							message: this.$t('popup_pass_changed.message'),
						})
					})
					.catch(error => {

						if (error.response.status === 422) {

							if (error.response.data.errors['password']) {
								this.$refs.password.setErrors({
									'New Password': error.response.data.errors['password']
								});
							}

							if (error.response.data.errors['current']) {
								this.$refs.password.setErrors({
									'Current Password': error.response.data.errors['current']
								});
							}
						}
					})
			},
			getPersonalAccessTokens() {
				axios.get('/api/user/tokens')
					.then(response => {
						this.tokens = response.data
					})
					.catch(() => this.$isSomethingWrong())
			},
			showRecoveryCodes() {
				events.$emit('popup:open', {
					name: 'confirm-password',
					options: {
						action: 'get-recovery-codes',
					}
				})
			},
			enable2faPopup() {
				events.$emit('popup:open', {
					name: 'confirm-password',
					options: {
						action: 'two-factor-qr-setup',
					}
				})
			},
			disable2faPopup() {
				events.$emit('popup:open', {
					name: 'confirm-password',
					options: {
						action: 'disable-2fa',
					}
				})
			},
			confirmDeleteToken(token) {
				events.$emit('confirm:open', {
					title: this.$t('popup_delete_personal_token.title'),
					message: this.$t('popup_delete_personal_token.description'),
					action: {
						id: token.id,
						operation: 'delete-personal-access-token'
					}
				})
			},
			openCreateTokenPopup() {
				events.$emit('popup:open', {name: 'create-personal-token'})
			},
			formatDate(date) {
				return new Intl.DateTimeFormat('en').format(new Date(date))
			},
		},
		created() {
			this.getPersonalAccessTokens()

			// Actions confirmed
			events.$on('action:confirmed', data => {

				// Delete personal token
				if (data.operation === 'delete-personal-access-token') {
					axios.delete(`/api/user/tokens/${data.id}`)
						.then(() => {

							this.tokens = this.tokens.filter(tokenItem => tokenItem.id !== data.id)

							events.$emit('toaster', {
								type: 'success',
								message: this.$t('personal_token.token_deleted'),
							})
						})
						.catch(() => this.$isSomethingWrong())
				}
			})

			// Password confirmed
			events.$on('password:confirmed', args => {

				// Get recovery tokens
				if (args.options.action === 'get-recovery-codes') {
					events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
				}

				// Get 2fa qr code
				if (args.options.action === 'two-factor-qr-setup') {
					events.$emit('popup:open', {name: 'two-factor-qr-setup'})
				}

				// Get 2fa qr code
				if (args.options.action === 'disable-2fa') {
					axios
						.delete('/user/two-factor-authentication')
						.then(() => {
							this.$store.commit('CHANGE_TWO_FACTOR_AUTHENTICATION_STATE', false)
						})
						.catch(() => {
							this.$isSomethingWrong()
						})
						.finally(() => {
							this.$closePopup()

							events.$emit('toaster', {
								type: 'success',
								message: this.$t('popup_2fa.toaster_disabled'),
							})
						})
				}
			})

			events.$on('reload-personal-access-tokens', () => this.getPersonalAccessTokens())
		},
		destroyed() {
			events.$off('action:confirmed')
		},
	}
</script>