Create account page

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

+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

+<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

+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

+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,8 +65,9 @@
         </ion-button>
       </ion-col>
       <ion-col class="ion-no-padding">
-        <ion-button color="light" class="btn-g ion-no-margin">
-            <ion-icon name="person-add"></ion-icon>
+        <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>
       </ion-col>

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

+import { Password } from './password';
+
+describe('Password', () => {
+  it('should create an instance', () => {
+    expect(new Password()).toBeTruthy();
+  });
+});

src/app/validators/password.ts

+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