Skip to content

Commit 4b06a9c

Browse files
pringelmannpringelmann
committed
refactor(settings): tighten auth-token dialog components
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
1 parent 5e827ff commit 4b06a9c

5 files changed

Lines changed: 103 additions & 170 deletions

File tree

‎apps/settings/src/components/AuthToken.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,12 @@
8585
<AuthTokenDeleteDialog
8686
v-if="deleteDialogOpen"
8787
:token="token"
88-
:open="deleteDialogOpen"
89-
@update:open="deleteDialogOpen = $event"
88+
:open.sync="deleteDialogOpen"
9089
@confirm="confirmDelete" />
9190
<AuthTokenWipeDialog
9291
v-if="wipeDialogOpen"
9392
:token="token"
94-
:open="wipeDialogOpen"
95-
@update:open="wipeDialogOpen = $event"
93+
:open.sync="wipeDialogOpen"
9694
@confirm="confirmWipe" />
9795
</tr>
9896
</template>

‎apps/settings/src/components/AuthTokenDeleteDialog.vue‎

Lines changed: 60 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,121 +3,83 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55

6-
<template>
7-
<NcDialog
8-
:open="open"
9-
:name="copy.title"
10-
:buttons="buttons"
11-
size="normal"
12-
@update:open="onUpdateOpen">
13-
<NcNoteCard v-if="wiping" type="error">
14-
<p class="auth-token-delete-dialog__warning-headline">
15-
<strong>{{ t('settings', 'Remote wipe has not started yet.') }}</strong>
16-
</p>
17-
<p>
18-
{{ t('settings', 'Revoking now cancels the wipe. The device keeps its synced data.') }}
19-
</p>
20-
</NcNoteCard>
21-
<p class="auth-token-delete-dialog__body">
22-
{{ copy.body }}
23-
</p>
24-
</NcDialog>
25-
</template>
26-
27-
<script lang="ts">
6+
<script setup lang="ts">
287
import type { IDialogButton } from '@nextcloud/dialogs'
29-
import type { PropType } from 'vue'
308
import type { IToken } from '../store/authtoken.ts'
319
3210
import { translate as t } from '@nextcloud/l10n'
33-
import { defineComponent } from 'vue'
11+
import { computed } from 'vue'
3412
import NcDialog from '@nextcloud/vue/components/NcDialog'
3513
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
3614
import { TokenType } from '../store/authtoken.ts'
3715
38-
export default defineComponent({
39-
name: 'AuthTokenDeleteDialog',
16+
const props = defineProps<{
17+
/** The token being revoked */
18+
token: IToken
19+
/** Whether the dialog is open */
20+
open: boolean
21+
}>()
4022
41-
components: {
42-
NcDialog,
43-
NcNoteCard,
44-
},
45-
46-
props: {
47-
token: {
48-
type: Object as PropType<IToken>,
49-
required: true,
50-
},
51-
52-
open: {
53-
type: Boolean,
54-
required: true,
55-
},
56-
},
23+
const emit = defineEmits<{
24+
'update:open': [open: boolean]
25+
confirm: []
26+
}>()
5727
58-
emits: {
59-
'update:open': (open: boolean) => typeof open === 'boolean',
60-
confirm: () => true,
61-
},
28+
const wiping = computed(() => props.token.type === TokenType.WIPING_TOKEN)
6229
63-
computed: {
64-
wiping(): boolean {
65-
return this.token.type === TokenType.WIPING_TOKEN
66-
},
67-
68-
copy(): { title: string, body: string, action: string } {
69-
if (this.wiping) {
70-
return {
71-
title: t('settings', 'Revoke and cancel pending wipe?'),
72-
body: t('settings', 'Only continue if you no longer need the device to be wiped.'),
73-
action: t('settings', 'Revoke and cancel wipe'),
74-
}
75-
}
76-
return {
77-
title: t('settings', 'Revoke app password?'),
78-
body: t('settings', 'The app or device will lose access on its next sync. This cannot be undone.'),
79-
action: t('settings', 'Revoke'),
80-
}
81-
},
30+
const messages = computed(() => {
31+
if (wiping.value) {
32+
return {
33+
title: t('settings', 'Revoke and cancel pending wipe?'),
34+
body: t('settings', 'Only continue if you no longer need the device to be wiped.'),
35+
action: t('settings', 'Revoke and cancel wipe'),
36+
}
37+
}
38+
return {
39+
title: t('settings', 'Revoke app password?'),
40+
body: t('settings', 'The app or device will lose access on its next sync. This cannot be undone.'),
41+
action: t('settings', 'Revoke'),
42+
}
43+
})
8244
83-
buttons(): IDialogButton[] {
84-
return [
85-
{
86-
label: t('settings', 'Cancel'),
87-
variant: 'tertiary',
88-
callback: () => {
89-
this.$emit('update:open', false)
90-
},
91-
},
92-
{
93-
label: this.copy.action,
94-
variant: 'error',
95-
callback: () => {
96-
this.$emit('confirm')
97-
this.$emit('update:open', false)
98-
},
99-
},
100-
]
101-
},
45+
const buttons = computed<IDialogButton[]>(() => [
46+
{
47+
label: t('settings', 'Cancel'),
48+
variant: 'tertiary',
49+
callback: () => emit('update:open', false),
10250
},
103-
104-
methods: {
105-
t,
106-
onUpdateOpen(value: boolean): void {
107-
this.$emit('update:open', value)
51+
{
52+
label: messages.value.action,
53+
variant: 'error',
54+
callback: () => {
55+
emit('confirm')
56+
emit('update:open', false)
10857
},
10958
},
110-
})
59+
])
11160
</script>
11261

113-
<style lang="scss" scoped>
114-
.auth-token-delete-dialog {
115-
&__warning-headline {
116-
margin-block-end: calc(var(--default-grid-baseline) / 2);
117-
}
62+
<template>
63+
<NcDialog
64+
:open="open"
65+
:name="messages.title"
66+
:buttons="buttons"
67+
size="normal"
68+
@update:open="emit('update:open', $event)">
69+
<NcNoteCard
70+
v-if="wiping"
71+
:heading="t('settings', 'Remote wipe has not started yet.')"
72+
type="error">
73+
{{ t('settings', 'Revoking now cancels the wipe. The device keeps its synced data.') }}
74+
</NcNoteCard>
75+
<p class="auth-token-delete-dialog__body">
76+
{{ messages.body }}
77+
</p>
78+
</NcDialog>
79+
</template>
11880

119-
&__body {
120-
margin-block-start: calc(var(--default-grid-baseline) * 2);
121-
}
81+
<style lang="scss" scoped>
82+
.auth-token-delete-dialog__body {
83+
margin-block-start: calc(var(--default-grid-baseline) * 2);
12284
}
12385
</style>

‎apps/settings/src/components/AuthTokenWipeDialog.vue‎

Lines changed: 38 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,79 +3,52 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55

6+
<script setup lang="ts">
7+
import type { IDialogButton } from '@nextcloud/dialogs'
8+
import type { IToken } from '../store/authtoken.ts'
9+
10+
import { translate as t } from '@nextcloud/l10n'
11+
import { computed } from 'vue'
12+
import NcDialog from '@nextcloud/vue/components/NcDialog'
13+
14+
defineProps<{
15+
/** The token to wipe. Kept for prop-shape parity with AuthTokenDeleteDialog. */
16+
token: IToken
17+
/** Whether the dialog is open */
18+
open: boolean
19+
}>()
20+
21+
const emit = defineEmits<{
22+
'update:open': [open: boolean]
23+
confirm: []
24+
}>()
25+
26+
const buttons = computed<IDialogButton[]>(() => [
27+
{
28+
label: t('settings', 'Cancel'),
29+
variant: 'tertiary',
30+
callback: () => emit('update:open', false),
31+
},
32+
{
33+
label: t('settings', 'Wipe device'),
34+
variant: 'error',
35+
callback: () => {
36+
emit('confirm')
37+
emit('update:open', false)
38+
},
39+
},
40+
])
41+
</script>
42+
643
<template>
744
<NcDialog
845
:open="open"
946
:name="t('settings', 'Confirm wipe')"
1047
:buttons="buttons"
1148
size="normal"
12-
@update:open="onUpdateOpen">
49+
@update:open="emit('update:open', $event)">
1350
<p>
1451
{{ t('settings', 'Do you really want to wipe your data from this device?') }}
1552
</p>
1653
</NcDialog>
1754
</template>
18-
19-
<script lang="ts">
20-
import type { IDialogButton } from '@nextcloud/dialogs'
21-
import type { PropType } from 'vue'
22-
import type { IToken } from '../store/authtoken.ts'
23-
24-
import { translate as t } from '@nextcloud/l10n'
25-
import { defineComponent } from 'vue'
26-
import NcDialog from '@nextcloud/vue/components/NcDialog'
27-
28-
export default defineComponent({
29-
name: 'AuthTokenWipeDialog',
30-
31-
components: {
32-
NcDialog,
33-
},
34-
35-
props: {
36-
token: {
37-
type: Object as PropType<IToken>,
38-
required: true,
39-
},
40-
41-
open: {
42-
type: Boolean,
43-
required: true,
44-
},
45-
},
46-
47-
emits: {
48-
'update:open': (open: boolean) => typeof open === 'boolean',
49-
confirm: () => true,
50-
},
51-
52-
computed: {
53-
buttons(): IDialogButton[] {
54-
return [
55-
{
56-
label: t('settings', 'Cancel'),
57-
variant: 'tertiary',
58-
callback: () => {
59-
this.$emit('update:open', false)
60-
},
61-
},
62-
{
63-
label: t('settings', 'Wipe device'),
64-
variant: 'error',
65-
callback: () => {
66-
this.$emit('confirm')
67-
this.$emit('update:open', false)
68-
},
69-
},
70-
]
71-
},
72-
},
73-
74-
methods: {
75-
t,
76-
onUpdateOpen(value: boolean): void {
77-
this.$emit('update:open', value)
78-
},
79-
},
80-
})
81-
</script>

‎dist/settings-vue-settings-personal-security.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/settings-vue-settings-personal-security.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)