dev #14607 Море. Правки по сайту: add registration form
This commit is contained in:
nikolay
parent
0e5e7e1d84
commit
54795be75a
@ -203,6 +203,7 @@ export interface UserInfo {
|
||||
OrdersSum: number;
|
||||
categories: UserInfoCategory[];
|
||||
customer_level: number;
|
||||
birthday: string;
|
||||
id: string;
|
||||
name: string | null;
|
||||
phone: string;
|
||||
@ -213,3 +214,9 @@ export interface ResponseError {
|
||||
code: number;
|
||||
msg: string;
|
||||
}
|
||||
|
||||
export interface UpdateNewCustomerRequest {
|
||||
name: string;
|
||||
sex: string;
|
||||
birthday: string;
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import { GuestCardComponent } from './pages/guest-card/guest-card.component';
|
||||
import { AuthGuard } from 'src/app/guards/auth-guard.guard';
|
||||
import { LoginComponent } from './pages/login/login.component';
|
||||
import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
|
||||
import { CreateUserComponent } from './pages/create_user/create_user.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
@ -18,7 +19,11 @@ const routes: Routes = [
|
||||
{
|
||||
path: 'loyality-program',
|
||||
component: LoyalityProgramComponent,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'create_user',
|
||||
component: CreateUserComponent,
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -7,6 +7,9 @@ import { SocialMediaButtonsComponent } from './components/social-media-buttons/s
|
||||
import { NavbarComponent } from './components/navbar/navbar.component';
|
||||
import { MenuItemComponent } from './components/navbar/menu_item.component';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatNativeDateModule } from '@angular/material/core';
|
||||
import { GuestCardComponent } from './pages/guest-card/guest-card.component';
|
||||
import { QrCodeModule } from 'ng-qrcode';
|
||||
import { AccordionComponent } from './components/accordion/accordion.component';
|
||||
@ -22,6 +25,7 @@ import { DirectivesModule } from 'src/app/directives/directives.module';
|
||||
import { LoyalityProgramComponent } from './pages/loyality-program/loyality-program.component';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { CreateUserComponent } from './pages/create_user/create_user.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -37,6 +41,7 @@ import { ToastModule } from 'primeng/toast';
|
||||
LoginComponent,
|
||||
LoyalityProgramComponent,
|
||||
MenuItemComponent,
|
||||
CreateUserComponent,
|
||||
],
|
||||
imports: [
|
||||
ToastModule,
|
||||
@ -51,7 +56,10 @@ import { ToastModule } from 'primeng/toast';
|
||||
ReactiveFormsModule,
|
||||
MatInputModule,
|
||||
DirectivesModule,
|
||||
MatButtonModule
|
||||
MatButtonModule,
|
||||
MatDatepickerModule,
|
||||
MatSelectModule,
|
||||
MatNativeDateModule,
|
||||
],
|
||||
bootstrap: [IndexComponent],
|
||||
})
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<ng-container *ngIf="!authService.loading">
|
||||
<form
|
||||
(ngSubmit)="submit()"
|
||||
[formGroup]="form"
|
||||
>
|
||||
<div class="container center">
|
||||
<div class="form">
|
||||
<h1>Регистрация</h1>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Ваше имя</mat-label>
|
||||
<input formControlName="name" matInput type="text" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Пол</mat-label>
|
||||
<mat-select formControlName="sex">
|
||||
<mat-option value="0">Не выбран</mat-option>
|
||||
<mat-option value="1">Мужчина</mat-option>
|
||||
<mat-option value="2">Женщина</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Дата рождения</mat-label>
|
||||
<input formControlName="date" matInput [matDatepicker]="picker">
|
||||
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="primary">Зарегистрироваться</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="authService.loading">
|
||||
<div class="spinner-container">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="spinner; context: { $implicit: 85 }"
|
||||
></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #spinner let-diameter>
|
||||
<div class="center wrapper">
|
||||
<mat-spinner [strokeWidth]="3" [diameter]="diameter"></mat-spinner>
|
||||
</div>
|
||||
</ng-template>
|
||||
@ -0,0 +1,22 @@
|
||||
h1 {
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { MessageService } from "primeng/api";
|
||||
import { AuthService } from "src/app/services/auth.service";
|
||||
import moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector: 'create-user',
|
||||
templateUrl: './create_user.component.html',
|
||||
styleUrls: ['./create_user.component.scss'],
|
||||
})
|
||||
export class CreateUserComponent implements OnInit {
|
||||
public form = new FormGroup({
|
||||
name: new FormControl('', [Validators.required]),
|
||||
sex: new FormControl('', [Validators.required]),
|
||||
date: new FormControl('', [Validators.required]),
|
||||
});
|
||||
|
||||
constructor(
|
||||
public authService: AuthService,
|
||||
private messageService: MessageService,
|
||||
) { }
|
||||
|
||||
ngOnInit() { }
|
||||
|
||||
submit() {
|
||||
if (this.form.invalid) {
|
||||
this.messageService.add({
|
||||
severity: 'error',
|
||||
summary: 'Введите имя, пол и дату рождения',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const name = this.form.value.name!;
|
||||
const sex = this.form.value.sex!;
|
||||
const date = this.form.value.date!;
|
||||
|
||||
const formattedDate = moment(date).format('yyyy-MM-DD');
|
||||
|
||||
this.authService.register(name, sex, formattedDate);
|
||||
}
|
||||
}
|
||||
@ -15,15 +15,7 @@
|
||||
(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
|
||||
@ -38,7 +30,7 @@
|
||||
</ngx-mat-intl-tel-input>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button>Принять участие</button>
|
||||
<button mat-raised-button color="primary">Принять участие</button>
|
||||
</form>
|
||||
</div>
|
||||
<ng-template #smsCode>
|
||||
@ -87,7 +79,7 @@
|
||||
maxlength="1"
|
||||
/></label>
|
||||
</div>
|
||||
<button>Войти</button>
|
||||
<button mat-raised-button color="primary">Войти</button>
|
||||
</form>
|
||||
<p class="resend-code">
|
||||
Не пришло SMS?<br />
|
||||
|
||||
@ -18,7 +18,6 @@ import { MessageService } from 'primeng/api';
|
||||
export class LoginComponent implements OnInit {
|
||||
public isShowNumber: boolean = true;
|
||||
public phoneForm = new FormGroup({
|
||||
name: new FormControl('', [Validators.required]),
|
||||
phone: new FormControl('', [Validators.required]),
|
||||
});
|
||||
public codeForm = new FormGroup({
|
||||
@ -125,7 +124,7 @@ export class LoginComponent implements OnInit {
|
||||
const phoneData = this.phoneForm.value;
|
||||
|
||||
this.authService.submitCode(
|
||||
Object.values(data).join(''), phoneData.phone!, phoneData.name!);
|
||||
Object.values(data).join(''), phoneData.phone!);
|
||||
}
|
||||
|
||||
backToPhoneForm = () => {
|
||||
|
||||
@ -4,7 +4,7 @@ import { WpJsonService } from './wp-json.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { JsonrpcService, RpcService } from './jsonrpc.service';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { UserInfo, Purchase, lvlPeriod, UserInfoWalletBalance, ResponseError } from '../interface/data';
|
||||
import { UserInfo, Purchase, lvlPeriod, UserInfoWalletBalance } from '../interface/data';
|
||||
import { lvlPeriods } from 'src/app/app.constants';
|
||||
import moment, { Moment } from 'moment-timezone';
|
||||
import { Router } from '@angular/router';
|
||||
@ -69,7 +69,10 @@ export class AuthService {
|
||||
)
|
||||
.subscribe({
|
||||
next: (value) => {
|
||||
if (value && value.error && value.error.code > 1) {
|
||||
if (value && value.customer_info && value.customer_info.errorCode === 'Customer_CustomerNotFound'
|
||||
|| !this.userHasData(value?.customer_info)) {
|
||||
this.router.navigate(['create_user']);
|
||||
} else if (value && value.error && value.error.code > 1) {
|
||||
this.messageService.clear();
|
||||
this.messageService.add({
|
||||
severity: 'error',
|
||||
@ -90,6 +93,10 @@ export class AuthService {
|
||||
});
|
||||
}
|
||||
|
||||
userHasData(user?: UserInfo) {
|
||||
return user && (user.name || user.birthday);
|
||||
}
|
||||
|
||||
logout() {
|
||||
this.userInfo = undefined;
|
||||
this.cookiesService.logout();
|
||||
@ -145,7 +152,7 @@ export class AuthService {
|
||||
});
|
||||
}
|
||||
|
||||
submitCode(code: string, phone: string, name: string) {
|
||||
submitCode(code: string, phone: string) {
|
||||
this.loading = true;
|
||||
this.jsonrpc
|
||||
.rpc(
|
||||
@ -160,38 +167,9 @@ export class AuthService {
|
||||
next: (result) => {
|
||||
if (result.code === 0) {
|
||||
this.cookiesService.setCookie('token', result?.data?.token);
|
||||
this.jsonrpc.rpc(
|
||||
{
|
||||
method: 'updateAdditionalInfo',
|
||||
params: [
|
||||
{
|
||||
first_name: name,
|
||||
birth_day: '01.01.1999'
|
||||
},
|
||||
],
|
||||
},
|
||||
RpcService.authService,
|
||||
true
|
||||
).subscribe({
|
||||
next: () => {
|
||||
this.router.navigate(['/']);
|
||||
|
||||
this.wpJsonService.newCustomer(
|
||||
environment.systemId,
|
||||
result?.data?.token,
|
||||
environment.icardProxy,
|
||||
)
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.getUserInfo();
|
||||
}
|
||||
})
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
this.loading = false;
|
||||
},
|
||||
})
|
||||
} else if (result.code === 230) {
|
||||
this.messageService.clear();
|
||||
this.messageService.add({
|
||||
@ -261,4 +239,45 @@ export class AuthService {
|
||||
return accumulator + currentValue.balance;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
register(name: string, sex: string, date: string) {
|
||||
if (this.token) {
|
||||
this.loading = true;
|
||||
|
||||
this.jsonrpc.rpc(
|
||||
{
|
||||
method: 'updateAdditionalInfo',
|
||||
params: [
|
||||
{
|
||||
first_name: name,
|
||||
birth_day: '01.01.1999'
|
||||
},
|
||||
],
|
||||
},
|
||||
RpcService.authService,
|
||||
true
|
||||
).subscribe({
|
||||
next: () => {
|
||||
this.wpJsonService.updateNewCustomer(environment.systemId, this.token!, {
|
||||
name,
|
||||
sex: sex,
|
||||
birthday: date,
|
||||
})
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.router.navigate(['/']);
|
||||
this.getUserInfo();
|
||||
},
|
||||
error: () => {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
this.loading = false;
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { HttpClient, HttpHeaders } from "@angular/common/http";
|
||||
import { CookiesService } from "./cookies.service";
|
||||
import { Observable, of, switchMap } from "rxjs";
|
||||
import { JsonRpcBody } from "./jsonrpc.service";
|
||||
import { DeliveryType, AcceptedOrder, Product } from "../interface/data";
|
||||
import { DeliveryType, AcceptedOrder, Product, UpdateNewCustomerRequest } from "../interface/data";
|
||||
|
||||
export enum Method {
|
||||
|
||||
@ -59,6 +59,10 @@ export class WpJsonService {
|
||||
return this._request(`purchase/${systemId}/${token}/${delta || ''}`, 'GET', null, false, url)
|
||||
}
|
||||
|
||||
updateNewCustomer(systemId: string, token: string, data: UpdateNewCustomerRequest) {
|
||||
return this._request(`update_new_customer/${systemId}/${token}/`, 'POST', data, false, environment.icardProxy);
|
||||
}
|
||||
|
||||
// getSiteConfig(): Observable<any> {
|
||||
// return this._request(`/assets/site-config.json`, 'GET', null, false)
|
||||
// }
|
||||
|
||||
@ -127,10 +127,6 @@ body {
|
||||
--main-color_hover: rgba(208, 180, 133, 0.2);
|
||||
}
|
||||
|
||||
.mdc-button__label {
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__leading,
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__notch,
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled, .mdc-text-field--invalid) .mdc-notched-outline__trailing {
|
||||
@ -139,6 +135,10 @@ body {
|
||||
|
||||
.mat-mdc-outlined-button:not(:disabled) {
|
||||
border-color: var(--text-color) !important;
|
||||
|
||||
.mdc-button__label {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-h1,
|
||||
@ -170,6 +170,14 @@ body {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.mat-datepicker-toggle {
|
||||
color: var(--text-color_2);
|
||||
}
|
||||
|
||||
.mat-mdc-select-value {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
border-top: 1px solid #BDBDBD;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user