Making an alert if the user email or password is wrong

JavaScript
1

I have some code that will run when a button is clicked on another page. The code looks for the student email and password, what I am trying to do is if email is right and the password is wrong then alert that the password is wrong. If the password is right, and email is wrong then alert the user about the email being wrong. If both password and email are wrong then alert that both are wrong. My problem right now is even if the password and email are right, I am still geting the alert that the email is wrong, and the alert that both are wrong

 onLogin(): any {
    var emailInput = (<HTMLInputElement>document.getElementById('emailInput')).value.trim();
    var passInput = (<HTMLInputElement>document.getElementById('passInput')).value.trim();
    var emailFormat = "^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$";
  
    if(!emailInput.match(emailFormat)){
        alert("Please enter a valid email!");
    }

    if(passInput ==''){
      alert("Password field can not be empty!");
    }
     

    for (let i = 0; i < this.Student.length; i++) {

      if (emailInput == this.Student[i].email) {
        console.log('email success');
        if (passInput == this.Student[i].password) {
          console.log('pasword success');
          //get the id
          console.log(this.Student[i]._id);
          this.studentId = this.Student[i]._id;
          localStorage.setItem("studentId", this.Student[i]._id);
          
          this.ngZone.run(() => this.router.navigateByUrl('/course-list'))
        } else if (emailInput == this.Student[i].email && passInput !== this.Student[i].password){
          alert('Password is incorrect for this email!');
          console.log('password fail');
        }
      } else if (emailInput !== this.Student[i].email && passInput == this.Student[i].password) {
        alert("Email is incorrect for this password!");
        console.log('email fail');
      }
      else if (emailInput !== this.Student[i].email && passInput !== this.Student[i].password) {
        alert("Both password and email are incorrect!");
      }
      else{
        console.log("successful login");
      }
    }
  }
2

I don´t see error on your if statements, but you should check emailInput and passInput vars. for the missing close tags.

Also will be more secure if you check for both. If password OR email are wrong return an alert “wrong credentials”. Otherwise you’re alowing users to guessing emails. And the code will be more readable.

3

I might have to just use OR, my goal was to check both password and email and then show an alert depending on which one of them was wrong. It is weird because any if/else if that comes after this line

else if (emailInput == this.Student[i].email && passInput !== this.Student[i].password){
          alert('Password is incorrect for this email!');
          console.log('password fail');
        }

They ignore their conditions and start alerting on a successful log in.

4

So, I had to get rid of my plan of using if/else in the loop because the loop was messing everything up. I has the idea of using this

const user = this.Student.find((student:any =>student.email === emailInput && student.password === passInput);

Instead of looping through the list of students, I want to find the first student where the value of email and password entered match the username and password in the database. In the above code I am getting an error on the arrow saying ’ , ’ expected. Not sure about this error

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { CrudService } from 'src/app/service/crud.service';
import { FormGroup, FormBuilder } from '@angular/forms';


@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.css']
})
export class LoginPageComponent implements OnInit {

  loginForm: FormGroup;
  register: FormGroup;
  Student: any = [];

  studentId: any;

  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private crudService: CrudService
  ) {
    this.register = this.formBuilder.group({})

    this.loginForm = this.formBuilder.group({
      Email: [''],
      Password: ['']
    })
  }
  ngOnInit(): void {

    this.crudService.GetCredintials().subscribe(res => {
      console.log(res)
      this.Student = res;
    });

  }

  onLogin(): any {
    var emailInput = (<HTMLInputElement>document.getElementById('emailInput')).value.trim();
    var passInput = (<HTMLInputElement>document.getElementById('passInput')).value.trim();
    var emailFormat = "^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$";
    
    const user = this.Student.find((student:any =>student.email === emailInput && student.password === passInput);

      if (user) {
        // we have user in database
        console.log("successful login");
    } else {
        console.log("login failed");
    }
  
    if(!emailInput.match(emailFormat)){
        alert("Please enter a valid email!");
    }

    if(passInput ==''){
      alert("Password field can not be empty!");
    }
     
    

    for (let i = 0; i < this.Student.length; i++) {

      if (emailInput == this.Student[i].email) {
        console.log('email success');
        if (passInput == this.Student[i].password) {
          console.log('pasword success');
          //get the id
          console.log(this.Student[i]._id);
          this.studentId = this.Student[i]._id;
          localStorage.setItem("studentId", this.Student[i]._id);
          
          this.ngZone.run(() => this.router.navigateByUrl('/course-list'))

        } 
      } 
    }
  }
  onRegisterClick(): any {
    this.ngZone.run(() => this.router.navigateByUrl('/register-page'))
  }

}

This is the full file right now

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.