Tips for notifying the user about incorrect login credentials in Ionic 3

I'm attempting to implement a notification system using showAlert to inform users when they enter an incorrect email or password, but I'm having difficulty achieving this using try and catch statements

Would it be feasible for me to use try and catch for this purpose?

Below is an excerpt from my login.ts file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { User } from '../../models/user';
import { AngularFireAuth } from "angularfire2/auth";
import { MenuController } from "ionic-angular";
import { AlertController } from "ionic-angular";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  user = {} as User;

  constructor(private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams, public menu: MenuController, public alertCtrl: AlertController) {
  }

ionViewWillEnter(){
  this.menu.enable(false);
}

 async login(user: User){
  try{
    const result = await this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
    if (result) {
      this.navCtrl.setRoot('HomePage');
    }
  }
  catch {
    showAlert() {
      const alert = this.alertCtrl.create({
        title: 'New Friend!',
        subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
        buttons: ['OK']
      });
      alert.present();
    }
  }

 }

 register(){
   this.navCtrl.push('RegisterPage');
 }

}

Answer №1

Here are my decisions

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { User } from '../../models/user';
import { AngularFireAuth } from "angularfire2/auth";
import { MenuController } from "ionic-angular";
import { AlertController } from "ionic-angular";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  user = {} as User;

  constructor(private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams, public menu: MenuController, public alertCtrl: AlertController) {

  }

  showAlert() {
    const alert = this.alertCtrl.create({
      title: 'Attention',
      subTitle: 'Your email or password is incorrect, please try again.',
      buttons: ['OK']
    });
    alert.present();
  }

  ionViewWillEnter(){
    this.menu.enable(false);
  }

 async login(user: User){
  try{
    const result = await this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
    if (result) {
      this.navCtrl.setRoot('HomePage');
    }
  }
  catch {
    this.showAlert();
  }

 }

 register(){
   this.navCtrl.push('RegisterPage');
 }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

URL validation RegEx in AngularJs using Javascript

I am looking for the following URLs to return as true other.some.url some.url some.url/page/1 The following URL should be flagged as false somerandomvalue Here is the regex I have been experimenting with so far: /^(?:http(s)?:\/\/) ...

Function 'Once' in Typescript with Generics

Currently, I am utilizing a feature called Once() from FP. In TypeScript, I need to define the types for this function but have been struggling with the implementation. Here's what I have attempted so far: const once = <T, U>(fn: (arg: T) => ...

filter array based on property value

var arr = [ {'a':1,'b':2}, {'a':1,'b':3}, {'a':1,'b':0}, ] I am looking to retrieve an array where the value of property b is 2 ...

What is the best way to link my React application with my Express API?

I've been immersed in my react app project for a while now, and I've recently delved into developing a server (using node and express) as well as planning to incorporate a database for it (MongoDB). My client-side react app has been smoothly run ...

Generating progress bar in Javascript while exporting CSV fileCan JavaScript export CSV and

Looking for a way to add a progress bar while generating and serving a CSV file via ajax? The database-heavy process is causing a delay, so I need a loader on the screen that disappears once the task is complete. It should be done with ajax or stay on th ...

How can I choose a mesh in three.js that is not part of the loader?

I'm facing a challenge with changing the material of a mesh using three.js's mesh loader. Although I can easily change the material within the loader, I encounter an issue where I can no longer access it from an external function. It seems to be ...

Errors arose due to the deployment of TypeScript decorators

Using TypeScript in a brand new ASP.NET Core project has brought some challenges. We are actively incorporating decorators into our codebase. However, this integration is causing numerous errors to appear in the output of VS2015: Error TS1219 Experim ...

Transform colored svg:image elements into grayscale when clicked upon by utilizing d3

Visit this site I'm attempting to change all SVG images created using d3.select to grayscale by using the following function: JavaScript: <script> function convert() { d3.selectAll("image") .style('filter', 'graysc ...

Tips for verifying the inclusion of the + symbol in the country code in Angular 7

My form includes a text box where users can input a country code preceded by a + sign. If a user enters only numbers, we need to restrict that action and prompt them to enter the country code with a + sign, for example: +91, +230, ... I've been tryin ...

Retrieve a specific nested key using its name

I am working with the following structure: const config = { modules: [ { debug: true }, { test: false } ] } My goal is to create a function that can provide the status of a specific module. For example: getStatus("debug") While I can access the array ...

send the value from the input field to the designated button - link the two buttons

My goal is to create a feature where users can click on a button within the map and open an external page in Google Maps with specific dimensions (500 X 600) and without the Menu bar, Tool bar, or Status bar. // Custom Button Functionality by salahineo ...

Manipulate Images Efficiently with jQuery

Are there any jQuery plugins or JavaScript controls available that can display an array of images, with the option to delete an image based on user action? For example, something similar to this: , but with a dedicated delete button on each image. One ad ...

Assistance needed with selecting elements using jQuery

After some practice with jQuery, I managed to select this specific portion from a lengthy HTML file. My goal is to extract the values of subject, body, and date_or_offset (these are name attributes). How can I achieve this? Let's assume this snippet i ...

block the UI when a certain amount of time has passed

When I click on a button, I implement the following code: $(document).ready(function () { $('.find').click(function () { $.blockUI({ message: '<table><tr><td><img src="images/pleas ...

Implement a new aggregate function for tooltips in the Kendo chart

I am currently utilizing a kendo chart with a date x-axis. Each point on the graph corresponds to different dates, but the x-axis displays only a monthly view. To showcase the last data point for each month, I have implemented a custom aggregate function a ...

What sets apart `Object.merge(...)` from `Object.append(...)` in MooTools?

This question may seem simple at first glance, but upon further inspection, the MooTools documentation for the 'append' and 'merge' methods appears to be identical. Here is the code snippet provided in the documentation: var firstObj ...

Using pre-built modules in an environment that does not support Node.js

Despite the limitations on node API usage (such as fs, http, net...), vanilla JS can still be used on any engine. While simple functionalities can be easily extracted from packaged modules if licensing terms are met, things get complicated when dealing wit ...

How can I adjust the Line Opacity settings in Google Charts?

Within my Google Charts project, I have successfully implemented a feature that changes the color of a line halfway through a graph based on certain conditions using a dataView. Here is the code snippet demonstrating this functionality: var dataView = new ...

Encountering some difficulties while setting up my development tool (specifically webpack)

I have embarked on a journey to learn modern JavaScript with the help of Webpack and Babel. As a beginner in this field, my instructor is guiding me through the principles of modern JavaScript by building an app called Forkify - a recipe application. While ...

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...