diff --git a/app/models/file.ts b/app/models/file.ts index 8a0477df9b8..8cb7d2e1fc5 100644 --- a/app/models/file.ts +++ b/app/models/file.ts @@ -22,6 +22,9 @@ export interface FileLinks extends BaseFileLinks { render?: Link; } +// Character that need to be excluded: ()<>~!@$&*:;,'"\|/? +export const forbiddenFileNameCharacters = /[()<>~!@$&*:;,"\\|/?]/; + export default class FileModel extends BaseFileItem { @attr() links!: FileLinks; @attr('fixstring') name!: string; diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts index 378f5d28d8b..bfb8e33d84d 100644 --- a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts +++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/component.ts @@ -1,7 +1,9 @@ +import { inject as service } from '@ember/service'; +import Intl from 'ember-intl/services/intl'; import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; -import { taskFor } from 'ember-concurrency-ts'; +import { forbiddenFileNameCharacters } from 'ember-osf-web/models/file'; import StorageManager from 'osf-components/components/storage-provider-manager/storage-manager/component'; interface Args { @@ -10,9 +12,31 @@ interface Args { } export default class CreateFolderModal extends Component { + @service intl!: Intl; @tracked newFolderName = ''; - get shouldDisable() { - return taskFor(this.args.manager.createNewFolder).isRunning || !this.newFolderName; + get isInvalid() { + const trimmedName = this.newFolderName.trim(); + return !trimmedName || this.containsForbiddenChars || this.endsWithDot; + } + + get containsForbiddenChars() { + return this.newFolderName && forbiddenFileNameCharacters.test(this.newFolderName); + } + + get endsWithDot() { + return this.newFolderName && this.newFolderName.endsWith('.'); + } + + get errorText() { + let errorTextKey = 'osf-components.file-browser.create_folder.error_'; + if (this.containsForbiddenChars) { + errorTextKey += 'forbidden_chars'; + } else if (this.endsWithDot) { + errorTextKey += 'ends_with_dot'; + } else { + errorTextKey += 'message'; + } + return this.intl.t(errorTextKey); } } diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss new file mode 100644 index 00000000000..f76ec5d3ac0 --- /dev/null +++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/styles.scss @@ -0,0 +1,10 @@ +.RenameInput { + min-width: 50vw; + width: 100%; +} + +.ErrorText { + color: $color-text-gray; + font-style: italic; + font-weight: 400; +} diff --git a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs index f38522e20fb..bfc01efa6ab 100644 --- a/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs +++ b/lib/osf-components/addon/components/file-browser/add-new/create-folder-modal/template.hbs @@ -3,10 +3,10 @@ @onClose={{queue (action (mut @isOpen) false) (action (mut this.newFolderName) '')}} as |dialog| > - + {{t 'osf-components.file-browser.create_folder.title'}} - +