mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-05-14 01:05:02 +00:00
user profile inputs refactoring
This commit is contained in:
Čarodej
@@ -62,14 +62,14 @@
|
||||
"/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
|
||||
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=aafbc2aab40dc434335a",
|
||||
"/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=f588150c33883516722c",
|
||||
"/chunks/profile.js": "/chunks/profile.js?id=b616d1ec5aa4eb40feae",
|
||||
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=58edfb3a35062e1ba4e0",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
|
||||
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=b7a593ddda1ac39edc94",
|
||||
"/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0920151cdeb1c2bdb36a",
|
||||
"/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f73f0faf411f750a1c07",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=8e6097bde7181d6800fa",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=827cf60e265ad37bcc16",
|
||||
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=979e74627582832e7a79",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9a1352324cbee9630496",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=b1e1ae3cff004140701e",
|
||||
@@ -612,5 +612,20 @@
|
||||
"/chunks/app-appearance.410a8f88442b1ed3bf8c.hot-update.js": "/chunks/app-appearance.410a8f88442b1ed3bf8c.hot-update.js",
|
||||
"/chunks/app-index.c6fb3b854535a11c2ab6.hot-update.js": "/chunks/app-index.c6fb3b854535a11c2ab6.hot-update.js",
|
||||
"/chunks/app-index.d560d8c2fede89054f8d.hot-update.js": "/chunks/app-index.d560d8c2fede89054f8d.hot-update.js",
|
||||
"/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js": "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js"
|
||||
"/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js": "/chunks/app-settings.2a085a06d96ac8997cf9.hot-update.js",
|
||||
"/chunks/profile.17274a769ca64dfe2f2b.hot-update.js": "/chunks/profile.17274a769ca64dfe2f2b.hot-update.js",
|
||||
"/chunks/profile.32570f9750196041bc15.hot-update.js": "/chunks/profile.32570f9750196041bc15.hot-update.js",
|
||||
"/chunks/profile.2082d7b94b298250149e.hot-update.js": "/chunks/profile.2082d7b94b298250149e.hot-update.js",
|
||||
"/chunks/profile.77f5323b01412e116f90.hot-update.js": "/chunks/profile.77f5323b01412e116f90.hot-update.js",
|
||||
"/chunks/profile.da2d3e2373f3ac0a9f12.hot-update.js": "/chunks/profile.da2d3e2373f3ac0a9f12.hot-update.js",
|
||||
"/chunks/profile.5692971d63592bd5beb8.hot-update.js": "/chunks/profile.5692971d63592bd5beb8.hot-update.js",
|
||||
"/chunks/profile.f04c15a23f406c227feb.hot-update.js": "/chunks/profile.f04c15a23f406c227feb.hot-update.js",
|
||||
"/chunks/profile.5ffcc9880700109dc1c6.hot-update.js": "/chunks/profile.5ffcc9880700109dc1c6.hot-update.js",
|
||||
"/chunks/profile.520ca99d2685c4ef3054.hot-update.js": "/chunks/profile.520ca99d2685c4ef3054.hot-update.js",
|
||||
"/chunks/profile.2372e852f089418c45cb.hot-update.js": "/chunks/profile.2372e852f089418c45cb.hot-update.js",
|
||||
"/chunks/settings-password.df8c1bd4185b511e7822.hot-update.js": "/chunks/settings-password.df8c1bd4185b511e7822.hot-update.js",
|
||||
"/chunks/settings-password.87743b19122f780b950c.hot-update.js": "/chunks/settings-password.87743b19122f780b950c.hot-update.js",
|
||||
"/chunks/settings-password.378b875252bdd254d1ff.hot-update.js": "/chunks/settings-password.378b875252bdd254d1ff.hot-update.js",
|
||||
"/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js": "/chunks/settings-password.7015c03dc9f51ad03680.hot-update.js",
|
||||
"/chunks/settings-password.55be9251fdc82b46822e.hot-update.js": "/chunks/settings-password.55be9251fdc82b46822e.hot-update.js"
|
||||
}
|
||||
|
||||
@@ -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