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

vue router implemented

Browse Source
This commit is contained in:
carodej
2020-04-07 14:48:29 +02:00
parent bde58fbf60
commit ae4353cc4b
21 changed files with 722 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

555
resources/js/components/VueFileManagerComponents/Auth.vue
View File

@@ -1,555 +0,0 @@
<template>
<AuthContentWrapper ref="auth">
<!--Log In by Email-->
<AuthContent name="log-in" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_login.title') }}</h1>
<h2>{{ $t('page_login.subtitle') }}</h2>
<ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
@click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
</AuthContent>
<!--Log in By Password-->
<AuthContent name="sign-in" :visible="false">
<div class="user" v-if="checkedAccount">
<img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
<h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
<h2>{{ $t('page_sign_in.subtitle') }}</h2>
</div>
<ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
v-slot="{ errors }">
<input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
</AuthContent>
<!--Forgotten your password?-->
<AuthContent name="forgotten-password" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_forgotten_password.title') }}</h1>
<h2>{{ $t('page_forgotten_password.subtitle') }}</h2>
<ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
tag="form" class="form inline-form">
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Create new password-->
<AuthContent name="create-new-password" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_create_password.title') }}</h1>
<h2>{{ $t('page_create_password.subtitle') }}</h2>
<ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
tag="form" class="form block-form create-new-password">
<div class="block-wrapper">
<label>{{ $t('page_create_password.label_email') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
: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_new_pass') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
rules="required" v-slot="{ errors }">
<input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
: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 Password"
rules="required" v-slot="{ errors }">
<input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div>
<AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Registration-->
<AuthContent name="sign-up" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_registration.title') }}</h1>
<h2>{{ $t('page_registration.subtitle') }}</h2>
<ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
class="form block-form">
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
v-slot="{ errors }">
<input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
: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_registration.label_name') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
v-slot="{ errors }">
<input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
: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_registration.label_pass') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
rules="required" v-slot="{ errors }">
<input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
: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_registration.label_confirm_pass') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
rules="required" v-slot="{ errors }">
<input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div>
<AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
</div>
</ValidationObserver>
<span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Password reset link sended-->
<AuthContent name="password-reset-link-sended" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
<h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
<span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
</AuthContent>
<!--Password reset successfully-->
<AuthContent name="password-reset-successfully" :visible="false">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
<h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>
<AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" :text="$t('page_forgotten_password.pass_reseted_signin')"/>
</AuthContent>
</AuthContentWrapper>
</template>
<script>
import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import axios from 'axios'
export default {
name: 'Auth',
components: {
AuthContentWrapper,
ValidationProvider,
ValidationObserver,
AuthContent,
AuthButton,
required,
},
computed: {
...mapGetters(['config']),
},
watch: {
loginEmail(val) {
this.recoverEmail = val
}
},
data() {
return {
isLoading: false,
checkedAccount: undefined,
loginPassword: '',
loginEmail: '',
recoverEmail: '',
recoverPassword: {
token: undefined,
email: '',
newPassword: '',
newPasswordConfirm: '',
},
register: {
name: '',
email: '',
password: '',
password_confirmation: '',
},
}
},
methods: {
goToAuthPage(slug) {
this.$refs.auth.$children.forEach(page => {
// Hide current step
page.isVisible = false
if (page.$props.name === slug) {
// Go to next step
page.isVisible = true
}
})
},
async logIn() {
// Validate fields
const isValid = await this.$refs.log_in.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get verify account
axios
.post(this.$store.getters.api + '/user/check', {
email: this.loginEmail,
})
.then(response => {
// End loading
this.isLoading = false
this.checkedAccount = response.data
this.goToAuthPage('sign-in')
})
.catch(error => {
if (error.response.status == 404) {
this.$refs.log_in.setErrors({
'E-Mail': [error.response.data.message]
});
}
// End loading
this.isLoading = false
})
},
async singIn() {
// Validate fields
const isValid = await this.$refs.sign_in.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user token
axios
.post(this.$store.getters.api + '/user/login', {
email: this.loginEmail,
password: this.loginPassword,
})
.then(() => {
// End loading
this.isLoading = false
// Set login state
this.$store.commit('SET_AUTHORIZED', true)
})
.catch(error => {
if (error.response.status == 400) {
this.$refs.sign_in.setErrors({
'User Password': [this.$t('validation_errors.incorrect_password')]
});
}
// End loading
this.isLoading = false
})
},
async forgottenPassword() {
// Validate fields
const isValid = await this.$refs.forgotten_password.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/password/email', {
email: this.recoverEmail
})
.then(() => {
// End loading
this.isLoading = false
this.goToAuthPage('password-reset-link-sended')
}).catch(error => {
if (error.response.status == 422) {
this.$refs.forgotten_password.setErrors({
'E-Mail': error.response.data.message
});
}
// End loading
this.isLoading = false
})
},
async createNewPassword() {
// Validate fields
const isValid = await this.$refs.create_new_password.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/password/reset', {
email: this.recoverPassword.email,
token: this.recoverPassword.token,
password: this.recoverPassword.newPassword,
password_confirmation: this.recoverPassword.newPasswordConfirm,
})
.then(() => {
// End loading
this.isLoading = false
this.goToAuthPage('password-reset-successfully')
})
.catch(error => {
if (error.response.status == 422) {
if (error.response.data.error) {
this.$refs.create_new_password.setErrors({
'E-Mail': error.response.data.error
});
}
if (error.response.data.errors['password']) {
this.$refs.create_new_password.setErrors({
'New Password': error.response.data.errors['password']
});
}
}
// End loading
this.isLoading = false
})
},
async signUp() {
// Validate fields
const isValid = await this.$refs.sign_up.validate();
if (!isValid) return;
// Start loading
this.isLoading = true
// Send request to get user token
axios
.post(this.$store.getters.api + '/user/register', this.register)
.then(() => {
// End loading
this.isLoading = false
// Set login state
this.$store.commit('SET_AUTHORIZED', true)
})
.catch(error => {
if (error.response.status == 422) {
if (error.response.data.errors['email']) {
this.$refs.sign_up.setErrors({
'E-Mail': error.response.data.errors['email']
});
}
if (error.response.data.errors['password']) {
this.$refs.sign_up.setErrors({
'Your New Password': error.response.data.errors['password']
});
}
}
// End loading
this.isLoading = false
})
}
},
mounted() {
// Check if user try to get reset page
let pathname = location.pathname.split('/')[1]
let token = location.search.split('token=')[1]
if (pathname === this.$t('routes.create_new_password')) {
this.recoverPassword.token = token
this.goToAuthPage('create-new-password')
} else {
this.goToAuthPage('log-in')
}
}
}
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_forms';
.auth-form {
text-align: center;
max-width: 600px;
padding: 25px 20px;
display: table-cell;
vertical-align: middle;
.user-avatar {
width: 100px;
height: 100px;
object-fit: cover;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
}
.logo {
width: 120px;
margin-bottom: 20px;
}
h1 {
@include font-size(34);
font-weight: 800;
line-height: 1.2;
margin-bottom: 2px;
color: $text;
}
h2 {
@include font-size(23);
font-weight: 500;
margin-bottom: 50px;
color: $text;
}
.block-form {
margin-left: auto;
margin-right: auto;
.block-wrapper label {
text-align: right;
}
}
}
@media only screen and (min-width: 690px) and (max-width: 960px) {
.auth-form {
padding-left: 20%;
padding-right: 20%;
}
}
@media only screen and (max-width: 690px) {
.auth-form {
width: 100%;
h1 {
@include font-size(30);
}
h2 {
@include font-size(21);
}
}
}
@media (prefers-color-scheme: dark) {
.auth-form {
h1, h2, .additional-link {
color: $dark_mode_text_primary;
}
}
}
</style>

267
resources/js/components/VueFileManagerComponents/FilesView.vue
View File

@@ -1,267 +0,0 @@
<template>
<div @click="fileViewClick" @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view" :class="filesViewWidth">
<ContextMenu/>
<DesktopToolbar v-if="! $isMinimalScale()"/>
<FilesContainer/>
</div>
</template>
<script>
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import FilesContainer from '@/components/VueFileManagerComponents/FilesView/FilesContainer'
import DesktopToolbar from '@/components/VueFileManagerComponents/FilesView/DesktopToolbar'
import ContextMenu from '@/components/VueFileManagerComponents/FilesView/ContextMenu'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FilesView',
components: {
UploadProgress,
FilesContainer,
DesktopToolbar,
ContextMenu,
},
computed: {
...mapGetters(['config', 'filesViewWidth']),
},
methods: {
fileViewClick() {
events.$emit('contextMenu:hide')
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
handleContentResize() {
let filesView = document.getElementById('files-view')
.clientWidth
if (filesView >= 0 && filesView <= 690)
this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
else if (filesView >= 690 && filesView <= 960)
this.$store.commit('SET_FILES_VIEW_SIZE', 'compact-scale')
else if (filesView >= 960)
this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
},
},
mounted() {
// Set default directory
if (this.config.directory) {
// Set start directory
this.$store.commit('SET_START_DIRECTORY', this.config.directory)
// Load folder
this.$store.dispatch('goToFolder', [
{
unique_id: this.config.directory.unique_id,
name: this.config.directory.name,
location: 'base',
},
false,
true
])
} else {
let homeDirectory = {
unique_id: 0,
name: 'Home',
location: 'base',
}
// Set start directory
this.$store.commit('SET_START_DIRECTORY', homeDirectory)
// Load folder
this.$store.dispatch('goToFolder', [homeDirectory, false, true])
}
var filesView = document.getElementById('files-view');
new ResizeSensor(filesView, this.handleContentResize);
}
}
</script>
<style lang="scss">
@import "@assets/app.scss";
#files-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
//overflow: hidden;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
&.minimal-scale {
padding: 0;
.mobile-toolbar {
padding: 10px 0 5px;
}
.popup-wrapper {
left: 15px;
right: 15px;
padding: 25px 15px;
}
.toolbar {
display: block;
position: sticky;
top: 0;
}
.toolbar-go-back {
padding-top: 15px;
}
.toolbar-tools {
text-align: left;
display: flex;
.toolbar-button-wrapper {
width: 100%;
&:last-child {
text-align: right;
}
}
}
.files-container {
padding-left: 15px;
padding-right: 15px;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
overflow-y: auto;
.file-list {
//height: 100%;
&.grid {
grid-template-columns: repeat(auto-fill, 120px);
.file-wrapper {
.file-item {
width: 120px;
}
.icon-item {
margin-bottom: 10px;
height: 90px;
.file-icon {
@include font-size(75);
}
.file-icon-text {
@include font-size(12);
}
.folder-icon {
@include font-size(75);
margin-top: 0;
margin-bottom: 0;
}
.image {
width: 90px;
height: 90px;
}
}
.item-name .name {
@include font-size(13);
line-height: 1.2;
max-height: 30px;
}
}
}
}
}
.file-wrapper {
.item-name .name {
max-width: 220px;
}
}
.search-bar {
input {
min-width: initial;
width: 100%;
}
}
}
&.compact-scale {
padding-left: 15px;
padding-right: 15px;
.file-content {
position: absolute;
top: 72px;
left: 15px;
right: 15px;
bottom: 0;
@include transition;
&.is-offset {
margin-top: 50px;
}
}
.toolbar-tools {
.toolbar-button-wrapper {
margin-left: 35px;
}
}
.search-bar input {
min-width: 190px;
}
.toolbar-go-back span {
max-width: 120px;
}
.grid .file-wrapper {
.icon-item {
margin-bottom: 15px;
}
}
}
&.full-scale {
padding-left: 15px;
padding-right: 15px;
.file-content {
position: absolute;
top: 72px;
left: 15px;
right: 15px;
bottom: 0;
@include transition;
&.is-offset {
margin-top: 50px;
}
}
}
}
</style>

5
resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
View File

@@ -26,7 +26,10 @@
},
methods: {
goHome() {
if (this.isSmallAppSize) events.$emit('show:sidebar')
if (this.isSmallAppSize) {
events.$emit('show:sidebar')
this.$router.push({name: 'Files'})
}
}
}
}

6
resources/js/components/VueFileManagerComponents/Sidebar.vue → resources/js/components/VueFileManagerComponents/Sidebar/Sidebar.vue
View File

@@ -1,11 +1,12 @@
<template>
<transition name="sidebar">
<div id="sidebar" v-if="isVisibleSidebar || ! isSmallAppSize">
<div id="sidebar" v-if="app && (isVisibleSidebar || ! isSmallAppSize)">
<!--User Headline-->
<UserHeadline/>
<div v-if="app" class="content-scroller">
<!--Content-->
<div class="content-scroller">
<!--Locations-->
<div class="menu-list-wrapper">
@@ -63,6 +64,7 @@
<!--Storage Size Info-->
<StorageSize v-if="config.storageLimit"/>
<!--Mobile logout button-->
<div v-if="isSmallAppSize" class="log-out-button">
<ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
</div>

13
resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
View File

@@ -12,7 +12,11 @@
<transition name="user-menu">
<div class="user-menu" v-if="isOpenedMenu">
<ul class="menu-options" id="menu-options-list" @click="closeMenu">
<li class="menu-option" @click="$goToView('user-settings')">{{ $t('context_menu.profile_settings') }}</li>
<li class="menu-option">
<router-link :to="{name: 'Profile'}">
{{ $t('context_menu.profile_settings') }}
</router-link>
</li>
<li class="menu-option" @click="$store.dispatch('logOut')">{{ $t('context_menu.log_out') }}</li>
</ul>
</div>
@@ -43,7 +47,7 @@
// If is mobile, then go to user settings page, else, open menu
if ( this.isSmallAppSize ) {
this.$goToView('user-settings')
this.$router.push({name: 'Profile'})
} else {
this.isOpenedMenu = !this.isOpenedMenu
@@ -147,6 +151,11 @@
width: 100%;
color: $text;
a {
text-decoration: none;
color: $text;
}
&:hover {
background: $light_background;
color: $theme;

271
resources/js/components/VueFileManagerComponents/UserSettings.vue
View File

@@ -1,271 +0,0 @@
<template>
<div id="user-settings">
<PageHeader :title="$t('profile.page_title')" />
<div class="content-page">
<div class="avatar-upload">
<UserImageInput
v-model="avatar"
:avatar="app.user.avatar"
/>
<div class="info">
<span class="description">{{ $t('profile.photo_description') }}</span>
<span class="supported">{{ $t('profile.photo_supported') }}</span>
</div>
</div>
<ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
<ThemeLabel>{{ $t('profile.profile_info') }}</ThemeLabel>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_email') }}</label>
<div class="input-wrapper">
<input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
</div>
</div>
<div class="block-wrapper">
<label>{{ $t('page_registration.label_name') }}</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
v-slot="{ errors }">
<input @keyup="$updateText('/user/profile', 'name', name)" v-model="name"
:placeholder="$t('page_registration.placeholder_name')" type="text"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</ValidationObserver>
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
class="form block-form">
<ThemeLabel>{{ $t('profile.change_pass') }}</ThemeLabel>
<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 }">
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
: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 }">
<input v-model="newPasswordConfirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
:class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="block-wrapper">
<ButtonBase type="submit" button-style="theme" class="confirm-form">
{{ $t('profile.store_pass') }}
</ButtonBase>
</div>
</ValidationObserver>
</div>
</div>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import UserImageInput from '@/components/VueFileManagerComponents/Others/UserImageInput'
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
import PageHeader from '@/components/VueFileManagerComponents/Others/PageHeader'
import ThemeLabel from '@/components/VueFileManagerComponents/Others/ThemeLabel'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {debounce} from 'lodash'
import {events} from '@/bus'
import axios from 'axios'
export default {
name: 'UserSettings',
components: {
ValidationProvider,
ValidationObserver,
UserImageInput,
PageHeader,
ButtonBase,
ThemeLabel,
required,
},
computed: {
...mapGetters(['app']),
},
watch: {
name: debounce(function (val) {
if (val === '') return
this.$store.commit('UPDATE_NAME', val)
}, 300),
},
data() {
return {
newPasswordConfirmation: '',
newPassword: '',
avatar: undefined,
name: '',
}
},
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', {
password: this.newPassword,
password_confirmation: this.newPasswordConfirmation,
})
.then(() => {
// Reset inputs
this.newPassword = ''
this.newPasswordConfirmation = ''
// 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 => {
if (error.response.status == 422) {
if (error.response.data.errors['password']) {
this.$refs.password.setErrors({
'New Password': error.response.data.errors['password']
});
}
}
})
}
},
created() {
this.name = this.app.user.name
this.avatar = this.app.user.avatar
}
}
</script>
<style lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_forms';
.avatar-upload {
display: flex;
align-items: center;
margin-top: 20px;
.info {
margin-left: 25px;
.description {
@include font-size(18);
font-weight: 700;
color: $text;
}
.supported {
display: block;
@include font-size(12);
font-weight: 500;
color: $light_text;
}
}
}
.form {
.confirm-form {
margin-top: 30px;
text-align: right;
}
&.block-form {
margin-top: 50px;
max-width: 700px;
.block-wrapper {
justify-content: flex-start;
label {
text-align: left;
flex: 0 0 220px;
}
.input-wrapper, input {
width: 100%;
}
}
}
}
#user-settings {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
.content-page {
padding-left: 30px;
padding-right: 30px;
overflow-y: auto;
height: 100%;
padding-bottom: 100px;
}
}
@media only screen and (max-width: 960px) {
#user-settings {
.content-page {
padding-left: 15px;
padding-right: 15px;
}
}
.avatar-upload {
margin-top: 30px;
}
.form {
.button-base {
width: 100%;
margin-top: 0;
text-align: center;
}
}
}
@media (prefers-color-scheme: dark) {
.avatar-upload .info {
.description {
color: $dark_mode_text_primary;
}
.supported {
color: $dark_mode_text_secondary;
}
}
}
</style>