feat: add setup/welcome page
This commit is contained in:
		
							
								
								
									
										54
									
								
								src/pages/setup/welcome/welcome.component.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										54
									
								
								src/pages/setup/welcome/welcome.component.html
									
									
									
									
									
										Normal file
									
								
							| @@ -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 @{accept="application/json"} | ||||||
|  | </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> | ||||||
							
								
								
									
										45
									
								
								src/pages/setup/welcome/welcome.component.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										45
									
								
								src/pages/setup/welcome/welcome.component.ts
									
									
									
									
									
										Normal file
									
								
							| @@ -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); | ||||||
|  |     }); | ||||||
|  |   } | ||||||
|  | } | ||||||
		Reference in New Issue
	
	Block a user