nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-22 09:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

CreatePersonaTokenPopup implementation

Browse Source
This commit is contained in:
Peter Papp
2021-07-18 11:38:44 +02:00
parent aeb5c8419a
commit ddf88304ff
11 changed files with 601 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
resources/js/views/User/Password.vue
View File

@@ -1,27 +1,37 @@
<template>
<PageTab>
<PageTabGroup class="form block-form">
<FormLabel>{{ $t('Personal Access Token') }}</FormLabel>
<InfoBox v-if="tokens.length === 0">
<p>{{ $t("You don't have any created personal access tokens yet.") }}</p>
</InfoBox>
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
{{ $t('Create Token') }}
</ButtonBase>
</PageTabGroup>
<PageTabGroup>
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
<FormLabel>{{ $t('user_password.title') }}</FormLabel>
<div class="block-wrapper">
<label>{{ $t('page_create_password.label_new_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
rules="required" v-slot="{ errors }">
rules="required" v-slot="{ errors }">
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
rules="required" v-slot="{ errors }">
rules="required" v-slot="{ errors }">
<input v-model="newPasswordConfirmation"
:placeholder="$t('page_create_password.label_confirm_pass')" type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}"/>
:placeholder="$t('page_create_password.label_confirm_pass')" type="password"
class="focus-border-theme"
:class="{'is-error': errors[0]}" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
@@ -50,7 +60,6 @@
</div>
</div>
</div>
<div v-if="user && user.data.attributes.two_factor_authentication" class="block-wrapper">
<div class="input-wrapper">
<div class="inline-wrapper button-block">
@@ -78,118 +87,133 @@
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
import UserImageInput from '@/components/Others/UserImageInput'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import FormLabel from '@/components/Others/Forms/FormLabel'
import MobileHeader from '@/components/Mobile/MobileHeader'
import ButtonBase from '@/components/FilesView/ButtonBase'
import PageTab from '@/components/Others/Layout/PageTab'
import InfoBox from '@/components/Others/Forms/InfoBox'
import PageHeader from '@/components/Others/PageHeader'
import ThemeLabel from '@/components/Others/ThemeLabel'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import axios from 'axios'
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
import UserImageInput from '@/components/Others/UserImageInput'
import SwitchInput from '@/components/Others/Forms/SwitchInput'
import FormLabel from '@/components/Others/Forms/FormLabel'
import MobileHeader from '@/components/Mobile/MobileHeader'
import ButtonBase from '@/components/FilesView/ButtonBase'
import PageTab from '@/components/Others/Layout/PageTab'
import PageHeader from '@/components/Others/PageHeader'
import ThemeLabel from '@/components/Others/ThemeLabel'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import axios from 'axios'
export default {
name: 'Password',
components: {
PageTabGroup,
FormLabel,
PageTab,
InfoBox,
ValidationProvider,
ValidationObserver,
UserImageInput,
SwitchInput,
MobileHeader,
PageHeader,
ButtonBase,
ThemeLabel,
required,
},
computed: {
...mapGetters(['user'])
},
data() {
return {
newPasswordConfirmation: '',
newPassword: '',
isLoading: false,
tokens: [],
}
},
methods: {
async resetPassword() {
export default {
name: 'Password',
components: {
PageTabGroup,
FormLabel,
PageTab,
ValidationProvider,
ValidationObserver,
UserImageInput,
SwitchInput,
MobileHeader,
PageHeader,
ButtonBase,
ThemeLabel,
required,
},
computed: {
...mapGetters(['user'])
},
data() {
return {
newPasswordConfirmation: '',
newPassword: '',
isLoading: false,
}
},
methods: {
async resetPassword() {
// Validate fields
const isValid = await this.$refs.password.validate();
// Validate fields
const isValid = await this.$refs.password.validate();
if (!isValid) return;
if (!isValid) return;
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/user/password', {
password: this.newPassword,
password_confirmation: this.newPasswordConfirmation,
})
.then(() => {
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/user/password', {
password: this.newPassword,
password_confirmation: this.newPasswordConfirmation,
})
.then(() => {
// Reset inputs
this.newPassword = ''
this.newPasswordConfirmation = ''
// Reset inputs
this.newPassword = ''
this.newPasswordConfirmation = ''
// Reset errors
this.$refs.password.reset()
// Reset errors
this.$refs.password.reset()
// Show error message
events.$emit('success:open', {
title: this.$t('popup_pass_changed.title'),
message: this.$t('popup_pass_changed.message'),
})
})
.catch(error => {
// Show error 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.status == 422) {
if (error.response.data.errors['password']) {
if (error.response.data.errors['password']) {
this.$refs.password.setErrors({
'New Password': error.response.data.errors['password']
});
}
}
})
},
open2faPopup() {
events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
},
showRecoveryCodes() {
events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
}
}
}
this.$refs.password.setErrors({
'New Password': error.response.data.errors['password']
});
}
}
})
},
getPersonalAccessTokens() {
axios.get('/api/user/tokens')
.then(response => {
this.tokens = response.data
})
.catch(() => this.$isSomethingWrong())
},
open2faPopup() {
events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
},
showRecoveryCodes() {
events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
},
openCreateTokenPopup() {
events.$emit('popup:open', {name: 'create-personal-token'})
}
},
created() {
this.getPersonalAccessTokens()
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vuefilemanager/_variables';
@import '@assets/vuefilemanager/_mixins';
@import '@assets/vuefilemanager/_forms';
@import '@assets/vuefilemanager/_mixins';
@import '@assets/vuefilemanager/_forms';
.block-form {
max-width: 100%;
}
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
@media only screen and (max-width: 960px) {
.form {
.button-base {
width: 100%;
margin-top: 0;
text-align: center;
}
}
}
.form {
.button-base {
width: 100%;
margin-top: 0;
text-align: center;
}
}
}
@media only screen and (max-width: 690px) {
@@ -202,8 +226,8 @@
}
}
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
}
}
</style>