moving the loading dialog to component

src/app/components/login/loading-dialog/loading-dialog.component.html

@@ -0,0 +1,13 @@
+@if (sharedService.isBtnDisabled) {
+<div class="loading-dialog">
+  <div id="loading" class="loader"></div>
+  <div id="loadingText" class="loading-text">
+    <p>
+      {{ "login.loginDialog0" | translate }}
+    </p>
+    <p>
+      {{ "login.loginDialog1" | translate }}
+    </p>
+  </div>
+</div>
+}

src/app/components/login/loading-dialog/loading-dialog.component.scss

@@ -0,0 +1,49 @@
+.loading-dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(5px);
+  background-color: rgba($color: #000, $alpha: 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.loader {
+  position: fixed;
+  border: 16px solid var(--white);
+  border-top: 16px solid var(--light-blue);
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+  margin: auto;
+  margin-top: 20px;
+}
+
+.loading-text {
+  position: fixed;
+  text-align: center;
+  margin-top: 200px;
+  color: var(--white);
+  text-shadow: 3px 3px 3px var(--black);
+  p {
+    font-size: 21px;
+    font-weight: 400px;
+    margin-bottom: 6px;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/app/components/login/loading-dialog/loading-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingDialogComponent } from './loading-dialog.component';
+
+describe('LoadingDialogComponent', () => {
+  let component: LoadingDialogComponent;
+  let fixture: ComponentFixture<LoadingDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoadingDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LoadingDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/login/loading-dialog/loading-dialog.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { SharedService } from '../../../services/shared.service';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-loading-dialog',
+  standalone: true,
+  imports: [TranslateModule],
+  templateUrl: './loading-dialog.component.html',
+  styleUrl: './loading-dialog.component.scss',
+})
+export class LoadingDialogComponent {
+  constructor(public sharedService: SharedService) {}
+}

src/app/components/login/login.component.html

@@ -108,16 +108,4 @@
   </form>
   <app-footer></app-footer>
 </section>
-@if (sharedService.isBtnDisabled) {
+<app-loading-dialog></app-loading-dialog>
-<div class="loading-dialog">
-  <div id="loading" class="loader"></div>
-  <div id="loadingText" class="loading-text">
-    <p>
-      {{ "login.loginDialog0" | translate }}
-    </p>
-    <p>
-      {{ "login.loginDialog1" | translate }}
-    </p>
-  </div>
-</div>
-}

src/app/components/login/login.component.scss

@@ -87,58 +87,6 @@ section {
   padding: 12px 0;
 }
 
-/*------------- LOADER -------------*/
-
-.loading-dialog {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(5px);
-  background-color: rgba($color: #000, $alpha: 0.2);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
-
-.loader {
-  position: fixed;
-  border: 16px solid var(--white);
-  border-top: 16px solid var(--light-blue);
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  animation: spin 2s linear infinite;
-  margin: auto;
-  margin-top: 20px;
-}
-
-.loading-text {
-  position: fixed;
-  text-align: center;
-  margin-top: 200px;
-  color: var(--white);
-  text-shadow: 3px 3px 3px var(--black);
-  p {
-    font-size: 21px;
-    font-weight: 400px;
-    margin-bottom: 6px;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /*------------- RESPONSIVE -------------*/
 
 @media (max-height: 800px) {

src/app/components/login/login.component.ts

@@ -9,6 +9,7 @@ import { SharedService } from '../../services/shared.service';
 import { FooterComponent } from './footer/footer.component';
 import { HeaderComponent } from './header/header.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { LoadingDialogComponent } from './loading-dialog/loading-dialog.component';
 
 @Component({
   selector: 'app-login',
@@ -20,6 +21,7 @@ import { TranslateModule } from '@ngx-translate/core';
     FooterComponent,
     HeaderComponent,
     TranslateModule,
+    LoadingDialogComponent,
   ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',

src/app/components/login/register/register.component.html

@@ -170,6 +170,7 @@
             !registerData.mail ||
             password.invalid ||
             !registerData.password ||
+            !checkbox.valid ||
             sharedService.isBtnDisabled ||
             registerData.password.length < 6 ||
             registerData.password !== registerData.passwordConfirm ||
@@ -181,3 +182,4 @@
   </form>
   <app-footer></app-footer>
 </section>
+<app-loading-dialog></app-loading-dialog>

src/app/components/login/register/register.component.ts

@@ -10,6 +10,7 @@ import { SharedService } from '../../../services/shared.service';
 import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
 import { RouterModule } from '@angular/router';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { LoadingDialogComponent } from '../loading-dialog/loading-dialog.component';
 
 @Component({
   selector: 'app-register',
@@ -23,6 +24,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
     CommonModule,
     RouterModule,
     TranslateModule,
+    LoadingDialogComponent,
   ],
   templateUrl: './register.component.html',
   styleUrl: './register.component.scss',