I try to create a login app using Angularjs that storing information in $cookies. Once the user is logged in, they don't have to log in again:
This is login form:
<form action="/" id="login">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="username" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="password" required />
</div>
<div class="form-actions">
<button id="submit_btn" type="button" ng-click="submit()" class="btn btn-danger">Login</button>
</div>
</form>
This is the app.js
var app = angular.module('mailApp', ['angular.chosen','ngRoute','ngCookies'], function(){});
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
}).
when('/logs/', {
templateUrl: 'index.html',
controller: 'mailController',
}).
otherwise({
redirectTo: '/'
});
}]);
app.controller('mailController', function($scope, $http,$routeParams,$location,domainService, $rootScope, $location, $cookies)
{
$rootScope = false;
$scope.submit = function (info) {
if($scope.username == '123' && $scope.password == '123') {
$rootScope.loggedIn = true;
$location.path('/logs/');
}
else{
alert('Wrong authentication!');
}
}
//...
}
But I am new to angularjs and not really got to $cookies.
Any help would be appreciated!
Thanks, guys!
Related
I have a controller for signing in firebase
$scope.addUser = function() {
firebase.auth().signInWithEmailAndPassword($scope.Email,$scope.Password).then(function(authData) {
authenticated = true;
console.log("Logged in as:", authData.uid, authenticated);
$location.path("/user_manual");
}).catch(function(error) {
authenticated = false;
console.error("Authentication failed:", error);
$location.path("/");
});
};
And a login.html form
<center><h1>Login</h1></center>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-4">
<input class="form-control" id="Email"
ng-model="Email" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="Password"
ng-model="Password" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-2"></div>
<label class="col-sm-2 control-label"></label>
<div class="col-sm-4">
<a ng-click="addUser()" class="btn btn-small btn-primary">Login</a>
</div>
</div>
</form>
</div>
As I click on login button it doesn't load user_manual.html for the first time but clicking it on three times it loads user_manual.
The same is with logout button:
I have logout function :
scope.logout = function(){
$window.alert("Do you really want to logout?");
firebase.auth().signOut().then(function() {
$location.path("/");
}).catch(function(error) {
});
And a logout button as:
<a ng-click="logout()" ng-confirm-click="Do you want to logout" class="btn btn-small btn-primary">logout</a>
It also redirects to $location.path("/") on clicking the button twice.
Here is the main controller app.js:
var app = angular.module('myApp',['ngRoute','firebase','ng-fusioncharts','chart.js','720kb.datepicker']);
var config = {
*******************************
};
firebase.initializeApp(config);
var user = firebase.auth().currentUser;
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'UserAdd',
templateUrl: 'views/users/user_login.html'
})
.when('/user_manual', {
controller: 'UserManual',
templateUrl: 'views/user_manual/user_manual.html'
})
.otherwise({
redirectTo: '/'
});
});
Why the buttons not work on a single click action?
I am trying to bind the value of a text input to a model value, but the value remains undefined...
The HTML:
<div class="panel panel-default">
<div class="panel-body">
<form name=user-form class="form-horizontal" novalidate>
<label for="firstname" class="col-sm-2 control-label">Firstname</label>
<div class="col-sm-4">
<input type="text" ng-model="ctrl.formData.firstname" name="firstname" class="form-control" placeholder="Firstname"/>
</div>
<div class="col-md-offset-2">
<input type="submit" class="btn btn-primary" name="submit" value="Add" ng-click="ctrl.submit()">
</div>
</form>
</div>
</div>
AngularJS:
angular.module('app', ['ngRoute']);
angular.module('app').config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'MainController',
controllerAs: 'ctrl'
})
.when('/user', {
templateUrl: 'pages/user.html',
controller: 'UserController',
controllerAs: 'ctrl'
});
});
angular
.module('app')
.controller('UserController', ['$http', '$scope', function($http, $scope) {
var self = this;
self.formData = {};
self.submit = function() {
$http.post('http://localhost:50211/api/user/add',
JSON.stringify(self.getUserData()))
.success(function() {
console.log('Success');
})
.error(function() {
console.log('Failed');
});
};
self.getUserData = function() {
return {
FirstName: self.formData.firstname
};
};
}]);
The data object for the ajax request always contains 'Firstname: undefined', I'm guessing I'm missing something simple but cant see it.
index.html
This is my index page. It gets loaded when my application runs, it contains prefilled values by default. I want to route to home page when a user submits the form after clicking the submit button. but i am getting an error [injector:moduler] this means that applications has failed to instantiate a module. below is my app.js file which contains a module and a controller kindly help me out to rectify this error.
<body>
<div ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="row">
<div>
<form name="userForm" ng-submit="submitForm()" novalidate>
<h1>Login Form</h1> //a html form with validations in angular
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" value="ank#gmail.com">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" value="1234">
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Enter a valid password.</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</body>
app.js
//this contains the modules and controllers.
'use strict';
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.submitForm = function() {
var username = $scope.user.email;
var password = $scope.user.password;
if(username == "ank#gmail.com" && password=="1234")
{
if ($scope.userForm.$valid) {
alert('thank you for submitting your form');
window.location.href="home.html";
}
}
else
{
alert("incorrect username and password");
}
};
});
//code for routing to another page after login
validationApp.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/index', {
templateUrl: 'index.html',
controller: 'loginController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'RegisterController'
})
.otherwise({
redirectTo: '/index'
});
}]);
You have forgotten to include ngRoute module.
var validationApp = angular.module('validationApp', ['ngRoute']);
check here for more information about AngularJS Routes
app.js
var validationApp = angular.module('validationApp',['ngRoute']);
validationApp.config(
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/home', {
templateUrl: 'home.html',
controller: 'mainController'
})
.otherwise({
redirectTo: '/main.html'
});
});
// create angular controller
validationApp.controller('mainController', function($scope,$location,$window) {
$scope.submitForm = function() {
var username = $scope.user.email;
var password = $scope.user.password;
var remember = $scope.user.rememberme;
if(username == "ank#gmail.com" && password=="1234")
{
if ($scope.userForm.$valid) {
alert('thank you for submitting your form');
$location.path("/home");
}
}
else
{
alert("invalid username and password");
}
};
});
i have also made changes in my index.html file
</head>
<body>
<div ng-app="validationApp">
<ng-view></ng-view>
</body>
</html>
i have created another page for displaying my login form
main.html
<div class="container">
<div class="row">
<div>
<form name="userForm" method="post" ng-submit="submitForm()" novalidate>
<h1>Login Form</h1>
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" value="ank#gmail.com">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" value="1234">
<p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">Enter a valid password.</p>
</div>
<div class="form-group">
<input type="checkbox" ng-model="user.rememberme"
ng-true-value="yes" ng-false-value="no" > Remember Me
</div>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
I am new to angularjs...i am trying to navigate from login page to next page using router functionality....My login page is as follows
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
{{nameis}}
</form>
</div> <!-- /container -->
</div>
<div ng-view></div>
</body>
my app.js file is as follows
'use strict';
//Define Routing for app
var applog = angular.module('myApp',[]);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: '/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and my controller js file is as follows
applog.controller("LoginController", function($scope, $location,$window){
$scope.nameis = "Test";
$scope.go = function ( path ) {
$location.path( path );
};
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
Honestly i dont know where i am going wrong...the problem is i am getting the url of the page correctly in the url tab but i need to press enter to go to that page...i mean the page is not getting refreshed it just changes the existing url and just sits in the same page(i.e login page)....can someone plz help....
Add angular-route library too.In latest angular versions, it is available as a separate module.So, you need to inject 'ngRoute' for using $routeProvider service
index.html:
<html ng-app='myApp'>
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
</head>
<body>
<div ng-view></div>
<script type="text/javascript">
'use strict';
//Define Routing for app
var applog = angular.module('myApp', ['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/login.html',
controller: 'LoginController'
})
.when('/navAng', {
templateUrl: '/navAng.html',
controller: 'navAngController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
applog.controller("LoginController", function($scope, $location, $window) {
//$scope.nameis = "Test";
$scope.go = function(path) {
$location.path(path);
};
$scope.login = function() {
var username = $scope.user.name;
var password = $scope.user.password;
if (username == "admin" && password == "admin") {
$location.path("/navAng");
} else {
$scope.message = "Error";
$scope.messagecolor = "alert alert-danger";
}
}
});
// next page controller
applog.controller("navAngController", function($scope, $location, $window) {
$scope.msg= "Success";
});
</script>
</body>
</html>
Use separate html for login. Because, you are using ng-view in index.html
Login.html:
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b>
</button>
{{nameis}}
</form>
</div> <!-- /container -->
</div>
This is another page to navigate, when login and password is correct
navAng.html:
<div> {{msg}} </div>
I know i have already asked the same question but i am getting nowhere with this problem..I am trying to navigate from login page to next page...
login.html
<body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b>
<input type="username" class="form-control" ng-model="user.name" required>
</span>
</br></br>
<span><b>Password :</b>
<input type="password" class="form-control" ng-model="user.password" required>
</span>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit" >
<b>Sign in</b></button>
</form>
</div> <!-- /container -->
</div>
</body>
my app file is
'use strict';
//Define Routing for app
var applog = angular.module('myApp',['ngRoute']);
applog.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/login', {
templateUrl: 'html/navAng.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: 'html/navAng.html'
});
$locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);
and the controller is
applog.controller("LoginController", function($scope, $location){
$scope.login=function()
{
var username=$scope.user.name;
var password=$scope.user.password;
if(username=="admin" && password=="admin")
{
$location.path( "html/navAng.html" );
}
else
{
$scope.message="Error";
$scope.messagecolor="alert alert-danger";
}
}
});
now when i click on the login button the url is getting generated but it just changes the url in the url tab and nothing happens i.e the page is not getting refreshed or navigating to the next page....can someone help plz...
just enter the path not with .html, like this
$location.path( "/login" );