#EX-207, #EX-212: Add trimInput, stopPropagation directives

frontend/Exence/src/app/private/profile/profile.component.html

@@ -44,7 +44,7 @@ <h3 class="m-0 text-center text-md-start fs-2">Profile data</h3>
 				@let nameControl = userDataForm.controls.username;
 				<mat-form-field>
 					<mat-label>Username</mat-label>
-					<input matInput [formControl]="nameControl" />
+					<input matInput autoTrim [formControl]="nameControl" />
 					<ex-input-clear matSuffix [control]="nameControl"/>
 					<mat-error>
 						<ex-validator [control]="nameControl" />
@@ -54,7 +54,7 @@ <h3 class="m-0 text-center text-md-start fs-2">Profile data</h3>
 				@let emailControl = userDataForm.controls.email;
 				<mat-form-field>
 					<mat-label>Email</mat-label>
-					<input matInput type="email" [formControl]="emailControl" />
+					<input matInput autoTrim type="email" [formControl]="emailControl" />
 					<ex-input-clear matSuffix [control]="emailControl" />
 					<mat-error>
 						<ex-validator [control]="emailControl" />

frontend/Exence/src/app/private/profile/profile.component.ts

@@ -15,21 +15,23 @@ import { UserService } from '../../shared/user/user.service';
 import { ValidatorComponent } from '../../shared/validator/validator.component';
 import { ExtraValidators } from '../../shared/validators';
 import { SessionsListComponent } from '../session/sessions-list/sessions-list.component';
+import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 @Component({
 	selector: 'ex-profile',
 	templateUrl: './profile.component.html',
 	styleUrl: './profile.component.scss',
 	imports: [
-		ReactiveFormsModule,
-		MatFormFieldModule,
-		MatInputModule,
-		MatDividerModule,
-		ButtonComponent,
-		InputClearButtonComponent,
-		SessionsListComponent,
-		ValidatorComponent,
-	],
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDividerModule,
+    ButtonComponent,
+    InputClearButtonComponent,
+    SessionsListComponent,
+    ValidatorComponent,
+    AutoTrimDirective
+],
 })
 export class ProfileComponent {
 	private readonly fb = inject(NonNullableFormBuilder);

frontend/Exence/src/app/private/transactions-and-categories/create-category-dialog/create-category-dialog.component.html

@@ -9,6 +9,7 @@ <h3 class="fs-1 fw-bold">New category</h3>
 			<mat-label>Name</mat-label>
 			<input
 				matInput
+				autoTrim
 				[formControl]="nameControl"
 			/>
 			<ex-input-clear matSuffix [control]="nameControl" />
@@ -76,6 +77,5 @@ <h3 class="fs-1 fw-bold">New category</h3>
 	<emoji-mart
 		emoji=""
 		(emojiSelect)="onEmojiSelect($event); emojiMenu.closed.emit()"
-		(click)="$event.stopPropagation()"
 	/>
 </mat-menu>

frontend/Exence/src/app/private/transactions-and-categories/create-category-dialog/create-category-dialog.component.ts

@@ -13,23 +13,25 @@ import { ButtonComponent } from '../../../shared/button/button.component';
 import { InputClearButtonComponent } from '../../../shared/input-clear-button/input-clear-button.component';
 import { ValidatorComponent } from '../../../shared/validator/validator.component';
 import { CategoryService } from '../../category.service';
+import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 @Component({
 	selector: 'ex-create-category-dialog',
 	templateUrl: './create-category-dialog.component.html',
 	styleUrl: './create-category-dialog.component.scss',
 	imports: [
-		ReactiveFormsModule,
-		MatFormFieldModule,
-		MatInputModule,
-		MatCardModule,
-		MatMenuModule,
-		MatIconModule,
-		PickerComponent,
-		InputClearButtonComponent,
-		ButtonComponent,
-		ValidatorComponent,
-	],
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCardModule,
+    MatMenuModule,
+    MatIconModule,
+    PickerComponent,
+    InputClearButtonComponent,
+    ButtonComponent,
+    ValidatorComponent,
+    AutoTrimDirective
+],
 })
 export class CreateCategoryDialogComponent {
 	private readonly dialogRef = inject(MatDialogRef<CreateCategoryDialogComponent>);

frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.html

@@ -9,6 +9,7 @@ <h3 class="fs-1 fw-bold">New transaction</h3>
 			<mat-label>Title</mat-label>
 			<input
 				matInput
+				autoTrim
 				[formControl]="titleControl"
 			/>
 			<ex-input-clear matSuffix [control]="titleControl" />
@@ -79,7 +80,7 @@ <h3 class="fs-1 fw-bold">New transaction</h3>
 		@let noteControl = form.controls.note;
 		<mat-form-field>
 			<mat-label>Note</mat-label>
-			<textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="4" [formControl]="noteControl"></textarea>
+			<textarea matInput autoTrim cdkTextareaAutosize cdkAutosizeMinRows="4" [formControl]="noteControl"></textarea>
 			<mat-error>
 				<ex-validator [control]="noteControl" />
 			</mat-error>

frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.ts

@@ -16,6 +16,7 @@ import { InputClearButtonComponent } from '../../../shared/input-clear-button/in
 import { ValidatorComponent } from '../../../shared/validator/validator.component';
 import { CategoryService } from '../../category.service';
 import { TransactionService } from '../transaction.service';
+import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 export interface CreateTransactionDialogData {
 	type?: TransactionType;
@@ -27,16 +28,17 @@ export interface CreateTransactionDialogData {
 	templateUrl: './create-transaction-dialog.component.html',
 	styleUrl: './create-transaction-dialog.component.scss',
 	imports: [
-		ReactiveFormsModule,
-		MatFormFieldModule,
-		MatInputModule,
-		MatCardModule,
-		MatSelectModule, MatDatepickerModule,
-		MatCheckboxModule,
-		InputClearButtonComponent,
-		ButtonComponent,
-		ValidatorComponent,
-	],
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCardModule,
+    MatSelectModule, MatDatepickerModule,
+    MatCheckboxModule,
+    InputClearButtonComponent,
+    ButtonComponent,
+    ValidatorComponent,
+    AutoTrimDirective
+],
 })
 export class CreateTransactionDialogComponent extends BaseComponent implements OnInit {
 	private readonly dialogRef = inject(MatDialogRef<CreateTransactionDialogComponent>);

frontend/Exence/src/app/public/forgot-password/forgot-password.component.html

@@ -16,7 +16,7 @@ <h2 class="fs-1">Forgot password?</h2>
 			<mat-card-content class="w-100">
 				<mat-form-field>
 					<mat-label>Email</mat-label>
-					<input matInput [formControl]="emailControl" type="email"/>
+					<input matInput autoTrim [formControl]="emailControl" type="email"/>
 					<ex-input-clear matSuffix [control]="emailControl"/>
 					<mat-error>
 						<ex-validator [control]="emailControl" />

frontend/Exence/src/app/public/forgot-password/forgot-password.component.ts

@@ -15,22 +15,24 @@ import { NavigationService } from '../../shared/navigation/navigation.service';
 import { SnackbarService } from '../../shared/snackbar/snackbar.service';
 import { ExtraValidators } from '../../shared/validators';
 import { ValidatorComponent } from '../../shared/validator/validator.component';
+import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 @Component({
 	selector: 'ex-forgot-password',
 	templateUrl: './forgot-password.component.html',
 	styleUrl: './forgot-password.component.scss',
 	imports: [
-		MatFormFieldModule,
-		MatInputModule,
-		ButtonComponent,
-		ReactiveFormsModule,
-		MatCardModule,
-		MatIconModule,
-		InputClearButtonComponent,
-		RouterLink,
-		ValidatorComponent,
-	]
+    MatFormFieldModule,
+    MatInputModule,
+    ButtonComponent,
+    ReactiveFormsModule,
+    MatCardModule,
+    MatIconModule,
+    InputClearButtonComponent,
+    RouterLink,
+    ValidatorComponent,
+    AutoTrimDirective
+]
 })
 export class ForgotPasswordComponent extends BaseComponent {
 	private readonly fb = inject(NonNullableFormBuilder);

frontend/Exence/src/app/public/login/login.component.html

@@ -20,6 +20,7 @@ <h2 class="fs-1">Log in to your account</h2>
 				matInput
 				[formControl]="emailControl"
 				type="email"
+				autoTrim
 			/>
 			<ex-input-clear matSuffix [control]="emailControl"/>
 			<mat-error>

frontend/Exence/src/app/public/login/login.component.ts

@@ -15,23 +15,25 @@ import { NavigationService } from '../../shared/navigation/navigation.service';
 import { CurrentUserService } from '../../shared/user/current-user.service';
 import { ValidatorComponent } from '../../shared/validator/validator.component';
 import { ExtraValidators } from '../../shared/validators';
+import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 @Component({
 	selector: 'ex-login',
 	templateUrl: './login.component.html',
 	styleUrl: './login.component.scss',
 	imports: [
-		MatFormFieldModule,
-		MatInputModule,
-		ReactiveFormsModule,
-		MatButtonModule,
-		RouterModule,
-		MatCardModule,
-		MatIconModule,
-		InputClearButtonComponent,
-		ButtonComponent,
-		ValidatorComponent,
-	],
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    RouterModule,
+    MatCardModule,
+    MatIconModule,
+    InputClearButtonComponent,
+    ButtonComponent,
+    ValidatorComponent,
+    AutoTrimDirective
+],
 })
 export class LoginComponent extends BaseComponent {
 	private readonly fb = inject(NonNullableFormBuilder);

frontend/Exence/src/app/public/registration/registration.component.html

@@ -19,7 +19,7 @@ <h2 class="fs-1">Create an Account</h2>
 			@let nameControl = form.controls.username;
 			<mat-form-field>
 				<mat-label>Username</mat-label>
-				<input matInput [formControl]="nameControl" />
+				<input matInput autoTrim [formControl]="nameControl" />
 				<ex-input-clear matSuffix [control]="nameControl"/>
 				<mat-error>
 					<ex-validator [control]="nameControl" />
@@ -28,7 +28,7 @@ <h2 class="fs-1">Create an Account</h2>
 			@let emailControl = form.controls.email;
 			<mat-form-field>
 				<mat-label>Email</mat-label>
-				<input matInput [formControl]="emailControl" type="email" />
+				<input matInput autoTrim [formControl]="emailControl" type="email" />
 				<ex-input-clear matSuffix [control]="emailControl"/>
 				<mat-error>
 					<ex-validator [control]="emailControl" />

frontend/Exence/src/app/public/registration/registration.component.ts

@@ -15,23 +15,25 @@ import { ExtraValidators } from '../../shared/validators';
 import { AuthService } from '../../shared/auth/auth.service';
 import { SnackbarService } from '../../shared/snackbar/snackbar.service';
 import { ValidatorComponent } from '../../shared/validator/validator.component';
+import { AutoTrimDirective } from "src/app/shared/auto-trim.directive";
 
 @Component({
 	selector: 'ex-registration',
 	templateUrl: './registration.component.html',
 	styleUrl: './registration.component.scss',
 	imports: [
-		MatCardModule,
-		MatIconModule,
-		ReactiveFormsModule,
-		MatFormFieldModule,
-		MatInput,
-		ButtonComponent,
-		InputClearButtonComponent,
-		RouterLink,
-		MatTooltipModule,
-		ValidatorComponent,
-	]
+    MatCardModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInput,
+    ButtonComponent,
+    InputClearButtonComponent,
+    RouterLink,
+    MatTooltipModule,
+    ValidatorComponent,
+    AutoTrimDirective
+]
 })
 export class RegistrationComponent extends BaseComponent {
 	private readonly fb = inject(NonNullableFormBuilder);

frontend/Exence/src/app/shared/auto-trim.directive.ts

@@ -0,0 +1,25 @@
+import { Directive, inject } from "@angular/core";
+import { ControlValueAccessor, NgControl } from "@angular/forms";
+
+@Directive({
+	selector: '[autoTrim]',
+	standalone: true
+})
+export class AutoTrimDirective {
+	private control = inject(NgControl);
+
+	constructor() {
+		trimValueAccessor(this.control.valueAccessor!);
+	}
+}
+
+function trimValueAccessor(valueAccessor: ControlValueAccessor) {
+	const original = valueAccessor.registerOnChange;
+
+	// overrides angular's formControl updation function to first validate strings
+	valueAccessor.registerOnChange = (fn: (_: unknown) => void) => {
+		return original.call(valueAccessor, (value: unknown) => {
+			return fn(typeof value === 'string' ? value.replace(/\s+/g, ' ').trim() : value);
+		});
+	}
+}

frontend/Exence/src/app/shared/data-table/data-table.component.html

@@ -145,13 +145,13 @@ <h3 class="d-flex align-items-center gap-2">
 												<button
 													mat-icon-button
 													[matMenuTriggerFor]="actionsMenu"
-													(click)="$event.stopPropagation()"
+													stopPropagation
 												>
 													<mat-icon>more_vert</mat-icon>
 												</button>
 
 												<mat-menu #actionsMenu="matMenu">
-													<!-- TODO -->
+													<!-- TODO move edit into the menu https://horanszkipatrik.atlassian.net/browse/EX-240 -->
 													<!-- @if (!isRowEditing(row.id)) {
 														<button
 															mat-menu-item
@@ -182,7 +182,7 @@ <h3 class="d-flex align-items-center gap-2">
 													<button
 														mat-menu-item
 														class="delete-button"
-														(click)="deleteRow(row.id); $event.stopPropagation()"
+														(click)="deleteRow(row.id)"
 													>
 														<mat-icon color="warn">delete</mat-icon>
 														@if (display.isMd()) {
@@ -383,7 +383,7 @@ <h3 class="d-flex align-items-center gap-2">
 									<button
 										mat-icon-button
 										class="category-delete-icon"
-										(click)="$event.stopPropagation(); deleteCategoryRow(row.id)"
+										(click)="deleteCategoryRow(row.id)"
 									>
 										<mat-icon>delete</mat-icon>
 									</button>