From 8659c16517d7b0c908e6a0eafb581001d2f7aee2 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sun, 30 Mar 2025 10:43:36 +0200 Subject: [PATCH] refactor: Refactor SharedService, extract logic into smaller services (ResizeService and ColorService) --- .../components/add-task/add-task.component.ts | 18 +-- src/app/components/board/board.component.ts | 6 +- .../components/board/task/task.component.html | 2 +- .../components/board/task/task.component.ts | 6 +- .../contact-edit-new.component.ts | 6 +- .../contact-form/contact-form.component.html | 6 +- .../contact-form/contact-form.component.ts | 2 + src/app/services/color.service.ts | 34 +++++ src/app/services/login.service.ts | 6 +- src/app/services/resize.service.ts | 29 +++++ src/app/services/shared.service.ts | 116 ------------------ 11 files changed, 92 insertions(+), 139 deletions(-) create mode 100644 src/app/services/color.service.ts create mode 100644 src/app/services/resize.service.ts diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts index 783e39e..400bf81 100644 --- a/src/app/components/add-task/add-task.component.ts +++ b/src/app/components/add-task/add-task.component.ts @@ -227,7 +227,7 @@ export class AddTaskComponent implements OnInit { * @returns The updated search input flag. */ updateSearchInput() { - this.searchValue = this.sharedService.replaceXSSChars(this.searchValue); + this.searchValue = this.replaceXSSChars(this.searchValue); if (this.searchValue) { this.searchInput = this.searchValue.toLowerCase().length > 0; } else { @@ -241,7 +241,7 @@ export class AddTaskComponent implements OnInit { * This ensures that the subtask value is sanitized before further processing or storage. */ updateSubtaskValue() { - this.subtaskValue = this.sharedService.replaceXSSChars(this.subtaskValue); + this.subtaskValue = this.replaceXSSChars(this.subtaskValue); } /** @@ -400,14 +400,10 @@ export class AddTaskComponent implements OnInit { * @returns {void} */ checkCrossSiteScripting() { - this.taskData.title = this.sharedService.replaceXSSChars( - this.taskData.title - ); - this.taskData.description = this.sharedService.replaceXSSChars( - this.taskData.description - ); + this.taskData.title = this.replaceXSSChars(this.taskData.title); + this.taskData.description = this.replaceXSSChars(this.taskData.description); this.taskData.subtasksTitle = this.taskData.subtasksTitle.map((title) => - this.sharedService.replaceXSSChars(title) + this.replaceXSSChars(title) ); } @@ -421,6 +417,10 @@ export class AddTaskComponent implements OnInit { this.closeDialog(); } + replaceXSSChars(input: string) { + return input.replace(//g, '>'); + } + @HostListener('document:click', ['$event']) /** * Closes the assigned dropdown menu if the user clicks anywhere outside of diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index 557739f..09dccb8 100644 --- a/src/app/components/board/board.component.ts +++ b/src/app/components/board/board.component.ts @@ -6,7 +6,6 @@ import { TaskEmptyComponent } from './task/task-empty/task-empty.component'; import { FormsModule } from '@angular/forms'; import { OverlayService } from '../../services/overlay.service'; import { Router } from '@angular/router'; -import { SharedService } from '../../services/shared.service'; import { TranslateModule } from '@ngx-translate/core'; import { TaskHighlightedComponent } from './task/task-highlighted/task-highlighted.component'; import { ApiService } from '../../services/api.service'; @@ -16,6 +15,7 @@ import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner import { finalize, Subject, takeUntil } from 'rxjs'; import { TaskUpdateService } from '../../services/task-update.service'; import { ToastNotificationService } from '../../services/toast-notification.servic'; +import { ResizeService } from '../../services/resize.service'; @Component({ selector: 'app-board', @@ -43,7 +43,7 @@ export class BoardComponent { constructor( public dragDropService: DragDropService, public overlayService: OverlayService, - private sharedService: SharedService, + private resizeService: ResizeService, private taskService: TaskService, private apiService: ApiService, private taskUpdateService: TaskUpdateService, @@ -129,7 +129,7 @@ export class BoardComponent { * @param status The status to be used for the new task. */ addNewTaskOverlay(status: string) { - this.sharedService.isPageViewMedia + this.resizeService.isPageViewMedia ? this.router.navigate(['/add-task', status]) : this.overlayService.setOverlayData('newTaskOverlay', status); } diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html index 77159d8..43a2351 100644 --- a/src/app/components/board/task/task.component.html +++ b/src/app/components/board/task/task.component.html @@ -13,7 +13,7 @@ > {{ task.category }} - @if (sharedService.isPageViewMedia) { + @if (resizeService.isPageViewMedia) {
- @if (sharedService.isContactViewMedia) { + @if (resizeService.isContactViewMedia) {
@if (firstName.hasError('pattern') && firstName.touched) {

{{ "contactDialogForm.invalidPattern" | translate }}

@@ -49,7 +49,7 @@ required />
- @if (sharedService.isContactViewMedia) { + @if (resizeService.isContactViewMedia) {
@if (lastName.hasError('pattern') && lastName.touched) {

{{ "contactDialogForm.invalidPattern" | translate }}

@@ -57,7 +57,7 @@

{{ "contactDialogForm.invalidLastName" | translate }}

}}
- } @if (!sharedService.isContactViewMedia) { + } @if (!resizeService.isContactViewMedia) {
@if (firstName.hasError('pattern') || lastName.hasError('pattern') && firstName.touched) { diff --git a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts index ce0b9a1..9326147 100644 --- a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts +++ b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts @@ -14,6 +14,7 @@ import { FirebaseService } from '../../../../services/firebase.service'; import { FormBtnComponent } from '../../../../shared/components/buttons/form-btn/form-btn.component'; import { User } from '../../../../interfaces/user.interface'; import { Router } from '@angular/router'; +import { ResizeService } from '../../../../services/resize.service'; @Component({ selector: 'app-contact-form', @@ -32,6 +33,7 @@ export class ContactFormComponent implements OnInit, OnChanges { constructor( private router: Router, public firebaseService: FirebaseService, + public resizeService: ResizeService, public sharedService: SharedService ) { this.updateContactData(); diff --git a/src/app/services/color.service.ts b/src/app/services/color.service.ts new file mode 100644 index 0000000..0c7b672 --- /dev/null +++ b/src/app/services/color.service.ts @@ -0,0 +1,34 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class ColorService { + generateRandomColor(): string { + const letters = '0123456789ABCDEF'; + let color = '#'; + let isGrayScale = true; + + while (isGrayScale) { + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + const rgb = this.hexToRgb(color); + if (rgb.r !== rgb.g || rgb.g !== rgb.b) { + isGrayScale = false; + } else { + color = '#'; + } + } + + return color; + } + + hexToRgb(hex: string): { r: number; g: number; b: number } { + const bigint = parseInt(hex.substring(1), 16); + const r = (bigint >> 16) & 255; + const g = (bigint >> 8) & 255; + const b = bigint & 255; + return { r, g, b }; + } +} diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts index e3d373b..fae8fca 100644 --- a/src/app/services/login.service.ts +++ b/src/app/services/login.service.ts @@ -25,6 +25,7 @@ import { Router } from '@angular/router'; import CryptoES from 'crypto-es'; import { CryptoESSecretKey } from '../environments/config'; import { catchError, map, Observable, of } from 'rxjs'; +import { ColorService } from './color.service'; @Injectable({ providedIn: 'root', @@ -39,6 +40,7 @@ export class LoginService { constructor( private firebaseService: FirebaseService, + private colorService: ColorService, public sharedService: SharedService, private router: Router ) {} @@ -124,7 +126,7 @@ export class LoginService { ? registerData.firstName.slice(0, 1).toUpperCase() + registerData.lastName.slice(0, 1).toUpperCase() : '', - color: this.sharedService.generateRandomColor(), + color: this.colorService.generateRandomColor(), lastLogin: new Date().getTime(), }; this.createUserInFirestore(userDataToSave); @@ -169,7 +171,7 @@ export class LoginService { isOnline: true, phone: '', initials: firstName.slice(0, 1) + lastName.slice(0, 1), - color: this.sharedService.generateRandomColor(), + color: this.colorService.generateRandomColor(), lastLogin: 0, }); } else { diff --git a/src/app/services/resize.service.ts b/src/app/services/resize.service.ts new file mode 100644 index 0000000..9ff3329 --- /dev/null +++ b/src/app/services/resize.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class ResizeService { + isPageViewMedia: boolean = window.innerWidth <= 650; + isContactViewMedia: boolean = window.innerWidth <= 800; + + private resizeListener!: () => void; + + constructor() { + this.initResizeListener(); + } + + private initResizeListener() { + this.resizeListener = this.onResize.bind(this); + window.addEventListener('resize', this.resizeListener); + } + + private onResize() { + this.isPageViewMedia = window.innerWidth <= 650; + this.isContactViewMedia = window.innerWidth <= 800; + } + + cleanup() { + window.removeEventListener('resize', this.resizeListener); + } +} diff --git a/src/app/services/shared.service.ts b/src/app/services/shared.service.ts index 5d51b8a..8453438 100644 --- a/src/app/services/shared.service.ts +++ b/src/app/services/shared.service.ts @@ -10,121 +10,5 @@ export class SharedService { isNewContactDialogOpen: boolean = false; isEditContactDialogOpen: boolean = false; isDeleteContactDialogOpen: boolean = false; - isPageViewMedia: boolean = window.innerWidth <= 650; - isContactViewMedia: boolean = window.innerWidth <= 800; currentUserId: string = ''; - - private resizeListener!: () => void; - - constructor() { - this.initResizeListener(); - } - - // CHECK VIEW WIDTH - - /** - * Initializes the window resize listener. - * - * @remarks - * This function will set up the window resize listener and bind the - * onResize() method to it. - */ - private initResizeListener() { - this.resizeListener = this.onResize.bind(this); - window.addEventListener('resize', this.resizeListener); - } - - /** - * Removes the window resize listener. - * - * @remarks - * This function will remove the window resize listener that was set up in - * the constructor. This is useful when the service is being destroyed. - */ - private removeResizeListener() { - window.removeEventListener('resize', this.resizeListener); - } - - /** - * Window resize event listener method. - * - * @remarks - * This method will update the isPageViewMedia and isContactViewMedia - * properties based on the current window width whenever the window is - * resized. - */ - private onResize() { - this.isPageViewMedia = window.innerWidth <= 650; - this.isContactViewMedia = window.innerWidth <= 800; - } - - /** - * Cleans up the service by removing the window resize listener. - * - * @remarks - * This function is useful when the service is being destroyed. - */ - cleanup() { - this.removeResizeListener(); - } - - // RANDOM COLOR - - /** - * Generates a random color string. - * - * @remarks - * The generated color is a hex string that is not a shade of gray. - * The color is generated by randomly selecting a hex digit from the - * string '0123456789ABCDEF' and appending it to the color string. The - * loop continues until a non-gray color is generated. - * - * @returns A random color string. - */ - generateRandomColor(): string { - const letters = '0123456789ABCDEF'; - let color = '#'; - let isGrayScale = true; - - while (isGrayScale) { - for (let i = 0; i < 6; i++) { - color += letters[Math.floor(Math.random() * 16)]; - } - const rgb = this.hexToRgb(color); - if (rgb.r !== rgb.g || rgb.g !== rgb.b) { - isGrayScale = false; - } else { - color = '#'; - } - } - - return color; - } - - /** - * Converts a hex color string to an RGB object. - * - * @param hex A color string in hex format, e.g. '#FF0000'. - * @returns An object with r, g, and b properties, each an integer between - * 0 and 255, representing the red, green, and blue components of the color. - */ - hexToRgb(hex: string): { r: number; g: number; b: number } { - const bigint = parseInt(hex.substring(1), 16); - const r = (bigint >> 16) & 255; - const g = (bigint >> 8) & 255; - const b = bigint & 255; - return { r, g, b }; - } - - // SECURITY - - /** - * Sanitizes the input string by replacing any potential cross-site scripting characters. - * This ensures that the input string is safe to be stored in the Firebase Realtime Database. - * @param input The input string to be sanitized. - * @returns The sanitized string. - */ - replaceXSSChars(input: string) { - return input.replace(//g, '>'); - } }