mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
user profile page refactor
This commit is contained in:
Čarodej
@@ -1,55 +1,29 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<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 }">
|
||||
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_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>
|
||||
<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="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">
|
||||
<ButtonBase type="submit" button-style="theme" class="confirm-form">
|
||||
{{ $t('profile.store_pass') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup 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 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>
|
||||
<SwitchInput @click.native.prevent.stop="open2faPopup"
|
||||
class="switch"
|
||||
:state="user.data.attributes.two_factor_authentication"
|
||||
/>
|
||||
</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">
|
||||
@@ -71,31 +45,69 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup 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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
|
||||
{{ $t('personal_token.create_token') }}
|
||||
</ButtonBase>
|
||||
</PageTabGroup>
|
||||
<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">
|
||||
<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 }">
|
||||
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
|
||||
type="password"
|
||||
class="focus-border-theme input-dark"
|
||||
: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="focus-border-theme input-dark"
|
||||
: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>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,71 +1,71 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<PageTabGroup v-if="userInfo">
|
||||
<div class="form block-form">
|
||||
|
||||
<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
|
||||
/>
|
||||
: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"
|
||||
/>
|
||||
v-model="userInfo.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
|
||||
<PageTabGroup v-if="userInfo">
|
||||
<div class="form block-form">
|
||||
</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')"/>
|
||||
v-model="userInfo.timezone"
|
||||
:default="userInfo.timezone"
|
||||
:options="timezones"
|
||||
:placeholder="$t('user_settings.timezone_plac')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
|
||||
<PageTabGroup v-if="config.isSaaS && billingInfo">
|
||||
<div class="form block-form">
|
||||
</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"
|
||||
/>
|
||||
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"
|
||||
/>
|
||||
v-model="billingInfo.address"
|
||||
:placeholder="$t('user_settings.address_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
@@ -73,22 +73,22 @@
|
||||
<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"
|
||||
/>
|
||||
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"
|
||||
/>
|
||||
v-model="billingInfo.postal_code"
|
||||
:placeholder="$t('user_settings.postal_code_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,22 +96,22 @@
|
||||
<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')"
|
||||
/>
|
||||
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"
|
||||
/>
|
||||
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>
|
||||
@@ -121,15 +121,15 @@
|
||||
<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"
|
||||
/>
|
||||
v-model="billingInfo.phone_number"
|
||||
:placeholder="$t('user_settings.phone_number_plac')"
|
||||
type="text"
|
||||
class="focus-border-theme input-dark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</div>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user