add modal to register error

Author: Awakich

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

@@ -211,5 +211,39 @@ <h3 class="auth__title auth__title--register">
     </app-button>
     }
     <p class="auth__toggle">Есть аккаунт? <a routerLink="/auth/login">Войдите</a></p>
+
+    <app-modal
+      [open]="isUserCreationModalError"
+      (openChange)="isUserCreationModalError = !isUserCreationModalError"
+    >
+      <div class="cancel">
+        <i
+          (click)="isUserCreationModalError = !isUserCreationModalError"
+          appIcon
+          icon="cross"
+          class="register__cross"
+        ></i>
+
+        <p class="register__title">Привет!</p>
+
+        <p class="text-body-14 register__text">
+          Подтверждение аккаунтов на платформе временно выполняется вручную, процесс может занять до
+          6 часов.
+        </p>
+
+        <p class="text-body-14 register__text">
+          Как только твой аккаунт будет подтвержден, ты получишь уведомление на почту.
+        </p>
+
+        <p class="text-body-14 register__text">
+          Мы уже решаем эту проблему, чтобы сделать использование платформы максимально комфортным
+          для тебя ❤️
+          <br />
+          <br />
+          По любым вопросам пиши в
+          <a href="https://t.me/procollab_support">аккаунт поддержки в Telegram</a>
+        </p>
+      </div>
+    </app-modal>
   </form>
 </div>

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

@@ -35,4 +35,53 @@
   &__repeated-password {
     margin-top: 6px;
   }
+
+  &__text {
+    margin-bottom: 30px;
+
+    @include responsive.apply-desktop {
+      margin-bottom: 20px;
+    }
+  }
+
+  &__cross {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    @include responsive.apply-desktop {
+      top: 8px;
+      right: 8px;
+    }
+  }
+
+  &__title {
+    margin-bottom: 20px;
+    color: var(--black);
+    inline-size: 280px;
+
+    @include typography.heading-3;
+
+    @include responsive.apply-desktop {
+      inline-size: 500px;
+    }
+  }
+}
+
+.cancel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  max-width: 600px;
+  max-height: calc(100vh - 40px);
+  padding: 20px 0;
+
+  @include responsive.apply-desktop {
+    padding: 20px 0;
+  }
 }

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

@@ -9,6 +9,7 @@ import * as dayjs from "dayjs";
 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";
 
 dayjs.extend(cpf);
 
@@ -22,6 +23,7 @@ dayjs.extend(cpf);
     InputComponent,
     CheckboxComponent,
     ButtonComponent,
+    ModalComponent,
     RouterLink,
     ControlErrorPipe,
   ],
@@ -66,6 +68,8 @@ export class RegisterComponent implements OnInit {
   credsSubmitInitiated = false;
   infoSubmitInitiated = false;
 
+  isUserCreationModalError = false;
+
   serverErrors: string[] = [];
 
   step: "credentials" | "info" = "credentials";
@@ -122,6 +126,8 @@ export class RegisterComponent implements OnInit {
           // console.log(error);
           this.serverErrors = Object.values(error.error).flat() as string[];
           console.log(this.serverErrors);
+        } else if (error.status === 500) {
+          this.isUserCreationModalError = true;
         }
 
         this.registerIsSubmitting = false;