mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 03:10:51 +00:00
user profile page refactor
This commit is contained in:
Čarodej
@@ -14,20 +14,18 @@
|
||||
<SidebarNavigation />
|
||||
<PanelNavigationUser />
|
||||
|
||||
<div v-if="user" id="single-page">
|
||||
<div v-if="! isLoading" id="page-content" class="medium-width">
|
||||
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
|
||||
<div v-if="user" class="pr-6 w-full overflow-x-hidden relative pt-6" style="background: rgba(244, 245, 246, 0.6)">
|
||||
<div v-if="! isLoading" id="page-content">
|
||||
|
||||
<div class="content-page">
|
||||
|
||||
<!--User thumbnail-->
|
||||
<div class="card shadow-card">
|
||||
<!--User thumbnail-->
|
||||
<div class="page-detail-headline">
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<UserImageInput
|
||||
v-model="avatar"
|
||||
:avatar="user.data.relationships.settings.data.attributes.avatar.md"
|
||||
/>
|
||||
v-model="avatar"
|
||||
:avatar="user.data.relationships.settings.data.attributes.avatar.md"
|
||||
/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">
|
||||
@@ -46,21 +44,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Incomplete Payment Warning-->
|
||||
<!--Incomplete Payment Warning-->
|
||||
<InfoBox v-if="canShowIncompletePayment" type="error" class="message-box">
|
||||
<i18n path="incomplete_payment.description" tag="p">
|
||||
<a :href="user.data.attributes.incomplete_payment">{{ $t('incomplete_payment.href') }}</a>
|
||||
</i18n>
|
||||
</InfoBox>
|
||||
|
||||
<!--Upgrade Storage Plan Warning-->
|
||||
<!--Upgrade Storage Plan Warning-->
|
||||
<InfoBox v-if="canShowUpgradeWarning && !canShowIncompletePayment" type="error" class="message-box">
|
||||
<p>{{ $t('upgrade_banner.title') }}</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
|
||||
<!--Router Content-->
|
||||
<router-view :user="user" />
|
||||
</div>
|
||||
<!--Router Content-->
|
||||
<router-view :user="user" />
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
@@ -135,13 +133,6 @@
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.page-detail-headline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.user-thumbnail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -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