v3.19.1 (#185)

* Add validation to game editor.

* Don't serve host API key in external host responses.

projects/gameboard-ui/src/app/admin/components/external-host-editor/external-host-editor.component.html

@@ -15,7 +15,8 @@
         <div class="form-group">
             <label for="host-api-key">Host API Key</label>
             <input id="hostApiKey" name="host-api-key" type="password" class="form-control px-0"
-                [(ngModel)]="editHost.hostApiKey" placeholder="(e.g. 123thisIsMyKey!)">
+                [(ngModel)]="editHost.hostApiKey"
+                [placeholder]="hasApiKey ? '(key configured - enter a new key here to change it)' : '(e.g. 123ThisIsMyKey!)'">
         </div>
 
         <div class="form-group">

projects/gameboard-ui/src/app/admin/components/external-host-editor/external-host-editor.component.ts

@@ -15,15 +15,14 @@ export class ExternalHostEditorComponent implements OnInit {
     startupEndpoint: ""
   };
   protected errors: any[] = [];
+  protected hasApiKey = false;
   public hostId?: string;
   public onSave?: (host: UpsertExternalGameHost) => void | Promise<void>;
   protected subtitle?: string;
   protected title = "New External Game Host";
   protected tryPingResult?: { success: boolean; response?: string };
 
-  constructor(
-    private externalGameService: ExternalGameService,
-  ) { }
+  constructor(private externalGameService: ExternalGameService) { }
 
   async ngOnInit() {
     if (this.hostId) {
@@ -34,6 +33,7 @@ export class ExternalHostEditorComponent implements OnInit {
         throw new Error(`Couldn't resolve host ${this.hostId}.`);
 
       this.editHost = host;
+      this.hasApiKey = host.hasApiKey;
       this.subtitle = "Edit External Game Host";
       this.title = host.name;
     }

projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html

@@ -297,12 +297,17 @@ <h4>Execution</h4>
 
           <div class="col-lg-6 col-sm-12 form-group pb-0 pt-1">
             <label for="gameEnd-input">Closes</label>
-            <input type="text" class="form-control" id="gameEnd-input" name="gameEnd" [(ngModel)]="game.gameEnd">
+            <input type="text" class="form-control" id="gameEnd-input" name="gameEnd" [(ngModel)]="game.gameEnd"
+              [min]="game.gameStart">
             <small>yyyy-mm-ddT00:00:00+00:00</small>
           </div>
 
         </div>
 
+        <div *ngIf="game.gameStart > game.gameEnd" class="row form-group">
+          <alert type="warning" class="col-12">The game's open date must be less than its close date.</alert>
+        </div>
+
         <div class="form-group pb-0 pt-1">
           <label for="sessionMinutes-input">Session Duration</label>
           <input type="number" class="form-control" id="sessionMinutes-input" name="sessionMinutes"
@@ -417,6 +422,7 @@ <h4>Registration</h4>
               <input type="text" class="form-control" id="registrationOpen-input" name="registrationOpen"
                 [(ngModel)]="game.registrationOpen">
               <small>yyyy-mm-ddT00:00:00+00:00</small>
+              <small></small>
             </div>
 
             <div class="col-lg-6 col-sm-12 form-group pb-0 pt-1">
@@ -425,23 +431,47 @@ <h4>Registration</h4>
                 [(ngModel)]="game.registrationClose">
               <small>yyyy-mm-ddT00:00:00+00:00</small>
             </div>
+          </div>
+
+          <div class="row">
+            <div *ngIf="game.registrationOpen > game.registrationClose" class="col-12 form-group pb-0 pt-1">
+              <alert type="warning">
+                The registration period's open date must be prior to its close date.
+              </alert>
+            </div>
+          </div>
 
+          <div class="row">
             <div class="col-lg-6 col-sm-12 form-group pb-0 pt-1">
               <label for="minTeamSize-input">Minimum Team Size</label>
-              <input type="number" class="form-control" id="minTeamSize-input" name="minTeamSize"
+              <input type="number" class="form-control" id="minTeamSize-input" name="minTeamSize" [min]="1"
                 [(ngModel)]="game.minTeamSize">
               <small></small>
             </div>
 
             <div class="col-lg-6 col-sm-12 form-group pb-0 pt-1">
               <label for="maxTeamSize-input">Maximum Team Size</label>
               <input type="number" class="form-control" id="maxTeamSize-input" name="maxTeamSize"
-                [(ngModel)]="game.maxTeamSize">
+                [min]="game.minTeamSize" [(ngModel)]="game.maxTeamSize">
               <small></small>
             </div>
           </div>
         </div>
 
+        <div class="row">
+          <div *ngIf="game.minTeamSize > game.maxTeamSize" class="col-12 form-group pb-0 pt-1">
+            <alert type="warning">
+              The minimum team size must be less than (or equal to) the maximum team size.
+            </alert>
+          </div>
+
+          <div *ngIf="game.minTeamSize <= 0" class="col-12 form-group pb-0 pt-1">
+            <alert type="warning">
+              The minimum team size must be a positive integer.
+            </alert>
+          </div>
+        </div>
+
         <div class="form-group pb-0 pt-1">
           <label class="mb-0" for="hidden-toggle">Team Sponsorship</label>
           <div class="form-control auto-h d-flex align-items-center">

projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.ts

@@ -6,12 +6,11 @@ import { FormGroup, NgForm } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, firstValueFrom } from 'rxjs';
 import { debounceTime, filter, map, switchMap, tap } from 'rxjs/operators';
-import { ExternalGameHost, Game, GameEngineMode } from '../../api/game-models';
+import { ExternalGameHost, Game, GameEngineMode, GameRegistrationType } from '../../api/game-models';
 import { GameService } from '../../api/game.service';
 import { KeyValue } from '@angular/common';
 import { AppTitleService } from '@/services/app-title.service';
 import { fa } from '@/services/font-awesome.service';
-import { PlayerMode } from '@/api/player-models';
 import { ToastService } from '@/utility/services/toast.service';
 import { PracticeService } from '@/services/practice.service';
 import { FeedbackTemplate } from '@/api/feedback-models';
@@ -81,7 +80,7 @@ export class GameEditorComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.updated$ = this.form.valueChanges.pipe(
-      filter(f => !this.form.pristine && (this.form.valid || false)),
+      filter(f => !this.form.pristine && (this.form.valid || false) && this.doAdditionalValidation(f)),
       tap(values => {
         this.dirty = true;
         this.needsPracticeModeEnabledRefresh = values.playerMode !== this.game.playerMode;
@@ -181,4 +180,17 @@ export class GameEditorComponent implements AfterViewInit {
     if (a.key > b.key) return 1;
     return 0;
   }
+
+  private doAdditionalValidation(game: Game) {
+    if (game.minTeamSize > game.maxTeamSize)
+      return false;
+
+    if (game.gameStart > game.gameEnd)
+      return false;
+
+    if (game.registrationType == GameRegistrationType.open && game.registrationOpen > game.registrationClose)
+      return false;
+
+    return true;
+  }
 }

projects/gameboard-ui/src/app/api/game-models.ts

@@ -146,7 +146,7 @@ export interface ExternalGameHost {
   clientUrl: string;
   destroyResourcesOnDeployFailure?: boolean;
   gamespaceDeployBatchSize?: number;
-  hostApiKey?: string;
+  hasApiKey: boolean;
   hostUrl: string;
   pingEndpoint?: string;
   startupEndpoint: string;