Skip to content

Commit

Permalink
fix(files): Correctly validate new node name
Browse files Browse the repository at this point in the history 
* Resolves #45409

This includes two fixes:
1. The name in the "new node" dialog is correctly selected (e.g. `file.txt` only `file` is selected by default), to allow quick naming
2. `@nextcloud/files` functions for filename validation are used, this allows to use new Nextcloud 30 capabilities (e.g. reserved names)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
@susnux
susnux committed Jul 25, 2024
1 parent 21428cc commit cfa878e
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 170 deletions.
6 changes: 3 additions & 3 deletions apps/files/src/components/FileEntry/FileEntryName.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
class="files-list__row-name-link"
data-cy-files-list-row-name-link
v-bind="linkTo.params">
<!-- File name -->
<!-- Filename -->
<span class="files-list__row-name-text">
<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
<span class="files-list__row-name-" v-text="basename" />
Expand Down Expand Up @@ -123,7 +123,7 @@ export default defineComponent({

renameLabel() {
const matchLabel: Record<FileType, string> = {
[FileType.File]: t('files', 'File name'),
[FileType.File]: t('files', 'Filename'),
[FileType.Folder]: t('files', 'Folder name'),
}
return matchLabel[this.source.type]
Expand Down Expand Up @@ -173,7 +173,7 @@ export default defineComponent({

watch: {
/**
* If renaming starts, select the file name
* If renaming starts, select the filename
* in the input, without the extension.
* @param renaming
*/
Expand Down
279 changes: 112 additions & 167 deletions apps/files/src/components/NewNodeDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,205 +8,150 @@
:open="open"
close-on-click-outside
out-transition
@update:open="onClose">
@update:open="emit('close', null)">
<template #actions>
<NcButton data-cy-files-new-node-dialog-submit
type="primary"
:disabled="!isUniqueName"
@click="onCreate">
:disabled="validity !== ''"
@click="submit">
{{ t('files', 'Create') }}
</NcButton>
</template>
<form @submit.prevent="onCreate">
<NcTextField ref="input"
<form ref="formElement"
class="new-node-dialog__form"
@submit.prevent="emit('close', localDefaultName)">
<NcTextField ref="nameInput"
data-cy-files-new-node-dialog-input
class="dialog__input"
:error="!isUniqueName"
:helper-text="errorMessage"
:error="validity !== ''"
:helper-text="validity"
:label="label"
:value.sync="localDefaultName"
@keyup="checkInputValidity" />
:value.sync="localDefaultName" />
</form>
</NcDialog>
</template>

<script lang="ts">
import type { PropType } from 'vue'

import { defineComponent } from 'vue'
import { translate as t } from '@nextcloud/l10n'
<script setup lang="ts">
import type { ComponentPublicInstance, PropType } from 'vue'
import { getUniqueName } from '@nextcloud/files'
import { loadState } from '@nextcloud/initial-state'
import { t } from '@nextcloud/l10n'
import { extname } from 'path'
import { nextTick, onMounted, ref, watch, watchEffect } from 'vue'
import { getFilenameValidity } from '../utils/filenameValidity.ts'

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import logger from '../logger.js'

interface ICanFocus {
focus: () => void
}

const forbiddenCharacters = loadState<string[]>('files', 'forbiddenCharacters', [])

export default defineComponent({
name: 'NewNodeDialog',
components: {
NcButton,
NcDialog,
NcTextField,
const props = defineProps({
/**
* The name to be used by default
*/
defaultName: {
type: String,
default: t('files', 'New folder'),
},
props: {
/**
* The name to be used by default
*/
defaultName: {
type: String,
default: t('files', 'New folder'),
},
/**
* Other files that are in the current directory
*/
otherNames: {
type: Array as PropType<string[]>,
default: () => [],
},
/**
* Open state of the dialog
*/
open: {
type: Boolean,
default: true,
},
/**
* Dialog name
*/
name: {
type: String,
default: t('files', 'Create new folder'),
},
/**
* Input label
*/
label: {
type: String,
default: t('files', 'Folder name'),
},
/**
* Other files that are in the current directory
*/
otherNames: {
type: Array as PropType<string[]>,
default: () => [],
},
emits: {
close: (name: string|null) => name === null || name,
/**
* Open state of the dialog
*/
open: {
type: Boolean,
default: true,
},
data() {
return {
localDefaultName: this.defaultName || t('files', 'New folder'),
}
/**
* Dialog name
*/
name: {
type: String,
default: t('files', 'Create new folder'),
},
computed: {
errorMessage() {
if (this.isUniqueName) {
return ''
} else {
return t('files', 'A file or folder with that name already exists.')
}
},
uniqueName() {
return getUniqueName(this.localDefaultName, this.otherNames)
},
isUniqueName() {
return this.localDefaultName === this.uniqueName
},
/**
* Input label
*/
label: {
type: String,
default: t('files', 'Folder name'),
},
watch: {
defaultName() {
this.localDefaultName = this.defaultName || t('files', 'New folder')
},
})

/**
* Ensure the input is focussed even if the dialog is already mounted but not open
*/
open() {
this.$nextTick(() => this.focusInput())
},
},
mounted() {
// on mounted lets use the unique name
this.localDefaultName = this.uniqueName
this.$nextTick(() => this.focusInput())
},
methods: {
t,
const emit = defineEmits<{
(event: 'close', name: string | null): void
}>()

const localDefaultName = ref<string>(props.defaultName)
const nameInput = ref<ComponentPublicInstance>()
const formElement = ref<HTMLFormElement>()
const validity = ref('')

/**
* Focus the filename input field
*/
function focusInput() {
nextTick(() => {
// get the input element
const input = nameInput.value?.$el.querySelector('input')
if (!props.open || !input) {
return
}

/**
* Focus the filename input field
*/
focusInput() {
if (this.open) {
this.$nextTick(() => (this.$refs.input as unknown as ICanFocus)?.focus?.())
}
},
// length of the basename
const length = localDefaultName.value.length - extname(localDefaultName.value).length
// focus the input
input.focus()
// and set the selection to the basename (name without extension)
input.setSelectionRange(0, length)
})
}

onCreate() {
this.$emit('close', this.localDefaultName)
},
onClose(state: boolean) {
if (!state) {
this.$emit('close', null)
}
},
/**
* Trigger submit on the form
*/
function submit() {
formElement.value?.requestSubmit()
}

/**
* Check if the file name is valid and update the
* input validity using browser's native validation.
* @param event the keyup event
*/
checkInputValidity(event: KeyboardEvent) {
const input = event.target as HTMLInputElement
const newName = this.localDefaultName.trim?.() || ''
logger.debug('Checking input validity', { newName })
try {
this.isFileNameValid(newName)
input.setCustomValidity('')
input.title = ''
} catch (e) {
if (e instanceof Error) {
input.setCustomValidity(e.message)
input.title = e.message
} else {
input.setCustomValidity(t('files', 'Invalid file name'))
}
} finally {
input.reportValidity()
}
},
// Reset local name on props change
watch(() => props.defaultName, () => {
localDefaultName.value = getUniqueName(props.defaultName, props.otherNames)
})

isFileNameValid(name: string) {
const trimmedName = name.trim()
const char = trimmedName.indexOf('/') !== -1
? '/'
: forbiddenCharacters.find((char) => trimmedName.includes(char))
// Validate the local name
watchEffect(() => {
if (props.otherNames.includes(localDefaultName.value)) {
validity.value = t('files', 'This name is already in use.')
} else {
validity.value = getFilenameValidity(localDefaultName.value)
}
const input = nameInput.value?.$el.querySelector('input')
if (input) {
input.setCustomValidity(validity.value)
input.reportValidity()
}
})

if (trimmedName === '.' || trimmedName === '..') {
throw new Error(t('files', '"{name}" is an invalid file name.', { name }))
} else if (trimmedName.length === 0) {
throw new Error(t('files', 'File name cannot be empty.'))
} else if (char) {
throw new Error(t('files', '"{char}" is not allowed inside a file name.', { char }))
} else if (trimmedName.match(window.OC.config.blacklist_files_regex)) {
throw new Error(t('files', '"{name}" is not an allowed filetype.', { name }))
}
// Ensure the input is focussed even if the dialog is already mounted but not open
watch(() => props.open, () => {
nextTick(() => {
focusInput()
})
})

return true
},
},
onMounted(() => {
// on mounted lets use the unique name
localDefaultName.value = getUniqueName(localDefaultName.value, props.otherNames)
nextTick(() => focusInput())
})
</script>

<style lang="scss" scoped>
.dialog__input {
:deep(input:invalid) {
// Show red border on invalid input
border-color: var(--color-error);
color: red;
}
<style scoped>
.new-node-dialog__form {
/* Ensure the dialog does not jump when there is a validity error */
min-height: calc(3 * var(--default-clickable-area));
}
</style>
Loading

0 comments on commit cfa878e

Please sign in to comment.