From 36ba1eb1929217619ebe4daacceae9b8dcb07d98 Mon Sep 17 00:00:00 2001 From: Nicolas Giard Date: Mon, 23 May 2022 00:36:52 -0400 Subject: [PATCH] feat(admin): migrate locale + login + storage views to vue 3 composable --- .devcontainer/Dockerfile | 64 +- .devcontainer/app-init.sh | 4 + .devcontainer/devcontainer.json | 4 +- .devcontainer/docker-compose.yml | 4 +- server/core/system.js | 65 +- server/index.js | 4 +- ux/package.json | 44 +- ux/src/components/LocaleInstallDialog.vue | 169 +-- ux/src/pages/AdminEditors.vue | 2 +- ux/src/pages/AdminFlags.vue | 2 +- ux/src/pages/AdminGeneral.vue | 8 +- ux/src/pages/AdminLocale.vue | 428 +++--- ux/src/pages/AdminLogin.vue | 280 ++-- ux/src/pages/AdminSites.vue | 4 +- ux/src/pages/AdminStorage.vue | 1448 +++++++++++---------- ux/src/pages/AdminSystem.vue | 18 +- ux/src/router/routes.js | 12 +- ux/yarn.lock | 477 ++++--- 18 files changed, 1589 insertions(+), 1448 deletions(-) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index ae30fc88..89698d60 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,21 +1,58 @@ +# Based of https://github.com/microsoft/vscode-dev-containers/blob/main/containers/javascript-node/.devcontainer/base.Dockerfile + # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster -ARG VARIANT=16-bullseye -FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT} +ARG VARIANT=18-bullseye +FROM node:${VARIANT} -# [Optional] Uncomment this section to install additional OS packages. -# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ -# && apt-get -y install --no-install-recommends +ENV DEBIAN_FRONTEND=noninteractive -# [Optional] Uncomment if you want to install an additional version of node using nvm -# ARG EXTRA_NODE_VERSION=10 -# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" +# Copy library scripts to execute +ADD https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/containers/javascript-node/.devcontainer/library-scripts/common-debian.sh /tmp/library-scripts/ +ADD https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/containers/javascript-node/.devcontainer/library-scripts/node-debian.sh /tmp/library-scripts/ +ADD https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/containers/javascript-node/.devcontainer/library-scripts/meta.env /tmp/library-scripts/ -# [Optional] Uncomment if you want to install more global node modules -# RUN su node -c "npm install -g " +# [Option] Install zsh +ARG INSTALL_ZSH="true" +# [Option] Upgrade OS packages to their latest versions +ARG UPGRADE_PACKAGES="true" -EXPOSE 3000 +# Install needed packages, yarn, nvm and setup non-root user. Use a separate RUN statement to add your own dependencies. +ARG USERNAME=node +ARG USER_UID=1000 +ARG USER_GID=$USER_UID +ARG NPM_GLOBAL=/usr/local/share/npm-global +ENV NVM_DIR=/usr/local/share/nvm +ENV NVM_SYMLINK_CURRENT=true \ + PATH=${NPM_GLOBAL}/bin:${NVM_DIR}/current/bin:${PATH} +RUN apt-get update \ + # Remove imagemagick due to https://security-tracker.debian.org/tracker/CVE-2019-10131 + && apt-get purge -y imagemagick imagemagick-6-common \ + # Install common packages, non-root user, update yarn and install nvm + && bash /tmp/library-scripts/common-debian.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" "true" "true" \ + # Install yarn, nvm + && rm -rf /opt/yarn-* /usr/local/bin/yarn /usr/local/bin/yarnpkg \ + && bash /tmp/library-scripts/node-debian.sh "${NVM_DIR}" "none" "${USERNAME}" \ + # Configure global npm install location, use group to adapt to UID/GID changes + && if ! cat /etc/group | grep -e "^npm:" > /dev/null 2>&1; then groupadd -r npm; fi \ + && usermod -a -G npm ${USERNAME} \ + && umask 0002 \ + && mkdir -p ${NPM_GLOBAL} \ + && touch /usr/local/etc/npmrc \ + && chown ${USERNAME}:npm ${NPM_GLOBAL} /usr/local/etc/npmrc \ + && chmod g+s ${NPM_GLOBAL} \ + && npm config -g set prefix ${NPM_GLOBAL} \ + && sudo -u ${USERNAME} npm config -g set prefix ${NPM_GLOBAL} \ + # Install eslint + && su ${USERNAME} -c "umask 0002 && npm install -g eslint" \ + && npm cache clean --force > /dev/null 2>&1 \ + # Install python-is-python3 on bullseye to prevent node-gyp regressions + && . /etc/os-release \ + && if [ "${VERSION_CODENAME}" = "bullseye" ]; then apt-get -y install --no-install-recommends python-is-python3; fi \ + # Clean up + && apt-get autoremove -y && apt-get clean -y && rm -rf /var/lib/apt/lists/* /root/.gnupg /tmp/library-scripts -ENV DEBIAN_FRONTEND=noninteractive + +EXPOSE 3000 # Add Docker Source RUN curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg @@ -33,6 +70,7 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive && apt-get install - git \ gnupg2 \ nano \ + netcat \ pandoc \ unzip \ wget @@ -48,7 +86,7 @@ ENV npm_config_fund false RUN sed -i 's/#force_color_prompt=/force_color_prompt=/' /root/.bashrc # Fetch wait-for utility -ADD https://raw.githubusercontent.com/eficode/wait-for/v2.1.3/wait-for /usr/local/bin/ +ADD https://raw.githubusercontent.com/eficode/wait-for/v2.2.3/wait-for /usr/local/bin/ RUN chmod +rx /usr/local/bin/wait-for # Copy the startup file diff --git a/.devcontainer/app-init.sh b/.devcontainer/app-init.sh index dc61d525..fcc08657 100644 --- a/.devcontainer/app-init.sh +++ b/.devcontainer/app-init.sh @@ -2,7 +2,11 @@ cd /workspace +echo "Disabling git info in terminal..." git config codespaces-theme.hide-status 1 git config oh-my-zsh.hide-info 1 +echo "Waiting for DB container to come online..." +/usr/local/bin/wait-for localhost:5432 -- echo "DB ready" + echo "Ready!" diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 38baf433..b5428642 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -32,10 +32,10 @@ "arcanis.vscode-zipfs", "dbaeumer.vscode-eslint", "eamodio.gitlens", - "johnsoncodehk.volar", + "Vue.volar", "oderwat.indent-rainbow", "redhat.vscode-yaml", - "visualstudioexptteam.vscodeintellicode", + "VisualStudioExptTeam.vscodeintellicode", "editorconfig.editorconfig", "lokalise.i18n-ally", "mrmlnc.vscode-duplicate", diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml index 997aae9c..07043fa1 100644 --- a/.devcontainer/docker-compose.yml +++ b/.devcontainer/docker-compose.yml @@ -6,10 +6,10 @@ services: context: . dockerfile: Dockerfile args: - # Update 'VARIANT' to pick an LTS version of Node.js: 16, 14, 12. + # Update 'VARIANT' to pick an LTS version of Node.js: 18, 16, 14, 12. # Append -bullseye or -buster to pin to an OS version. # Use -bullseye variants on local arm64/Apple Silicon. - VARIANT: 16-bullseye + VARIANT: 18-bullseye volumes: - ..:/workspace diff --git a/server/core/system.js b/server/core/system.js index 563c7d18..c90d436e 100644 --- a/server/core/system.js +++ b/server/core/system.js @@ -1,6 +1,3 @@ -const _ = require('lodash') -const cfgHelper = require('../helpers/config') -const Promise = require('bluebird') const fs = require('fs-extra') const path = require('path') @@ -11,71 +8,13 @@ module.exports = { channel: 'BETA', version: WIKI.version, releaseDate: WIKI.releaseDate, - minimumVersionRequired: '2.0.0-beta.0', - minimumNodeRequired: '10.12.0' + minimumVersionRequired: '3.0.0-beta.0', + minimumNodeRequired: '18.0.0' }, init() { // Clear content cache fs.emptyDir(path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, 'cache')) return this - }, - /** - * Upgrade from WIKI.js 1.x - MongoDB database - * - * @param {Object} opts Options object - */ - async upgradeFromMongo (opts) { - WIKI.logger.info('Upgrading from MongoDB...') - - let mongo = require('mongodb').MongoClient - let parsedMongoConStr = cfgHelper.parseConfigValue(opts.mongoCnStr) - - return new Promise((resolve, reject) => { - // Connect to MongoDB - - mongo.connect(parsedMongoConStr, { - autoReconnect: false, - reconnectTries: 2, - reconnectInterval: 1000, - connectTimeoutMS: 5000, - socketTimeoutMS: 5000 - }, async (err, db) => { - try { - if (err !== null) { throw err } - - let users = db.collection('users') - - // Check if users table is populated - let userCount = await users.count() - if (userCount < 2) { - throw new Error('MongoDB Upgrade: Users table is empty!') - } - - // Import all users - let userData = await users.find({ - email: { - $not: 'guest' - } - }).toArray() - await WIKI.models.User.bulkCreate(_.map(userData, usr => { - return { - email: usr.email, - name: usr.name || 'Imported User', - password: usr.password || '', - provider: usr.provider || 'local', - providerId: usr.providerId || '', - role: 'user', - createdAt: usr.createdAt - } - })) - - resolve(true) - } catch (errc) { - reject(errc) - } - db.close() - }) - }) } } diff --git a/server/index.js b/server/index.js index 617f50e0..8588963c 100644 --- a/server/index.js +++ b/server/index.js @@ -8,8 +8,8 @@ const { nanoid } = require('nanoid') const { DateTime } = require('luxon') const semver = require('semver') -if (!semver.satisfies(process.version, '>=16')) { - console.error('ERROR: Node.js 16.x or later required!') +if (!semver.satisfies(process.version, '>=18')) { + console.error('ERROR: Node.js 18.x or later required!') process.exit(1) } diff --git a/ux/package.json b/ux/package.json index 93e14f77..cf78b6d5 100644 --- a/ux/package.json +++ b/ux/package.json @@ -11,8 +11,8 @@ "lint": "eslint --ext .js,.vue ./" }, "dependencies": { - "@apollo/client": "3.6.1", - "@codemirror/autocomplete": "0.20.0", + "@apollo/client": "3.6.4", + "@codemirror/autocomplete": "0.20.1", "@codemirror/basic-setup": "0.20.0", "@codemirror/closebrackets": "0.19.2", "@codemirror/commands": "0.20.0", @@ -25,15 +25,15 @@ "@codemirror/lang-html": "0.20.0", "@codemirror/lang-javascript": "0.20.0", "@codemirror/lang-json": "0.20.0", - "@codemirror/lang-markdown": "0.20.0", + "@codemirror/lang-markdown": "0.20.1", "@codemirror/matchbrackets": "0.19.4", "@codemirror/search": "0.20.1", "@codemirror/state": "0.20.0", "@codemirror/tooltip": "0.19.16", - "@codemirror/view": "0.20.3", + "@codemirror/view": "0.20.6", "@lezer/common": "0.16.0", - "@quasar/extras": "1.13.6", - "@tiptap/core": "2.0.0-beta.175", + "@quasar/extras": "1.14.0", + "@tiptap/core": "2.0.0-beta.176", "@tiptap/extension-code-block": "2.0.0-beta.37", "@tiptap/extension-code-block-lowlight": "2.0.0-beta.68", "@tiptap/extension-color": "2.0.0-beta.9", @@ -44,9 +44,9 @@ "@tiptap/extension-highlight": "2.0.0-beta.33", "@tiptap/extension-history": "2.0.0-beta.21", "@tiptap/extension-image": "2.0.0-beta.27", - "@tiptap/extension-mention": "2.0.0-beta.96", + "@tiptap/extension-mention": "2.0.0-beta.97", "@tiptap/extension-placeholder": "2.0.0-beta.48", - "@tiptap/extension-table": "2.0.0-beta.48", + "@tiptap/extension-table": "2.0.0-beta.49", "@tiptap/extension-table-cell": "2.0.0-beta.20", "@tiptap/extension-table-header": "2.0.0-beta.22", "@tiptap/extension-table-row": "2.0.0-beta.19", @@ -55,38 +55,38 @@ "@tiptap/extension-text-align": "2.0.0-beta.29", "@tiptap/extension-text-style": "2.0.0-beta.23", "@tiptap/extension-typography": "2.0.0-beta.20", - "@tiptap/starter-kit": "2.0.0-beta.184", + "@tiptap/starter-kit": "2.0.0-beta.185", "@tiptap/vue-3": "2.0.0-beta.91", - "@vue/apollo-option": "4.0.0-alpha.16", + "@vue/apollo-option": "4.0.0-alpha.17", "apollo-upload-client": "17.0.0", - "browser-fs-access": "0.29.4", - "clipboard": "2.0.10", + "browser-fs-access": "0.29.5", + "clipboard": "2.0.11", "filesize": "8.0.7", "filesize-parser": "1.5.0", - "graphql": "16.4.0", + "graphql": "16.5.0", "graphql-tag": "2.12.6", "js-cookie": "3.0.1", "jwt-decode": "3.1.2", "lodash": "4.17.21", - "luxon": "2.3.2", - "pinia": "2.0.13", + "luxon": "2.4.0", + "pinia": "2.0.14", "pug": "3.0.2", - "quasar": "2.6.6", + "quasar": "2.7.0", "tippy.js": "6.3.7", "uuid": "8.3.2", - "v-network-graph": "0.5.13", + "v-network-graph": "0.5.16", "vue": "3.2.31", - "vue-i18n": "9.1.9", - "vue-router": "4.0.14", + "vue-i18n": "9.1.10", + "vue-router": "4.0.15", "vuedraggable": "4.1.0", "zxcvbn": "4.4.2" }, "devDependencies": { "@intlify/vite-plugin-vue-i18n": "3.4.0", - "@quasar/app-vite": "1.0.0-beta.14", + "@quasar/app-vite": "1.0.0", "@types/lodash": "4.14.182", - "autoprefixer": "10.4.5", - "eslint": "8.14.0", + "autoprefixer": "10.4.7", + "eslint": "8.16.0", "eslint-config-standard": "17.0.0", "eslint-plugin-import": "2.26.0", "eslint-plugin-n": "15.2.0", diff --git a/ux/src/components/LocaleInstallDialog.vue b/ux/src/components/LocaleInstallDialog.vue index f9e560df..560c233e 100644 --- a/ux/src/components/LocaleInstallDialog.vue +++ b/ux/src/components/LocaleInstallDialog.vue @@ -1,18 +1,18 @@ - diff --git a/ux/src/pages/AdminEditors.vue b/ux/src/pages/AdminEditors.vue index ffd04b93..075bd379 100644 --- a/ux/src/pages/AdminEditors.vue +++ b/ux/src/pages/AdminEditors.vue @@ -16,7 +16,7 @@ q-page.admin-flags type='a' ) q-btn.q-mr-sm.acrylic-btn( - icon='fa-solid fa-rotate' + icon='las la-redo-alt' flat color='secondary' :loading='loading > 0' diff --git a/ux/src/pages/AdminFlags.vue b/ux/src/pages/AdminFlags.vue index 8d3f73eb..59e224cb 100644 --- a/ux/src/pages/AdminFlags.vue +++ b/ux/src/pages/AdminFlags.vue @@ -11,7 +11,7 @@ q-page.admin-flags icon='las la-question-circle' flat color='grey' - href='https://docs.requarks.io/admin/flags' + href='https://docs.js.wiki/admin/flags' target='_blank' type='a' ) diff --git a/ux/src/pages/AdminGeneral.vue b/ux/src/pages/AdminGeneral.vue index 7b3486a2..200976c1 100644 --- a/ux/src/pages/AdminGeneral.vue +++ b/ux/src/pages/AdminGeneral.vue @@ -16,7 +16,7 @@ q-page.admin-general type='a' ) q-btn.q-mr-sm.acrylic-btn( - icon='fa-solid fa-rotate' + icon='las la-redo-alt' flat color='secondary' :loading='state.loading > 0' @@ -385,7 +385,6 @@ import { onMounted, reactive, watch } from 'vue' import { useAdminStore } from 'src/stores/admin' import { useSiteStore } from 'src/stores/site' import { useDataStore } from 'src/stores/data' -import { useRoute, useRouter } from 'vue-router' // QUASAR @@ -397,11 +396,6 @@ const adminStore = useAdminStore() const siteStore = useSiteStore() const dataStore = useDataStore() -// ROUTER - -const router = useRouter() -const route = useRoute() - // I18N const { t } = useI18n() diff --git a/ux/src/pages/AdminLocale.vue b/ux/src/pages/AdminLocale.vue index c977605b..38d9a339 100644 --- a/ux/src/pages/AdminLocale.vue +++ b/ux/src/pages/AdminLocale.vue @@ -4,15 +4,15 @@ q-page.admin-locale .col-auto img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-language.svg') .col.q-pl-md - .text-h5.text-primary.animated.fadeInLeft {{ $t('admin.locale.title') }} - .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.locale.subtitle') }} + .text-h5.text-primary.animated.fadeInLeft {{ t('admin.locale.title') }} + .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.locale.subtitle') }} .col-auto.flex q-btn.q-mr-md( icon='las la-download' - :label='$t(`admin.locale.downloadNew`)' + :label='t(`admin.locale.downloadNew`)' unelevated color='primary' - :disabled='loading > 0' + :disabled='state.loading > 0' @click='installNewLocale' ) q-separator.q-mr-md(vertical) @@ -20,7 +20,7 @@ q-page.admin-locale icon='las la-question-circle' flat color='grey' - href='https://docs.requarks.io/admin/locale' + href='https://docs.js.wiki/admin/locale' target='_blank' type='a' ) @@ -28,16 +28,16 @@ q-page.admin-locale icon='las la-redo-alt' flat color='secondary' - :loading='loading > 0' + :loading='state.loading > 0' @click='load' ) q-btn( unelevated - icon='mdi-check' - :label='$t(`common.actions.apply`)' + icon='fa-solid fa-check' + :label='t(`common.actions.apply`)' color='secondary' @click='save' - :disabled='loading > 0' + :disabled='state.loading > 0' ) q-separator(inset) .row.q-pa-md.q-col-gutter-md @@ -47,37 +47,37 @@ q-page.admin-locale //- ----------------------- q-card.shadow-1.q-pb-sm q-card-section - .text-subtitle1 {{$t('admin.locale.settings')}} + .text-subtitle1 {{t('admin.locale.settings')}} q-item blueprint-icon(icon='translation') q-item-section - q-item-label {{namespacing ? $t(`admin.locale.base.labelWithNS`) : $t(`admin.locale.base.label`)}} - q-item-label(caption) {{$t(`admin.locale.base.hint`)}} + q-item-label {{state.namespacing ? t(`admin.locale.base.labelWithNS`) : t(`admin.locale.base.label`)}} + q-item-label(caption) {{t(`admin.locale.base.hint`)}} q-item-section q-select( outlined - v-model='selectedLocale' + v-model='state.selectedLocale' :options='installedLocales' option-value='code' option-label='name' emit-value map-options dense - :aria-label='$t(`admin.locale.base.label`)' + :aria-label='t(`admin.locale.base.label`)' ) q-separator.q-my-sm(inset) q-item(tag='label', v-ripple) blueprint-icon(icon='unit') q-item-section - q-item-label {{$t(`admin.locale.namespaces.label`)}} - q-item-label(caption) {{$t(`admin.locale.namespaces.hint`)}} + q-item-label {{t(`admin.locale.namespaces.label`)}} + q-item-label(caption) {{t(`admin.locale.namespaces.hint`)}} q-item-section(avatar) q-toggle( - v-model='namespacing' + v-model='state.namespacing' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.locale.namespaces.label`)' + :aria-label='t(`admin.locale.namespaces.label`)' ) q-item q-item-section @@ -86,21 +86,21 @@ q-page.admin-locale q-card-section.col-auto.q-pr-none q-icon(name='las la-info-circle', size='sm') q-card-section - span {{ $t('admin.locale.namespacingPrefixWarning.title', { langCode: selectedLocale }) }} - .text-caption.text-yellow-1 {{ $t('admin.locale.namespacingPrefixWarning.subtitle') }} + span {{ t('admin.locale.namespacingPrefixWarning.title', { langCode: state.selectedLocale }) }} + .text-caption.text-yellow-1 {{ t('admin.locale.namespacingPrefixWarning.subtitle') }} .col-5 //- ----------------------- //- Namespacing //- ----------------------- - q-card.shadow-1.q-pb-sm(v-if='namespacing') + q-card.shadow-1.q-pb-sm(v-if='state.namespacing') q-card-section - .text-subtitle1 {{$t('admin.locale.activeNamespaces')}} + .text-subtitle1 {{t('admin.locale.activeNamespaces')}} q-item( v-for='(lc, idx) of installedLocales' :key='lc.code' - :tag='lc.code !== selectedLocale ? `label` : null' + :tag='lc.code !== state.selectedLocale ? `label` : null' ) blueprint-icon(:text='lc.code') q-item-section @@ -108,8 +108,8 @@ q-page.admin-locale q-item-label(caption) {{lc.nativeName}} q-item-section(avatar) q-toggle( - :disable='lc.code === selectedLocale' - v-model='namespaces' + :disable='lc.code === state.selectedLocale' + v-model='state.namespaces' :val='lc.code' color='primary' checked-icon='las la-check' @@ -121,8 +121,8 @@ q-page.admin-locale //- q-item //- blueprint-icon(icon='test-passed') //- q-item-section - //- q-item-label {{$t(`admin.locale.activeNamespaces.label`)}} - //- q-item-label(caption) {{$t(`admin.locale.activeNamespaces.hint`)}} + //- q-item-label {{t(`admin.locale.activeNamespaces.label`)}} + //- q-item-label(caption) {{t(`admin.locale.activeNamespaces.hint`)}} //- q-item-section //- q-select( //- outlined @@ -136,204 +136,228 @@ q-page.admin-locale //- emit-value //- map-options //- dense - //- :aria-label='$t(`admin.locale.activeNamespaces.label`)' + //- :aria-label='t(`admin.locale.activeNamespaces.label`)' //- ) - diff --git a/ux/src/pages/AdminLogin.vue b/ux/src/pages/AdminLogin.vue index 0904a37b..e39d4166 100644 --- a/ux/src/pages/AdminLogin.vue +++ b/ux/src/pages/AdminLogin.vue @@ -4,8 +4,8 @@ q-page.admin-login .col-auto img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-bunch-of-keys.svg') .col.q-pl-md - .text-h5.text-primary.animated.fadeInLeft {{ $t('admin.login.title') }} - .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.login.subtitle') }} + .text-h5.text-primary.animated.fadeInLeft {{ t('admin.login.title') }} + .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.login.subtitle') }} .col-auto q-btn.q-mr-sm.acrylic-btn( icon='las la-question-circle' @@ -19,16 +19,16 @@ q-page.admin-login icon='las la-redo-alt' flat color='secondary' - :loading='loading > 0' + :loading='state.loading > 0' @click='load' ) q-btn( unelevated - icon='mdi-check' - :label='$t(`common.actions.apply`)' + icon='fa-solid fa-check' + :label='t(`common.actions.apply`)' color='secondary' @click='save' - :disabled='loading > 0' + :disabled='state.loading > 0' ) q-separator(inset) .row.q-pa-md.q-col-gutter-md @@ -38,12 +38,12 @@ q-page.admin-login //- ----------------------- q-card.shadow-1.q-pb-sm q-card-section - .text-subtitle1 {{$t('admin.login.experience')}} + .text-subtitle1 {{t('admin.login.experience')}} q-item(tag='label', v-ripple) - blueprint-icon(icon='full-image', indicator, :indicator-text='$t(`admin.extensions.requiresSharp`)') + blueprint-icon(icon='full-image', indicator, :indicator-text='t(`admin.extensions.requiresSharp`)') q-item-section - q-item-label {{$t(`admin.login.background`)}} - q-item-label(caption) {{$t(`admin.login.backgroundHint`)}} + q-item-label {{t(`admin.login.background`)}} + q-item-label(caption) {{t(`admin.login.backgroundHint`)}} q-item-section.col-auto q-btn( label='Upload' @@ -56,80 +56,80 @@ q-page.admin-login q-item(tag='label', v-ripple) blueprint-icon(icon='close-pane') q-item-section - q-item-label {{$t(`admin.login.bypassScreen`)}} - q-item-label(caption) {{$t(`admin.login.bypassScreenHint`)}} + q-item-label {{t(`admin.login.bypassScreen`)}} + q-item-label(caption) {{t(`admin.login.bypassScreenHint`)}} q-item-section(avatar) q-toggle( - v-model='config.authAutoLogin' + v-model='state.config.authAutoLogin' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.login.bypassScreen`)' + :aria-label='t(`admin.login.bypassScreen`)' ) q-separator.q-my-sm(inset) q-item(tag='label', v-ripple) blueprint-icon(icon='no-access') q-item-section - q-item-label {{$t(`admin.login.bypassUnauthorized`)}} - q-item-label(caption) {{$t(`admin.login.bypassUnauthorizedHint`)}} + q-item-label {{t(`admin.login.bypassUnauthorized`)}} + q-item-label(caption) {{t(`admin.login.bypassUnauthorizedHint`)}} q-item-section(avatar) q-toggle( - v-model='config.authBypassUnauthorized' + v-model='state.config.authBypassUnauthorized' color='primary' checked-icon='las la-check' unchecked-icon='las la-times' - :aria-label='$t(`admin.login.bypassUnauthorized`)' + :aria-label='t(`admin.login.bypassUnauthorized`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='double-right') q-item-section - q-item-label {{$t(`admin.login.loginRedirect`)}} - q-item-label(caption) {{$t(`admin.login.loginRedirectHint`)}} + q-item-label {{t(`admin.login.loginRedirect`)}} + q-item-label(caption) {{t(`admin.login.loginRedirectHint`)}} q-item-section q-input( outlined - v-model='config.loginRedirect' + v-model='state.config.loginRedirect' dense :rules=`[ - val => invalidCharsRegex.test(val) || $t('admin.login.loginRedirectInvalidChars') + val => state.invalidCharsRegex.test(val) || t('admin.login.loginRedirectInvalidChars') ]` hide-bottom-space - :aria-label='$t(`admin.login.loginRedirect`)' + :aria-label='t(`admin.login.loginRedirect`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='chevron-right') q-item-section - q-item-label {{$t(`admin.login.welcomeRedirect`)}} - q-item-label(caption) {{$t(`admin.login.welcomeRedirectHint`)}} + q-item-label {{t(`admin.login.welcomeRedirect`)}} + q-item-label(caption) {{t(`admin.login.welcomeRedirectHint`)}} q-item-section q-input( outlined - v-model='config.welcomeRedirect' + v-model='state.config.welcomeRedirect' dense :rules=`[ - val => invalidCharsRegex.test(val) || $t('admin.login.welcomeRedirectInvalidChars') + val => state.invalidCharsRegex.test(val) || t('admin.login.welcomeRedirectInvalidChars') ]` hide-bottom-space - :aria-label='$t(`admin.login.welcomeRedirect`)' + :aria-label='t(`admin.login.welcomeRedirect`)' ) q-separator.q-my-sm(inset) q-item blueprint-icon(icon='exit') q-item-section - q-item-label {{$t(`admin.login.logoutRedirect`)}} - q-item-label(caption) {{$t(`admin.login.logoutRedirectHint`)}} + q-item-label {{t(`admin.login.logoutRedirect`)}} + q-item-label(caption) {{t(`admin.login.logoutRedirectHint`)}} q-item-section q-input( outlined - v-model='config.logoutRedirect' + v-model='state.config.logoutRedirect' dense :rules=`[ - val => invalidCharsRegex.test(val) || $t('admin.login.logoutRedirectInvalidChars') + val => state.invalidCharsRegex.test(val) || t('admin.login.logoutRedirectInvalidChars') ]` hide-bottom-space - :aria-label='$t(`admin.login.logoutRedirect`)' + :aria-label='t(`admin.login.logoutRedirect`)' ) .col-12.col-lg-6 @@ -138,11 +138,11 @@ q-page.admin-login //- ----------------------- q-card.shadow-1.q-pb-sm q-card-section - .text-subtitle1 {{$t('admin.login.providers')}} + .text-subtitle1 {{t('admin.login.providers')}} q-card-section.admin-login-providers.q-pt-none draggable( class='q-list rounded-borders' - :list='providers' + :list='state.providers' :animation='150' handle='.handle' @end='dragStarted = false' @@ -171,117 +171,137 @@ q-page.admin-login q-card-section.items-center(horizontal) q-card-section.col-auto.q-pr-none q-icon(name='las la-info-circle', size='sm') - q-card-section.text-caption {{ $t('admin.login.providersVisbleWarning') }} + q-card-section.text-caption {{ t('admin.login.providersVisbleWarning') }} -