Added folder name validation (#3965)

Co-authored-by: Ramin Haeri Azad <rhaeri@maelstrom-reseach.org>
obiba · Oct 25, 2024 · dfc45f3 · dfc45f3
1 parent 73fd874
commit dfc45f3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 15 deletions.
diff --git a/opal-ui/src/components/files/AddFolderDialog.vue b/opal-ui/src/components/files/AddFolderDialog.vue
@@ -8,23 +8,27 @@
       <q-separator />
 
       <q-card-section>
-        <q-input
-          v-model="newFolder"
-          dense
-          autofocus
-          type="text"
-          :label="$t('name')"
-          style="width: 300px"
-          class="q-mb-md"
-        >
-        </q-input>
+        <q-form ref="formRef">
+          <q-input
+            v-model="newFolder"
+            dense
+            autofocus
+            type="text"
+            :label="$t('name')"
+            style="width: 300px"
+            class="q-mb-md"
+            lazy-rules
+            :rules="[validateFolderName]"
+          >
+          </q-input>
+        </q-form>
       </q-card-section>
 
       <q-separator />
 
       <q-card-actions align="right" class="bg-grey-3">
         <q-btn flat :label="$t('cancel')" color="secondary" v-close-popup />
-        <q-btn flat :label="$t('add')" color="primary" :disable="newFolder === ''" @click="onAddFolder" v-close-popup />
+        <q-btn flat :label="$t('add')" color="primary" :disable="newFolder === ''" @click="onAddFolder" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -37,19 +41,36 @@ export default defineComponent({
 </script>
 <script setup lang="ts">
 import { FileDto } from 'src/models/Opal';
+import { notifyError } from 'src/utils/notify';
 
 interface DialogProps {
   modelValue: boolean;
   file: FileDto;
 }
 
+const { t } = useI18n();
+const INVALID_CHARS = ['%', '#'];
 const props = defineProps<DialogProps>();
 const emit = defineEmits(['update:modelValue']);
 
 const filesStore = useFilesStore();
 
 const showDialog = ref(props.modelValue);
 const newFolder = ref<string>('');
+const formRef = ref();
+
+// Validators
+const validateFolderName = (value: string) => {
+  if (!!value) {
+    if (INVALID_CHARS.some((char) => value.includes(char))) {
+      return t('validation.folder.invalid_chars', { chars: INVALID_CHARS.join(', ') });
+    } else if (['.', '..'].indexOf(value) !== -1) {
+      return t('validation.folder.dot_name');
+    }
+  }
+
+  return true;
+};
 
 watch(
   () => props.modelValue,
@@ -65,9 +86,17 @@ function onHide() {
   emit('update:modelValue', false);
 }
 
-function onAddFolder() {
-  filesStore.addFolder(props.file.path, newFolder.value).then(() => {
-    filesStore.loadFiles(props.file.path);
-  });
+async function onAddFolder() {
+  const valid = await formRef.value.validate();
+
+  if (valid) {
+    try {
+      await filesStore.addFolder(props.file.path, newFolder.value);
+      filesStore.loadFiles(props.file.path);
+      onHide();
+    } catch (error) {
+      notifyError(error);
+    }
+  }
 }
 </script>
diff --git a/opal-ui/src/i18n/en/index.js b/opal-ui/src/i18n/en/index.js
@@ -522,6 +522,10 @@ export default {
     identifiers_required: 'Identifiers are required',
     table_name_required: 'Table name is required',
     missing_required_fields: 'Missing required fields',
+    folder: {
+      invalid_chars: 'Folder names cannot contain: \'{chars}\'',
+      dot_name: 'The names \'.\' and \'..\' are not permitted',
+    },
     password_min_length: 'Password must be at least {min} characters long',
     user: {
       password_required: 'Password is required and must be at least 8 characters long',

diff --git a/opal-ui/src/i18n/fr/index.js b/opal-ui/src/i18n/fr/index.js
@@ -522,6 +522,10 @@ export default {
     identifiers_required: 'Les identifiants sont requis',
     table_name_required: 'Le nom de la table est requis',
     missing_required_fields: 'Champs obligatoires manquants',
+    folder: {
+      invalid_chars: 'Le nom du dossier ne peut pas contenir: \'{chars}\'',
+      dot_name: 'Les noms \'.\' et \'..\' ne sont pas autorisés',
+    },
     password_min_length: 'Le mot de passe doit comporter au moins {min} caractères',
     user: {
       password_required: 'Le mot de passe est requis et doit comporter au moins 8 caractères',