Skip to content

A
allo-app
Commit 601fd6ac by Nabil Sadki
Options

Profil edit

parent f3891add
Showing with 265 additions and 73 deletions
src/app/constants.ts
export const WORDPRESS_URL = 'http://www.allo-testeurs.com/'; 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_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/profil/profil.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular'; import { IonicModule } from '@ionic/angular';
...@@ -20,6 +20,7 @@ const routes: Routes = [ ...@@ -20,6 +20,7 @@ const routes: Routes = [
CommonModule, CommonModule,
FormsModule, FormsModule,
IonicModule, IonicModule,
ReactiveFormsModule,
RouterModule.forChild(routes), RouterModule.forChild(routes),
PipesModule PipesModule
], ],
......
src/app/pages/compte/profil/profil.page.html
...@@ -6,28 +6,40 @@ ...@@ -6,28 +6,40 @@
<ion-title> <ion-title>
Mon profil Mon profil
</ion-title> </ion-title>
<ion-buttons slot="end">
<ion-button fill="outline" color="light" *ngIf="!editMode" (click)="startEdit()">Modifier</ion-button>
<ion-spinner name="dots" color="light" *ngIf="syncing"></ion-spinner>
</ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-grid> <form [formGroup]="validationsForm">
<ion-row padding> <ion-grid>
<ion-col size="4"> <ion-row padding>
<ion-avatar> <ion-col size="4">
<ion-img [src]="_AUTH.infoAvatar"></ion-img> <ion-avatar>
</ion-avatar> <ion-img [src]="_AUTH.userInfos.avatar"></ion-img>
</ion-col> <!-- <ion-chip color="primary" *ngIf="editMode">
<ion-col size="8"> <ion-icon name="camera" class="ion-no-margin"></ion-icon> Modifier
<ion-text> </ion-chip> -->
<h2>{{ _AUTH.infoFullname }}</h2> </ion-avatar>
<ion-chip color="primary" outline="true"> </ion-col>
<ion-icon name="star"></ion-icon> <ion-col size="8">
<ion-label>Testeur</ion-label> <ion-text>
</ion-chip> <h2 [hidden]="editMode">{{ _AUTH.userInfos.display_name }}</h2>
</ion-text> <ion-item [hidden]="!editMode">
</ion-col> <ion-input type="text" [value]="_AUTH.userInfos.display_name" formControlName="name" clearInput>
</ion-row> </ion-input>
<!-- <ion-row no-padding padding-horizontal padding-top> </ion-item>
<ion-chip [color]="editMode ? 'medium' : 'primary'" [outline]="editMode ? false : true">
<ion-icon name="star"></ion-icon>
<ion-label>Testeur</ion-label>
</ion-chip>
</ion-text>
</ion-col>
</ion-row>
<!-- <ion-row no-padding padding-horizontal padding-top>
<ion-col no-padding> <ion-col no-padding>
<ion-progress-bar color="primary" value="0.75"></ion-progress-bar> <ion-progress-bar color="primary" value="0.75"></ion-progress-bar>
</ion-col> </ion-col>
...@@ -36,35 +48,62 @@ ...@@ -36,35 +48,62 @@
<ion-col no-padding size="6" class="ion-text-start"> 0 </ion-col> <ion-col no-padding size="6" class="ion-text-start"> 0 </ion-col>
<ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col> <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
</ion-row> --> </ion-row> -->
</ion-grid> </ion-grid>
<ion-card> <ion-card *ngIf="_AUTH?.userInfos?.card_number">
<ion-item color="primary"> <ion-item [color]="editMode ? 'dark' : 'primary'">
Ma carte testeur : Ma carte testeur :
</ion-item> </ion-item>
<ion-item> <ion-item [color]="editMode ? 'medium' : ''">
<ion-icon name="card" slot="start"></ion-icon> {{ _AUTH.userInfos.card_number | cardNumber }} <ion-icon name="card" slot="start"></ion-icon> {{ _AUTH.userInfos.card_number | cardNumber }}
</ion-item> </ion-item>
<ion-item> <ion-item [color]="editMode ? 'medium' : ''">
<ion-icon name="stopwatch" slot="start"></ion-icon> {{ _AUTH.userInfos.expire_at | expireAt }} <ion-icon name="stopwatch" slot="start"></ion-icon> {{ _AUTH.userInfos.expire_at | expireAt }}
</ion-item> </ion-item>
<ion-item lines="none"> <ion-item lines="none" [color]="editMode ? 'medium' : ''">
<ion-icon name="person" slot="start"></ion-icon> {{ _AUTH.userInfos.cni }} <ion-icon name="person" slot="start"></ion-icon> {{ _AUTH.userInfos.cni }}
</ion-item> </ion-item>
</ion-card> </ion-card>
<ion-card> <ion-card>
<ion-item color="primary"> <ion-item color="primary">
Infos : Infos :
<ion-button slot="end" color="light" fill="outline" routerLink="/app/profil-edit" routerDirection="root" <!-- <ion-button slot="end" color="light" fill="outline" routerLink="/app/profil-edit" routerDirection="root"
routerLinkActive="active">Modifier</ion-button> routerLinkActive="active">Modifier</ion-button> -->
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="mail" slot="start"></ion-icon> {{ _AUTH.userInfos.user_email }} <ion-icon name="mail" slot="start" [color]="editMode ? 'secondary' : ''"></ion-icon>
</ion-item> <ion-text [hidden]="editMode">{{ _AUTH.userInfos.user_email }}</ion-text>
<ion-item> <ion-input type="email" [hidden]="!editMode" [value]="_AUTH.userInfos.user_email"
<ion-icon name="pin" slot="start"></ion-icon> Lorem ipsum sit dolor amet formControlName="email" clearInput>
</ion-item> </ion-input>
<ion-item lines="none"> </ion-item>
<ion-icon name="call" slot="start"></ion-icon> +212 661 20 30 40 <ion-item>
</ion-item> <ion-icon name="pin" slot="start" [color]="editMode ? 'secondary' : ''"></ion-icon>
</ion-card> <ion-text [hidden]="editMode">{{ _AUTH.userInfos.addresse }}</ion-text>
</ion-content> <ion-input type="text" [hidden]="!editMode" [value]="_AUTH.userInfos.addresse"
\ No newline at end of file formControlName="addresse" clearInput>
</ion-input>
</ion-item>
<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>
</ion-item>
</ion-card>
</form>
</ion-content>
<ion-footer *ngIf="editMode">
<ion-toolbar color="primary">
<ion-buttons slot="end" *ngIf="!syncing">
<ion-button fill="outline" color="light" (click)="cancelEdit()">
<ion-icon name="close"></ion-icon> Annuler
</ion-button>
<ion-button fill="solid" color="success" type="submit" [disabled]="!validationsForm.valid"
(click)="validationsForm.valid && onSubmit(validationsForm.value)">
<ion-icon name="checkmark"></ion-icon> Valider
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
\ No newline at end of file
src/app/pages/compte/profil/profil.page.scss
ion-avatar { ion-avatar {
width: 100%;
height: 100%;
position: relative;
ion-chip {
position: absolute;
bottom: -37px;
left: 0;
width: 100%; width: 100%;
height: 100%; }
} }
\ No newline at end of file
src/app/pages/compte/profil/profil.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../services/auth.service'; import { AuthService } from '../../../services/auth.service';
// import { CardNumberPipe } from '../../../pipes/card-number.pipe'; import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
@Component({ @Component({
selector: 'app-profil', selector: 'app-profil',
...@@ -9,11 +11,89 @@ import { AuthService } from '../../../services/auth.service'; ...@@ -9,11 +11,89 @@ import { AuthService } from '../../../services/auth.service';
}) })
export class ProfilPage implements OnInit { export class ProfilPage implements OnInit {
validationsForm: FormGroup;
editMode = false;
syncing = false;
validationMessages = {
name: [
{ type: 'required', message: 'Champs requis.' }
],
email: [
{ type: 'required', message: 'Champs requis.' },
{ type: 'pattern', message: 'Adresse email non valide.' }
],
phone: [
{ type: 'required', message: 'Champs requis.' },
],
adresse: [
{ type: 'required', message: 'Champs requis.' },
],
};
constructor( constructor(
public formBuilder: FormBuilder,
public storage: Storage,
public _AUTH: AuthService public _AUTH: AuthService
) { } ) { }
ngOnInit() { ngOnInit() {
this.validationsForm = this.formBuilder.group({
name: new FormControl('', Validators.required),
phone: new FormControl('', Validators.required),
addresse: new FormControl('', Validators.required),
email: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}$')
]))
});
this.storage.get('wpUserInfos').then(wpUserInfos => {
if (wpUserInfos) {
this.validationsForm.controls['name'].setValue(wpUserInfos.display_name);
this.validationsForm.controls['email'].setValue(wpUserInfos.user_email);
this.validationsForm.controls['addresse'].setValue(wpUserInfos.addresse);
this.validationsForm.controls['phone'].setValue(wpUserInfos.phone);
}
});
}
onSubmit(values) {
this.syncing = true;
this.storage.get('wpUserInfos').then(wpUserInfos => {
if (wpUserInfos) {
wpUserInfos.display_name = values.name;
wpUserInfos.user_email = values.email;
wpUserInfos.addresse = values.addresse;
wpUserInfos.phone = values.phone;
this.storage.set('wpUserInfos', wpUserInfos).then(() => {
this._AUTH.userInfos = wpUserInfos;
const userData = {
name: values.name,
email: values.email,
addresse: values.addresse,
phone: values.phone,
context: 'edit',
meta: {
addresse: values.addresse,
phone: values.phone
}
};
this._AUTH.doUserUpdate(userData).then(
result => {
this.editMode = false;
this.syncing = false;
});
});
}
});
}
startEdit() {
this.editMode = true;
this.validationsForm.updateValueAndValidity();
}
cancelEdit() {
this.editMode = false;
} }
} }
src/app/pages/menu/menu.page.html
...@@ -20,12 +20,12 @@ ...@@ -20,12 +20,12 @@
<ion-row> <ion-row>
<ion-col size="4"> <ion-col size="4">
<ion-avatar> <ion-avatar>
<ion-img [src]="_AUTH.infoAvatar"></ion-img> <ion-img [src]="_AUTH?.userInfos?.avatar"></ion-img>
</ion-avatar> </ion-avatar>
</ion-col> </ion-col>
<ion-col size="8"> <ion-col size="8">
<ion-text> <ion-text>
<h4>{{ _AUTH.infoFullname }}</h4> <h4>{{ _AUTH?.userInfos?.display_name }}</h4>
</ion-text> </ion-text>
<ion-chip color="light"> <ion-chip color="light">
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
......
src/app/services/allo-service.ts
...@@ -96,7 +96,6 @@ export class AlloService { ...@@ -96,7 +96,6 @@ export class AlloService {
// spinner: null, // spinner: null,
duration: 0, duration: 0,
message: 'Chargement...', message: 'Chargement...',
translucent: true,
cssClass: 'custom-class custom-loading' cssClass: 'custom-class custom-loading'
}); });
return await this.loading.present().then(() => { return await this.loading.present().then(() => {
......
src/app/services/auth.service.ts
...@@ -21,7 +21,9 @@ export class AuthService { ...@@ -21,7 +21,9 @@ export class AuthService {
public infoFullname; public infoFullname;
public infoEmail; public infoEmail;
public infoAvatar; public infoAvatar;
public userId: any;
public userInfos: any; public userInfos: any;
public userToken: any;
authState = new BehaviorSubject(false); authState = new BehaviorSubject(false);
public isAnonymous = false; public isAnonymous = false;
...@@ -35,20 +37,30 @@ export class AuthService { ...@@ -35,20 +37,30 @@ export class AuthService {
private _ALLO: AlloService private _ALLO: AlloService
) { ) {
this.platform.ready().then(() => { this.platform.ready().then(() => {
this.storage.get('wpUser').then(wpUser => {
if (wpUser) {
this.userToken = wpUser.token;
}
});
this.storage.get('wpUserInfos').then(wpUserInfos => { this.storage.get('wpUserInfos').then(wpUserInfos => {
if (wpUserInfos) { if (wpUserInfos) {
this.infoNicename = wpUserInfos.user_nicename; this.updateServiceProps(wpUserInfos);
this.infoFullname = wpUserInfos.display_name;
this.infoEmail = wpUserInfos.user_email;
this.infoAvatar = wpUserInfos.avatar;
this.userInfos = wpUserInfos;
} }
}); });
this.isLoggedIn(); this.isLoggedIn();
this.checkIsAnonymous(); this.checkIsAnonymous();
}); });
} }
updateServiceProps(wpUserInfos) {
this.infoNicename = wpUserInfos.user_nicename;
this.infoFullname = wpUserInfos.display_name;
this.infoEmail = wpUserInfos.user_email;
this.infoAvatar = wpUserInfos.avatar;
this.userInfos = wpUserInfos;
this.userId = wpUserInfos.ID;
}
isAuthenticated() { isAuthenticated() {
return this.authState.value; return this.authState.value;
} }
...@@ -83,15 +95,23 @@ export class AuthService { ...@@ -83,15 +95,23 @@ export class AuthService {
this.infoNicename = user.user_nicename; this.infoNicename = user.user_nicename;
this.infoFullname = user.user_display_name; this.infoFullname = user.user_display_name;
this.infoEmail = user.user_email; this.infoEmail = user.user_email;
this.userToken = user.token;
this.authState.next(true); this.authState.next(true);
return this.storage.set('wpUser', user); return this.storage.set('wpUser', user);
} }
logOut() { logOut() {
this.authState.next(false);
this.storage.remove('wpUser'); this.storage.remove('wpUser');
this.storage.remove('wpUserInfos'); this.storage.remove('wpUserInfos');
this.infoNicename = null;
this.infoFullname = null;
this.infoEmail = null;
this.infoAvatar = null;
this.userId = null;
this.userInfos = null;
this.userToken = null;
this.authState.next(false);
} }
doLogin(values) { doLogin(values) {
...@@ -138,8 +158,11 @@ export class AuthService { ...@@ -138,8 +158,11 @@ export class AuthService {
{ headers: header } { headers: header }
).then( ).then(
userInfos => { userInfos => {
console.log(userInfos); this.storage.set('wpUserInfos', userInfos).then(wpUserInfos => {
this.storage.set('wpUserInfos', userInfos); if (wpUserInfos) {
this.updateServiceProps(wpUserInfos);
}
});
resolve(userInfos); resolve(userInfos);
}, },
err => reject(err) err => reject(err)
...@@ -151,8 +174,11 @@ export class AuthService { ...@@ -151,8 +174,11 @@ export class AuthService {
{ headers: { Authorization: 'Bearer ' + token } } { headers: { Authorization: 'Bearer ' + token } }
).subscribe( ).subscribe(
userInfos => { userInfos => {
console.log(userInfos); this.storage.set('wpUserInfos', userInfos).then(wpUserInfos => {
this.storage.set('wpUserInfos', userInfos); if (wpUserInfos) {
this.updateServiceProps(wpUserInfos);
}
});
resolve(userInfos); resolve(userInfos);
}, },
err => reject(err) err => reject(err)
...@@ -161,14 +187,54 @@ export class AuthService { ...@@ -161,14 +187,54 @@ export class AuthService {
}); });
} }
doRegister(user_data, token) { doUserUpdate(userData) {
return this.http.post(Config.WORDPRESS_REST_API_URL + 'users?token=' + token, user_data); return new Promise<any>((resolve, reject) => {
if (this.platform.is('cordova')) {
const header: Headers = new Headers();
header.append('Authorization', 'Bearer ' + this.userToken);
this.httpAdv.get(
Config.WORDPRESS_REST_API_URL + 'users/' + this.userId,
userData,
{ headers: header }
).then(
userInfos => {
resolve(userInfos);
},
err => reject(err)
);
} else {
this.http.post(
Config.WORDPRESS_REST_API_URL + 'users/' + this.userId,
userData,
{ headers: { Authorization: 'Bearer ' + this.userToken } }
).subscribe(
result => {
this.http.post(
Config.WORDPRESS_REST_API_ACF_USER_URL + this.userId,
{
fields: {
addresse: userData.addresse,
phone: userData.phone
}
},
{ headers: { Authorization: 'Bearer ' + this.userToken } }
).subscribe(
result => {
console.log('acf', result);
});
resolve(result);
},
err => reject(err)
);
}
});
} }
validateAuthToken(token) { validateAuthToken(token) {
this._ALLO.presentLoading(); this._ALLO.presentLoading();
if (this.platform.is('cordova')) { if (this.platform.is('cordova')) {
let header: Headers = new Headers(); const header: Headers = new Headers();
header.append('Authorization', 'Bearer ' + token); header.append('Authorization', 'Bearer ' + token);
return this.httpAdv.post( return this.httpAdv.post(
Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token/validate', Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token/validate',
......
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