Hotfixes loaders

src/app/auth/auth.component.html

@@ -134,7 +134,8 @@
               *ngIf="formSignUp.controls['userNewPassword'].errors?.['pattern']
                 && formSignUp.controls['userNewPassword'].touched"
             >
-              Your password isn't strong enough
+              Your password isn't strong enough! You should have one upper letter, one lower letter, one number, one
+              special symbol (?, !, @, #, $, %, ^, &, *, -) and length more 8 symbols.
             </div>
           </label>
           <button class="login-button" nzType="primary" nz-button>Sign up</button>

src/app/auth/auth.component.scss

@@ -11,7 +11,8 @@
 
   .login-wrapper {
     padding: 20px;
-    width: 265px;
+    max-width: 500px;
+    width: 100%;
 
     display: flex;
     flex-direction: column;

src/app/auth/services/auth.service.ts

@@ -32,6 +32,14 @@ export class AuthService {
 
   isLoading = false;
 
+  loading() {
+    this.isLoading = true;
+  }
+
+  loaded() {
+    this.isLoading = false;
+  }
+
   loginHandle(value: string) {
     this.login = value;
   }
@@ -68,9 +76,9 @@ export class AuthService {
 
   comeIn() {
     if (this.login && this.password) {
-      this.isLoading = true;
+      this.loading();
       this.authAPIService.signIn({ login: this.login, password: this.password }).subscribe((response) => {
-        this.isLoading = false;
+        this.loaded();
         if (response) {
           window.localStorage.setItem('userLogin', this.login);
           window.localStorage.setItem('userTokenMid', response.token);
@@ -85,11 +93,11 @@ export class AuthService {
 
   signUpNewUser() {
     if (this.signUpName && this.signUpLogin && this.signUpPassword) {
-      this.isLoading = true;
+      this.loading();
       this.authAPIService
         .signUp({ name: this.signUpName, login: this.signUpLogin, password: this.signUpPassword })
         .subscribe((response) => {
-          this.isLoading = false;
+          this.loaded();
           if (response) {
             this.message.create(
               Message.SUCCESS,

src/app/board/board-item/board-item.component.scss

@@ -7,7 +7,11 @@
   margin-bottom: 0.5rem;
 
   .mt-1 {
+    max-width: 120px;
     margin-top: 0.25rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
 

src/app/board/board.module.ts

@@ -16,6 +16,7 @@ import { HeaderComponent } from './header/header.component';
 import { SpaceModule } from '../space/space.module';
 import { ConfirmModule } from '../confirm/confirm.module';
 import { EditColumnTitleComponent } from './edit-column-title/edit-column-title.component';
+import { LoaderModule } from '../loader/loader.module';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import { EditColumnTitleComponent } from './edit-column-title/edit-column-title.
     NzButtonModule,
     ConfirmModule,
     NzToolTipModule,
+    LoaderModule,
   ],
   exports: [BoardComponent, BoardItemComponent],
 })

src/app/board/board/board.component.html

@@ -1,6 +1,11 @@
 <div class="space">
   <space-left-aside pageName="Board Page"></space-left-aside>
-  <div class="space__main">
+  <div
+    class="space__main"
+    [class]="{
+      disabled: boardService.isLoadingDesk
+    }"
+  >
     <board-header [title]="boardService.titleBoard"></board-header>
     <div
       cdkDropList
@@ -53,5 +58,6 @@
         </div>
       </div>
     </div>
+    <app-loader *ngIf="boardService.isLoadingDesk" [isForBlock]="true"></app-loader>
   </div>
 </div>

src/app/board/board/board.component.scss

@@ -103,9 +103,15 @@
   min-height: 100%;
   background-color: $main-color;
   display: flex;
+
   &__main {
     width: 100%;
     min-height: 100%;
     background-color: $main-color;
+    position: relative;
+
+    &.disabled {
+      pointer-events: none;
+    }
   }
 }

src/app/board/header/header.component.html

@@ -4,7 +4,7 @@
   </div>
   <div>
     <app-dialog (emitText)="addColumn($event)" question="Add new column">
-      <button nz-button nzType="primary">New Column</button>
+      <button nz-button nzType="primary" [disabled]="boardService.isLoadingDesk">New Column</button>
     </app-dialog>
   </div>
 </div>

src/app/confirm/confirm-body/confirm-body.component.html

@@ -4,7 +4,7 @@ <h3>{{ data.question }}</h3>
     <div>Confirmation modal</div>
   </form>
 </div>
-<div>
+<div class="gap-10">
   <button nz-button nzType="primary" [mat-dialog-close]="true">Confirm</button>
   <button nz-button nzType="default" (click)="onNoClick()">Cancel</button>
 </div>

src/app/confirm/confirm-body/confirm-body.component.scss

@@ -0,0 +1,10 @@
+.w-100 {
+  margin-bottom: 16px;
+}
+
+.gap-10 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+}

src/app/dialog/dialog-body/dialog-body.component.html

@@ -16,7 +16,7 @@ <h3>{{ data.question }}</h3>
     </span>
   </form>
 </div>
-<div>
+<div class="gap-10">
   <button nz-button nzType="primary" [mat-dialog-close]="data.text">Confirm</button>
   <button nz-button nzType="default" (click)="onNoClick()">Cancel</button>
 </div>

src/app/dialog/dialog-body/dialog-body.component.scss

@@ -0,0 +1,10 @@
+.w-100 {
+  margin-bottom: 16px;
+}
+
+.gap-10 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+}

src/app/loader/loader.component.html

@@ -1,3 +1,11 @@
-<div class="loader">
-  <nz-spin nzSimple nzSize="large"></nz-spin>
+<div
+  class="loader"
+  [class]="{
+    block: isForBlock
+  }"
+  [style]="{
+    left: left
+  }"
+>
+  <nz-spin nzSimple [nzSize]="nzSize"></nz-spin>
 </div>

src/app/loader/loader.component.scss

@@ -14,4 +14,11 @@
   background-color: $bg-loader;
   width: 100%;
   height: 100%;
+
+  &.block {
+    position: absolute;
+    width: auto;
+    height: auto;
+    background-color: transparent;
+  }
 }

src/app/loader/loader.component.ts

@@ -1,8 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-loader',
   templateUrl: './loader.component.html',
   styleUrls: ['./loader.component.scss'],
 })
-export class LoaderComponent {}
+export class LoaderComponent {
+  @Input() isForBlock: boolean = false;
+
+  @Input() left: string | undefined;
+
+  @Input() nzSize: 'large' | 'small' | 'default' = 'large';
+}

src/app/profile/profile.component.html

@@ -1,5 +1,10 @@
 <div class="profile-page">
-  <div class="profile-wrapper">
+  <div
+    class="profile-wrapper"
+    [class]="{
+      disabled: profileService.isLoadingBlock
+    }"
+  >
     <div>
       <h2 class="profile-title">Profile</h2>
       <small>Please fill all fields</small>
@@ -50,7 +55,7 @@ <h2 class="profile-title">Profile</h2>
       <label class="label">
         Password:
         <input
-          type="password"
+          [type]="showPass ? 'text' : 'password'"
           placeholder="your new password"
           #mySPassword
           [value]="profileService.password"
@@ -63,6 +68,12 @@ <h2 class="profile-title">Profile</h2>
                 && form.controls['userNewPassword'].touched
           }"
         />
+        <div class="input-eye" *ngIf="!showPass" (click)="showPassHandle()">
+          <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
+        </div>
+        <div class="input-eye" *ngIf="showPass" (click)="showPassHandle()">
+          <i nz-icon nzType="eye" nzTheme="outline"></i>
+        </div>
         <div
           class="alert alert-danger"
           *ngIf="form.controls['userNewPassword'].errors?.['required']
@@ -75,7 +86,8 @@ <h2 class="profile-title">Profile</h2>
           *ngIf="form.controls['userNewPassword'].errors?.['pattern']
             && form.controls['userNewPassword'].touched"
         >
-          Your password isn't strong enough
+          Your password isn't strong enough! You should have one upper letter, one lower letter, one number, one special
+          symbol (?, !, @, #, $, %, ^, &, *, -) and length more 8 symbols.
         </div>
       </label>
       <button class="login-button" nzType="primary" nz-button>Save</button>
@@ -86,8 +98,16 @@ <h2 class="profile-title">Profile</h2>
         (click)="$event.stopPropagation()"
         (emitConfirm)="onUserDelete($event)"
       >
-        <button class="button button__icon" nz-icon nzType="delete" nzTheme="outline"></button>
+        <button
+          class="button button__icon"
+          nz-icon
+          nzType="delete"
+          nzTheme="outline"
+          [disabled]="profileService.isLoadingBlock"
+        ></button>
       </app-confirm>
     </div>
+    <app-loader *ngIf="profileService.isLoadingBlock" [isForBlock]="true"></app-loader>
   </div>
+  <app-loader *ngIf="profileService.isLoading"></app-loader>
 </div>

src/app/profile/profile.component.scss

@@ -1,13 +1,15 @@
 @import '../../styles/variables';
 
 .profile-page {
+  position: relative;
   padding: 50px 10px;
   display: flex;
   justify-content: center;
 
   .profile-wrapper {
     padding: 20px;
-    width: 265px;
+    max-width: 500px;
+    width: 100%;
     position: relative;
 
     display: flex;
@@ -39,14 +41,23 @@
       flex-direction: column;
       gap: 6px;
       font-size: 14px;
+      position: relative;
 
       .input {
         color: $first-color;
+        max-width: 173px;
 
         &.error {
           border: 1px solid $error-color;
           background-color: $fourth-color;
         }
+
+        &-eye {
+          position: absolute;
+          top: 35px;
+          left: 180px;
+          cursor: pointer;
+        }
       }
     }
 
@@ -55,6 +66,10 @@
       top: 25px;
       right: 27px;
     }
+
+    &.disabled {
+      pointer-events: none;
+    }
   }
 }
 

src/app/profile/profile.component.ts

@@ -11,15 +11,19 @@ import { regexpPassword } from '../../constants/constants';
 export class ProfileComponent implements OnInit {
   form: FormGroup;
 
+  showPass = false;
+
   constructor(public profileService: ProfileService) {
     this.form = this.initForm('', '');
   }
 
   ngOnInit() {
+    this.profileService.loading();
     this.profileService.getUserData().subscribe((response) => {
       this.profileService.nameHandle(response.name);
       this.profileService.loginHandle(response.login);
       this.form = this.initForm(response.name, response.login);
+      this.profileService.loaded();
     });
   }
 
@@ -42,4 +46,8 @@ export class ProfileComponent implements OnInit {
       this.profileService.removeUser();
     }
   }
+
+  showPassHandle() {
+    this.showPass = !this.showPass;
+  }
 }