add new login design

Author: Awakich

projects/social_platform/src/app/auth/email-verification/email-verification.component.scss

@@ -36,7 +36,7 @@
 
     @include responsive.apply-desktop {
       bottom: 0%;
-      left: 20%;
+      left: 30%;
       min-width: 852px;
     }
   }

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

@@ -2,18 +2,17 @@
 
 <form class="auth" [formGroup]="loginForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
   <div class="auth__wrapper">
-    <h1 class="auth__title">Вход</h1>
-    <p class="login__reg">Нет аккаунта? <a routerLink="/auth/register">Зарегистрируйтесь</a></p>
+    <img class="login__logo" src="/assets/images/shared/logo.svg" alt="logo" />
     @if (loginForm.get("email"); as email) {
     <fieldset class="auth__field">
-      <label for="email" class="field-label">Электронная почта</label>
+      <label for="email" class="field-label">почта*</label>
       <app-input
         size="big"
         [error]="email | controlError"
         id="email"
         type="email"
         formControlName="email"
-        placeholder="Введите почту"
+        placeholder="example@example.com"
       ></app-input>
       @if (email | controlError: "email") {
       <div class="text-body-10 error">
@@ -28,39 +27,21 @@ <h1 class="auth__title">Вход</h1>
     } @if (loginForm.get("password"); as password) {
     <fieldset class="auth__field">
       <div class="login__password">
-        <label class="field-label" for="password">Пароль</label>
-        <a routerLink="/auth/reset_password/send_email" class="login__forget"> Забыли пароль? </a>
+        <label class="field-label" for="password">пароль</label>
+        <a routerLink="/auth/reset_password/send_email" class="login__forget">забыли пароль? </a>
       </div>
       <app-input
         size="big"
         [error]="password | controlError"
         id="password"
         [type]="showPassword ? 'text' : 'password'"
         formControlName="password"
-        placeholder="Введите пароль"
+        placeholder="GJiwoeuhbn120="
       >
         @if(showPassword) {
-        <i
-          appIcon
-          icon="eye"
-          appSquare="24"
-          appWidth="24"
-          appHeight="24"
-          appViewBox="0 0 24 24"
-          class="icon"
-          (click)="toggleShowPassword()"
-        ></i>
+        <i appIcon icon="eye" appSquare="18" class="icon" (click)="toggleShowPassword()"></i>
         } @else {
-        <i
-          appIcon
-          icon="eye-off"
-          appSquare="24"
-          appWidth="24"
-          appHeight="24"
-          appViewBox="0 0 24 24"
-          class="icon"
-          (click)="toggleShowPassword()"
-        ></i>
+        <i appIcon icon="eye-off" appSquare="18" class="icon" (click)="toggleShowPassword()"></i>
         }
       </app-input>
       @if (password | controlError: "required") {
@@ -81,7 +62,7 @@ <h1 class="auth__title">Вход</h1>
       customTypographyClass="auth__button-typography"
       type="submit"
     >
-      Войти
+      войти
       <i
         class="auth__button-icon"
         appIcon
@@ -91,5 +72,42 @@ <h1 class="auth__title">Вход</h1>
         appViewBox="0 0 18 9"
       ></i>
     </app-button>
+    <div class="login__additional">
+      <p class="login__reg text-body-12">
+        нет аккаунта? <a routerLink="/auth/register">зарегистрируйтесь</a>
+      </p>
+      <hr />
+      <p class="text-body-12 login__external">
+        *Если ты регистрировался через форму на сайте программы кейс-чемпионата, введи данные,
+        которые ты указывал ранее
+      </p>
+    </div>
   </div>
 </form>
+
+<div class="tooltip">
+  <app-tooltip
+    color="grey"
+    iconSize="40"
+    (click)="$event.stopPropagation(); toggleTooltip()"
+  ></app-tooltip>
+
+  @if (isHintLoginVisible()) {
+  <div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
+    <p class="tooltip__text text-body-10">
+      Если у тебя есть вопросы, напиши в наш телеграм-бот поддержки
+      <span>{{ "@procollab_bot" }}</span>
+    </p>
+    <br />
+
+    <p class="tooltip__text text-body-10">
+      Если не нашел ответ в боте, напиши в техподдержку. Обычно отвечаем в рабочее время – с
+      понедельника по пятницу с 10:00 до 18:00 по московскому времени
+      <br />
+      <span>{{ "@procollab_support" }}</span>
+    </p>
+  </div>
+  }
+</div>
+
+<img class="login__image" src="/assets/images/auth/login-img.png" />

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

@@ -4,16 +4,38 @@
 @use "styles/typography";
 
 .login {
-  &__reg {
-    margin-bottom: 30px;
+  height: 100vh;
+
+  &__image {
+    position: absolute;
+    right: 0%;
+    top: 0%;
+    display: none;
 
-    @include typography.body-14;
+    @include responsive.apply-desktop {
+      display: block;
+      margin-left: 135px;
+      width: inherit;
+      height: 100%;
+    }
+  }
+
+   &__logo {
+    position: sticky;
+    display: block;
+    width: 95px;
+    margin-bottom: 20px;
 
     @include responsive.apply-desktop {
-      @include typography.body-16;
+      width: 157px;
+      height: 30px;
     }
   }
 
+  &__reg {
+    margin-top: 8px;
+  }
+
   &__forget {
     display: block;
     text-align: center;
@@ -33,9 +55,53 @@
     justify-content: space-between;
     margin-top: 12px;
   }
+
+  &__external {
+    color: var(--grey-for-text);
+    width: 80%;
+
+    @include responsive.apply-desktop {
+      width: 100%;
+    }
+  }
+
+  &__additional {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-left: 18px;
+  }
 }
 
 .icon {
   color: var(--dark-grey);
   cursor: pointer;
 }
+
+.tooltip {
+  display: flex;
+  align-items: center;
+  height: 135px;
+  margin-top: 18px;
+
+  @include responsive.apply-desktop {
+    margin-top: 30px;
+  }
+
+  &__wrapper {
+    width: 260px;
+    margin-bottom: 140px;
+    border: 0.5px solid var(--grey-for-text);
+    border-radius: var(--rounded-lg) var(--rounded-lg) var(--rounded-lg) 0px;
+    background-color: var(--white);
+    padding: 18px 10px 10px 16px;
+  }
+
+  &__text {
+    color: var(--grey-for-text);
+
+    span {
+      color: var(--accent);
+    }
+  }
+}

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

@@ -1,13 +1,21 @@
 /** @format */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+  signal,
+} from "@angular/core";
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
 import { AuthService } from "../services";
 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";
+import { TooltipComponent } from "@ui/components/tooltip/tooltip.component";
+import { ClickOutsideModule } from "ng-click-outside";
 
 /**
  * Компонент входа в систему
@@ -40,6 +48,8 @@ import { CommonModule } from "@angular/common";
     ButtonComponent,
     IconComponent,
     ControlErrorPipe,
+    TooltipComponent,
+    ClickOutsideModule,
   ],
 })
 export class LoginComponent implements OnInit {
@@ -66,11 +76,16 @@ export class LoginComponent implements OnInit {
   errorMessage = ErrorMessage;
 
   showPassword = false;
+  readonly isHintLoginVisible = signal<boolean>(false);
 
   ngOnInit(): void {
     this.tokenService.clearTokens();
   }
 
+  toggleTooltip(): void {
+    this.isHintLoginVisible.set(!this.isHintLoginVisible());
+  }
+
   toggleShowPassword() {
     this.showPassword = !this.showPassword;
   }

projects/social_platform/src/app/office/office.component.scss

@@ -113,7 +113,7 @@
       display: flex;
       flex-direction: column;
       gap: 2px;
-      width: 70%;
+      width: 80%;
       margin-top: 30px;
       color: var(--dark-grey);
     }

projects/social_platform/src/app/ui/components/tooltip/tooltip.component.html

@@ -8,6 +8,7 @@
   [class]="customClass"
   (mouseenter)="show.emit()"
   (mouseleave)="hide.emit()"
+  [style.color]="color === 'accent' ? 'var(--accent)' : 'var(--grey-for-text)'"
 ></i>
 <span
   class="tooltip__content text-body-10"

projects/social_platform/src/app/ui/components/tooltip/tooltip.component.ts

@@ -45,6 +45,9 @@ export class TooltipComponent {
   /** Дополнительные CSS классы */
   @Input() customClass = "";
 
+  /** Цвет иконки */
+  @Input() color: "accent" | "grey" = "accent";
+
   /** Событие показа подсказки */
   @Output() show = new EventEmitter<void>();