diff options
Diffstat (limited to 'apps/settings/src/components/AuthTokenList.vue')
| -rw-r--r-- | apps/settings/src/components/AuthTokenList.vue | 146 |
1 files changed, 44 insertions, 102 deletions
diff --git a/apps/settings/src/components/AuthTokenList.vue b/apps/settings/src/components/AuthTokenList.vue index 491b672d59a..dbe3b9596d8 100644 --- a/apps/settings/src/components/AuthTokenList.vue +++ b/apps/settings/src/components/AuthTokenList.vue @@ -1,135 +1,77 @@ <!-- - - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at> - - - - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - --> + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <table id="app-tokens-table"> - <thead v-if="tokens.length"> + <table id="app-tokens-table" class="token-list"> + <thead> <tr> - <th /> - <th>{{ t('settings', 'Device') }}</th> - <th>{{ t('settings', 'Last activity') }}</th> - <th /> + <th class="token-list__header-device"> + {{ t('settings', 'Device') }} + </th> + <th class="toke-list__header-activity"> + {{ t('settings', 'Last activity') }} + </th> + <th> + <span class="hidden-visually"> + {{ t('settings', 'Actions') }} + </span> + </th> </tr> </thead> - <tbody class="token-list"> + <tbody class="token-list__body"> <AuthToken v-for="token in sortedTokens" :key="token.id" - :token="token" - @toggle-scope="toggleScope" - @rename="rename" - @delete="onDelete" - @wipe="onWipe" /> + :token="token" /> </tbody> </table> </template> -<script> -import AuthToken from './AuthToken' +<script lang="ts"> +import { translate as t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' +import { useAuthTokenStore } from '../store/authtoken' -export default { +import AuthToken from './AuthToken.vue' + +export default defineComponent({ name: 'AuthTokenList', components: { AuthToken, }, - props: { - tokens: { - type: Array, - required: true, - }, + setup() { + const authTokenStore = useAuthTokenStore() + return { authTokenStore } }, computed: { sortedTokens() { - return this.tokens.slice().sort((t1, t2) => { - const ts1 = parseInt(t1.lastActivity, 10) - const ts2 = parseInt(t2.lastActivity, 10) - return ts2 - ts1 - }) + return [...this.authTokenStore.tokens].sort((t1, t2) => t2.lastActivity - t1.lastActivity) }, }, methods: { - toggleScope(token, scope, value) { - // Just pass it on - this.$emit('toggle-scope', token, scope, value) - }, - rename(token, newName) { - // Just pass it on - this.$emit('rename', token, newName) - }, - onDelete(token) { - // Just pass it on - this.$emit('delete', token) - }, - onWipe(token) { - // Just pass it on - this.$emit('wipe', token) - }, + t, }, -} +}) </script> <style lang="scss" scoped> - table { - width: 100%; - min-height: 50px; - padding-top: 5px; - max-width: 580px; +.token-list { + width: 100%; + min-height: 50px; + padding-top: 5px; + max-width: fit-content; - th { - opacity: .5; - padding: 10px 0; - } + th { + padding-block: 10px; + padding-inline-start: 10px; } - .token-list { - td > a.icon-more { - transition: opacity var(--animation-quick); - } - - a.icon-more { - padding: 14px; - display: block; - width: 44px; - height: 44px; - opacity: .5; - } - - tr { - &:hover td > a.icon, - td > a.icon:focus, - &.active td > a.icon { - opacity: 1; - } - } + #{&}__header-device { + padding-inline-start: 50px; // 44px icon + 6px padding } -</style> - -<!-- some styles are not scoped to make them work on subcomponents --> -<style lang="scss"> - #app-tokens-table { - tr > *:nth-child(2) { - padding-left: 6px; - } - - tr > *:nth-child(3) { - text-align: right; - } + &__header-activity { + text-align: end; } +} </style> |