feat: Use Bootstrap styling to highlight form validation errors

* Created directive to automatically add bootstrap class to input if invalid
* Updated various components with forms to use new directive

src/app/common/dialog/configurable-dialog/configurable-dialog.component.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+import { IsModelInvalidDirective } from '../../forms/is-model-invalid.directive';
 import { ModalComponent } from '../../modal/modal/modal.component';
 import { DialogAction, DialogReturn } from '../dialog.model';
 
@@ -33,7 +34,13 @@ export type ConfigurableDialogReturn = DialogReturn<Record<string, string>>;
 
 @Component({
 	standalone: true,
-	imports: [CommonModule, FormsModule, ReactiveFormsModule, ModalComponent],
+	imports: [
+		CommonModule,
+		FormsModule,
+		ReactiveFormsModule,
+		ModalComponent,
+		IsModelInvalidDirective
+	],
 	templateUrl: './configurable-dialog.component.html',
 	styleUrls: ['./configurable-dialog.component.scss']
 })

src/app/common/forms/is-model-invalid.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, HostListener, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgModel } from '@angular/forms';
+
+import { hostBinding } from 'ngxtension/host-binding';
+
+@Directive({
+	selector: '[ngModel]',
+	standalone: true
+})
+export class IsModelInvalidDirective {
+	readonly #ngModel = inject(NgModel);
+
+	readonly isInvalid = hostBinding('class.is-invalid', signal(false));
+
+	constructor() {
+		this.#ngModel.control.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+			this.#updateIsInvalid();
+		});
+	}
+
+	@HostListener('focusout')
+	onFocusOut(): void {
+		this.#updateIsInvalid();
+	}
+
+	#updateIsInvalid() {
+		this.isInvalid.set(
+			(this.#ngModel.invalid && (this.#ngModel.dirty || this.#ngModel.touched)) ?? false
+		);
+	}
+}

src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts

@@ -6,14 +6,22 @@ import { Router, RouterLink } from '@angular/router';
 
 import { SkipToDirective } from '../../../../common';
 import { DialogService } from '../../../../common/dialog';
+import { IsModelInvalidDirective } from '../../../../common/forms/is-model-invalid.directive';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import { EndUserAgreement } from '../../../auth';
 import { EuaService } from '../eua.service';
 
 @Component({
 	standalone: true,
 	templateUrl: './manage-eua.component.html',
-	imports: [RouterLink, SystemAlertComponent, FormsModule, TitleCasePipe, SkipToDirective]
+	imports: [
+		RouterLink,
+		SystemAlertComponent,
+		FormsModule,
+		TitleCasePipe,
+		SkipToDirective,
+		IsModelInvalidDirective
+	]
 })
 export class ManageEuaComponent {
 	readonly #router = inject(Router);

src/app/core/admin/messages/manage-message/manage-message.component.ts

@@ -8,6 +8,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 
 import { SkipToDirective } from '../../../../common';
 import { DialogService } from '../../../../common/dialog';
+import { IsModelInvalidDirective } from '../../../../common/forms/is-model-invalid.directive';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import { Message, MessageService, MessageType } from '../../../messages';
 
@@ -21,7 +22,8 @@ import { Message, MessageService, MessageType } from '../../../messages';
 		FormsModule,
 		NgSelectModule,
 		TitleCasePipe,
-		SkipToDirective
+		SkipToDirective,
+		IsModelInvalidDirective
 	]
 })
 export class ManageMessageComponent {

src/app/core/admin/user/manage-user/manage-user.component.ts

@@ -8,6 +8,7 @@ import { Router, RouterLink } from '@angular/router';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 import { SkipToDirective } from '../../../../common';
+import { IsModelInvalidDirective } from '../../../../common/forms/is-model-invalid.directive';
 import { JoinPipe } from '../../../../common/pipes';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import { EditUser, Role } from '../../../auth';
@@ -23,7 +24,8 @@ import { AdminUsersService } from '../admin-users.service';
 		FormsModule,
 		SkipToDirective,
 		JoinPipe,
-		NgbTooltip
+		NgbTooltip,
+		IsModelInvalidDirective
 	],
 	templateUrl: './manage-user.component.html',
 	styleUrls: ['./manage-user.component.scss']

src/app/core/feedback/feedback-flyout/feedback-flyout.component.html

@@ -159,9 +159,9 @@ <h3 class="pt-2">What happened?</h3>
 						<textarea
 							class="form-control"
 							name="text"
+							cdkTextareaAutosize
 							placeholder="Enter Feedback"
 							required
-							style="height: 8rem"
 							[(ngModel)]="feedback.body"
 						>
 						</textarea>

src/app/core/feedback/feedback-flyout/feedback-flyout.component.ts

@@ -1,3 +1,4 @@
+import { TextFieldModule } from '@angular/cdk/text-field';
 import { NgTemplateOutlet } from '@angular/common';
 import {
 	ChangeDetectionStrategy,
@@ -15,6 +16,7 @@ import { Router } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
 
 import { FlyoutComponent } from '../../../common';
+import { IsModelInvalidDirective } from '../../../common/forms/is-model-invalid.directive';
 import { APP_CONFIG } from '../../tokens';
 import { Feedback } from '../feedback.model';
 import { FeedbackService } from '../feedback.service';
@@ -24,7 +26,14 @@ import { FeedbackService } from '../feedback.service';
 	templateUrl: './feedback-flyout.component.html',
 	styleUrls: ['./feedback-flyout.component.scss'],
 	standalone: true,
-	imports: [FlyoutComponent, FormsModule, NgTemplateOutlet, NgSelectModule],
+	imports: [
+		FlyoutComponent,
+		FormsModule,
+		NgTemplateOutlet,
+		NgSelectModule,
+		TextFieldModule,
+		IsModelInvalidDirective
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FeedbackFlyoutComponent {

src/app/core/feedback/feedback-modal/feedback-modal.component.html

@@ -154,6 +154,7 @@ <h3 class="pt-2">What happened?</h3>
 				<textarea
 					class="form-control"
 					name="feedbackText"
+					cdkTextareaAutosize
 					placeholder="Enter Feedback"
 					required
 					[(ngModel)]="feedback.body"

src/app/core/feedback/feedback-modal/feedback-modal.component.ts

@@ -1,4 +1,5 @@
 import { DialogRef } from '@angular/cdk/dialog';
+import { TextFieldModule } from '@angular/cdk/text-field';
 import { NgTemplateOutlet } from '@angular/common';
 import {
 	ChangeDetectionStrategy,
@@ -15,6 +16,7 @@ import { Router } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
 
 import { ModalComponent } from '../../../common';
+import { IsModelInvalidDirective } from '../../../common/forms/is-model-invalid.directive';
 import { APP_CONFIG } from '../../tokens';
 import { Feedback } from '../feedback.model';
 import { FeedbackService } from '../feedback.service';
@@ -23,7 +25,14 @@ import { FeedbackService } from '../feedback.service';
 	templateUrl: './feedback-modal.component.html',
 	styleUrls: ['./feedback-modal.component.scss'],
 	standalone: true,
-	imports: [ModalComponent, FormsModule, NgTemplateOutlet, NgSelectModule],
+	imports: [
+		ModalComponent,
+		FormsModule,
+		NgTemplateOutlet,
+		NgSelectModule,
+		IsModelInvalidDirective,
+		TextFieldModule
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FeedbackModalComponent {

src/app/core/signin/signin.component.ts

@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 
 import { LoadingSpinnerComponent } from '../../common';
+import { IsModelInvalidDirective } from '../../common/forms/is-model-invalid.directive';
 import { SessionService } from '../auth';
 import { NavigationService } from '../navigation.service';
 import { APP_CONFIG } from '../tokens';
@@ -20,7 +21,7 @@ import { APP_CONFIG } from '../tokens';
 	templateUrl: './signin.component.html',
 	styleUrls: ['./signin.component.scss'],
 	standalone: true,
-	imports: [LoadingSpinnerComponent, FormsModule, RouterLink],
+	imports: [LoadingSpinnerComponent, FormsModule, RouterLink, IsModelInvalidDirective],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SigninComponent {

src/app/core/signup/signup.component.html

@@ -75,6 +75,7 @@ <h1>New Account Request</h1>
 					type="password"
 					autocomplete="off"
 					minlength="6"
+					required
 					[(ngModel)]="user.password"
 				/>
 			</div>
@@ -87,6 +88,7 @@ <h1>New Account Request</h1>
 					type="password"
 					autocomplete="off"
 					minlength="6"
+					required
 					[(ngModel)]="user.verifyPassword"
 				/>
 			</div>

src/app/core/signup/signup.component.ts

@@ -5,13 +5,20 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 
+import { IsModelInvalidDirective } from '../../common/forms/is-model-invalid.directive';
 import { SystemAlertComponent, SystemAlertService } from '../../common/system-alert';
 import { AuthenticationService, EditUser } from '../auth';
 
 @Component({
 	standalone: true,
 	templateUrl: './signup.component.html',
-	imports: [RouterLink, SystemAlertComponent, FormsModule, TitleCasePipe],
+	imports: [
+		RouterLink,
+		SystemAlertComponent,
+		FormsModule,
+		TitleCasePipe,
+		IsModelInvalidDirective
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SignupComponent {

src/app/core/teams/create-team/create-team.component.ts

@@ -9,6 +9,7 @@ import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators';
 
 import { MultiSelectDirective, PagingOptions, SkipToDirective } from '../../../common';
+import { IsModelInvalidDirective } from '../../../common/forms/is-model-invalid.directive';
 import { SystemAlertComponent, SystemAlertService } from '../../../common/system-alert';
 import { SessionService, User, UserExternalRolesSelectDirective } from '../../auth';
 import { APP_CONFIG, APP_SESSION } from '../../tokens';
@@ -29,7 +30,8 @@ import { TeamsService } from '../teams.service';
 		UserExternalRolesSelectDirective,
 		TeamSelectDirective,
 		SkipToDirective,
-		TitleCasePipe
+		TitleCasePipe,
+		IsModelInvalidDirective
 	]
 })
 export class CreateTeamComponent implements OnInit {

src/app/core/teams/view-team/general-details/general-details.component.ts

@@ -16,6 +16,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { switchMap, tap } from 'rxjs/operators';
 
 import { MultiSelectDirective } from '../../../../common';
+import { IsModelInvalidDirective } from '../../../../common/forms/is-model-invalid.directive';
 import { JoinPipe, UtcDatePipe } from '../../../../common/pipes';
 import { SystemAlertService } from '../../../../common/system-alert';
 import { SessionService, UserExternalRolesSelectDirective } from '../../../auth';
@@ -43,7 +44,8 @@ import { TeamsService } from '../../teams.service';
 		UtcDatePipe,
 		MultiSelectDirective,
 		NgSelectModule,
-		UserExternalRolesSelectDirective
+		UserExternalRolesSelectDirective,
+		IsModelInvalidDirective
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })