user profile page refactor

This commit is contained in:
Čarodej
2021-11-22 14:39:57 +01:00
parent a2e0c1810d
commit 054c0eb32c
6 changed files with 255 additions and 192 deletions

View File

@@ -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>