Display the current username using Angular authenticationorDemonstrate how

I've been modifying a login script created by someone else. My objective was to incorporate the use of ng-option instead of input. I successfully implemented this, as shown in the example. However, after logging in, I'm unable to view the user's data. Why is that?

FULL CODE: http://plnkr.co/edit/ImsqhVFVanCp5OXNisrA?p=preview

Controllers.js:

angular.module('Authentication')

.controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService',
function ($scope, $rootScope, $location, AuthenticationService) {
    // reset login status
    AuthenticationService.ClearCredentials();
         $scope.users = [
                {"username": "test", "number": "13242342"},
                {"username": "2", "number": "00000000"},
                {"username": "3", "number": "0483184"},
            ];
    $scope.login = function () {
        $scope.dataLoading = true;
        AuthenticationService.Login($scope.username, $scope.password,        function(response) {
            if(response.success) {
                AuthenticationService.SetCredentials($scope.username,     $scope.password);
                $location.path('/');
            } else {
                $scope.error = response.message;
                $scope.dataLoading = false;
            }
        });
    };
}]);

Answer №1

When configuring your authentication service, ensure that you are storing the user's credentials correctly:

$rootScope.globals = {
    currentUser: {
        username: username,
        authdata: authdata
    }
};

Make sure to update {{user.username}} in your view to {{globals.currentUser.username}}.

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

Guidelines for combining inner objects with their parent in Javascript

I need assistance with using the filter function in Angular.js because it's not working on objects. Is there a way to merge a nested object into its parent using Javascript? For example, I have the following data structure: { "data" : [ { "ch ...

How to align an unordered list horizontally in HTML without knowing the number of items

I'm currently developing a web page that needs to display an unknown number of items using the ul/li HTML tag. Here are my requirements: The list should utilize as much horizontal space as possible The list must be horizontally centered, even if lin ...

Should we be concerned about the ethics of running javascript that is fetched through an AJAX request?

Currently, I am working on updating an existing web application that allows for user administration and login capabilities. One of the features involves modifying a user's details through a dialog box, where the updated data is then sent to the server ...

AngularJS datatables do not have a responsive design

Currently, I am faced with an issue while working on angular datatables and switching between two different states: #/app/configurations/formations and #/app/configurations/filieres. The problem arises in the presentation when transitioning between these s ...

Lost Vuex struggles when it is manually navigating a route in Vue-router

Exclusively on Safari browser, I encounter an issue when manually entering the URL in the navigation bar after logging in. For example, if I type "http://x.x.x.x:8080/gestione", the browser loses the vuex store state (specifically the gest_user module with ...

Building a favorite feature in Django using HTML

Currently, I am working on implementing an Add to Favorite feature. So far, I have succeeded in displaying a button with an icon based on the value of the is_favorite field, but I am facing difficulties updating my database. I would like to know: How can ...

When using the npm install -g yo command, an error is produced: ERR

After attempting an npm install, I encountered the following error message. npm install -g yo npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/yo' npm ERR! { [Error: EACCES, mkdir '/usr/local/lib/node_modules/yo'] npm ERR! ...

Using the _id String in a GraphQL query to retrieve information based on the Object ID stored in a

Encountering an issue with my graphql query not returning anything when sending the _id as a string. Interestingly, querying the DB using any other stored key (like name: "Account 1") works perfectly and returns the object. I've defined my Account sch ...

Unlocking the power of promises: How Node.js excels at handling

I'm facing a situation where my controller code is structured like this. const Users = require("../models/users"); class UserController() { getUserById(req, res) { const id = req.params.id; const users = new Users(); ...

Suggestions for retaining buttons functionality during drag and drop operations using jQuery UI?

My goal is to create new preset buttons when a button is dropped into the "timeslot" div. However, I am struggling to achieve this and ended up creating a function called "init()" which removes all existing buttons and generates new preset buttons every ti ...

Is it possible to implement a setInterval on the socket.io function within the componentDidMount or componentDidUpdate methods

I'm currently working on a website where I display the number of online users. However, I've encountered an issue with the online user counter not refreshing automatically. When I open the site in a new tab, the counter increases in the new tab b ...

Encountering an issue with the SSR module evaluation despite having SSR disabled in Svelte Kit

I needed a specific route in my app to not be server-side rendered. This can be achieved by setting export const ssr = false in the module script or configuring ssr: false in the svelte.config.js, as outlined in the Svelte documentation. Despite disabling ...

Acquiring Device Data in React-Native for iOS

Hello, I am currently attempting to retrieve device information from an iPad. I attempted to use the library found at https://github.com/rebeccahughes/react-native-device-info, however, it caused issues after performing a pod install. My main goal is to ob ...

Is there a workaround for unresolved symlink requirements when using npm link?

Creating an NPM package often involves using the following: npm link This allows for making modifications to a package called <myPackage> during development without constantly having to publish and unpublish! Developers can make changes locally and ...

Fade out when the anchor is clicked and fade in the href link

Is it possible to create fade transitions between two HTML documents? I have multiple HTML pages, but for the sake of example, let's use index.html and jobs.html. index.html, jobs.html Both pages have a menu with anchor buttons. What I am aiming to ...

The Woocommerce mini cart subtotal fails to accurately update after a change in currency

Is there a way to dynamically recalculate and update the Subtotal of the mini cart in real-time based on the current currency values upon page reload using JavaScript or PHP? I am facing an issue with my mini cart displaying incorrect Subtotal values when ...

Tips on removing the red border from a text box within an HTML form with the help of AngularJS

My form has the following appearance: https://i.stack.imgur.com/T3NQW.png Upon clicking the submit button, the textbox fields display a red border due to the required attribute. Afterwards, I aim to click the reset button in order to remove the red bord ...

Steps for installing an npm package from a downloaded folder

In the past, I had a method of installing an npm project from Github that involved using git clone followed by npm install. git clone http...my_project npm install my_project Instead of manually copying the contents of my_project to my local node_modules ...

Updating a single component within a changing array of objects in React: Best practices

I've got a question regarding React rendering that I need help with. Before I dive into the explanation, here's the link to the relevant code sandbox: https://codesandbox.io/s/list-rerendering-y3iust?file=/src/App.js Here's the situation - ...

What is causing the discrepancy in outcomes between using ng-show="!emptyArray" and ng-hide="emptyArray"?

I used to believe that ngShow and ngHide were like two sides of the same coin, acting as boolean counterparts to each other. However, my perception was challenged when I encountered unexpected behavior with ngShow in relation to an empty array. Check out ...