From 6a78d65dc397c614c6c5478b8cf29a811a6d6626 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Thu, 14 Feb 2019 14:17:17 +0100
Subject: [PATCH] Remove redundant Submits

Remove concurrent ngSubmit
Some cleanup and code alignment
---
 .../agenda/item-repository.service.ts         |   1 -
 .../agenda-list/agenda-list.component.ts      |   7 +-
 .../item-info-dialog.component.html           |   2 +-
 .../topic-detail/topic-detail.component.html  |   8 +-
 .../reset-password-confirm.component.html     |  24 +-
 .../reset-password.component.html             |  17 +-
 .../mediafile-list.component.html             | 251 +++++++++---------
 .../amendment-create-wizard.component.html    |   3 +-
 .../motion-detail.component.html              |   8 +-
 .../tag-list/tag-list.component.html          |  27 +-
 .../user-detail/user-detail.component.html    |  10 +-
 11 files changed, 193 insertions(+), 165 deletions(-)

diff --git a/client/src/app/core/repositories/agenda/item-repository.service.ts b/client/src/app/core/repositories/agenda/item-repository.service.ts
index 7d7f5ef20..bd419e1a9 100644
--- a/client/src/app/core/repositories/agenda/item-repository.service.ts
+++ b/client/src/app/core/repositories/agenda/item-repository.service.ts
@@ -82,7 +82,6 @@ export class ItemRepositoryService extends BaseRepository<ViewItem, Item> {
 
     /**
      * Returns the corresponding content object to a given {@link Item} as an {@link AgendaBaseViewModel}
-     * Used dynamically because of heavy race conditions
      *
      * @param agendaItem the target agenda Item
      * @returns the content object of the given item. Might be null if it was not found.
diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts
index a5a97aaa4..3da97eea3 100644
--- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts
+++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts
@@ -111,14 +111,13 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem> impleme
 
     /**
      * Links to the content object.
-     * Gets content object from the repository rather than from the model
-     * to avoid race conditions
      *
      * @param item the item that was selected from the list view
      */
     public singleSelectAction(item: ViewItem): void {
-        const contentObject = this.repo.getContentObject(item.item);
-        this.router.navigate([contentObject.getDetailStateURL()]);
+        if (item.contentObject) {
+            this.router.navigate([item.contentObject.getDetailStateURL()]);
+        }
     }
 
     /**
diff --git a/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html b/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html
index 582dad015..b99c789bb 100644
--- a/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html
+++ b/client/src/app/site/agenda/components/item-info-dialog/item-info-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>{{ 'Edit details for' | translate }} {{ item.getTitle() }}</h1>
 <div mat-dialog-content>
-    <form class="itemDialogForm" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)" (ngSubmit)="saveItemInfo()">
+    <form class="itemDialogForm" [formGroup]="agendaInfoForm" (keydown)="onKeyDown($event)">
         <!-- Visibility -->
         <mat-form-field>
             <mat-select formControlName="type" placeholder="{{ 'Agenda visibility' | translate }}">
diff --git a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html
index ecbb57e08..f32dc2beb 100644
--- a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html
+++ b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html
@@ -10,7 +10,7 @@
     <!-- Title -->
     <div class="title-slot">
         <h2>
-            <span *ngIf="newTopic " translate>New topic</span>
+            <span *ngIf="newTopic" translate>New topic</span>
             <span *ngIf="editTopic && !newTopic" translate>Edit topic</span>
             <span *ngIf="!newTopic && !editTopic" translate>Topic</span>
         </h2>
@@ -24,9 +24,7 @@
     </div>
 </os-head-bar>
 
-<mat-card *ngIf="topic || editTopic"
-        [ngClass]="editTopic ? 'os-form-card' : 'os-card'"
-        class="on-transition-fade">
+<mat-card *ngIf="topic || editTopic" [ngClass]="editTopic ? 'os-form-card' : 'os-card'" class="on-transition-fade">
     <div *ngIf="!editTopic">
         <h1>{{ topic.title }}</h1>
     </div>
@@ -49,7 +47,7 @@
         </h3>
     </div>
 
-    <form *ngIf="editTopic" [formGroup]="topicForm" (keydown)="onKeyDown($event)" (ngSubmit)="saveTopic()">
+    <form *ngIf="editTopic" [formGroup]="topicForm" (keydown)="onKeyDown($event)">
         <div>
             <mat-form-field>
                 <input
diff --git a/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html b/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html
index 6c6f68539..3edb91b15 100644
--- a/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html
+++ b/client/src/app/site/login/components/reset-password-confirm/reset-password-confirm.component.html
@@ -2,14 +2,28 @@
     <form [formGroup]="newPasswordForm" (ngSubmit)="submitNewPassword()">
         <h3 translate>Please enter your new password</h3>
         <mat-form-field>
-            <input matInput required placeholder="{{ 'New password' | translate }}" formControlName="password" type="password">
+            <input
+                matInput
+                required
+                placeholder="{{ 'New password' | translate }}"
+                formControlName="password"
+                type="password"
+            />
             <mat-error *ngIf="newPasswordForm.get('password').hasError('required')" translate>
                 A password is required
             </mat-error>
         </mat-form-field>
-        <br>
-        <button mat-raised-button color="primary" class="submit-button" [disabled]="newPasswordForm.invalid"
-            type="submit" translate>Reset password</button>
-        <button mat-button class="back-button" routerLink="/login" translate>Back to login</button>
+        <br />
+        <button
+            type="submit"
+            mat-raised-button
+            color="primary"
+            class="submit-button"
+            [disabled]="newPasswordForm.invalid"
+            translate
+        >
+            Reset password
+        </button>
+        <button type="button" class="back-button" routerLink="/login" translate>Back to login</button>
     </form>
 </div>
diff --git a/client/src/app/site/login/components/reset-password/reset-password.component.html b/client/src/app/site/login/components/reset-password/reset-password.component.html
index a575164ba..f966313b9 100644
--- a/client/src/app/site/login/components/reset-password/reset-password.component.html
+++ b/client/src/app/site/login/components/reset-password/reset-password.component.html
@@ -2,14 +2,21 @@
     <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()">
         <h3 translate>Enter your email to send the password reset link</h3>
         <mat-form-field>
-            <input matInput required placeholder="{{ 'Email' | translate }}" formControlName="email" type="email">
+            <input matInput required placeholder="{{ 'Email' | translate }}" formControlName="email" type="email" />
             <mat-error *ngIf="resetPasswordForm.get('email').invalid" translate>
                 Please enter a valid email address!
             </mat-error>
         </mat-form-field>
-        <br>
-        <button mat-raised-button color="primary" class="submit-button" [disabled]="resetPasswordForm.invalid"
-            type="submit">{{ 'Reset password' | translate }}</button>&nbsp;
-        <button mat-button routerLink="/login">{{ 'Back' | translate }}</button>
+        <br />
+        <button
+            type="submit"
+            mat-raised-button
+            color="primary"
+            class="submit-button"
+            [disabled]="resetPasswordForm.invalid"
+        >
+            {{ 'Reset password' | translate }}</button
+        >&nbsp;
+        <button type="button" mat-button routerLink="/login">{{ 'Back' | translate }}</button>
     </form>
 </div>
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
index fdd6306c0..85ed20422 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
@@ -3,7 +3,8 @@
     [editMode]="editFile"
     [multiSelectMode]="isMultiSelect"
     (mainEvent)="onMainEvent()"
-    (saveEvent)="onSaveEditedFile()">
+    (saveEvent)="onSaveEditedFile()"
+>
     <!-- Title -->
     <div class="title-slot">
         <h2 *ngIf="!editFile" translate>Files</h2>
@@ -13,7 +14,8 @@
             *ngIf="editFile"
             [formGroup]="fileEditForm"
             (ngSubmit)="onSaveEditedFile()"
-            (keydown)="keyDownFunction($event)">
+            (keydown)="keyDownFunction($event)"
+        >
             <mat-form-field>
                 <input
                     type="text"
@@ -21,7 +23,8 @@
                     osAutofocus
                     required
                     formControlName="title"
-                    placeholder="{{ 'New file name' | translate }}"/>
+                    placeholder="{{ 'New file name' | translate }}"
+                />
                 <mat-error *ngIf="fileEditForm.invalid" translate>Required</mat-error>
             </mat-form-field>
 
@@ -45,135 +48,143 @@
         <button mat-icon-button (click)="toggleMultiSelect()"><mat-icon>arrow_back</mat-icon></button>
         <span>{{ selectedRows.length }}&nbsp;</span><span translate>selected</span>
     </div>
-
 </os-head-bar>
 
 <mat-drawer-container class="on-transition-fade">
-<os-sort-filter-bar [filterCount]="filteredCount" [sortService]="sortService" [filterService]="filterService"
-    (searchFieldChange)="searchFilter($event)">
-</os-sort-filter-bar>
-<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
-    <!-- Selector Column -->
-    <ng-container matColumnDef="selector">
-        <mat-header-cell *matHeaderCellDef mat-sort-header class="icon-cell"></mat-header-cell>
-        <mat-cell *matCellDef="let item" class="icon-cell" (click)="selectItem(item, $event)">
-            <mat-icon>{{ isSelected(item) ? 'check_circle' : '' }}</mat-icon>
-        </mat-cell>
-    </ng-container>
+    <os-sort-filter-bar
+        [filterCount]="filteredCount"
+        [sortService]="sortService"
+        [filterService]="filterService"
+        (searchFieldChange)="searchFilter($event)"
+    >
+    </os-sort-filter-bar>
+    <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+        <!-- Selector Column -->
+        <ng-container matColumnDef="selector">
+            <mat-header-cell *matHeaderCellDef mat-sort-header class="icon-cell"></mat-header-cell>
+            <mat-cell *matCellDef="let item" class="icon-cell" (click)="selectItem(item, $event)">
+                <mat-icon>{{ isSelected(item) ? 'check_circle' : '' }}</mat-icon>
+            </mat-cell>
+        </ng-container>
 
-    <!-- Filename -->
-    <ng-container matColumnDef="title">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">{{ file.title }}</mat-cell>
-    </ng-container>
+        <!-- Filename -->
+        <ng-container matColumnDef="title">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+            <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">{{ file.title }}</mat-cell>
+        </ng-container>
 
-    <!-- Info -->
-    <ng-container matColumnDef="info">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
-        <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
-            <div class="file-info-cell">
-                <span> <mat-icon [inline]="true">insert_drive_file</mat-icon> {{ file.type }} </span>
-                <span> <mat-icon [inline]="true">data_usage</mat-icon> {{ file.size }} </span>
+        <!-- Info -->
+        <ng-container matColumnDef="info">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Group</mat-header-cell>
+            <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
+                <div class="file-info-cell">
+                    <span> <mat-icon [inline]="true">insert_drive_file</mat-icon> {{ file.type }} </span>
+                    <span> <mat-icon [inline]="true">data_usage</mat-icon> {{ file.size }} </span>
+                </div>
+            </mat-cell>
+        </ng-container>
+
+        <!-- indicator -->
+        <ng-container matColumnDef="indicator">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Indicator</mat-header-cell>
+            <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
+                <!-- check if the file is managed -->
+
+                <div
+                    *ngIf="getFileSettings(file).length > 0"
+                    [matMenuTriggerFor]="singleFileMenu"
+                    [matMenuTriggerData]="{ file: file }"
+                    [matTooltip]="formatIndicatorTooltip(file)"
+                >
+                    <mat-icon *ngIf="file.isFont()">text_fields</mat-icon>
+                    <mat-icon *ngIf="file.isImage()">insert_photo</mat-icon>
+                </div>
+            </mat-cell>
+        </ng-container>
+
+        <!-- menu -->
+        <ng-container matColumnDef="menu">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Menu</mat-header-cell>
+            <mat-cell *matCellDef="let file">
+                <button mat-icon-button [matMenuTriggerFor]="singleFileMenu" [matMenuTriggerData]="{ file: file }">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+            </mat-cell>
+        </ng-container>
+
+        <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
+        <mat-row
+            *matRowDef="let row; columns: getColumnDefinition()"
+            [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
+        ></mat-row>
+    </mat-table>
+
+    <mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+
+    <mat-menu #singleFileMenu="matMenu">
+        <ng-template matMenuContent let-file="file">
+            <!-- Exclusive for images -->
+            <div *ngIf="file.isImage()">
+                <div *ngFor="let action of logoActions">
+                    <ng-container
+                        *ngTemplateOutlet="manageButton; context: { file: file, action: action }"
+                    ></ng-container>
+                </div>
             </div>
-        </mat-cell>
-    </ng-container>
 
-    <!-- indicator -->
-    <ng-container matColumnDef="indicator">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Indicator</mat-header-cell>
-        <mat-cell *matCellDef="let file" (click)="selectItem(file, $event)">
-            <!-- check if the file is managed -->
-
-            <div
-                *ngIf="getFileSettings(file).length > 0"
-                [matMenuTriggerFor]="singleFileMenu"
-                [matMenuTriggerData]="{ file: file }"
-                [matTooltip]="formatIndicatorTooltip(file)">
-                <mat-icon *ngIf="file.isFont()">text_fields</mat-icon>
-                <mat-icon *ngIf="file.isImage()">insert_photo</mat-icon>
+            <!-- Exclusive for fonts -->
+            <div *ngIf="file.isFont()">
+                <div *ngFor="let action of fontActions">
+                    <ng-container
+                        *ngTemplateOutlet="manageButton; context: { file: file, action: action }"
+                    ></ng-container>
+                </div>
             </div>
-        </mat-cell>
-    </ng-container>
 
-    <!-- menu -->
-    <ng-container matColumnDef="menu">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Menu</mat-header-cell>
-        <mat-cell *matCellDef="let file">
-            <button mat-icon-button [matMenuTriggerFor]="singleFileMenu" [matMenuTriggerData]="{ file: file }">
-                <mat-icon>more_vert</mat-icon>
+            <!-- Edit and delete for all images -->
+            <mat-divider></mat-divider>
+            <button mat-menu-item (click)="onEditFile(file)">
+                <mat-icon>edit</mat-icon>
+                <span translate>Edit</span>
             </button>
-        </mat-cell>
-    </ng-container>
+            <button mat-menu-item class="red-warning-text" (click)="onDelete(file)">
+                <mat-icon>delete</mat-icon>
+                <span translate>Delete</span>
+            </button>
+        </ng-template>
+    </mat-menu>
 
-    <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
-    <mat-row
-        *matRowDef="let row; columns: getColumnDefinition()"
-        [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
-    ></mat-row>
-</mat-table>
-
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
-
-<mat-menu #singleFileMenu="matMenu">
-    <ng-template matMenuContent let-file="file">
-        <!-- Exclusive for images -->
-        <div *ngIf="file.isImage()">
-            <div *ngFor="let action of logoActions">
-                <ng-container *ngTemplateOutlet="manageButton; context: { file: file, action: action }"></ng-container>
-            </div>
-        </div>
-
-        <!-- Exclusive for fonts -->
-        <div *ngIf="file.isFont()">
-            <div *ngFor="let action of fontActions">
-                <ng-container *ngTemplateOutlet="manageButton; context: { file: file, action: action }"></ng-container>
-            </div>
-        </div>
-
-        <!-- Edit and delete for all images -->
-        <mat-divider></mat-divider>
-        <button mat-menu-item (click)="onEditFile(file)">
-            <mat-icon>edit</mat-icon>
-            <span translate>Edit</span>
-        </button>
-        <button mat-menu-item class="red-warning-text" (click)="onDelete(file)">
-            <mat-icon>delete</mat-icon>
-            <span translate>Delete</span>
+    <!-- Template for the managing buttons -->
+    <ng-template #manageButton let-file="file" let-action="action">
+        <button mat-menu-item (click)="onManageButton($event, file, action)">
+            <mat-icon color="accent"> {{ isUsedAs(file, action) ? 'check_box' : 'check_box_outline_blank' }} </mat-icon>
+            <span>{{ getNameOfAction(action) }}</span>
         </button>
     </ng-template>
-</mat-menu>
 
-<!-- Template for the managing buttons -->
-<ng-template #manageButton let-file="file" let-action="action">
-    <button mat-menu-item (click)="onManageButton($event, file, action)">
-        <mat-icon color="accent"> {{ isUsedAs(file, action) ? 'check_box' : 'check_box_outline_blank' }} </mat-icon>
-        <span>{{ getNameOfAction(action) }}</span>
-    </button>
-</ng-template>
-
-<!-- Menu for Mediafiles -->
-<mat-menu #mediafilesMenu="matMenu">
-    <div *ngIf="!isMultiSelect">
-        <button mat-menu-item *osPerms="'mediafiles.can_manage'" (click)="toggleMultiSelect()">
-            <mat-icon>library_add</mat-icon>
-            <span translate>Multiselect</span>
-        </button>
-    </div>
-    <div *ngIf="isMultiSelect">
-        <mat-divider></mat-divider>
-        <button mat-menu-item (click)="selectAll()">
-            <mat-icon>done_all</mat-icon>
-            <span translate>Select all</span>
-        </button>
-        <button mat-menu-item (click)="deselectAll()">
-            <mat-icon>clear</mat-icon>
-            <span translate>Deselect all</span>
-        </button>
-        <mat-divider></mat-divider>
-        <button mat-menu-item *ngIf="canEdit" (click)="deleteSelected()">
-            <mat-icon>delete</mat-icon>
-            <span translate>Delete</span>
-        </button>
-    </div>
-</mat-menu>
+    <!-- Menu for Mediafiles -->
+    <mat-menu #mediafilesMenu="matMenu">
+        <div *ngIf="!isMultiSelect">
+            <button mat-menu-item *osPerms="'mediafiles.can_manage'" (click)="toggleMultiSelect()">
+                <mat-icon>library_add</mat-icon>
+                <span translate>Multiselect</span>
+            </button>
+        </div>
+        <div *ngIf="isMultiSelect">
+            <mat-divider></mat-divider>
+            <button mat-menu-item (click)="selectAll()">
+                <mat-icon>done_all</mat-icon>
+                <span translate>Select all</span>
+            </button>
+            <button mat-menu-item (click)="deselectAll()">
+                <mat-icon>clear</mat-icon>
+                <span translate>Deselect all</span>
+            </button>
+            <mat-divider></mat-divider>
+            <button mat-menu-item *osPerms="'mediafiles.can_manage'" (click)="deleteSelected()">
+                <mat-icon>delete</mat-icon>
+                <span translate>Delete</span>
+            </button>
+        </div>
+    </mat-menu>
 </mat-drawer-container>
diff --git a/client/src/app/site/motions/components/amendment-create-wizard/amendment-create-wizard.component.html b/client/src/app/site/motions/components/amendment-create-wizard/amendment-create-wizard.component.html
index 2d7ec9fe0..71e2cceb0 100644
--- a/client/src/app/site/motions/components/amendment-create-wizard/amendment-create-wizard.component.html
+++ b/client/src/app/site/motions/components/amendment-create-wizard/amendment-create-wizard.component.html
@@ -26,7 +26,8 @@
                     type="button"
                     mat-button
                     matStepperNext
-                    [disabled]="contentForm.value.selectedParagraph === null">
+                    [disabled]="contentForm.value.selectedParagraph === null"
+                >
                     <span translate>Next</span>
                 </button>
             </div>
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
index 95dd67938..7643038ce 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
@@ -420,13 +420,7 @@
 </ng-template>
 
 <ng-template #contentTemplate>
-    <form
-        class="motion-content"
-        [formGroup]="contentForm"
-        (keydown)="onKeyDown($event)"
-        (ngSubmit)="saveMotion()"
-        *ngIf="motion"
-    >
+    <form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)" *ngIf="motion">
         <!-- Line Number and Diff buttons -->
         <div *ngIf="!editMotion && !motion.isStatuteAmendment()" class="motion-text-controls">
             <mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened">
diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.html b/client/src/app/site/tags/components/tag-list/tag-list.component.html
index 031a29810..f91af2e71 100644
--- a/client/src/app/site/tags/components/tag-list/tag-list.component.html
+++ b/client/src/app/site/tags/components/tag-list/tag-list.component.html
@@ -1,12 +1,24 @@
-<os-head-bar [mainButton]="true" [nav]="true" [editMode]="editTag"
-    (mainEvent)="setEditMode(!editTag)" (saveEvent)="saveTag()" [multiSelectMode]="isMultiSelect">>
+<os-head-bar
+    [mainButton]="true"
+    [nav]="true"
+    [editMode]="editTag"
+    (mainEvent)="setEditMode(!editTag)"
+    (saveEvent)="saveTag()"
+    [multiSelectMode]="isMultiSelect"
+>
     <!-- Title -->
     <div class="title-slot">
         <h2 *ngIf="!editTag && !newTag" translate>Tags</h2>
-        <form *ngIf="editTag" [formGroup]="tagForm" (ngSubmit)="saveTag()" (keydown)="keyDownFunction($event)">
+        <form *ngIf="editTag" [formGroup]="tagForm" (keydown)="keyDownFunction($event)">
             <mat-form-field>
-                <input type="text" matInput osAutofocus required formControlName="name"
-                    placeholder="{{ 'New tag name' | translate}}">
+                <input
+                    type="text"
+                    matInput
+                    osAutofocus
+                    required
+                    formControlName="name"
+                    placeholder="{{ 'New tag name' | translate }}"
+                />
                 <mat-error *ngIf="tagForm.invalid" translate>Required</mat-error>
             </mat-form-field>
         </form>
@@ -14,12 +26,11 @@
 
     <!-- remove button -->
     <div class="extra-controls-slot on-transition-fade">
-        <button *ngIf="!isMultiSelect && editTag && !newTag" type="button" mat-button (click)="deleteSelectedTag()">
+        <button type="button" mat-button *ngIf="!isMultiSelect && editTag && !newTag" (click)="deleteSelectedTag()">
             <mat-icon>delete</mat-icon>
             <span translate>Delete</span>
         </button>
     </div>
-
 </os-head-bar>
 
 <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
@@ -28,7 +39,7 @@
         <mat-cell *matCellDef="let tag">{{ tag.getTitle() }}</mat-cell>
     </ng-container>
     <mat-header-row *matHeaderRowDef="['name']"></mat-header-row>
-    <mat-row (click)='selectItem(row, $event)' *matRowDef="let row; columns: ['name']"></mat-row>
+    <mat-row (click)="selectItem(row, $event)" *matRowDef="let row; columns: ['name']"></mat-row>
 </mat-table>
 
 <mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
diff --git a/client/src/app/site/users/components/user-detail/user-detail.component.html b/client/src/app/site/users/components/user-detail/user-detail.component.html
index 611259ae4..046461009 100644
--- a/client/src/app/site/users/components/user-detail/user-detail.component.html
+++ b/client/src/app/site/users/components/user-detail/user-detail.component.html
@@ -15,12 +15,7 @@
 
     <!-- Menu -->
     <div class="menu-slot">
-        <button
-            type="button"
-            mat-icon-button
-            *ngIf="isAllowed('changePersonal')"
-            [matMenuTriggerFor]="userExtraMenu"
-        >
+        <button type="button" mat-icon-button *ngIf="isAllowed('changePersonal')" [matMenuTriggerFor]="userExtraMenu">
             <mat-icon>more_vert</mat-icon>
         </button>
     </div>
@@ -49,7 +44,6 @@
     <form
         [ngClass]="{ 'mat-form-field-enabled': editUser }"
         [formGroup]="personalInfoForm"
-        (ngSubmit)="saveUser()"
         *ngIf="user"
         (keydown)="onKeyDown($event)"
     >
@@ -104,7 +98,7 @@
                     placeholder="{{ 'Email' | translate }}"
                     name="email"
                     formControlName="email"
-                    [value]="user.email ? user.email: null"
+                    [value]="user.email ? user.email : null"
                 />
                 <mat-error *ngIf="personalInfoForm.get('email').hasError('email')" translate>
                     Please enter a valid email address