Discussion :

[tmrdry]

Bonjour,

Je suis actuellement en train de développer une application à l'aide de Ionic et Angular.
J'ai un petit soucis dans mon application:

Ma première page est une page de connexion avec un formulaire (email/mot de passe) et un bouton login. L'utilisateur peut se connecter si son email et mdp est validée.
Mon problème est que je dois appuyer 2 fois sur le bouton connexion pour que l'utilisateur puisse se connecter ou non (affiche un message d'erreur) ..

Pareil pour une seconde page qui est censé afficher les données de l'utilisateur grace à une requete http dans mon service (tout comme la connexion), les données ne s'affichent que si je rafrachis la page..

j'espère que vous pourrez m'aider

merci beaucoup!

Voici un apercu de mon code dans mon .ts et mon service:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ngOnInit(){
    this.login_form = this.formBuilder.group({
      email: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      password: new FormControl('', Validators.required)
    });
  }
 
  login() {
    if(this.loginService.searchData(this.login_form.value.email, this.login_form.value.password).success==1){
      this.router.navigate(['/events']);
    }
    else {
      this.error=true;
    }
  }

pour le service:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{this.config=response});
    return(this.config);
  }

[Invité]

Bonjour et bienvenue sur DVP,

MERCI de copier-coller les codes (nécessaires et suffisants) directement dans le contenu du message, entre balises [CODE][/CODE] (icône # du menu).

[tmrdry]

C'est fait!

[krakatoa]

et le html ?

[tmrdry]

le voici:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ion-header>
  <ion-toolbar>
    <ion-title class="text-center">
      Gestion billeterie des évènements
    </ion-title>
  </ion-toolbar>
</ion-header>
 
 
<ion-content fullscreen>
  <form [formGroup]="login_form" (ngSubmit)="login()">
    <ion-input required id="email" type="email" formControlName="email" placeholder="Votre adresse email" class="form-control"></ion-input>
 
    <ion-input required id="password" type="password" formControlName="password" placeholder="Mot de passe" class="form-control"></ion-input>
 
    <div class="ion-padding">
      <ion-button expand="block" type="submit" class="ion-no-margin" [disabled]="!login_form.valid">Connexion</ion-button>
    </div>
  </form>
  <div *ngIf="this.error">
    Email ou mot de passe incorrect
  </div>
</ion-content>

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{this.config=response});
    return(this.config);
  }

en rouge, un problème. tu le vois ?

[tmrdry]

est ce que je devrais écrire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    return(this.http.get(this.apiKey, httpOptions));
  }

?

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{
      return response;
    });
  }

ne pas oublier qu'une requete est asynchrone, reçoit la reponse dans un certain temps !
l'execution du code n'attendes pas, il continu à la suite

[tmrdry]

J'avais déjà tenté cela mais après ca je n'arrive pas à utiliser la réponse dans mon .ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.loginService.searchData(Email, Password).success

il ne reconnait pas le .success qui est pourtant bien un attribut de ma réponse json

[krakatoa]

ça donne quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{
      console.log(response);
      return response;
    });
  }

[tmrdry]

Absolument rien .. rien ne s'affiche sur la console

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
async searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{
      console.log(response);
      return response;
    });
  }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
let response = await this.loginService.searchData(Email, Password);
 
console.log(response.success);

[tmrdry]

ERROR in src/app/login/login.page.ts:37:20 - error TS1308: 'await' expression is only allowed within an async function.

37 let response = await this.loginService.searchData(formValue['email'], formValue['password']);
~~~~~
src/app/login/login.page.ts:38:26 - error TS2339: Property 'success' does not exist on type 'void'.

38 console.log(response.success);

le terminal m'envoie cette erreur pourtant la fonction est bien une async

[krakatoa]

Absolument rien .. rien ne s'affiche sur la console

alors ta requete n'est pas executé !

va dans les outils de dev de ton navigateur
dans l'onglet reseau ou network

regarde la requete qui est censé etre lancé
elle se met en rouge si elle n'a pas fonctionné (avec un message d'erreur et lequel)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
async searchData(email: string, password: string){
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    return await this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{
      console.log(response);
      return response;
    });
  }
 
 
let response = this.loginService.searchData(Email, Password);
console.log(response.success);

[tmrdry]

j'ai vérifié, elle a bien été exécuté et sans erreur

[tmrdry]

au temps pour moi!

Fatal error: Uncaught Error: Failed to create session ID: memcached (path: localhost:11211) in /var/www/vhosts/jds.fr/pro2.jds.fr/includes/session_start.php:4 Stack trace: #0 /var/www/vhosts/jds.fr/pro2.jds.fr/includes/session_start.php(4): session_start() #1 /var/www/vhosts/jds.fr/pro2.jds.fr/includes/config.php(68): require_once('/var/www/vhosts...') #2 /var/www/vhosts/jds.fr/pro2.jds.fr/includes/api/index.php(3): require_once('/var/www/vhosts...') #3 {main} thrown in /var/www/vhosts/jds.fr/pro2.jds.fr/includes/session_start.php on line 4

est ce que cela signifie que c'est une erreur au niveau de l'api? et non pas du code?

[krakatoa]

essaye le code de 13h21



si tu mets ça dans le navigateur -> localhost:11211
tu obtiens quoi ?

[tmrdry]

je l'ai testé et toujours rien dans la console concernant la reponse
Pour être sûr que la fonction s'exécute bien j'ai ajouté un autre console.log au début qui s'affiche bien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
async searchData(email: string, password: string){
    console.log('test');
    const httpOptions = {
      params: {key: 'MepC9NTcz759',email: email, password: password}
    }
    return await this.http.get(this.apiKey, httpOptions).subscribe((response: Response)=>{
      console.log(response);
      return response;
    });
  }

[dukoid]

si tu mets ça dans le navigateur -> localhost:11211
tu obtiens quoi ?

[tmrdry]

"Unable to connect"