Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable28] enh(settings): Refactor UI for session and app token management #42430

Merged
merged 2 commits into from
Jan 17, 2024
Merged

[stable28] enh(settings): Refactor UI for session and app token management #42430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe60c1e
enh(settings): Refactor frontend for session and app token management
susnux Dec 16, 2023
eb8724c
chore: Compile assets
susnux Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
319 changes: 189 additions & 130 deletions apps/settings/src/components/AuthToken.vue
View file
Open in desktop

Large diffs are not rendered by default.

122 changes: 41 additions & 81 deletions apps/settings/src/components/AuthTokenList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
- @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-
- @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- @author Ferdinand Thiessen <opensource@fthiessen.de>
-
- @license GNU AGPL version 3 or any later version
-
Expand All @@ -20,115 +21,74 @@
-->

<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>
<script lang="ts">
import { translate as t } from '@nextcloud/l10n'
import { defineComponent } from 'vue'
import { useAuthTokenStore } from '../store/authtoken'

import AuthToken from './AuthToken.vue'

export default {
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 {
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>
157 changes: 13 additions & 144 deletions apps/settings/src/components/AuthTokenSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
- @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-
- @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- @author Ferdinand Thiessen <opensource@fthiessen.de>
-
- @license GNU AGPL version 3 or any later version
-
Expand All @@ -25,164 +26,32 @@
<p class="settings-hint hidden-when-empty">
{{ t('settings', 'Web, desktop and mobile clients currently logged in to your account.') }}
</p>
<AuthTokenList :tokens="tokens"
@toggle-scope="toggleTokenScope"
@rename="rename"
@delete="deleteToken"
@wipe="wipeToken" />
<AuthTokenSetupDialogue v-if="canCreateToken" :add="addNewToken" />
<AuthTokenList />
<AuthTokenSetup v-if="canCreateToken" />
</div>
</template>

<script>
import axios from '@nextcloud/axios'
import { confirmPassword } from '@nextcloud/password-confirmation'
import '@nextcloud/password-confirmation/dist/style.css'
import { generateUrl } from '@nextcloud/router'
<script lang="ts">
import { loadState } from '@nextcloud/initial-state'
import { translate as t } from '@nextcloud/l10n'
import { defineComponent } from 'vue'

import AuthTokenList from './AuthTokenList.vue'
import AuthTokenSetupDialogue from './AuthTokenSetupDialogue.vue'
import AuthTokenSetup from './AuthTokenSetup.vue'

const confirm = () => {
return new Promise(resolve => {
OC.dialogs.confirm(
t('settings', 'Do you really want to wipe your data from this device?'),
t('settings', 'Confirm wipe'),
resolve,
true,
)
})
}

/**
* Tap into a promise without losing the value
*
* @param {Function} cb the callback
* @return {any} val the value
*/
const tap = cb => val => {
cb(val)
return val
}

export default {
export default defineComponent({
name: 'AuthTokenSection',
components: {
AuthTokenSetupDialogue,
AuthTokenList,
},
props: {
tokens: {
type: Array,
required: true,
},
canCreateToken: {
type: Boolean,
required: true,
},
AuthTokenSetup,
},
data() {
return {
baseUrl: generateUrl('/settings/personal/authtokens'),
canCreateToken: loadState('settings', 'can_create_app_token'),
}
},
methods: {
addNewToken(name) {
console.debug('creating a new app token', name)

const data = {
name,
}
return axios.post(this.baseUrl, data)
.then(resp => resp.data)
.then(tap(() => console.debug('app token created')))
// eslint-disable-next-line vue/no-mutating-props
.then(tap(data => this.tokens.push(data.deviceToken)))
.catch(err => {
console.error.bind('could not create app password', err)
OC.Notification.showTemporary(t('settings', 'Error while creating device token'))
throw err
})
},
toggleTokenScope(token, scope, value) {
console.debug('updating app token scope', token.id, scope, value)

const oldVal = token.scope[scope]
token.scope[scope] = value

return this.updateToken(token)
.then(tap(() => console.debug('app token scope updated')))
.catch(err => {
console.error.bind('could not update app token scope', err)
OC.Notification.showTemporary(t('settings', 'Error while updating device token scope'))

// Restore
token.scope[scope] = oldVal

throw err
})
},
rename(token, newName) {
console.debug('renaming app token', token.id, token.name, newName)

const oldName = token.name
token.name = newName

return this.updateToken(token)
.then(tap(() => console.debug('app token name updated')))
.catch(err => {
console.error.bind('could not update app token name', err)
OC.Notification.showTemporary(t('settings', 'Error while updating device token name'))

// Restore
token.name = oldName
})
},
updateToken(token) {
return axios.put(this.baseUrl + '/' + token.id, token)
.then(resp => resp.data)
},
deleteToken(token) {
console.debug('deleting app token', token)

// eslint-disable-next-line vue/no-mutating-props
this.tokens = this.tokens.filter(t => t !== token)

return axios.delete(this.baseUrl + '/' + token.id)
.then(resp => resp.data)
.then(tap(() => console.debug('app token deleted')))
.catch(err => {
console.error.bind('could not delete app token', err)
OC.Notification.showTemporary(t('settings', 'Error while deleting the token'))

// Restore
// eslint-disable-next-line vue/no-mutating-props
this.tokens.push(token)
})
},
async wipeToken(token) {
console.debug('wiping app token', token)

try {
await confirmPassword()

if (!(await confirm())) {
console.debug('wipe aborted by user')
return
}
await axios.post(this.baseUrl + '/wipe/' + token.id)
console.debug('app token marked for wipe')

token.type = 2
} catch (err) {
console.error('could not wipe app token', err)
OC.Notification.showTemporary(t('settings', 'Error while wiping the device with the token'))
}
},
t,
},
}
})
</script>

<style scoped>

</style>
Loading
Loading