How do I display the "Login successfully" message to the user?

1
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { trigger, style, animate, transition } from '@angular/animations';
import { AuthProvider } from '../../providers/auth';
//import { Validators, FormBuilder } from '@angular/forms';



@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  animations: [
    trigger(
      'login', [
        transition(':enter', [
          style({
            opacity: 0
          }),
          animate("1s ease-in-out", style({
            opacity: 1
          }))
        ]),
        transition(':leave', [
          style({
            opacity: 0
          })
        ])
      ],
    ),
    trigger(
      'registro', [
        transition(':enter', [
          style({
            opacity: 0
          }),
          animate("1s ease-in-out", style({
            opacity: 1
          }))
        ]),
        transition(':leave', [
          style({
            opacity: 0
          })
        ])
      ],
    ),
  ]
})
export class LoginPage {

  login = true;
  register = false;

  loginForm = {
    email: '',
    password: ''
  };
  registerForm = {
    email: '',
    password: '',
    name: ''
  }

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private loadingCtrl: LoadingController,
    private authProvider: AuthProvider
    //public formBuilder: FormBuilder

  ) {
  }

  //Exibir form de registro ao click
  exibirRegistrar(){
    this.login = false;
    this.register = true;
  }
  //Exibir form de login ao click
  exibirLogin(){
    this.login = true;
    this.register = false;
  }
  //Login
  fazerLogin(){

    this.authProvider.login(this.loginForm)
    .then((res) => {

    })
    .catch((err) => {

    })
  }
    //Registro
    CriarNovaConta(){
      this.authProvider.register(this.registerForm)
      .then((res) => {

      })
      .catch((err) => {

      })
    }

  ionViewDidLoad() {

  }

}

login.html                                                                                                                                               Welcome to the Vaccine in DIA!                                                      Log in to continue

        </p>
      </div>
      <!--Forms CTA-->
      <div class="padding-40">
          <ion-item class="bg-transparent no-padding mg-top-30">
              <ion-label stacked class="snow bold">E-mail</ion-label>
              <ion-input type="email" class="snow" [(ngModel)]="loginForm.email"></ion-input>
          </ion-item>

          <ion-item class="bg-transparent no-padding mg-top-20">
              <ion-label stacked class="snow bold">Senha</ion-label>
              <ion-input type="password" class="snow" [(ngModel)]="loginForm.password"></ion-input>
          </ion-item>

          <div class="ctaLogin center bold mg-top-30"(click)="fazerLogin()">
              Entrar
          </div>
          <!--Nova Conta-->
          <div class="txtRegistrar bold mg-top-30 center" (click)= "exibirRegistrar()">
            Quero cadastrar uma conta
          </div>
        </div>
     </div>
  </div>
</div>

  <!--Register-->

                                                                                                                                                                  OK! Come on.                                                              Create your access credentials

          </p>
        </div>
        <!--Forms CTA-->
        <div class="padding-40">
            <ion-item class="bg-transparent no-padding mg-top-10">
                <ion-label stacked class="snow bold">Como você se chama?</ion-label>
                <ion-input type="text" class="snow" [(ngModel)]="registerForm.name"></ion-input>
            </ion-item>

            <ion-item class="bg-transparent no-padding mg-top-5">
                <ion-label stacked class="snow bold">Qual é o seu e-mail?</ion-label>
                <ion-input type="email" class="snow" [(ngModel)]="registerForm.email"></ion-input>
            </ion-item>

            <ion-item class="bg-transparent no-padding mg-top-5">
                <ion-label stacked class="snow bold">Escolha uma senha.</ion-label>
                <ion-input type="password" class="snow" [(ngModel)]="registerForm.password"></ion-input>
            </ion-item>

            <div class="ctaRegister center bold mg-top-50"(click)="CriarNovaConta()">
                Cadastrar
            </div>
        <!--JÁ TENHO UMA CONTA-->
        <div class="txtLogin bold snow mg-top-40 center" (click)="exibirLogin()">
          Já tenho uma conta
            </div>  
          </div>
       </div>
    </div>
  </div>

    
asked by anonymous 23.08.2018 / 20:06

1 answer

0

To display the messages you can use ToastController documentation is available on the ionic framework

  

Example of using the ToastController

constructor(private toast: ToastController) {}

Login () {
    this.authProvider.login(this.loginForm)
    .then((res) => {
        this.toast.create({message: 'Login feito com sucesso', duration: 3000}).present();
    }).catch(e => {
        this.toast.create({message: 'Usuário ou senha inválidos.', duration: 3000}).present();
    });
}
    
24.08.2018 / 04:53