Merge pull request #209 from theImmortalCoders/dev

feat: #dev added testing phase info

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { FooterComponent } from './shared/components/footer/footer.component';
 import { NotificationComponent } from '@commonComponents/notification.component';
 import { CookieConsentComponent } from '@commonComponents/cookie-consent.component';
 import { CommonModule } from '@angular/common';
+import { TestPhaseComponent } from '@commonComponents/test-phase.component';
 
 @Component({
   selector: 'app-root',
@@ -16,13 +17,20 @@ import { CommonModule } from '@angular/common';
     NotificationComponent,
     CookieConsentComponent,
     CommonModule,
+    TestPhaseComponent,
   ],
   template: `
     @if (!isCookiesAccepted) {
       <app-cookie-consent />
     }
+    @if (isCookiesAccepted && !isTestingAccepted) {
+      <app-test-phase />
+    }
     <div
-      [ngClass]="{ 'filter blur-sm pointer-events-none': !isCookiesAccepted }">
+      [ngClass]="{
+        'filter blur-sm pointer-events-none':
+          !isCookiesAccepted || !isTestingAccepted,
+      }">
       <app-notification></app-notification>
       <app-navbar />
       <main class="max-w-full min-h-all overflow-x-hidden relative z-40">
@@ -35,8 +43,11 @@ import { CommonModule } from '@angular/common';
 export class AppComponent {
   public title = 'RUT-AI GAMES 2';
   public isCookiesAccepted = false;
+  public isTestingAccepted = false;
 
   public constructor() {
     this.isCookiesAccepted = localStorage.getItem('cookiesAccepted') === 'true';
+    this.isTestingAccepted =
+      localStorage.getItem('testPhaseAccepted') === 'true';
   }
 }

src/app/shared/components/common/test-phase.component.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-test-phase',
+  standalone: true,
+  imports: [MatIconModule],
+  template: `
+    <div
+      class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
+      <div
+        class="bg-lightGray rounded-lg shadow-lg p-6 text-center border-2 border-mainOrange">
+        <div
+          class="flex flex-row space-x-2 w-full items-center justify-center pb-4">
+          <h1 class="text-2xl text-mainOrange font-semibold uppercase">
+            the website is in the testing phase
+          </h1>
+          <mat-icon class="text-mainOrange text-xl font-thin"
+            >settings</mat-icon
+          >
+        </div>
+        <p class="text-mainCreme mb-4">
+          The system is currently in the testing phase, and any data we store
+          may be deleted without prior notice.
+        </p>
+        <button
+          (click)="acceptTesting()"
+          class="px-4 py-2 bg-mainOrange bg-opacity-80 text-mainCreme rounded hover:bg-opacity-100 focus:outline-none ease-in-out duration-200 transition-all">
+          I UNDERSTAND
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class TestPhaseComponent {
+  public acceptTesting(): void {
+    localStorage.setItem('testPhaseAccepted', 'true');
+    window.location.reload();
+  }
+}

src/app/user-workflow/register/register.page.component.ts

@@ -33,7 +33,7 @@ export class RegisterPageComponent implements OnInit {
 
   public ngOnInit(): void {
     this._notificationService.addNotification(
-      'The system is currently in the testing phase, and any data we store may be deleted without prior notice. A document containing a detailed description of the methods of processing the provided data is currently being prepared. At this time, by providing their data, the user acknowledges that we cannot guarantee its complete security.'
+      'A document containing a detailed description of the methods of processing the provided data is currently being prepared. At this time, by providing their data, the user acknowledges that we cannot guarantee its complete security.'
     );
   }
 }