feat(#22): show error message and prevent creation on faulty file names

src/app/app.module.ts

@@ -23,7 +23,6 @@ import { CreateNewLabelComponent } from './components/_labels/createNewLabel/cre
 import { LabelTreeComponent } from './components/_labels/labelTree/labelTree.component';
 import { DocumentTreeComponent } from './components/_documents/documentTree/documentTree.component';
 import { UpsertNoteComponent } from './components/_notes/upsertNote/upsertNote.component';
-import { CheckForNameSafetyDirective } from './directives/checkForNameSafety.directive';
 import { TagDialogComponent } from './components/_snapshots/tagDialog/tagDialog.component';
 import { LastModifiedComponent } from './components/lastModified/lastModified.component';
 import { CreateNewItemDialogComponent } from './components/createNewItemDialog/createNewItemDialog.component';
@@ -111,7 +110,6 @@ const matModules = [
     TagDialogComponent,
     LastModifiedComponent,
     UpsertNoteComponent,
-    CheckForNameSafetyDirective,
     DocumentTreeComponent,
     LabelTreeComponent,
     CreateNewLabelComponent,

src/app/components/_snapshots/tagDialog/tagDialog.component.html

@@ -12,7 +12,7 @@ <h1 mat-dialog-title>{{ t('title') }}</h1>
     <p>{{ t('message', { date: data.lastSnapshotDate }) }}</p>
     <mat-form-field>
       <mat-label>{{ t('input') }}</mat-label>
-      <input matInput wyCheckForNameSafety="tag" [(ngModel)]="data.tagname" />
+      <input matInput [(ngModel)]="data.tagname" />
       <mat-error *ngIf="!isTagNameValid">BOOOOH!</mat-error>
     </mat-form-field>
   </div>

src/app/components/createNewItemDialog/createNewItemDialog.component.html

@@ -8,15 +8,21 @@
 
 <span *transloco="let t; read: typeOfDialog">
   <h1 mat-dialog-title>{{ t('title') }}</h1>
-  <div mat-dialog-content>
-    <p class="message">{{ t('message') }}</p>
-    <mat-form-field>
-      <mat-label>{{ t('input') }}</mat-label>
-      <input (keyup.enter)="submit()" matInput [(ngModel)]="data.filename" />
-    </mat-form-field>
-  </div>
-  <div mat-dialog-actions>
-    <button mat-button (click)="cancel()">{{ t('cancel') }}</button>
-    <button mat-raised-button color="primary" (click)="submit()">{{ t('submit') }}</button>
-  </div>
+  <form [formGroup]="form" (ngSubmit)="submit(form.value)">
+    <div mat-dialog-content>
+      <p class="message">{{ t('message') }}</p>
+      <mat-form-field>
+        <mat-label>{{ t('input') }}</mat-label>
+        <input matInput (keyup.enter)="submit(form.value)" required formControlName="name" />
+      </mat-form-field>
+      <mat-error *ngIf="form.get('name').errors?.forbiddenName"
+        >{{ 'createDirOrFile.forbiddenName' | transloco }}
+      </mat-error>
+      <mat-error *ngIf="form.get('name').errors?.required">{{ 'createDirOrFile.required' | transloco }} </mat-error>
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button type="button" (click)="cancel()">{{ t('cancel') }}</button>
+      <button mat-raised-button color="primary" type="submit" [disabled]="form.invalid">{{ t('submit') }}</button>
+    </div>
+  </form>
 </span>

src/app/components/createNewItemDialog/createNewItemDialog.component.scss

@@ -1,5 +1,5 @@
 // Copyright (c) 2020 s-blu
-// 
+//
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -12,3 +12,8 @@ input {
 .message {
   padding: 1em 0;
 }
+
+mat-error {
+  margin-top: -1.8em;
+  font-size: 10px;
+}

src/app/components/createNewItemDialog/createNewItemDialog.component.ts

@@ -1,19 +1,30 @@
 // Copyright (c) 2020 s-blu
-// 
+//
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormControl, FormBuilder } from '@angular/forms';
+import { NameSafetyValidator } from 'src/app/directives/nameSafetyValidator';
+import { slideInDownAnimation, slideInDownOnEnterAnimation } from 'angular-animations';
 
 @Component({
   selector: 'wy-createNewFileDialog',
   templateUrl: './createNewItemDialog.component.html',
   styleUrls: ['./createNewItemDialog.component.scss'],
+  animations: [slideInDownOnEnterAnimation()],
 })
 export class CreateNewItemDialogComponent implements OnInit {
   typeOfDialog = '';
+  form;
+
+  constructor(
+    public dialogRef: MatDialogRef<CreateNewItemDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data,
+    private formBuilder: FormBuilder
+  ) {}
 
   ngOnInit() {
     switch (this.data.typeOfDialog) {
@@ -30,15 +41,17 @@ export class CreateNewItemDialogComponent implements OnInit {
         this.typeOfDialog = 'createUnkownDialog';
         break;
     }
-  }
 
-  constructor(public dialogRef: MatDialogRef<CreateNewItemDialogComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
+    this.form = this.formBuilder.group({
+      name: new FormControl('', [NameSafetyValidator()]),
+    });
+  }
 
   cancel(): void {
-    this.dialogRef.close();
+    this.dialogRef.close(null);
   }
 
-  submit() {
-    this.dialogRef.close(this.data.filename);
+  submit(values) {
+    this.dialogRef.close(values.name);
   }
 }

src/app/directives/nameSafetyValidator.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2020 s-blu
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+export function NameSafetyValidator(typeToCheck = 'explorer') {
+  const nameValidator = (control: AbstractControl): { [key: string]: boolean } | null => {
+    const forbidden = regex.test(control.value);
+    return forbidden ? { forbiddenName: true } : null;
+  };
+
+  const forbiddenCharatersRe = {
+    explorer: /([/\\<>\*\?:\'"])+/,
+    tag: /([\s\.~\^:\?\*\[@\\])+/,
+  };
+  const regex = forbiddenCharatersRe[typeToCheck];
+  return regex ? nameValidator : null;
+}

src/assets/i18n/de.json

@@ -97,7 +97,9 @@
     "lastSnapshotted": "Letzte Sicherung vom"
   },
   "createDirOrFile": {
-    "alreadyInUse": "Dieser Name ist bereits vergeben. Bitte wähle einen anderen."
+    "alreadyInUse": "Dieser Name ist bereits vergeben. Bitte wähle einen anderen.",
+    "forbiddenName": "Folgende Zeichen dürfen nicht verwendet werden: < > : / \\ * ? \" | ",
+    "required": "Bitte gib einen Namen ein."
   },
   "createFileDialog": {
     "title": "Neues Dokument erstellen",

src/assets/i18n/en.json

@@ -97,7 +97,9 @@
     "lastSnapshotted": "Last snapshotted on"
   },
   "createDirOrFile": {
-    "alreadyInUse": "This name is already in use. Please choose a different one."
+    "alreadyInUse": "This name is already in use. Please choose a different one.",
+    "forbiddenName": "The following characters cannot be used: < > : / \\ * ? \" | ",
+    "required": "Please input a name"
   },
   "createFileDialog": {
     "title": "Create new document",