mirror of
https://github.com/lnbits/lnbits.git
synced 2025-07-18 00:42:39 +02:00
Move UI configs to profile (#2201)
* feat: add tabs * feat: move buttons to user profile * feat: i18n * refactor: move ui methods to `account` component
This commit is contained in:
Vlad Stan
GitHub
@ -5,9 +5,28 @@
|
|||||||
{% block scripts %} {{ window_vars(user) }}
|
{% block scripts %} {{ window_vars(user) }}
|
||||||
<script src="{{ static_url_for('static', 'js/account.js') }}"></script>
|
<script src="{{ static_url_for('static', 'js/account.js') }}"></script>
|
||||||
{% endblock %} {% block page %}
|
{% endblock %} {% block page %}
|
||||||
|
|
||||||
<div class="row q-col-gutter-md">
|
<div class="row q-col-gutter-md">
|
||||||
<div v-if="user" class="col-12 col-md-6 q-gutter-y-md">
|
<div v-if="user" class="col-12 col-md-6 q-gutter-y-md">
|
||||||
<q-card v-if="passwordData.show">
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<q-tabs v-model="tab" align="justify">
|
||||||
|
<q-tab
|
||||||
|
name="user"
|
||||||
|
:label="$t('account_settings')"
|
||||||
|
@update="val => tab = val.name"
|
||||||
|
></q-tab>
|
||||||
|
<q-tab
|
||||||
|
name="theme"
|
||||||
|
:label="$t('look_and_feel')"
|
||||||
|
@update="val => tab = val.name"
|
||||||
|
></q-tab>
|
||||||
|
</q-tabs>
|
||||||
|
<q-tab-panels v-model="tab">
|
||||||
|
<q-tab-panel name="user">
|
||||||
|
<div v-if="passwordData.show">
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
@ -76,15 +95,10 @@
|
|||||||
class="float-right"
|
class="float-right"
|
||||||
></q-btn>
|
></q-btn>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</div>
|
||||||
<q-card v-else>
|
<div v-else>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
|
||||||
<h4 class="q-my-none">
|
|
||||||
<span v-text="$t('account_settings')"></span>
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<q-img
|
<q-img
|
||||||
v-if="user.config.picture"
|
v-if="user.config.picture"
|
||||||
@ -134,8 +148,8 @@
|
|||||||
</q-input>
|
</q-input>
|
||||||
<div v-if="!user.email" class="row"></div>
|
<div v-if="!user.email" class="row"></div>
|
||||||
<div v-if="!user.email" class="row">
|
<div v-if="!user.email" class="row">
|
||||||
{% if "google-auth" in LNBITS_AUTH_METHODS or "github-auth" in
|
{% if "google-auth" in LNBITS_AUTH_METHODS or
|
||||||
LNBITS_AUTH_METHODS %}
|
"github-auth" in LNBITS_AUTH_METHODS %}
|
||||||
<div class="col q-pa-sm text-h6">
|
<div class="col q-pa-sm text-h6">
|
||||||
<span v-text="$t('verify_email')"></span>:
|
<span v-text="$t('verify_email')"></span>:
|
||||||
</div>
|
</div>
|
||||||
@ -230,6 +244,168 @@
|
|||||||
class="float-right"
|
class="float-right"
|
||||||
></q-btn>
|
></q-btn>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="theme">
|
||||||
|
<div class="row q-mb-md">
|
||||||
|
<div class="col-4"><span v-text="$t('language')"></span></div>
|
||||||
|
<div class="col-8">
|
||||||
|
<q-btn-dropdown
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
size="sm"
|
||||||
|
icon="language"
|
||||||
|
class="q-pl-md"
|
||||||
|
>
|
||||||
|
<q-list v-for="(lang, index) in g.langs" :key="index">
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
:active="activeLanguage(lang.value)"
|
||||||
|
@click="changeLanguage(lang.value)"
|
||||||
|
><q-item-section>
|
||||||
|
<q-item-label
|
||||||
|
v-text="lang.display ?? lang.value.toUpperCase()"
|
||||||
|
></q-item-label>
|
||||||
|
<q-tooltip
|
||||||
|
><span v-text="lang.label"></span
|
||||||
|
></q-tooltip>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-btn-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row q-mb-md">
|
||||||
|
<div class="col-4">
|
||||||
|
<span v-text="$t('color_scheme')"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('classic')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('classic')"
|
||||||
|
icon="circle"
|
||||||
|
color="deep-purple"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>classic</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('bitcoin')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('bitcoin')"
|
||||||
|
icon="circle"
|
||||||
|
color="orange"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>bitcoin</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('mint')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('mint')"
|
||||||
|
icon="circle"
|
||||||
|
color="green"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>mint</q-tooltip> </q-btn
|
||||||
|
><q-btn
|
||||||
|
v-if="g.allowedThemes.includes('autumn')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('autumn')"
|
||||||
|
icon="circle"
|
||||||
|
color="brown"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>autumn</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('monochrome')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('monochrome')"
|
||||||
|
icon="circle"
|
||||||
|
color="grey"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>monochrome</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('salvador')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('salvador')"
|
||||||
|
icon="circle"
|
||||||
|
color="blue-10"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>elSalvador</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('freedom')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('freedom')"
|
||||||
|
icon="circle"
|
||||||
|
color="pink-13"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>freedom</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('cyber')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('cyber')"
|
||||||
|
icon="circle"
|
||||||
|
color="light-green-9"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>cyber</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn
|
||||||
|
v-if="g.allowedThemes.includes('flamingo')"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="changeColor('flamingo')"
|
||||||
|
icon="circle"
|
||||||
|
color="pink-3"
|
||||||
|
size="md"
|
||||||
|
><q-tooltip>flamingo</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row q-mb-md">
|
||||||
|
<div class="col-4">
|
||||||
|
<span v-text="$t('toggle_darkmode')"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
@click="toggleDarkMode"
|
||||||
|
:icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<q-tooltip
|
||||||
|
><span v-text="$t('toggle_darkmode')"></span
|
||||||
|
></q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row q-mb-md">
|
||||||
|
<div class="col-4">Notifications</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<lnbits-notifications-btn
|
||||||
|
v-if="g.user"
|
||||||
|
pubkey="{{ WEBPUSH_PUBKEY }}"
|
||||||
|
></lnbits-notifications-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="col-12 col-md-6 q-gutter-y-md">
|
<div v-else class="col-12 col-md-6 q-gutter-y-md">
|
||||||
|
|||||||
18
lnbits/static/bundle.min.js
vendored
18
lnbits/static/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
@ -224,5 +224,8 @@ window.localisation.en = {
|
|||||||
auth_provider: 'Auth Provider',
|
auth_provider: 'Auth Provider',
|
||||||
my_account: 'My Account',
|
my_account: 'My Account',
|
||||||
back: 'Back',
|
back: 'Back',
|
||||||
logout: 'Logout'
|
logout: 'Logout',
|
||||||
|
look_and_feel: 'Look and Feel',
|
||||||
|
language: 'Language',
|
||||||
|
color_scheme: 'Color Scheme'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,6 +6,7 @@ new Vue({
|
|||||||
user: null,
|
user: null,
|
||||||
hasUsername: false,
|
hasUsername: false,
|
||||||
showUserId: false,
|
showUserId: false,
|
||||||
|
tab: 'user',
|
||||||
passwordData: {
|
passwordData: {
|
||||||
show: false,
|
show: false,
|
||||||
oldPassword: null,
|
oldPassword: null,
|
||||||
@ -15,6 +16,21 @@ new Vue({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
activeLanguage: function (lang) {
|
||||||
|
return window.i18n.locale === lang
|
||||||
|
},
|
||||||
|
changeLanguage: function (newValue) {
|
||||||
|
window.i18n.locale = newValue
|
||||||
|
this.$q.localStorage.set('lnbits.lang', newValue)
|
||||||
|
},
|
||||||
|
toggleDarkMode: function () {
|
||||||
|
this.$q.dark.toggle()
|
||||||
|
this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
|
||||||
|
},
|
||||||
|
changeColor: function (newValue) {
|
||||||
|
document.body.setAttribute('data-theme', newValue)
|
||||||
|
this.$q.localStorage.set('lnbits.theme', newValue)
|
||||||
|
},
|
||||||
updateAccount: async function () {
|
updateAccount: async function () {
|
||||||
try {
|
try {
|
||||||
const {data} = await LNbits.api.request(
|
const {data} = await LNbits.api.request(
|
||||||
|
|||||||
@ -422,21 +422,10 @@ window.windowMixin = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
activeLanguage: function (lang) {
|
|
||||||
return window.i18n.locale === lang
|
|
||||||
},
|
|
||||||
changeLanguage: function (newValue) {
|
|
||||||
window.i18n.locale = newValue
|
|
||||||
this.$q.localStorage.set('lnbits.lang', newValue)
|
|
||||||
},
|
|
||||||
changeColor: function (newValue) {
|
changeColor: function (newValue) {
|
||||||
document.body.setAttribute('data-theme', newValue)
|
document.body.setAttribute('data-theme', newValue)
|
||||||
this.$q.localStorage.set('lnbits.theme', newValue)
|
this.$q.localStorage.set('lnbits.theme', newValue)
|
||||||
},
|
},
|
||||||
toggleDarkMode: function () {
|
|
||||||
this.$q.dark.toggle()
|
|
||||||
this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
|
|
||||||
},
|
|
||||||
copyText: function (text, message, position) {
|
copyText: function (text, message, position) {
|
||||||
var notify = this.$q.notify
|
var notify = this.$q.notify
|
||||||
Quasar.utils.copyToClipboard(text).then(function () {
|
Quasar.utils.copyToClipboard(text).then(function () {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
// update cache version every time there is a new deployment
|
// update cache version every time there is a new deployment
|
||||||
// so the service worker reinitializes the cache
|
// so the service worker reinitializes the cache
|
||||||
const CACHE_VERSION = 99
|
const CACHE_VERSION = 102
|
||||||
const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
|
const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
|
||||||
|
|
||||||
const getApiKey = request => {
|
const getApiKey = request => {
|
||||||
|
|||||||
@ -109,145 +109,7 @@
|
|||||||
>
|
>
|
||||||
<span>OFFLINE</span>
|
<span>OFFLINE</span>
|
||||||
</q-badge>
|
</q-badge>
|
||||||
<lnbits-notifications-btn
|
|
||||||
v-if="g.user"
|
|
||||||
pubkey="{{ WEBPUSH_PUBKEY }}"
|
|
||||||
></lnbits-notifications-btn>
|
|
||||||
<q-btn-dropdown
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
size="sm"
|
|
||||||
icon="language"
|
|
||||||
class="q-pl-md"
|
|
||||||
>
|
|
||||||
<q-list v-for="(lang, index) in g.langs" :key="index">
|
|
||||||
<q-item
|
|
||||||
clickable
|
|
||||||
v-close-popup
|
|
||||||
:active="activeLanguage(lang.value)"
|
|
||||||
@click="changeLanguage(lang.value)"
|
|
||||||
><q-item-section>
|
|
||||||
<q-item-label
|
|
||||||
v-text="lang.display ?? lang.value.toUpperCase()"
|
|
||||||
></q-item-label>
|
|
||||||
<q-tooltip><span v-text="lang.label"></span></q-tooltip>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-btn-dropdown>
|
|
||||||
<q-btn-dropdown
|
|
||||||
v-if="g.allowedThemes && g.allowedThemes.length > 1"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
size="sm"
|
|
||||||
icon="format_color_fill"
|
|
||||||
class="q-pl-md"
|
|
||||||
>
|
|
||||||
<div class="row no-wrap q-pa-md">
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('classic')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('classic')"
|
|
||||||
icon="circle"
|
|
||||||
color="deep-purple"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>classic</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('bitcoin')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('bitcoin')"
|
|
||||||
icon="circle"
|
|
||||||
color="orange"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>bitcoin</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('mint')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('mint')"
|
|
||||||
icon="circle"
|
|
||||||
color="green"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>mint</q-tooltip> </q-btn
|
|
||||||
><q-btn
|
|
||||||
v-if="g.allowedThemes.includes('autumn')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('autumn')"
|
|
||||||
icon="circle"
|
|
||||||
color="brown"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>autumn</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('monochrome')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('monochrome')"
|
|
||||||
icon="circle"
|
|
||||||
color="grey"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>monochrome</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('salvador')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('salvador')"
|
|
||||||
icon="circle"
|
|
||||||
color="blue-10"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>elSalvador</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('freedom')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('freedom')"
|
|
||||||
icon="circle"
|
|
||||||
color="pink-13"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>freedom</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('cyber')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('cyber')"
|
|
||||||
icon="circle"
|
|
||||||
color="light-green-9"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>cyber</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="g.allowedThemes.includes('flamingo')"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
@click="changeColor('flamingo')"
|
|
||||||
icon="circle"
|
|
||||||
color="pink-3"
|
|
||||||
size="md"
|
|
||||||
><q-tooltip>flamingo</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
</q-btn-dropdown>
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
@click="toggleDarkMode"
|
|
||||||
:icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<q-tooltip><span v-text="$t('toggle_darkmode')"></span></q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn-dropdown
|
<q-btn-dropdown
|
||||||
v-if="isUserAuthorized"
|
v-if="isUserAuthorized"
|
||||||
dense
|
dense
|
||||||
|
|||||||
Reference in New Issue
Block a user