AngularJS Sign-In Page: A Seamless User Experience

Question

AngularJS Sign-In Page: A Seamless User Experience

Currently facing an issue: I am working on creating a login form where I need to validate if the username and password entered in the input fields match the values stored in my array of users.

var app = angular.module('myApplication', []);

app.controller('UserListCtrl', function ($scope) {   
  $scope.usersList = [    
      {
          name: 'Alex',
          pass: 2200201
      },
      {
          name: 'Michael',
          pass: 1231215   
      },
      {
          name: 'John',
          pass: 1232116   
      }
  ];

  $scope.checkInputs = function () {

      $scope.searchUser = {
          name: $scope.yourName,
          pass: $scope.yourPass
      };

      if ($scope.searchUser.name === $scope.usersList.name) {
          console.log($scope.searchUser.name);
      } else {
          console.log('You are not registered');
      }

  };
});

Here's how it looks in HTML:

<form ng-submit="checkInputs()">
        <input type="text" ng-model="searchUser.yourName"><br>
        <input type="text" ng-model="searchUser.yourPass">
        <input type="submit" class="button">
</form>

javascript angularjs

Answer 1

Answer №1

Kindly note: this response addresses the various errors found in the code provided in the query, such as:

verifying if a string is within an array of objects
managing AngularJS databinding between the view and the model

The code presented here should not be viewed as a reliable authentication solution.

I want to validate whether the username entered by the user in the input form matches the usernames stored in the users' array.

To accomplish this, you wrote

$scope.searchUser.name === $scope.usersList.name

. This approach will not work because usersList is an array of strings, not a single string. To check if a name exists in the usersList array, you can utilize the indexOf function.

The indexOf() method returns the first index at which a specified element can be found in the array, or -1 if it is not present.

1) Revise:

if ($scope.searchUser.name === $scope.usersList.name) {
    // ...
}

with

Solution 1: assuming you are using a library like lodash or underscore with a pluck function:

var userNames = _.pluck($scope.usersList, 'name');
if (userNames.indexOf($scope.searchUser.name) >= 0) {
    // ...
}

Solution 2: create your own pluck function:

var myPluck = function (propertyName, array) {
    return array.map(function(obj) {
        return obj[propertyName];
    })
}
var userNames = myPluck('name', $scope.usersList);
if (userNames.indexOf($scope.searchUser.name) >= 0) {
    // ...
}

2) Additionally, replace:

$scope.searchUser = {
    name: $scope.yourName,
    pass: $scope.yourPass
};

with

$scope.searchUser = {
    name: '',
    pass: ''
};

3) Finally, in the HTML template, update:

<input type="text" ng-model="searchUser.yourName"><br>
<input type="text" ng-model="searchUser.yourPass">

with

<input type="text" ng-model="searchUser.name"><br>
<input type="text" ng-model="searchUser.pass">

Answer 2

Kindly note: this response addresses the various errors found in the code provided in the query, such as:

verifying if a string is within an array of objects
managing AngularJS databinding between the view and the model

The code presented here should not be viewed as a reliable authentication solution.

I want to validate whether the username entered by the user in the input form matches the usernames stored in the users' array.

To accomplish this, you wrote

$scope.searchUser.name === $scope.usersList.name

. This approach will not work because usersList is an array of strings, not a single string. To check if a name exists in the usersList array, you can utilize the indexOf function.

The indexOf() method returns the first index at which a specified element can be found in the array, or -1 if it is not present.

1) Revise:

if ($scope.searchUser.name === $scope.usersList.name) {
    // ...
}

with

Solution 1: assuming you are using a library like lodash or underscore with a pluck function:

var userNames = _.pluck($scope.usersList, 'name');
if (userNames.indexOf($scope.searchUser.name) >= 0) {
    // ...
}

Solution 2: create your own pluck function:

var myPluck = function (propertyName, array) {
    return array.map(function(obj) {
        return obj[propertyName];
    })
}
var userNames = myPluck('name', $scope.usersList);
if (userNames.indexOf($scope.searchUser.name) >= 0) {
    // ...
}

2) Additionally, replace:

$scope.searchUser = {
    name: $scope.yourName,
    pass: $scope.yourPass
};

with

$scope.searchUser = {
    name: '',
    pass: ''
};

3) Finally, in the HTML template, update:

<input type="text" ng-model="searchUser.yourName"><br>
<input type="text" ng-model="searchUser.yourPass">

with

<input type="text" ng-model="searchUser.name"><br>
<input type="text" ng-model="searchUser.pass">

Answer 3

Answer №2

Check out the working jsfiddle link here

 <form  ng-submit="checkInputs(searchUser)">
            <input type="text" ng-model="searchUser.yourName"><br>
            <input type="text" ng-model="searchUser.yourPass">
            <input type="submit" class="button">
    </form>        



function formCtrl($scope){
         $scope.usersList = [    
          {
              name: 'Alex',
              pass: 2200201
          },
          {
              name: 'Michael',
              pass: 1231215   
          },
          {
              name: 'John',
              pass: 1232116   
          }
      ];

         $scope.checkInputs = function (credentials) {
             var auth = false;
             angular.forEach($scope.usersList, function(value){

                 if(value.name == credentials.yourName && value.pass == credentials.yourPass){
                     auth = true;
                 }
                 if(!auth){

                     $scope.message= "Access denied";

                 }
                 else
                 {
                     $scope.message= "Access granted";
                 }

             });

         }

    }

Answer 4

Check out the working jsfiddle link here

 <form  ng-submit="checkInputs(searchUser)">
            <input type="text" ng-model="searchUser.yourName"><br>
            <input type="text" ng-model="searchUser.yourPass">
            <input type="submit" class="button">
    </form>        



function formCtrl($scope){
         $scope.usersList = [    
          {
              name: 'Alex',
              pass: 2200201
          },
          {
              name: 'Michael',
              pass: 1231215   
          },
          {
              name: 'John',
              pass: 1232116   
          }
      ];

         $scope.checkInputs = function (credentials) {
             var auth = false;
             angular.forEach($scope.usersList, function(value){

                 if(value.name == credentials.yourName && value.pass == credentials.yourPass){
                     auth = true;
                 }
                 if(!auth){

                     $scope.message= "Access denied";

                 }
                 else
                 {
                     $scope.message= "Access granted";
                 }

             });

         }

    }

AngularJS Sign-In Page: A Seamless User Experience

Answer №1

Answer №2

Similar questions

Is it possible to align the radio-button label above the radio-button in Angular Material 2?

Error: The document is unable to detect any input values

Enhancing Rails: Tailoring the flash message to suit individual needs

Transform the date format from yyyy-MM-dd'T'HH:mm:ss.SSS'Z' to dd-mmm-yyyy with the help of JavaScript

Utilizing a PHP-scripted multidimensional array in an AJAX success function

In Node.js, the `res.send()` function is called before the actual functionality code is executed

The `Click()` functionality experiences malfunction in Protractor automation scripts

Using JavaScript to transfer input field text into a textarea

Creating a horizontal line with text centered using Angular Material's approach

Modify the contents of an array within a string using JavaScript

Retrieving the file name from the line number within the trace stack or Error object

Angular Js powered admin control panel

Implementing a collapsible menu feature in Bootstrap 3 when clicked

Extra brackets appear when retrieving JSON data

Create a unique shader in Three.js that remains unaffected by the fog effect

When a user clicks on a child element of an anchor tag, the function will

Tips for implementing a delay in jQuery after an event occurs

Employ AngularJS UI-Router for creating a summary page

What is the process for updating the ID within a Select2 ajax script function?

Looking to identify the type of a adorned class in Typescript?