fix skills sidebar & register password

Author: Awakich

projects/skills/src/app/app.component.ts

@@ -39,9 +39,9 @@ export class AppComponent implements OnInit {
     { name: "Навыки", icon: "lib", link: "skills" },
     { name: "Рейтинг", icon: "growth", link: "rating" },
     { name: "Подписка", icon: "receipt", link: "subscription" },
-    { name: "Траектория бизнеса", icon: "trackbuss", link: "trackBuss" },
+    // { name: "Траектория бизнеса", icon: "trackbuss", link: "trackBuss" },
     { name: "Траектория карьеры", icon: "trackcar", link: "trackCar" },
-    { name: "Вебинары", icon: "webinars", link: "webinars" },
+    // { name: "Вебинары", icon: "webinars", link: "webinars" },
   ];
 
   userData = signal<UserData | null>(null);

projects/social_platform/src/app/auth/login/login.component.ts

@@ -7,6 +7,7 @@ import { ErrorMessage } from "@error/models/error-message";
 import { ControlErrorPipe, TokenService, ValidationService } from "projects/core";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { ButtonComponent, IconComponent, InputComponent } from "@ui/components";
+import { CommonModule } from "@angular/common";
 
 @Component({
   selector: "app-login",
@@ -15,6 +16,7 @@ import { ButtonComponent, IconComponent, InputComponent } from "@ui/components";
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
+    CommonModule,
     ReactiveFormsModule,
     RouterLink,
     InputComponent,

projects/social_platform/src/app/auth/register/register.component.html

@@ -57,18 +57,66 @@ <h3 class="auth__title auth__title--register">
         <app-input
           [error]="(password | controlError) && credsSubmitInitiated"
           id="passowrd"
-          type="password"
+          [type]="showPassword ? 'text' : 'password'"
           formControlName="password"
           placeholder="Придумайте пароль"
-        ></app-input>
+        >
+          @if(showPassword) {
+          <i
+            appIcon
+            icon="eye"
+            appSquare="24"
+            appWidth="24"
+            appHeight="24"
+            appViewBox="0 0 24 24"
+            class="icon"
+            (click)="toggleShowPassword('first')"
+          ></i>
+          } @else {
+          <i
+            appIcon
+            icon="eye-off"
+            appSquare="24"
+            appWidth="24"
+            appHeight="24"
+            appViewBox="0 0 24 24"
+            class="icon"
+            (click)="toggleShowPassword('first')"
+          ></i>
+          }
+        </app-input>
         <app-input
           class="register__repeated-password"
           [error]="(password | controlError) && credsSubmitInitiated"
           id="repeatedPassword"
-          type="password"
+          [type]="showPasswordRepeat ? 'text' : 'password'"
           formControlName="repeatedPassword"
           placeholder="Повторите пароль"
-        ></app-input>
+        >
+          @if(showPasswordRepeat) {
+          <i
+            appIcon
+            icon="eye"
+            appSquare="24"
+            appWidth="24"
+            appHeight="24"
+            appViewBox="0 0 24 24"
+            class="icon"
+            (click)="toggleShowPassword('repeat')"
+          ></i>
+          } @else {
+          <i
+            appIcon
+            icon="eye-off"
+            appSquare="24"
+            appWidth="24"
+            appHeight="24"
+            appViewBox="0 0 24 24"
+            class="icon"
+            (click)="toggleShowPassword('repeat')"
+          ></i>
+          }
+        </app-input>
         @if (credsSubmitInitiated) {
         <ng-container>
           @if (password | controlError: "required") {

projects/social_platform/src/app/auth/register/register.component.scss

@@ -85,3 +85,8 @@
     padding: 20px 0;
   }
 }
+
+.icon {
+  color: var(--dark-grey);
+  cursor: pointer;
+}

projects/social_platform/src/app/auth/register/register.component.ts

@@ -10,6 +10,8 @@ import * as cpf from "dayjs/plugin/customParseFormat";
 import { ButtonComponent, CheckboxComponent, InputComponent } from "@ui/components";
 import { AuthService } from "@auth/services";
 import { ModalComponent } from "@ui/components/modal/modal.component";
+import { IconComponent } from "@uilib";
+import { CommonModule } from "@angular/common";
 
 dayjs.extend(cpf);
 
@@ -19,12 +21,14 @@ dayjs.extend(cpf);
   styleUrl: "./register.component.scss",
   standalone: true,
   imports: [
+    CommonModule,
     ReactiveFormsModule,
     InputComponent,
     CheckboxComponent,
     ButtonComponent,
     ModalComponent,
     RouterLink,
+    IconComponent,
     ControlErrorPipe,
   ],
 })
@@ -68,6 +72,9 @@ export class RegisterComponent implements OnInit {
   credsSubmitInitiated = false;
   infoSubmitInitiated = false;
 
+  showPassword = false;
+  showPasswordRepeat = false;
+
   isUserCreationModalError = false;
 
   serverErrors: string[] = [];
@@ -76,6 +83,14 @@ export class RegisterComponent implements OnInit {
 
   errorMessage = ErrorMessage;
 
+  toggleShowPassword(type: "repeat" | "first") {
+    if (type === 'repeat') {
+      this.showPasswordRepeat = !this.showPasswordRepeat
+    } else {
+      this.showPassword = !this.showPassword;
+    }
+  }
+
   onInfoStep() {
     const fields = [
       this.registerForm.get("email"),