Skip to content

A
allo-app
Commit bb64ac75 by Nabil Sadki
Options

Create account page

parent 601fd6ac
Showing with 379 additions and 12 deletions
src/app/app-routing.module.ts
......@@ -18,6 +18,8 @@ const routes: Routes = [
canActivate: [AuthGuardService]
},
{ path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
{ path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' },
];
......
src/app/app.component.ts
......@@ -7,9 +7,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { TripService } from './services/trip-service';
import { AuthService } from './services/auth.service';
// import { LocationService } from './services/location-service';
@Component({
selector: 'app-root',
......@@ -27,7 +25,6 @@ export class AppComponent {
private router: Router,
private _STOR: Storage,
private _AUTH: AuthService
// private _LOCAT: LocationService
) {
this.initializeApp();
}
......
src/app/constants.ts
export const WORDPRESS_URL = 'http://www.allo-testeurs.com/';
export const WORDPRESS_URL = 'http://allo-testeurs.test/';
// export const WORDPRESS_URL = 'http://www.allo-testeurs.com/';
export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
export const WORDPRESS_REST_API_ACF_USER_URL = WORDPRESS_URL + 'wp-json/acf/v3/users/';
src/app/pages/compte/create/create.module.ts 0 → 100644
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { CreatePage } from './create.page';
const routes: Routes = [
{
path: '',
component: CreatePage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ReactiveFormsModule,
RouterModule.forChild(routes)
],
declarations: [CreatePage]
})
export class CreatePageModule {}
src/app/pages/compte/create/create.page.html 0 → 100644
<ion-header>
<ion-toolbar color="primary" padding-right>
<ion-title>Créer un compte</ion-title>
</ion-toolbar>
</ion-header>
<ion-content color="primary" class="ion-padding">
<ion-card>
<form [formGroup]="vForm">
<ion-list>
<ion-list-header color="medium">Informations de base</ion-list-header>
<ion-item>
<ion-label position="floating">Prénom <ion-text color="danger">*</ion-text>
</ion-label>
<ion-input type="text" formControlName="prenom" clearInput></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of vMessages.prenom">
<div class="error-message"
*ngIf="vForm.get('prenom').hasError(validation.type) && (vForm.get('prenom').dirty || vForm.get('prenom').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Nom <ion-text color="danger">*</ion-text>
</ion-label>
<ion-input type="text" formControlName="nom" clearInput></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of vMessages.nom">
<div class="error-message"
*ngIf="vForm.get('nom').hasError(validation.type) && (vForm.get('nom').dirty || vForm.get('nom').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Email <ion-text color="danger">*</ion-text>
</ion-label>
<ion-input type="email" formControlName="email" clearInput></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of vMessages.email">
<div class="error-message"
*ngIf="vForm.get('email').hasError(validation.type) && (vForm.get('email').dirty || vForm.get('email').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Téléphone <ion-text color="danger">*</ion-text>
</ion-label>
<ion-input type="number" formControlName="tel" clearInput></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of vMessages.tel">
<div class="error-message"
*ngIf="vForm.get('tel').hasError(validation.type) && (vForm.get('tel').dirty || vForm.get('tel').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
</div>
<ion-list-header color="medium">Sécurité</ion-list-header>
<div formGroupName="matching_passwords">
<ion-item>
<ion-label position="floating">Mot de passe <ion-text color="danger">*</ion-text>
</ion-label>
<ion-input type="password" formControlName="password" clearInput></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of vMessages.password">
<div class="error-message"
*ngIf="vForm.get('matching_passwords').get('password').hasError(validation.type) && (vForm.get('matching_passwords').get('password').dirty || vForm.get('matching_passwords').get('password').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">Confirmer le mot de passe <ion-text color="danger">*</ion-text>
</ion-label>
<ion-input type="password" formControlName="password_confirm" clearInput></ion-input>
</ion-item>
<div class="validation-errors">
<ng-container *ngFor="let validation of vMessages.password_confirm">
<div class="error-message"
*ngIf="vForm.get('matching_passwords').get('password_confirm').hasError(validation.type) && (vForm.get('matching_passwords').get('password_confirm').dirty || vForm.get('matching_passwords').get('password_confirm').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
<ng-container *ngFor="let validation of vMessages.matching_passwords">
<div class="error-message"
*ngIf="vForm.get('matching_passwords').hasError(validation.type) && (vForm.get('matching_passwords').dirty || vForm.get('matching_passwords').touched)">
<ion-text color="danger">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</ion-text>
</div>
</ng-container>
</div>
</div>
<ion-item lines="none" class="ion-text-end">
<ion-button class="ion-float-end" color="tertiary" routerLink="/login" routerDirection="backward" routerLinkActive="active">
Annuler</ion-button>
<ion-button class="ion-float-end" type="submit" [disabled]="!vForm.valid"
(click)="vForm.valid && onSubmit(vForm.value)">Créer mon compte</ion-button>
</ion-item>
</ion-list>
</form>
</ion-card>
</ion-content>
\ No newline at end of file
src/app/pages/compte/create/create.page.spec.ts 0 → 100644
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CreatePage } from './create.page';
describe('CreatePage', () => {
let component: CreatePage;
let fixture: ComponentFixture<CreatePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CreatePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CreatePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/compte/create/create.page.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
import { PasswordValidator } from '../../../validators/password';
import { AlloService } from '../../../services/allo-service';
import { AuthService } from '../../../services/auth.service';
@Component({
selector: 'app-create',
templateUrl: './create.page.html',
styleUrls: ['./create.page.scss'],
})
export class CreatePage implements OnInit {
vForm: FormGroup;
matchingPasswordsGroup: FormGroup;
syncing = false;
vMessages = {
nom: [
{ type: 'required', message: 'Champs requis.' }
],
prenom: [
{ type: 'required', message: 'Champs requis.' }
],
email: [
{ type: 'required', message: 'Champs requis.' },
{ type: 'pattern', message: 'Adresse email non valide.' }
],
tel: [
{ type: 'required', message: 'Champs requis.' },
],
password: [
{ type: 'required', message: 'Champs requis.' },
{ type: 'minlength', message: 'Au moins 5 caractères.' },
{ type: 'pattern', message: 'Au moins une lettre minuscule, 1 lettre majuscule et un chiffre.' }
],
confirm_password: [
{ type: 'required', message: 'Champs requis.' }
],
matching_passwords: [
{ type: 'areEqual', message: 'Merci de mettre le même mot de passe.' }
],
};
constructor(
public formBuilder: FormBuilder,
public storage: Storage,
public _ALLO: AlloService,
public _AUTH: AuthService
) { }
ngOnInit() {
this.matchingPasswordsGroup = new FormGroup({
password: new FormControl('', Validators.compose([
Validators.minLength(5),
Validators.required,
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
])),
password_confirm: new FormControl('', Validators.required)
}, (formGroup: FormGroup) => {
return PasswordValidator.areEqual(formGroup);
});
this.vForm = this.formBuilder.group({
nom: new FormControl('', Validators.required),
prenom: new FormControl('', Validators.required),
tel: new FormControl('', Validators.required),
// password: new FormControl('', Validators.required),
// password_confirm: new FormControl('', Validators.required),
email: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}$')
])),
matching_passwords: this.matchingPasswordsGroup,
});
}
onSubmit(values) {
console.log(values);
this._ALLO.presentLoading();
this._AUTH.doUserRegister(values)
.then(
result => {
this._ALLO.dismissLoading();
console.log(result);
},
err => {
this._ALLO.dismissLoading();
console.log(err);
});
}
}
src/app/pages/compte/login/login.page.html
......@@ -65,7 +65,8 @@
</ion-button>
</ion-col>
<ion-col class="ion-no-padding">
<ion-button color="light" class="btn-g ion-no-margin">
<ion-button color="light" class="btn-g ion-no-margin" routerLink="/create-account" routerDirection="root"
routerLinkActive="active">
<ion-icon name="person-add"></ion-icon>
Créer un compte
</ion-button>
......
src/app/pages/compte/profil/profil.page.html
......@@ -29,7 +29,8 @@
<ion-text>
<h2 [hidden]="editMode">{{ _AUTH.userInfos.display_name }}</h2>
<ion-item [hidden]="!editMode">
<ion-input type="text" [value]="_AUTH.userInfos.display_name" formControlName="name" clearInput>
<ion-input type="text" [value]="_AUTH.userInfos.display_name" formControlName="name"
clearInput>
</ion-input>
</ion-item>
<ion-chip [color]="editMode ? 'medium' : 'primary'" [outline]="editMode ? false : true">
......@@ -63,6 +64,19 @@
<ion-icon name="person" slot="start"></ion-icon> {{ _AUTH.userInfos.cni }}
</ion-item>
</ion-card>
<ion-card color="primary" *ngIf="!_AUTH?.userInfos?.card_number && !editMode">
<ion-text>
<h5 class="ion-text-center">Vous n'avez pas encore.</h5>
<h3 class="ion-text-center">la Carte Testeur.</h3>
<p class="ion-text-center">Le saviez-vous? la Carte Testeur vous permet de bénéficer de plusieurs offres
exclusives!</p>
<p class="ion-text-center">Des infos?</p>
<p class="ion-text-center">
<ion-button size="small" color="secondary" routerLink="/app/contact" routerDirection="forward"
routerLinkActive="active">Contactez-nous maintenant!</ion-button>
</p>
</ion-text>
</ion-card>
<ion-card>
<ion-item color="primary">
Infos :
......@@ -86,8 +100,8 @@
<ion-item lines="none">
<ion-icon name="call" slot="start" [color]="editMode ? 'secondary' : ''"></ion-icon>
<ion-text [hidden]="editMode">{{ _AUTH.userInfos.phone }}</ion-text>
<ion-input type="text" [hidden]="!editMode" [value]="_AUTH.userInfos.phone"
formControlName="phone" clearInput>
<ion-input type="text" [hidden]="!editMode" [value]="_AUTH.userInfos.phone" formControlName="phone"
clearInput>
</ion-input>
</ion-item>
</ion-card>
......
src/app/services/auth.service.ts
......@@ -187,6 +187,45 @@ export class AuthService {
});
}
doUserRegister(userData) {
const authData = {
username: userData.email,
email: userData.email,
password: userData.matching_passwords.password,
name: userData.prenom + ' ' + userData.nom,
first_name: userData.prenom,
last_name: userData.nom,
};
return new Promise<any>((resolve, reject) => {
if (this.platform.is('cordova')) {
this.httpAdv.post(Config.WORDPRESS_URL + 'wp-json/wp/v2/users', authData, {}).then(
res => {
const data = JSON.parse(res.data);
this.setUser(data);
this.setUserInfo(data.token);
this.authState.next(true);
resolve(res);
},
err => reject(err)
);
} else {
this.http.post(Config.WORDPRESS_URL + 'wp-json/wp/v2/users', authData).subscribe(
res => {
const data: any = res;
console.log(data);
// this.setUser(data);
// this.setUserInfo(data.token);
// this.authState.next(true);
resolve(data);
},
err => reject(err)
);
}
});
}
doUserUpdate(userData) {
return new Promise<any>((resolve, reject) => {
if (this.platform.is('cordova')) {
......
src/app/services/trip-service.ts
......@@ -6,6 +6,8 @@ import { Storage } from '@ionic/storage';
import { Router } from '@angular/router';
import { AlloService } from './allo-service';
import * as Config from '../constants';
@Injectable({ providedIn: 'root' })
export class TripService {
public products: Array<any> = [];
......@@ -34,14 +36,14 @@ export class TripService {
this.setData(REST_services);
}
else if (this.platform.is('cordova')) {
this.httpAdv.get('https://www.allo-testeurs.com/services.json?' + Math.random(), {}, {})
this.httpAdv.get(Config.WORDPRESS_URL + 'services.json?' + Math.random(), {}, {})
.then((response) => {
const json = JSON.parse(response.data);
this.storage.set('REST_services', json);
this.setData(json);
});
} else {
this.http.get('https://www.allo-testeurs.com/services.json?' + Math.random())
this.http.get(Config.WORDPRESS_URL + 'services.json?' + Math.random())
.subscribe((data) => {
this.storage.set('REST_services', data);
this.setData(data);
......@@ -84,9 +86,9 @@ export class TripService {
getRequest() {
if (this.platform.is('cordova')) {
return this.httpAdv.get('http://www.allo-testeurs.com/services.json?' + Math.random(), {}, {});
return this.httpAdv.get(Config.WORDPRESS_URL + 'services.json?' + Math.random(), {}, {});
} else {
return this.http.get('http://www.allo-testeurs.com/services.json?' + Math.random());
return this.http.get(Config.WORDPRESS_URL + 'services.json?' + Math.random());
}
}
......
src/app/validators/password.spec.ts 0 → 100644
import { Password } from './password';
describe('Password', () => {
it('should create an instance', () => {
expect(new Password()).toBeTruthy();
});
});
src/app/validators/password.ts 0 → 100644
import { FormControl, FormGroup } from '@angular/forms';
export class PasswordValidator {
// Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview
static areEqual(formGroup: FormGroup) {
let val;
let valid = true;
for (let key in formGroup.controls) {
if (formGroup.controls.hasOwnProperty(key)) {
let control: FormControl = <FormControl>formGroup.controls[key];
if (val === undefined) {
val = control.value
} else {
if (val !== control.value) {
valid = false;
break;
}
}
}
}
if (valid) {
return null;
}
return {
areEqual: true
};
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment