gofnnp
04ecbb837c
Исправил баги, доработал таймер для отправки повторного кода и сделал обработку ошибок при авторизации
108 lines
3.3 KiB
HTML
108 lines
3.3 KiB
HTML
<app-navbar
|
||
*ngIf="phoneForm.value.phone && !isShowNumber"
|
||
[title]="phoneForm.value.phone"
|
||
(backEvent)="backToPhoneForm()"
|
||
[ngStyle]="{
|
||
position: 'absolute',
|
||
top: 0
|
||
}"
|
||
></app-navbar>
|
||
<h1>Участвуй в программе лояльности COFFEE LIKE</h1>
|
||
<p class="description">Начни получать бонусы прямо сейчас</p>
|
||
<form
|
||
*ngIf="isShowNumber; else smsCode"
|
||
(ngSubmit)="submitNumber()"
|
||
[formGroup]="phoneForm"
|
||
>
|
||
<!-- <div class="input-container"> -->
|
||
<mat-form-field appearance="outline">
|
||
<mat-label>Ваше имя</mat-label>
|
||
<input formControlName="name" matInput type="text" />
|
||
</mat-form-field>
|
||
<!-- </div> -->
|
||
<div class="input-container">
|
||
<!-- <label for="number">Номер телефона</label>
|
||
<input id="number" type="text" placeholder="Введите номер" /> -->
|
||
<mat-form-field appearance="outline">
|
||
<mat-label>Номер телефона</mat-label>
|
||
<ngx-mat-intl-tel-input
|
||
formControlName="phone"
|
||
[enablePlaceholder]="true"
|
||
[enableSearch]="false"
|
||
[onlyCountries]="['ru', 'kg', 'by', 'kz', 'fi', 'de']"
|
||
[preferredCountries]="['ru']"
|
||
name="phone"
|
||
#phone
|
||
>
|
||
</ngx-mat-intl-tel-input>
|
||
</mat-form-field>
|
||
</div>
|
||
<p class="offer">
|
||
Используя приложение, вы принимаете условия в <span>соглашениях</span> и
|
||
соглашаетесь на получение рекламно-информационных сообщений
|
||
</p>
|
||
<button [disabled]="phoneForm.invalid">Принять участие</button>
|
||
</form>
|
||
|
||
<ng-template #smsCode>
|
||
<h2>Введите код из SMS</h2>
|
||
<form class="code-form" [formGroup]="codeForm" (ngSubmit)="submitCode()">
|
||
<div class="inputs-container">
|
||
<label class="box"
|
||
><input
|
||
class="field"
|
||
id="field"
|
||
type="tel"
|
||
placeholder="•"
|
||
#field
|
||
[appFocusNextInput]="inputFocusEmitter"
|
||
formControlName="code"
|
||
maxlength="1"
|
||
/></label>
|
||
<label class="box"
|
||
><input
|
||
class="field"
|
||
id="field1"
|
||
type="tel"
|
||
placeholder="•"
|
||
#field1
|
||
[appFocusNextInput]="inputFocusEmitter"
|
||
formControlName="code1"
|
||
maxlength="1"
|
||
/></label>
|
||
<label class="box"
|
||
><input
|
||
class="field"
|
||
id="field2"
|
||
type="tel"
|
||
placeholder="•"
|
||
#field2
|
||
[appFocusNextInput]="inputFocusEmitter"
|
||
formControlName="code2"
|
||
maxlength="1"
|
||
/></label>
|
||
<label class="box"
|
||
><input
|
||
class="field"
|
||
id="field3"
|
||
type="tel"
|
||
placeholder="•"
|
||
#field3
|
||
[appFocusNextInput]="inputFocusEmitter"
|
||
formControlName="code3"
|
||
maxlength="1"
|
||
/></label>
|
||
</div>
|
||
<button>Войти</button>
|
||
</form>
|
||
<p class="resend-code">
|
||
Не пришло SMS?<br />
|
||
<ng-container *ngIf="timeLeft">
|
||
Отправим повторно через {{timeLeft}}с
|
||
</ng-container>
|
||
<ng-container *ngIf="!timeLeft">
|
||
<span class="resend" (click)="submitNumber()">Отправить повторно</span>
|
||
</ng-container>
|
||
</p>
|
||
</ng-template>
|