edit profil sans database

src/app/components/profil/edit-profil/edit-profil.component.html

@@ -0,0 +1,152 @@
+<div class="container">
+
+  <!--Grid column-->
+  <div class="col-md-12" style="padding-right: 2%; padding-left: 2%;">
+
+    <!--Card-->
+    <div class="card testimonial-card">
+
+      <!--Bacground color-->
+      <div class="card-up aqua-gradient">
+      </div>
+
+      <!--Avatar-->
+      <div class="avatar"><img src="{{imageProfil}}" class="rounded-circle img-responsive">
+      </div>
+
+      <div class="card-body" style="padding-left: 20%; padding-right: 20%;">
+        <!--Name-->
+        <div *ngIf="(user | async)?.displayName === 'Parrain'" >
+          <div class="md-form">
+            <i class="fa fa-envelope prefix grey-text"></i>
+            <input type="email" id="orangeForm-email" [(ngModel)]="parrain.email" placeholder="{{parrain.email}}" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
+            <div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)"  class="alert alert-danger">
+              Email is required and format should be <strong><i>john@parrain.fr</i></strong>.
+            </div>
+          </div>
+          <button class="btn btn-deep-orange" (click)="modifyPasswordSection()">Modifier Email/Mot de passe</button>
+          <div class="card" *ngIf="modifiermdp">
+            <div class="md-form">
+              <i class="fa fa-envelope prefix grey-text"></i>
+              <input type="email" id="orangeForm-email" [(ngModel)]="parrain.email" placeholder="{{parrain.email}}" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
+              <div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)"  class="alert alert-danger">
+                Email is required and format should be <strong><i>john@parrain.fr</i></strong>.
+              </div>
+            </div>
+            <div class="md-form">
+              <i class="fa fa-lock prefix grey-text"></i>
+              <input id="orangeForm-passC" type="password" [(ngModel)]="confirmOldPassword" placeholder="Tapez votre ancien mot de passe" name="confirmOldPasswordPar" #confirmOldPasswordPar="ngModel">
+              <div *ngIf="(parrain.password != confirmOldPassword) && (confirmOldPasswordPar.touched)"  class="alert alert-danger">
+                Mot de passe <strong><i>incorrect</i></strong>.
+              </div>
+            </div>
+            <div *ngIf="modifiermdp && (parrain.password === confirmOldPassword)">
+              <div class="md-form">
+                <i class="fa fa-lock prefix grey-text"></i>
+                <input id="orangeForm-pass" type="password" [(ngModel)]="newPassword" placeholder="Nouveau mot de passe" name="password" #password= "ngModel" required minlength="5">
+                <div *ngIf="password.errors && (password.dirty || password.touched)" class="alert alert-danger">
+                  Le<strong> mot de passe</strong> doit avoir au moins 5 caractéres
+                </div>
+              </div>
+              <div class="md-form">
+                <i class="fa fa-lock prefix grey-text"></i>
+                <input id="orangeForm-passC" type="password" [(ngModel)]="ConfirmPassword" placeholder="Confirmer le nouveau mot de passe" name="confirmPassword" #confirmPassword="ngModel">
+                <div *ngIf="(parrain.password != ConfirmPassword) && (confirmPassword.touched)"  class="alert alert-danger">
+                  Tapez le méme <strong><i>mot de passe</i></strong>.
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.familyname" placeholder="{{parrain.firstname}}">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.firstname" placeholder="{{parrain.firstname}}">
+          </div>
+          <form class="form-inline">
+            <div class="md-form">
+              <i class="fa fa-venus-mars prefix grey-text"></i>
+              <input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="parrain.sex">
+              <label for="homme">Homme</label>
+            </div>
+            <div class="md-form">
+              <input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="parrain.sex">
+              <label for="femme">Femme</label>
+            </div>
+          </form>
+          <div class="md-form">
+            <i class="fa fa-birthday-cake prefix grey-text"></i>
+            <input type="date" id="orangeForm-Birthday" [(ngModel)]="parrain.birthday" placeholder="Birthday">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.telephone" placeholder="{{parrain.telephone}}">
+          </div>
+          <button class="btn btn-green btn-rounded waves-light" [disabled]="(newPassword != '') && (newPassword != ConfirmPassword)">Modifier Profil</button>
+        </div>
+
+        <div *ngIf="(user | async)?.displayName === 'Commercant'" >
+
+          <button class="btn btn-deep-orange" (click)="modifyPasswordSection()">Modifier Email/Mot de passe</button>
+          <div class="card" *ngIf="modifiermdp">
+            <div class="md-form">
+              <i class="fa fa-lock prefix grey-text"></i>
+              <input id="orangeForm-passC" type="password" [(ngModel)]="confirmOldPassword" placeholder="Tapez votre ancien mot de passe" name="confirmOldPasswordPar" #confirmOldPasswordCommer="ngModel">
+              <div *ngIf="(commercant.password != confirmOldPassword) && (confirmOldPasswordCommer.touched)"  class="alert alert-danger">
+                Mot de passe <strong><i>incorrect</i></strong>.
+              </div>
+            </div>
+            <div *ngIf="modifiermdp && (commercant.password === confirmOldPassword)">
+              <div class="md-form">
+                <i class="fa fa-envelope prefix grey-text"></i>
+                <input type="email" id="orangeForm-email" [(ngModel)]="commercant.email" placeholder="{{commercant.email}}" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
+                <div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)"  class="alert alert-danger">
+                  Email is required and format should be <strong><i>john@parrain.fr</i></strong>.
+                </div>
+              </div>
+              <div class="md-form">
+                <i class="fa fa-lock prefix grey-text"></i>
+                <input id="orangeForm-pass" type="password" [(ngModel)]="newPassword" placeholder="Nouveau mot de passe" name="password" #password= "ngModel" required minlength="5">
+                <div *ngIf="password.errors && (password.dirty || password.touched)" class="alert alert-danger">
+                  Le<strong> mot de passe</strong> doit avoir au moins 5 caractéres
+                </div>
+              </div>
+              <div class="md-form">
+                <i class="fa fa-lock prefix grey-text"></i>
+                <input id="orangeForm-passC" type="password" [(ngModel)]="ConfirmPassword" placeholder="Confirmer le nouveau mot de passe" name="confirmPassword" #confirmPassword="ngModel">
+                <div *ngIf="(parrain.password != ConfirmPassword) && (confirmPassword.touched)"  class="alert alert-danger">
+                  Tapez le méme <strong><i>mot de passe</i></strong>.
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="md-form">
+            <i class="fa fa-user prefix grey-text"></i>
+            <input type="text" id="orangeForm-Firstname" [(ngModel)]="commercant.commercialName" placeholder="{{commercant.commercialName}}">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-institution prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="commercant.raisonSociale" placeholder="{{commercant.raisonSociale}}">
+          </div>
+          <div class="md-form">
+            <i class="fa fa-info prefix grey-text"></i>
+            <input type="text" id="orangeForm-Familyname" [(ngModel)]="commercant.siret" placeholder="{{commercant.siret}}">
+          </div>
+          <button class="btn btn-green btn-rounded waves-light" [disabled]="(newPassword != '') && (newPassword != ConfirmPassword)">Modifier Profil</button>
+        </div>
+
+        <button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Retour</button>
+
+      </div>
+
+    </div>
+    <!--/.Card-->
+
+  </div>
+  <!--Grid column-->
+
+
+  <!--Grid row-->
+</div>

src/app/components/profil/edit-profil/edit-profil.component.scss

@@ -0,0 +1,3 @@
+.container {
+  padding-top: 10%;
+}

src/app/components/profil/edit-profil/edit-profil.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditProfilComponent } from './edit-profil.component';
+
+describe('EditProfilComponent', () => {
+  let component: EditProfilComponent;
+  let fixture: ComponentFixture<EditProfilComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditProfilComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditProfilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/profil/edit-profil/edit-profil.component.ts

@@ -0,0 +1,110 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import { Router } from '@angular/router';
+import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
+import * as firebase from 'firebase/app';
+import { AngularFireAuth } from 'angularfire2/auth';
+import { AuthService } from '../../../services/auth/auth.service';
+
+import { User } from '../../../../models/User';
+import { Parrain } from '../../../../models/Parrain';
+import { Commercant } from '../../../../models/Commercant';
+import { Image } from '../../../../models/Image';
+
+@Component({
+  selector: 'app-edit-profil',
+  templateUrl: './edit-profil.component.html',
+  styleUrls: ['./edit-profil.component.scss'],
+  providers: [AuthService]
+})
+export class EditProfilComponent implements OnInit {
+
+  user: Observable<firebase.User>;
+  localUser: any;
+  parrain: Parrain;
+  commercant: Commercant;
+  profileData: FirebaseListObservable<any[]>;
+  imageProfil: string;
+  modifiermdp: boolean;
+  confirmOldPassword: string;
+  newPassword: string;
+  ConfirmPassword: string;
+
+  constructor(public afAuth: AngularFireAuth, public afDb: AngularFireDatabase,
+              private router: Router, private authService: AuthService ) {
+    this.localUser = new User();
+    this.parrain = new Parrain();
+    this.commercant = new Commercant();
+    this.modifiermdp = false;
+    this.confirmOldPassword = '';
+    this.newPassword = '';
+    this.ConfirmPassword = '';
+    this.imageProfil = 'https://ssl.prcdn.com/uk/people/default-profile.png?1406639312';
+    this.user = afAuth.authState;
+
+    this.user.subscribe(
+      (auth) => {
+        console.log(auth.displayName);
+        if (auth) {
+          this.profileData = this.afDb.list('/' + auth.displayName + '/', {
+              query: {
+                orderByChild: 'uid',
+                equalTo: auth.uid.toString()
+              }
+            }
+          );
+          this.profileData.forEach(utilisateur => {
+            utilisateur.forEach(element => {
+              console.log('blabla : ' + auth.displayName);
+              if (auth.displayName === 'Parrain') {
+
+                this.localUser = new Parrain();
+                this.localUser = element;
+                this.parrain = element;
+                this.imageProfil = this.parrain.image.downloadURL;
+              } else if (auth.displayName === 'Commercant') {
+                this.localUser = new Commercant();
+                this.localUser = element;
+                this.commercant = element;
+                this.imageProfil = this.commercant.image.downloadURL;
+              }
+            });
+          });
+        }
+      }
+    );
+
+  }
+
+  modifyPasswordSection() {
+    if (this.modifiermdp === false) {
+      this.modifiermdp = true;
+    } else if (this.modifiermdp === true) {
+      this.modifiermdp = false;
+      this.confirmOldPassword = '';
+      this.newPassword = '';
+      this.ConfirmPassword = '';
+    }
+  }
+
+  modifyProfile() {
+    if (this.newPassword === '') {
+      console.log('erreur mot de passe pas changer');
+    } else {
+      if (this.localUser.status === 'Parrain') {
+        this.parrain.password = this.newPassword;
+      } else if (this.localUser.status === 'Commercant') {
+        this.commercant.password = this.newPassword;
+      }
+    }
+  }
+
+  goToProfil() {
+    this.router.navigate(['/profil']);
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/profil/profil.component.html

@@ -74,6 +74,7 @@
           <!--<p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>-->
           <button class="btn btn-primary btn-rounded waves-light" (click)="goToOpCom()">Opération Commerciales</button>
         </div>
+        <button class="btn btn-orange btn-rounded waves-light" (click)="goToEditProfile()">Editer profile</button>
         <button class="btn btn-default btn-rounded waves-light" (click)="logout()"> <!--*ngIf="(user | async)?.uid"-->Logout</button>
 
       </div>

src/app/components/profil/profil.component.ts

@@ -85,6 +85,9 @@ export class ProfilComponent implements OnInit, OnDestroy {
   goToCarte(){
     this.router.navigate(['/carteParrainageComponent']);
   }
+  goToEditProfile() {
+    this.router.navigate(['/editProfil']);
+  }
 
   ngOnInit() {