mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 03:10:51 +00:00
user profile inputs refactoring
This commit is contained in:
Čarodej
@@ -1,83 +1,51 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel icon="smartphone">
|
||||
{{ $t('2fa.settings.title') }}
|
||||
</FormLabel>
|
||||
<div class="block-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">
|
||||
{{ $t('popup_2fa.switch_title') }}
|
||||
</label>
|
||||
<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
|
||||
</div>
|
||||
<SwitchInput @click.native.prevent.stop="open2faPopup"
|
||||
class="switch"
|
||||
:state="user.data.attributes.two_factor_authentication"
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">
|
||||
{{ $t('popup_2fa.codes_title') }}
|
||||
</label>
|
||||
<small class="input-help">
|
||||
{{ $t('popup_2fa.codes_info') }}
|
||||
</small>
|
||||
</div>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
button-style="secondary"
|
||||
@click.native="showRecoveryCodes"
|
||||
>
|
||||
{{ $t('popup_2fa.codes_button') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel icon="key">
|
||||
{{ $t('personal_token.section_title') }}
|
||||
</FormLabel>
|
||||
<InfoBox v-if="tokens.length === 0">
|
||||
<p>{{ $t("personal_token.section_description") }}</p>
|
||||
</InfoBox>
|
||||
|
||||
<InfoBox v-if="tokens.length > 0">
|
||||
<ul class="tokens-wrapper">
|
||||
<li class="token-item" v-for="token in tokens" :key="token.id">
|
||||
<div class="tokens-details">
|
||||
<b class="name">{{ token.name}}</b>
|
||||
<time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
|
||||
</div>
|
||||
<div @click="confirmDeleteToken(token)" class="tokens-destroyer">
|
||||
<x-icon size="16" class="close-icon hover-text-theme" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</InfoBox>
|
||||
|
||||
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
|
||||
{{ $t('personal_token.create_token') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<div 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')">
|
||||
<SwitchInput @click.native.prevent.stop="open2faPopup"
|
||||
class="switch"
|
||||
:state="user.data.attributes.two_factor_authentication"
|
||||
/>
|
||||
</AppInputSwitch>
|
||||
<AppInputSwitch v-if="user && user.data.attributes.two_factor_authentication" :title="$t('popup_2fa.codes_title')" :description="$t('popup_2fa.codes_info')">
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
button-style="secondary"
|
||||
@click.native="showRecoveryCodes"
|
||||
>
|
||||
{{ $t('popup_2fa.codes_button') }}
|
||||
</ButtonBase>
|
||||
</AppInputSwitch>
|
||||
</div>
|
||||
<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>
|
||||
<InfoBox v-if="tokens.length > 0">
|
||||
<ul class="tokens-wrapper">
|
||||
<li class="token-item" v-for="token in tokens" :key="token.id">
|
||||
<div class="tokens-details">
|
||||
<b class="name">{{ token.name}}</b>
|
||||
<time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
|
||||
</div>
|
||||
<div @click="confirmDeleteToken(token)" class="tokens-destroyer">
|
||||
<x-icon size="16" class="close-icon hover-text-theme" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</InfoBox>
|
||||
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
|
||||
{{ $t('personal_token.create_token') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<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>
|
||||
@@ -107,11 +75,12 @@
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputSwitch from "../../components/Admin/AppInputSwitch";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
||||
import UserImageInput from '/resources/js/components/Others/UserImageInput'
|
||||
@@ -132,6 +101,7 @@
|
||||
export default {
|
||||
name: 'Password',
|
||||
components: {
|
||||
AppInputSwitch,
|
||||
PageTabGroup,
|
||||
FormLabel,
|
||||
PageTab,
|
||||
|
||||
@@ -1,214 +1,178 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="userInfo.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="changeUserName"
|
||||
v-model="userInfo.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
|
||||
<AppInputText :title="$t('page_registration.label_email')">
|
||||
<input :value="userInfo.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
disabled
|
||||
class="focus-border-theme input-dark"
|
||||
>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('page_registration.label_name')">
|
||||
<input @keyup="changeUserName"
|
||||
v-model="userInfo.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>{{ $t('user_settings.timezone') }}</FormLabel>
|
||||
<AppInputText :title="$t('GMT')">
|
||||
<SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
|
||||
v-model="userInfo.timezone"
|
||||
:default="userInfo.timezone"
|
||||
:options="timezones"
|
||||
:placeholder="$t('user_settings.timezone_plac')" />
|
||||
</AppInputText>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('user_settings.title_billing') }}
|
||||
</FormLabel>
|
||||
<AppInputText :title="$t('user_settings.name')">
|
||||
<input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
|
||||
v-model="billingInfo.name"
|
||||
:placeholder="$t('user_settings.name_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.address')">
|
||||
<input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
|
||||
v-model="billingInfo.address"
|
||||
:placeholder="$t('user_settings.address_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<div class="flex space-x-4">
|
||||
<AppInputText :title="$t('user_settings.city')" class="w-full">
|
||||
<input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
|
||||
v-model="billingInfo.city"
|
||||
:placeholder="$t('user_settings.city_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.postal_code')" class="w-full">
|
||||
<input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
|
||||
v-model="billingInfo.postal_code"
|
||||
:placeholder="$t('user_settings.postal_code_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{$t('user_settings.timezone')}}</FormLabel>
|
||||
<div class="block-wrapper">
|
||||
<label>GMT:</label>
|
||||
<div class="input-wrapper">
|
||||
<SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
|
||||
v-model="userInfo.timezone"
|
||||
:default="userInfo.timezone"
|
||||
:options="timezones"
|
||||
:placeholder="$t('user_settings.timezone_plac')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<div class="form block-form">
|
||||
<FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.name') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
|
||||
v-model="billingInfo.name"
|
||||
:placeholder="$t('user_settings.name_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.address') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
|
||||
v-model="billingInfo.address"
|
||||
:placeholder="$t('user_settings.address_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.city') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
|
||||
v-model="billingInfo.city"
|
||||
:placeholder="$t('user_settings.city_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.postal_code') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
|
||||
v-model="billingInfo.postal_code"
|
||||
:placeholder="$t('user_settings.postal_code_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.country') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
|
||||
v-model="billingInfo.country"
|
||||
:default="billingInfo.country"
|
||||
:options="countries"
|
||||
:placeholder="$t('user_settings.country_plac')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.state') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
|
||||
v-model="billingInfo.state"
|
||||
:placeholder="$t('user_settings.state_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
<small class="input-help">
|
||||
State, county, province, or region.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('user_settings.phone_number') }}:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
|
||||
v-model="billingInfo.phone_number"
|
||||
:placeholder="$t('user_settings.phone_number_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AppInputText :title="$t('user_settings.country')">
|
||||
<SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
|
||||
v-model="billingInfo.country"
|
||||
:default="billingInfo.country"
|
||||
:options="countries"
|
||||
:placeholder="$t('user_settings.country_plac')"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.state')" :description="$t('State, county, province, or region.')">
|
||||
<input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
|
||||
v-model="billingInfo.state"
|
||||
:placeholder="$t('user_settings.state_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('user_settings.phone_number')">
|
||||
<input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
|
||||
v-model="billingInfo.phone_number"
|
||||
:placeholder="$t('user_settings.phone_number_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../../components/Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
||||
import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
||||
import PageHeader from '/resources/js/components/Others/PageHeader'
|
||||
import ThemeLabel from '/resources/js/components/Others/ThemeLabel'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
|
||||
import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
|
||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
|
||||
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
||||
import PageHeader from '/resources/js/components/Others/PageHeader'
|
||||
import ThemeLabel from '/resources/js/components/Others/ThemeLabel'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
PageTabGroup,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
FormLabel,
|
||||
required,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'countries', 'timezones']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: undefined,
|
||||
billingInfo: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeUserName() {
|
||||
this.$store.commit('UPDATE_NAME', this.userInfo.name)
|
||||
this.$updateText('/user/settings', 'name', this.userInfo.name)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
export default {
|
||||
name: 'Settings',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
AppInputText,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
PageTabGroup,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
FormLabel,
|
||||
required,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['config', 'countries', 'timezones']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: undefined,
|
||||
billingInfo: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeUserName() {
|
||||
this.$store.commit('UPDATE_NAME', this.userInfo.name)
|
||||
this.$updateText('/user/settings', 'name', this.userInfo.name)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.userInfo = {
|
||||
timezone: this.user.data.relationships.settings.data.attributes.timezone,
|
||||
name: this.user.data.relationships.settings.data.attributes.name,
|
||||
email: this.user.data.attributes.email
|
||||
}
|
||||
this.userInfo = {
|
||||
timezone: this.user.data.relationships.settings.data.attributes.timezone,
|
||||
name: this.user.data.relationships.settings.data.attributes.name,
|
||||
email: this.user.data.attributes.email
|
||||
}
|
||||
|
||||
this.billingInfo = {
|
||||
name: this.user.data.relationships.settings.data.attributes.name,
|
||||
address: this.user.data.relationships.settings.data.attributes.address,
|
||||
state: this.user.data.relationships.settings.data.attributes.state,
|
||||
city: this.user.data.relationships.settings.data.attributes.city,
|
||||
postal_code: this.user.data.relationships.settings.data.attributes.postal_code,
|
||||
country: this.user.data.relationships.settings.data.attributes.country,
|
||||
phone_number: this.user.data.relationships.settings.data.attributes.phone_number,
|
||||
}
|
||||
}
|
||||
}
|
||||
this.billingInfo = {
|
||||
name: this.user.data.relationships.settings.data.attributes.name,
|
||||
address: this.user.data.relationships.settings.data.attributes.address,
|
||||
state: this.user.data.relationships.settings.data.attributes.state,
|
||||
city: this.user.data.relationships.settings.data.attributes.city,
|
||||
postal_code: this.user.data.relationships.settings.data.attributes.postal_code,
|
||||
country: this.user.data.relationships.settings.data.attributes.country,
|
||||
phone_number: this.user.data.relationships.settings.data.attributes.phone_number,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user