From d6f51a5d1c4a58d0a283759fe76d6067762d74d6 Mon Sep 17 00:00:00 2001
From: Polianin Nikita <nikitkapolyanin@yandex.ru>
Date: Tue, 11 Jun 2024 00:24:25 +0300
Subject: [PATCH] feat: add setup/welcome page

---
 .../setup/welcome/welcome.component.html      | 54 +++++++++++++++++++
 src/pages/setup/welcome/welcome.component.ts  | 45 ++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 src/pages/setup/welcome/welcome.component.html
 create mode 100644 src/pages/setup/welcome/welcome.component.ts

diff --git a/src/pages/setup/welcome/welcome.component.html b/src/pages/setup/welcome/welcome.component.html
new file mode 100644
index 0000000..8609d32
--- /dev/null
+++ b/src/pages/setup/welcome/welcome.component.html
@@ -0,0 +1,54 @@
+<h1>Установщик MIREA Schedule</h1>
+<hr/>
+<p>
+  Мы рады помочь вам начать работу с нашим приложением.
+  Этот мастер настройки проведет вас через ряд шагов по настройке основных параметров вашей системы.
+  К концу этого процесса у вас будет все готово для использования приложения в полной мере.
+</p>
+
+<p>
+  Пожалуйста, внимательно следуйте инструкциям и предоставьте необходимую информацию при появлении запроса.
+  Если у вас есть какие-либо вопросы, обратитесь к документации или свяжитесь с нашей службой поддержки.
+</p>
+
+<p>
+  Для получения ключа используете тот же хост, что и Backend приложение и выполните:
+</p>
+<code>
+  curl -X 'GET' '{{apiToGetToken}}/Setup/GenerateToken' -H 'accept: application/json'
+</code>
+<p>
+  Или
+</p>
+<code>
+  Invoke-RestMethod -Uri "{{apiToGetToken}}/Setup/GenerateToken" -Method Get -Headers &#x40;&#123;accept="application/json"&#125;
+</code>
+
+<div style="display: flex; flex-direction: column; margin: 25px 0;">
+  <mat-form-field color="accent">
+    <mat-label>Токен сервера</mat-label>
+    <input matInput
+           required
+           [formControl]="tokenControl">
+
+    @if (tokenControl.hasError('required')) {
+      <mat-error>
+        Токен является <i>обязательным</i>
+      </mat-error>
+    }
+
+    @if (tokenControl.hasError('pattern')) {
+      <mat-error>
+        Токен должен содержать только BASE64 символы кратные 4 (цирфы, латинские буквы и символы "+/=")
+      </mat-error>
+    }
+
+    @if (tokenControl.hasError('minlength')) {
+      <mat-error>
+        Токен не может быть меньше 16 символов
+      </mat-error>
+    }
+  </mat-form-field>
+</div>
+
+<p>Для начала необходимо ввести токен, который нужен для настройки столь важных данных!</p>
diff --git a/src/pages/setup/welcome/welcome.component.ts b/src/pages/setup/welcome/welcome.component.ts
new file mode 100644
index 0000000..24675a4
--- /dev/null
+++ b/src/pages/setup/welcome/welcome.component.ts
@@ -0,0 +1,45 @@
+import {Component} from '@angular/core';
+import {MatButton} from "@angular/material/button";
+import {NavigationService} from "@service/navigation.service";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {AsyncPipe} from "@angular/common";
+import {FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import SetupService from "@api/v1/setup.service";
+import {environment} from "@/config/environment";
+import {AvailableVersion} from "@api/api.service";
+
+@Component({
+  selector: 'app-welcome',
+  standalone: true,
+  imports: [
+    MatButton,
+    MatFormFieldModule,
+    MatInput,
+    AsyncPipe,
+    ReactiveFormsModule
+  ],
+  templateUrl: './welcome.component.html'
+})
+
+export class WelcomeComponent {
+  protected tokenControl = new FormControl('', [
+    Validators.required,
+    Validators.pattern(/^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{4}|[A-Za-z0-9+\/]{3}=|[A-Za-z0-9+\/]{2}={2})$/),
+    Validators.minLength(16)
+  ]);
+
+  protected apiToGetToken : string = environment.apiUrl;
+
+  constructor(private navigationService: NavigationService, private api: SetupService) {
+    this.apiToGetToken += AvailableVersion[this.api.version];
+    this.navigationService.nextButtonAction = () => {
+      return this.api.checkToken(this.tokenControl.value ?? '');
+    };
+
+    this.navigationService.setNextButtonState(false);
+    this.tokenControl.valueChanges.subscribe(() => {
+      this.navigationService.setNextButtonState(this.tokenControl.valid);
+    });
+  }
+}