Skip to content

Commit 4453fd2

Browse files
susnuxsusnux
committed
refactor(PublicAuthPrompt): adjust code style to match the library (script-setup)
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
1 parent 1ad982d commit 4453fd2

4 files changed

Lines changed: 131 additions & 181 deletions

File tree

‎lib/components/PublicAuthPrompt.vue‎

Lines changed: 127 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,134 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55

6+
<script setup lang="ts">
7+
import { computed, ref, useTemplateRef, watch } from 'vue'
8+
import { getBuilder } from '@nextcloud/browser-storage'
9+
import { setGuestNickname } from '@nextcloud/auth'
10+
import { showError } from '@nextcloud/dialogs'
11+
12+
import NcDialog from '@nextcloud/vue/components/NcDialog'
13+
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
14+
import NcTextField from '@nextcloud/vue/components/NcTextField'
15+
16+
import { t } from '../utils/l10n.ts'
17+
18+
export interface PublicAuthPromptProps {
19+
/**
20+
* Preselected nickname.
21+
* No name preselected by default.
22+
*/
23+
nickname?: string,
24+
25+
/**
26+
* Dialog title
27+
*/
28+
title?: string
29+
30+
/**
31+
* Dialog text under the dialog title.
32+
* e.g 'Enter your name to access the file'.
33+
* Not shown by default.
34+
*/
35+
text?: string
36+
37+
/**
38+
* Dialog notice
39+
*/
40+
notice?: string
41+
42+
/**
43+
* Dialog submit button label
44+
*/
45+
submitLabel?: string
46+
47+
/**
48+
* Whether the dialog is cancellable
49+
*/
50+
cancellable?: boolean
51+
}
52+
53+
const props = withDefaults(defineProps<PublicAuthPromptProps>(), {
54+
title: t('Guest identification'),
55+
nickname: '',
56+
notice: t('You are currently not identified.'),
57+
submitLabel: t('Submit name'),
58+
})
59+
60+
const emit = defineEmits<{
61+
close: [nickname?: string]
62+
}>()
63+
64+
const inputElement = useTemplateRef('input')
65+
const storage = getBuilder('public').build()
66+
67+
const name = ref(props.nickname)
68+
watch(() => props.nickname, () => {
69+
// Reset name to pre-selected nickname (e.g. Talk / Collabora)
70+
name.value = props.nickname
71+
})
72+
73+
const buttons = computed(() => {
74+
const cancelButton = {
75+
label: t('Cancel'),
76+
variant: 'tertiary',
77+
callback: () => emit('close'),
78+
} as const
79+
80+
const submitButton = {
81+
label: props.submitLabel,
82+
type: 'submit',
83+
variant: 'primary',
84+
} as const
85+
86+
// If the dialog is cancellable, add a cancel button
87+
if (props.cancellable) {
88+
return [cancelButton, submitButton]
89+
}
90+
91+
return [submitButton]
92+
})
93+
94+
function onSubmit() {
95+
const nickname = name.value.trim()
96+
97+
if (nickname === '') {
98+
// Show error if the nickname is empty
99+
inputElement.value.setCustomValidity(t('You cannot leave the name empty.'))
100+
inputElement.value.reportValidity()
101+
inputElement.value.focus()
102+
return
103+
}
104+
105+
if (nickname.length < 2) {
106+
// Show error if the nickname is too short
107+
inputElement.value.setCustomValidity(t('Please enter a name with at least 2 characters.'))
108+
inputElement.value.reportValidity()
109+
inputElement.value.focus()
110+
return
111+
}
112+
113+
try {
114+
// Set the nickname
115+
setGuestNickname(nickname)
116+
} catch (e) {
117+
showError(t('Failed to set nickname.'))
118+
console.error('Failed to set nickname', e)
119+
inputElement.value.focus()
120+
return
121+
}
122+
123+
// Set the dialog as shown
124+
storage.setItem('public-auth-prompt-shown', 'true')
125+
126+
// Close the dialog
127+
emit('close', name.value)
128+
}
129+
</script>
130+
6131
<template>
7-
<NcDialog :buttons="dialogButtons"
132+
<NcDialog
133+
:buttons
8134
class="public-auth-prompt"
9135
data-cy-public-auth-prompt-dialog
10136
is-form
@@ -33,173 +159,6 @@
33159
</NcDialog>
34160
</template>
35161

36-
<script lang="ts">
37-
import { defineComponent } from 'vue'
38-
import { getBuilder } from '@nextcloud/browser-storage'
39-
import { setGuestNickname } from '@nextcloud/auth'
40-
import { showError } from '@nextcloud/dialogs'
41-
42-
import NcButton from '@nextcloud/vue/components/NcButton'
43-
import NcDialog from '@nextcloud/vue/components/NcDialog'
44-
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
45-
import NcTextField from '@nextcloud/vue/components/NcTextField'
46-
47-
import { t } from '../utils/l10n.ts'
48-
49-
const storage = getBuilder('public').build()
50-
51-
export default defineComponent({
52-
name: 'PublicAuthPrompt',
53-
54-
components: {
55-
NcDialog,
56-
NcNoteCard,
57-
NcTextField,
58-
},
59-
60-
props: {
61-
/**
62-
* Preselected nickname
63-
* @default '' No name preselected by default
64-
*/
65-
nickname: {
66-
type: String,
67-
default: '',
68-
},
69-
70-
/**
71-
* Dialog title
72-
*/
73-
title: {
74-
type: String,
75-
default: t('Guest identification'),
76-
},
77-
78-
/**
79-
* Dialog text under the dialog title
80-
* e.g 'Enter your name to access the file'
81-
* @default '' Not shown by default
82-
*/
83-
text: {
84-
type: String,
85-
default: '',
86-
},
87-
88-
/**
89-
* Dialog notice
90-
* @default 'You are currently not identified.'
91-
*/
92-
notice: {
93-
type: String,
94-
default: t('You are currently not identified.'),
95-
},
96-
97-
/**
98-
* Dialog submit button label
99-
* @default 'Submit name'
100-
*/
101-
submitLabel: {
102-
type: String,
103-
default: t('Submit name'),
104-
},
105-
106-
/**
107-
* Whether the dialog is cancellable
108-
* @default false
109-
*/
110-
cancellable: {
111-
type: Boolean,
112-
default: false,
113-
},
114-
},
115-
116-
setup() {
117-
return {
118-
t,
119-
}
120-
},
121-
122-
emits: ['close'],
123-
124-
data() {
125-
return {
126-
name: '',
127-
}
128-
},
129-
130-
computed: {
131-
dialogButtons() {
132-
const cancelButton = {
133-
label: t('Cancel'),
134-
variant: 'tertiary',
135-
callback: () => this.$emit('close'),
136-
}
137-
138-
const submitButton = {
139-
label: this.submitLabel,
140-
type: 'submit',
141-
variant: 'primary',
142-
}
143-
144-
// If the dialog is cancellable, add a cancel button
145-
if (this.cancellable) {
146-
return [cancelButton, submitButton]
147-
}
148-
149-
return [submitButton]
150-
},
151-
},
152-
153-
watch: {
154-
/** Reset name to pre-selected nickname (e.g. Talk / Collabora ) */
155-
nickname: {
156-
handler() {
157-
this.name = this.nickname
158-
},
159-
immediate: true,
160-
},
161-
},
162-
163-
methods: {
164-
onSubmit() {
165-
const input = this.$refs.input as HTMLInputElement
166-
const nickname = this.name.trim()
167-
168-
if (nickname === '') {
169-
// Show error if the nickname is empty
170-
input.setCustomValidity(t('You cannot leave the name empty.'))
171-
input.reportValidity()
172-
input.focus()
173-
return
174-
}
175-
176-
if (nickname.length < 2) {
177-
// Show error if the nickname is too short
178-
input.setCustomValidity(t('Please enter a name with at least 2 characters.'))
179-
input.reportValidity()
180-
input.focus()
181-
return
182-
}
183-
184-
try {
185-
// Set the nickname
186-
setGuestNickname(nickname)
187-
} catch (e) {
188-
showError(t('Failed to set nickname.'))
189-
console.error('Failed to set nickname', e)
190-
input.focus()
191-
return
192-
}
193-
194-
// Set the dialog as shown
195-
storage.setItem('public-auth-prompt-shown', 'true')
196-
197-
// Close the dialog
198-
this.$emit('close', this.name)
199-
},
200-
},
201-
})
202-
</script>
203162
<style scoped lang="scss">
204163
.public-auth-prompt {
205164
&__text {

‎lib/public-auth.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55

6-
import type { ComponentProps } from 'vue-component-type-helpers'
6+
import type { PublicAuthPromptProps } from './components/PublicAuthPrompt.vue'
7+
78
import { defineAsyncComponent } from 'vue'
89
import { spawnDialog } from '@nextcloud/vue/functions/dialog'
910

10-
import type PublicAuthPrompt from './components/PublicAuthPrompt.vue'
11-
12-
type PublicAuthPromptProps = ComponentProps<typeof PublicAuthPrompt>
13-
1411
/**
1512
* Show the public auth prompt dialog
1613
* This is used to ask the current user their nickname

‎package-lock.json‎

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

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"extends": "@vue/tsconfig",
33
"compilerOptions": {
4+
"allowImportingTsExtensions": true,
45
"declaration": true,
56
"esModuleInterop": true,
67
"lib": ["DOM", "ESNext"],
78
"outDir": "./dist",
89
"rootDir": "lib/",
910
"module": "ESNext",
10-
"moduleResolution": "Bundler",
11+
"moduleResolution": "bundler",
1112
"target": "ESNext",
1213
"plugins": [
1314
{ "name": "typescript-plugin-css-modules" }

0 commit comments

Comments
 (0)