Enable prettier formatting for HTML files

src/Turnierplan.App/Client/.prettierrc

@@ -1,7 +1,10 @@
 {
   "tabWidth": 2,
   "useTabs": false,
-  "endOfLine": "auto",
+  "singleQuote": true,
+  "endOfLine": "lf",
+  "arrowParens": "always",
   "trailingComma": "none",
+  "bracketSameLine": true,
   "printWidth": 140
 }

src/Turnierplan.App/Client/package.json

@@ -12,7 +12,7 @@
     "gen:api": "ng-openapi-gen --input ../obj/Turnierplan.App_turnierplan.json --output src/app/api --indexFile true --endOfLineStyle lf && replace-in-file \"PublicId = any\" \"PublicId = string\" src/app/api/**/*",
     "build:prod": "npm run gen:api && npm run ng -- build --configuration production",
     "start": "npm run gen:api && npm run ng -- serve --port 45001",
-    "prettier": "prettier \"**/*.*css\" \"**/*.*js\" \"**/*.ts\" \"**/*.json\"",
+    "prettier": "prettier \"**/*.*css\" \"**/*.*js\" \"**/*.ts\" \"**/*.json\" \"**/*.html\"",
     "lint": "npm run prettier -- --write",
     "lint:ci": "npm run prettier -- --check",
     "test": "ng test",

src/Turnierplan.App/Client/src/app/identity/identity.component.scss

@@ -5,7 +5,7 @@
 }
 
 .identity-header {
-  background: url("/assets/identity-background.jpg") center;
+  background: url('/assets/identity-background.jpg') center;
   background-size: cover;
   height: 8em;
 }

src/Turnierplan.App/Client/src/app/identity/pages/change-password/change-password.component.html

@@ -21,9 +21,13 @@
   @if (isLoading) {
     <tp-small-spinner />
   }
-  <button class="btn btn-primary" [ngClass]="{ 'disabled': isLoading }" translate="Identity.ChangePassword.Submit" (click)="submit()"></button>
+  <button
+    class="btn btn-primary"
+    [ngClass]="{ disabled: isLoading }"
+    translate="Identity.ChangePassword.Submit"
+    (click)="submit()"></button>
 </div>
 
-@if(!isLoading && failedReason) {
-  <div class="mt-3 text-danger" [innerHTML]="('Identity.ChangePassword.Failed.' + failedReason) | translate"></div>
+@if (!isLoading && failedReason) {
+  <div class="mt-3 text-danger" [innerHTML]="'Identity.ChangePassword.Failed.' + failedReason | translate"></div>
 }

src/Turnierplan.App/Client/src/app/identity/pages/change-user-info/change-user-info.component.html

@@ -23,9 +23,13 @@
   @if (isLoading) {
     <tp-small-spinner />
   }
-  <button class="btn btn-primary" [ngClass]="{ 'disabled': isLoading }" translate="Identity.ChangeUserInfo.Submit" (click)="submit()"></button>
+  <button
+    class="btn btn-primary"
+    [ngClass]="{ disabled: isLoading }"
+    translate="Identity.ChangeUserInfo.Submit"
+    (click)="submit()"></button>
 </div>
 
-@if(!isLoading && isRequestFailed) {
+@if (!isLoading && isRequestFailed) {
   <div class="mt-3 text-danger" translate="Identity.ChangeUserInfo.RequestFailed"></div>
 }

src/Turnierplan.App/Client/src/app/identity/pages/login/login.component.html

@@ -21,9 +21,9 @@
   @if (isLoading) {
     <tp-small-spinner />
   }
-  <button class="btn btn-primary" [ngClass]="{ 'disabled': isLoading }" translate="Identity.Login.Submit" (click)="attemptLogin()"></button>
+  <button class="btn btn-primary" [ngClass]="{ disabled: isLoading }" translate="Identity.Login.Submit" (click)="attemptLogin()"></button>
 </div>
 
-@if(!isLoading && loginFailed) {
+@if (!isLoading && loginFailed) {
   <div class="mt-3 text-danger" translate="Identity.Login.LoginFailed"></div>
 }

src/Turnierplan.App/Client/src/app/portal/components/action-button/action-button.component.html

@@ -1,19 +1,19 @@
 @if (mode === 'IconLeftAndText') {
-  <button type="button" class="btn btn-sm btn-{{ type }} text-nowrap" [ngClass]="{ 'disabled': disabled }">
+  <button type="button" class="btn btn-sm btn-{{ type }} text-nowrap" [ngClass]="{ disabled: disabled }">
     @if (icon) {
       <i class="bi bi-{{ icon }}" aria-hidden="true"></i>
     }
     <span [translate]="title" [ngClass]="{ 'ms-2': icon }"></span>
   </button>
 } @else if (mode === 'IconRightAndText') {
-  <button type="button" class="btn btn-sm btn-{{ type }} text-nowrap" [ngClass]="{ 'disabled': disabled }">
+  <button type="button" class="btn btn-sm btn-{{ type }} text-nowrap" [ngClass]="{ disabled: disabled }">
     <span [translate]="title" [ngClass]="{ 'me-2': icon }"></span>
     @if (icon) {
       <i class="bi bi-{{ icon }}" aria-hidden="true"></i>
     }
   </button>
 } @else if (mode === 'IconOnly' && icon) {
-  <button type="button" class="btn btn-sm btn-{{ type }}" [ngClass]="{ 'disabled': disabled }" [attr.aria-label]="title | translate">
+  <button type="button" class="btn btn-sm btn-{{ type }}" [ngClass]="{ disabled: disabled }" [attr.aria-label]="title | translate">
     <i class="bi bi-{{ icon }}" aria-hidden="true"></i>
   </button>
 }

src/Turnierplan.App/Client/src/app/portal/components/alert/alert.component.html

@@ -1,4 +1,6 @@
-<div class="alert alert-{{ type }} {{ margin }} py-1 d-flex flex-row align-items-center gap-3" [ngClass]="icon === undefined ? 'px-2' : 'ps-3 pe-2'">
+<div
+  class="alert alert-{{ type }} {{ margin }} py-1 d-flex flex-row align-items-center gap-3"
+  [ngClass]="icon === undefined ? 'px-2' : 'ps-3 pe-2'">
   @if (icon !== undefined) {
     <i class="bi bi-{{ icon }}"></i>
   }

src/Turnierplan.App/Client/src/app/portal/components/api-key-usage/api-key-usage.component.html

@@ -1,15 +1,23 @@
-<div class="d-flex flex-row" style="min-height: 274px;">
-  <div style="width: 25%;">
+<div class="d-flex flex-row" style="min-height: 274px">
+  <div style="width: 25%">
     <label class="form-label" for="api_usage_timeRange" translate="Portal.ApiKeyUsage.TimeRange"></label>
-    <select class="form-select form-select-sm mb-3" id="api_usage_timeRange" [ngModel]="timeRange" (ngModelChange)="timeRange = $event; reload$.next()">
+    <select
+      class="form-select form-select-sm mb-3"
+      id="api_usage_timeRange"
+      [ngModel]="timeRange"
+      (ngModelChange)="timeRange = $event; reload$.next()">
       <option value="1" translate="Portal.ApiKeyUsage.TimeRange1"></option>
       <option value="7" translate="Portal.ApiKeyUsage.TimeRange7"></option>
       <option value="14" translate="Portal.ApiKeyUsage.TimeRange14"></option>
       <option value="30" translate="Portal.ApiKeyUsage.TimeRange30"></option>
     </select>
-    
+
     <div class="d-flex flex-column align-items-end">
-      <tp-action-button [type]="'outline-secondary'" [icon]="'arrow-counterclockwise'" [title]="'Portal.ApiKeyUsage.Reload'" (click)="reload$.next()" />
+      <tp-action-button
+        [type]="'outline-secondary'"
+        [icon]="'arrow-counterclockwise'"
+        [title]="'Portal.ApiKeyUsage.Reload'"
+        (click)="reload$.next()" />
     </div>
 
     @if (showNoRequestsNotification) {
@@ -23,9 +31,8 @@
       <span translate="Portal.ApiKeyUsage.LoadingData"></span>
     </div>
   } @else {
-    <div style="width: 50%;">
-      <canvas baseChart type="bar" [data]="chartData" [options]="chartOptions">
-      </canvas>
+    <div style="width: 50%">
+      <canvas baseChart type="bar" [data]="chartData" [options]="chartOptions"></canvas>
       <div class="text-center small">
         <span translate="Portal.ApiKeyUsage.Total"></span>
         <span class="ms-1 fw-bold">{{ totalCount }}</span>

src/Turnierplan.App/Client/src/app/portal/components/computation-configuration/computation-configuration.component.html

@@ -5,49 +5,97 @@ <h4 class="modal-title" translate="Portal.ViewTournament.Settings.EditComputatio
 <div class="modal-body">
   <div class="mb-2 row align-items-center">
     <div class="col-4">
-      <label class="form-label mb-0" for="matchWonPoints" translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.MatchWonPoints"></label>
+      <label
+        class="form-label mb-0"
+        for="matchWonPoints"
+        translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.MatchWonPoints"></label>
     </div>
     <div class="col-8">
-      <input class="form-control form-control-sm" id="matchWonPoints" type="number" style="max-width: 8em;" [min]="0" [max]="100" [(ngModel)]="matchWonPoints" [ngClass]="{ 'is-invalid': matchWonPointsInvalid }" />
+      <input
+        class="form-control form-control-sm"
+        id="matchWonPoints"
+        type="number"
+        style="max-width: 8em"
+        [min]="0"
+        [max]="100"
+        [(ngModel)]="matchWonPoints"
+        [ngClass]="{ 'is-invalid': matchWonPointsInvalid }" />
     </div>
   </div>
 
   <div class="mb-2 row align-items-center">
     <div class="col-4">
-      <label class="form-label mb-0" for="matchDrawnPoints" translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.MatchDrawnPoints"></label>
+      <label
+        class="form-label mb-0"
+        for="matchDrawnPoints"
+        translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.MatchDrawnPoints"></label>
     </div>
     <div class="col-8">
-      <input class="form-control form-control-sm" id="matchDrawnPoints" type="number" style="max-width: 8em;" [min]="0" [max]="100" [(ngModel)]="matchDrawnPoints" [ngClass]="{ 'is-invalid': matchDrawnPointsInvalid }" />
+      <input
+        class="form-control form-control-sm"
+        id="matchDrawnPoints"
+        type="number"
+        style="max-width: 8em"
+        [min]="0"
+        [max]="100"
+        [(ngModel)]="matchDrawnPoints"
+        [ngClass]="{ 'is-invalid': matchDrawnPointsInvalid }" />
     </div>
   </div>
 
   <div class="mb-4 row align-items-center">
     <div class="col-4">
-      <label class="form-label mb-0" for="matchLostPoints" translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.MatchLostPoints"></label>
+      <label
+        class="form-label mb-0"
+        for="matchLostPoints"
+        translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.MatchLostPoints"></label>
     </div>
     <div class="col-8">
-      <input class="form-control form-control-sm" id="matchLostPoints" type="number" style="max-width: 8em;" [min]="0" [max]="100" [(ngModel)]="matchLostPoints" [ngClass]="{ 'is-invalid': matchLostPointsInvalid }" />
+      <input
+        class="form-control form-control-sm"
+        id="matchLostPoints"
+        type="number"
+        style="max-width: 8em"
+        [min]="0"
+        [max]="100"
+        [(ngModel)]="matchLostPoints"
+        [ngClass]="{ 'is-invalid': matchLostPointsInvalid }" />
     </div>
   </div>
-
-  <label class="form-label" for="comparisonModes" translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.ComparisonModes.Label"></label>
-  <select class="form-select" id="comparisonModes" [(ngModel)]="comparisonModeOptionId" [ngClass]="{ 'is-invalid': comparisonModesInvalid }">
-    <option value="" class="text-secondary" disabled translate="Portal.ViewTournament.ComputationConfigurationDialog.StandardComparisonModes"></option>
+
+  <label
+    class="form-label"
+    for="comparisonModes"
+    translate="Portal.ViewTournament.Settings.EditComputationConfig.Properties.ComparisonModes.Label"></label>
+  <select
+    class="form-select"
+    id="comparisonModes"
+    [(ngModel)]="comparisonModeOptionId"
+    [ngClass]="{ 'is-invalid': comparisonModesInvalid }">
+    <option
+      value=""
+      class="text-secondary"
+      disabled
+      translate="Portal.ViewTournament.ComputationConfigurationDialog.StandardComparisonModes"></option>
     @for (entry of standardComparisonModeOptions; track entry.id) {
       <option [value]="entry.id">
         @for (mode of entry.modes; track mode; let isLast = $last) {
-          <span>{{ ('Portal.ViewTournament.Settings.EditComputationConfig.Properties.ComparisonModes.Values.' + mode) | translate }}</span>
+          <span>{{ 'Portal.ViewTournament.Settings.EditComputationConfig.Properties.ComparisonModes.Values.' + mode | translate }}</span>
           @if (!isLast) {
             <span>,&nbsp;</span>
           }
         }
       </option>
     }
-    <option value="" class="text-secondary" disabled translate="Portal.ViewTournament.ComputationConfigurationDialog.NonStandardComparisonModes"></option>
+    <option
+      value=""
+      class="text-secondary"
+      disabled
+      translate="Portal.ViewTournament.ComputationConfigurationDialog.NonStandardComparisonModes"></option>
     @for (entry of nonStandardComparisonModeOptions; track entry.id) {
       <option [value]="entry.id">
         @for (mode of entry.modes; track mode; let isLast = $last) {
-          <span>{{ ('Portal.ViewTournament.Settings.EditComputationConfig.Properties.ComparisonModes.Values.' + mode) | translate }}</span>
+          <span>{{ 'Portal.ViewTournament.Settings.EditComputationConfig.Properties.ComparisonModes.Values.' + mode | translate }}</span>
           @if (!isLast) {
             <span>,&nbsp;</span>
           }

src/Turnierplan.App/Client/src/app/portal/components/copy-to-clipboard/copy-to-clipboard.component.html

@@ -1,2 +1,6 @@
-<i *ngIf="!copyToClipboardPressed" class="bi bi-copy tp-cursor-pointer" [title]="'Portal.General.CopyToClipboard' | translate" (click)="copyToClipboard()"></i>
+<i
+  *ngIf="!copyToClipboardPressed"
+  class="bi bi-copy tp-cursor-pointer"
+  [title]="'Portal.General.CopyToClipboard' | translate"
+  (click)="copyToClipboard()"></i>
 <i *ngIf="copyToClipboardPressed" class="bi bi-check-lg text-success"></i>

src/Turnierplan.App/Client/src/app/portal/components/delete-button/delete-button.component.html

@@ -1,17 +1,24 @@
-<div [ngbPopover]="popoverContent"
-     [autoClose]="'outside'"
-     #popover="ngbPopover"
-     container="body"
-     popoverClass="tp-popover-slim"
-     [tabindex]="popover.isOpen() ? 0 : -1"
-     (keydown)="popover.isOpen() && confirmed.emit()"
-     [ngClass]="reducedFootprint ? 'tp-cursor-pointer' : 'btn btn-sm btn-outline-danger'">
+<div
+  [ngbPopover]="popoverContent"
+  [autoClose]="'outside'"
+  #popover="ngbPopover"
+  container="body"
+  popoverClass="tp-popover-slim"
+  [tabindex]="popover.isOpen() ? 0 : -1"
+  (keydown)="popover.isOpen() && confirmed.emit()"
+  [ngClass]="reducedFootprint ? 'tp-cursor-pointer' : 'btn btn-sm btn-outline-danger'">
   <i class="bi bi-trash"></i>
 </div>
 
 <ng-template #popoverContent>
   <div class="px-3 py-2 d-flex flex-row align-items-center gap-3">
-    <i class="tp-cursor-pointer bi bi-trash text-danger fs-5" (click)="confirmed.emit()" [title]="'Portal.DeleteButton.ConfirmTooltip' | translate"></i>
-    <span class="tp-cursor-pointer text-decoration-underline text-secondary" (click)="popover.close()" translate="Portal.DeleteButton.Cancel"></span>
+    <i
+      class="tp-cursor-pointer bi bi-trash text-danger fs-5"
+      (click)="confirmed.emit()"
+      [title]="'Portal.DeleteButton.ConfirmTooltip' | translate"></i>
+    <span
+      class="tp-cursor-pointer text-decoration-underline text-secondary"
+      (click)="popover.close()"
+      translate="Portal.DeleteButton.Cancel"></span>
   </div>
 </ng-template>

src/Turnierplan.App/Client/src/app/portal/components/delete-widget/delete-widget.component.html

@@ -2,13 +2,28 @@
 <div class="mb-1" translate="{{ translationKey }}.Info"></div>
 
 @if (confirmationText !== undefined) {
-  <div [ngClass]="thinLayout ? 'mb-4 d-flex flex-column align-items-start gap-2' : 'mb-4 mb-md-3 d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2 gap-md-3'">
-    <div [innerHTML]="'Portal.DeleteWidget.EnterToConfirm' | translate : { text: confirmationText }" id="deleteBoxLabel"></div>
-    <input class="form-control form-control-sm" style="width: 20em;" aria-labelledby="deleteBoxLabel" [(ngModel)]="confirmationTextInput" (ngModelChange)="checkConfirmationText()"/>
+  <div
+    [ngClass]="
+      thinLayout
+        ? 'mb-4 d-flex flex-column align-items-start gap-2'
+        : 'mb-4 mb-md-3 d-flex flex-column flex-md-row align-items-start align-items-md-center gap-2 gap-md-3'
+    ">
+    <div [innerHTML]="'Portal.DeleteWidget.EnterToConfirm' | translate: { text: confirmationText }" id="deleteBoxLabel"></div>
+    <input
+      class="form-control form-control-sm"
+      style="width: 20em"
+      aria-labelledby="deleteBoxLabel"
+      [(ngModel)]="confirmationTextInput"
+      (ngModelChange)="checkConfirmationText()" />
   </div>
   <div class="d-flex flex-row">
     <div [ngClass]="{ 'tp-cursor-not-allowed': !allowDeletion }">
-      <tp-action-button [type]="'outline-danger'" [icon]="'trash'" [disabled]="!allowDeletion" [title]="'Portal.DeleteWidget.Delete'" (click)="deleteClicked()" />
+      <tp-action-button
+        [type]="'outline-danger'"
+        [icon]="'trash'"
+        [disabled]="!allowDeletion"
+        [title]="'Portal.DeleteWidget.Delete'"
+        (click)="deleteClicked()" />
     </div>
   </div>
 }