сделал функционал "Отправить код повторно"
This commit is contained in:
gofnnp 2022-09-24 11:13:00 +04:00
parent baf5300439
commit 359a1a1966
3 changed files with 37 additions and 4 deletions

View File

@ -86,6 +86,11 @@
></p-progressSpinner>
</button>
</p>
<p class="form-row" style="margin-top: 6px">
Не пришел код?
<span class="resend-code" (click)="getCode($event)">Отправить повторно </span>
<span *ngIf="timeLeft">через {{timeLeft}}с</span>
</p>
<p style="color: red; margin: 0" *ngIf="errorConfirmCode">
Пароль введен неверно
</p>

View File

@ -1,6 +1,7 @@
:host {
display: flex;
justify-content: center;
display: flex;
justify-content: center;
.woocommerce-form-login__submit {
width: 150px;
}
@ -18,6 +19,7 @@
font-weight: 700;
font-size: 20px;
line-height: 24px;
&::before {
content: "";
width: 19px;
@ -48,6 +50,7 @@
width: 80%;
margin-bottom: 16px;
max-width: 400px;
.button {
width: 100%;
font-weight: 600;
@ -62,6 +65,7 @@
font-size: 16px;
line-height: 20px;
}
label {
display: inline-block;
margin-bottom: 8px;
@ -72,6 +76,7 @@
font-size: 18px;
line-height: 22px;
}
.input-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@ -87,9 +92,15 @@
border-radius: 4px;
width: 100%;
}
.resend-code {
color: #0d457e;
font-weight: 600;
}
}
.decoration-pattern {
width: calc(100% - 24px);
height: 34px;
}
}
}

View File

@ -21,6 +21,7 @@ export class AuthComponent {
public phoneToConfirm!: string;
public loading = false;
public errorConfirmCode: boolean = false;
timeLeft: number = 0;
constructor(
private phoneFormatter: FormatPhoneService,
@ -32,10 +33,18 @@ export class AuthComponent {
) {
}
getCode(event: SubmitEvent): void {
getCode(event: any): void {
event.preventDefault();
this.loading = true;
this.phoneToConfirm = '+' + this.phone.replace(/\D/g, '');
if (this.timeLeft) {
this.messageService.add({
severity: 'custom',
summary: `Отправить повторно можно через ${this.timeLeft}с`,
});
this.loading = false;
return;
}
this.jsonrpc.rpc({
method: 'sendVerifyByPhone',
params: [this.phoneToConfirm]
@ -49,6 +58,14 @@ export class AuthComponent {
}
if (result.code === 0) {
this.isCodeConfirm = true;
this.timeLeft = 60;
const interval = setInterval(() => {
if(this.timeLeft > 0) {
this.timeLeft--;
} else {
clearInterval(interval);
}
},1000)
}
this.loading = false;
},