Secure login using AngularJS

I am in need of modifying the code on this Plunker: plnkr.co/edit/Mvrte4?p=preview

I want to remove user roles so that all users have access to the same page.

If possible, I would like the modified code to be split into two pages:

  • Page 1: index.html containing the login form
  • Page 2: home.html containing the logout button

Here is a list of users who can login to home.html:

[{ "username": "user1","password": "pass1" }, {"username": "user2","password": "pass2" }, {"username": "user3","password": "pass3"}, {"username": "user4","password": "pass4"}]

My updated Plunker link: plnkr.co/edit/fplol0FFpGkLZC3ZdgKX?p=preview

This is the schema image of what I need:

Please, someone assist me with this request. Thank you!

javascriptangularjsjsonauthentication

Answer №1

Click here to view the solution on Plunker

  • Ensure that AngularJS is included as a JavaScript dependency in your index.html file.
  • Add an ng-app directive and specify a module, such as myApp.
  • Change the type of your password input field to password.
  • I divided the components into directives - Index calls <main />, which then calls <home /> and <login />.
  • Use ng-if with controllerAs and vm to pass data between the <home /> and <login /> directives.
  • Implement two-way binding using ng-model for input elements to keep $scope values updated.
  • Display the username using {{ }} notation.
  • Retrieve username and passwords from a .json file using $http.
  • Perform username/password validation on the server side for security.
  • Consider using an authentication framework for password encryption on the server.
  • Correctly spell "Welcome" and "Logout".
  • In the logout function, set $scope.password to undefined.
  • If you prefer a solution with only (2) .html files, check out this snippet: View the alternative solution on Plunker

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

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

javascripthtmldataviewphaser-framework

Tips on converting mysql results to JSON using PHP

mysql database table structure: ID >> Name >> Salary The variable $row_set holds information from the database table. However, when using: json_encode($row_set); The output is in this format: [{"0":"1","ID":"1","1":"x","Name":"x","2":"123 ...

phpjsonarrays

Encountering a missing value within an array

Within my default JSON file, I have the following structure: { "_name":"__tableframe__top", "_use-attribute-sets":"common.border__top", "__prefix":"xsl" } My goal is to add values by creating an array, but I am encountering an issue where my ...

javascriptarraysangularjsjson

Retrieving data from the SENSOR DHT22 payload linked to Sonoff Tasmota

I have a Sonoff basic device flashed with Tasmora firmware and connected to a DHT22 temperature sensor. It is set up to send sensor values via MQTT to Mosquitto installed on a Linux PC. The data received is in the following format: mosquitto_sub -h my.d ...

pythonjsonmqttmosquitto

Employing condition-based require() statements in JavaScript

I am currently experimenting with conditionally loading modules that are Vue components. Review the code snippet below for a better understanding: index.js My goal is to dynamically load different components based on the window URL (since I cannot use vu ...

javascriptvue.jswebpackcode-splitting

A messaging application powered by socket.io and the Express JS framework

I am currently learning Node.js and I am encountering an issue with using socket.id to identify logged in users on the client side using their email id and password. The verification process happens on the server side, and if successful, the user's so ...

javascriptnode.jssocketsexpress

How can you reposition a component within the dom using Angular?

Just started learning Angular, so I'm hoping this question is simple :) Without getting too specific with code, I could use some guidance to point me in the right direction. I'm currently developing a small shopping list application. The idea i ...

javascripthtmlangulartypescript

Tips for iterating within a Vue.js template without disrupting the HTML structure

Currently, I am attempting to implement a loop within a table. However, I have encountered an issue with the following code: <tr v-for="( block , index ) in listRenderBlock" :key="index"> <div v-for="( section , i ) in ...

javascriptvue.jsvuejs2

Ways to access properties beyond the top-level object

I'm encountering issues with JSON parsing using the Jackson library { "userName": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7c9c4c7c9c4c7c9c4e5c2c8c4ccc98bc6cac8">[email protected]</a ...

javajsonjackson

Is it possible to convert checkbox values from a form into a JSON format?

HTML snippet : <form class="form-horizontal" id="addpersons" style="padding:20px;"> <fieldset class="scheduler-border"> <!-- Form Title --> <legend class="scheduler-border">Information</legend> <!-- First Name input-- ...

javascriptjqueryajaxjsoncheckbox

Sending symbols in Json data with HttpWebRequest

When attempting to send a message to MS Flow in Json format using the method below, I encounter an issue where symbols such as " are recognized as code and trigger an error: public static bool sendMessage(string customer, string message) { t ...

c#jsonhttpwebrequestsymbols

Using AngularJS to handle form data without ng-model

I am facing a unique situation that may seem a bit strange. I have a form that needs to edit/update information from different objects, such as services. My goal is to use ng-model to link input fields to their respective objects, but when the form is sub ...

javascriptangularjs

Is there a method to retrieve the subdirectories and files currently present on a given URL?

Picture having a file on your system with the following URL: I am curious if there is any software, command, or script that can retrieve subfolders/files based on a given URL. For instance: Input parameter: http://my.page/folder_1/ Output: http://my.p ...

javascripthtmlbashwebnetworking

Enhancing presentation with a multitude of pictures

I am currently in the process of developing a slideshow feature that includes an extensive collection of images for users to navigate through using 'next' and 'previous' buttons. At the moment, each time a user clicks on the navigation ...

javascriptjquery

What could be causing the persistent 304 error I keep encountering whenever I try to link my json file to my ajax requests?

Whenever I try to link my json file to the ajax file, my server responds with a 304 error every time I attempt to open my index.html using live server. Everything was working smoothly until I added the episodes.json file. Despite clearing my cache, the i ...

jsonajax

AngularJs - Dynamically disable input fields in table based on the selection in the top row

Is there a simple way to disable input elements in tables below the top row if certain boolean values are set to true, without losing their data? I want users to be able to edit those rows again if the booleans are set to false. Can AngularJs help with thi ...

angularjshtml-table

Monitor the item for fluctuations in its worth

Is there a way to watch an object and wait for all of its values to become truthy? const myObject = { key1: null, key2: null, key3: null, } // Perform asynchronous operations that update myObject const checkValues = async () => { awa ...

javascript

Tips to swap selections in a Select2 dropdown box

Is there a way to dynamically clear a Select2 option list and reload it with new data? Despite setting the data as suggested, it seems to only append the new data without clearing the existing options. $("#optioner").select2(); $("#doit").click(functio ...

javascriptjqueryjquery-select2-4

Issues with v-on:change not triggering method in nuxt.js

Despite my efforts, I can't seem to get this seemingly simple task to work. I came across a question on Stack Overflow that seemed to address the issue - how to fire an event when v-model changes Here is the component that I am working with: <tem ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Notation for JavaScript UML component diagrams

When creating connections between entities on a UML diagram, the standard notation is the ball-and-socket/lollipop method. Each pair should include the interface implemented. However, since my project is in JavaScript and doesn't have interfaces, I am ...

javascriptumlcomponent-diagram