I want a simple HTML form showing user and password inputs, now form is showing up in modal box using bootstrap. I am good in java but my hands are tight on javascript and angularjs, bootstraps etc.
Code1
$scope.modalShown = false;
var showLoginDialog = function() {
if(!$scope.modalShown){
$scope.modalShown = true;
var modalInstance = $modal.open({
templateUrl : 'templates/login.html',
controller : "LoginCtrl",
backdrop : 'static',
});
modalInstance.result.then(function() {
$scope.modalShown = false;
});
}
};
other code from where the values are passing.
code2
.controller('LoginCtrl', [ '$scope', '$state', '$modalInstance' , '$window', 'Auth',
function($scope, $state, $modalInstance, $window, Auth ) {
$scope.credentials = {};
$scope.loginForm = {};
$scope.error = false;
//when the form is submitted
$scope.submit = function() {
$scope.submitted = true;
if (!$scope.loginForm.$invalid) {
$scope.login($scope.credentials);
} else {
$scope.error = true;
return;
}
};
//Performs the login function, by sending a requeora to the server with the Auth service
$scope.login = function(credentials) {
$scope.error = false;
Auth.login(credentials, function(user) {
//success function
$modalInstance.close();
$state.go('home');
}, function(err) {
console.log("error");
$scope.error = true;
});
code1 is written in the maincontroller of angular app where its triggering the modal box with user and password inputs getting credentials from login.js
Related
I want to make the user info available to all views after login. How can I modify the code to be able to access the pseudonym from the other view?
Can you please give an example?
Here is my login controller:
app.controller("MyregisterCtrl", ["$scope", "$stateParams", "Auth", "$state", "$location", "$modal", "DatabaseRef",
function ($scope, $stateParams, Auth, $state, $location, $modal, DatabaseRef) {
$scope.user = {};
$scope.signIn = function () {
if (!$scope.user.email && !$scope.user.password) {
toastr.error("Add email and password");
} else {
Auth.$signInWithEmailAndPassword($scope.user.email, $scope.user.password)
.then(function(firebaseUser) {
//=====user info=================
var userId = firebase.auth().currentUser.uid;
DatabaseRef.ref('/users/' + userId).once('value')
.then(function(snapshot) {
pseudonym = snapshot.val().pseudonym;
console.log("pseudonym: ", pseudonym);
return pseudonym;
});
//======================
$state.go('app.dashboard');
if (!firebaseUser.emailVerified) {
toastr.info('Your email is NOT verified.', 'Verify email!');
$state.go('login.signin');
}
})
.catch(function(error) {
toastr.error(error.message, error.reason, { timeOut: 10000 });
$scope.user = {};
})
}
};
}]);
this console.log("pseudonym: ", pseudonym); gives me what I want to access, but can't access it from other views, by just typing {{pseudonym}} for example.
Assign to a $scope variable, whenever you want to display on view ,
pseudonym = snapshot.val().pseudonym;
$scope.pseudonym =pseudonym;
I have my pseudonym in the $scope and I try to access it from other views after the user has logged in, using:
however, when I refresh the page immediately after the user has successfully signed in, the $scope value reverts back into {{pseudonym}} and the parameter isn't available. How can I save this data persistently throughout the logged in session? Can you please provide the answer with an example?
app.controller("MyregisterCtrl", ["$scope", "$stateParams", "Auth", "$state", "$location", "$modal", "DatabaseRef", "$rootScope",
function ($scope, $stateParams, Auth, $state, $location, $modal, DatabaseRef, $rootScope) {
$scope.user = {};
$scope.signIn = function () {
if (!$scope.user.email && !$scope.user.password) {
toastr.error("Add email and password");
} else {
Auth.$signInWithEmailAndPassword($scope.user.email, $scope.user.password)
.then(function(firebaseUser) {
var userId = firebase.auth().currentUser.uid;
DatabaseRef.ref('/users/' + userId).once('value')
.then(function(snapshot) {
pseudonym = snapshot.val().pseudonym;
console.log("pseudonym: ", pseudonym);
$scope.pseudonym = pseudonym;
});
$state.go('app.dashboard');
if (!firebaseUser.emailVerified) {
// firebaseUser.sendEmailVerification();
toastr.info('Your email is NOT verified.', 'Verify email!');
$state.go('login.signin');
}
// $state.go('home');
})
.catch(function(error) {
toastr.error(error.message, error.reason, { timeOut: 10000 });
$scope.user = {};
})
}
};
You should use a Service to store the value and retrieve it whenever you need.
var myApp = angular.module('myApp',[]);
myApp.service('mySingleton', function() {
var username= "test";
return {
username : username
};
});
function MyCtrl($scope, mySingleton) {
$scope.username= mySingleton.username;
}
function MyCtrl2($scope, mySingleton) {
$scope.username= mySingleton.username;
}
What specific changes need to be made to the AngularJS code below to check for the existence of a cookie named myCookie every time a page is loaded, and then to set the $rootScope.myCookieValue variable to become the value of myCookie?
The code is from the sample app whose complete code you can explore at this link. It is a very simple example app, and I just want a simple working solution to this so that I can build up more complex approaches from it.
angular.module('hello', [ 'ngRoute' ]).config(function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'home',
controllerAs : 'controller'
}).otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.common['Accept'] = 'application/json';
}).controller('navigation',
function($rootScope, $http, $location, $route) {
var self = this;
self.tab = function(route) {
return $route.current && route === $route.current.controller;
};
$http.get('user').then(function(response) {
if (response.data.name) {
$rootScope.authenticated = true;
} else {
$rootScope.authenticated = false;
}
}, function() {
$rootScope.authenticated = false;
});
self.credentials = {};
self.logout = function() {
$http.post('logout', {}).finally(function() {
$rootScope.authenticated = false;
$location.path("/");
});
}
}).controller('home', function($http) {
var self = this;
$http.get('resource/').then(function(response) {
self.greeting = response.data;
})
});
you can do it in run block I guess:
angular.module('hello', ['ngCookies', 'ngRoute'])
.config(function ($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'home',
controllerAs: 'controller'
}).otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$httpProvider.defaults.headers.common['Accept'] = 'application/json';
}).run(function ($rootScope, $cookies) {
var cookieValue = $cookies.get("myCookie");
if (cookieValue) {
$rootScope.myCookieVar = cookieValue;
}
}).controller('navigation',
function ($rootScope, $http, $location, $route) {
var self = this;
self.tab = function (route) {
return $route.current && route === $route.current.controller;
};
$http.get('user').then(function (response) {
if (response.data.name) {
$rootScope.authenticated = true;
} else {
$rootScope.authenticated = false;
}
}, function () {
$rootScope.authenticated = false;
});
self.credentials = {};
self.logout = function () {
$http.post('logout', {}).finally(function () {
$rootScope.authenticated = false;
$location.path("/");
});
}
}).controller('home', function ($http) {
var self = this;
$http.get('resource/').then(function (response) {
self.greeting = response.data;
})
});
I think you should use angular version > 1.4.x
you should also add reference angular-cookies.js
I want to redirect the users, to their user profile page, after they successfully login (or their login is successfully authenticated). I take the users to their profile pages through the dynamic hyper link below:
#/{{getAccountTypeName($parent.user.account_type)}}/{{$parent.user.handle}}
And I've located where my users are authenticated at login. But How can I take a dynamically populated URL such as above, in angular JS and call it as a redirect in the below authentication statement. (I am new to angular)
var email = $scope.loginForm.email;
var password = $scope.loginForm.password;
auth.login(
email,
password,
function (data) {
if (data.success == true) {
$scope.initLogin();
$scope.loginCallback(data);
$scope.showWelcome = true;
addPointsLogin();
$("#welcomeModal").modal();
$scope.cancel = function () {
$("#welcomeModal").modal("hide");
};
}
else {
alert(data.error_message);
}
}
app.controller('myCntrl', ['$http', '$scope', '$route', '$routeParams', '$location',
function($http, $scope, $route, $routeParams, $location){
var email = $scope.loginForm.email;
var password = $scope.loginForm.password;
auth.login(
email,
password,
function (data) {
if (data.success == true) {
$scope.initLogin();
$scope.loginCallback(data);
$scope.showWelcome = true;
addPointsLogin();
$location.path(path); // Put your path here
console.log($routeParams); // Here you get your URL data
$("#welcomeModal").modal();
$scope.cancel = function () {
$("#welcomeModal").modal("hide");
};
}
else {
alert(data.error_message);
}
}
}]);
I'm currently working on my first Angular application. Each hurdle I get over is really helping me with my understanding of how everything in Angular comes together but also programming in general.
Right now, I am experimenting with AngularFire and Firebase as the back end to the application. Further down the line, I will store other data in Firebase, but right now I am focused on getting the User Authentication part down.
Currently, the application is comprised of an index.html page, which loads the navigation HTML elements as a header, and then loads partials within an ng-view element. This keeps the navigation constant and the pages dynamic (much of the content is generated via Angular from various JSON objects). It also includes a login.html that is entirely separate and does not include the navigational elements from the main application, but does use the same controllers and modules as the rest of the application. I've managed to cobble together a working login, which interfaces successfully with Firebase. This can verify existing e-mail/password combinations or register new users. What I really want is for a successful login to redirect to index.html, and if someone tries to access index.html or any of the partials without having signed in, to be redirected to the login.html. I'm not entirely sure how to approach this, though I believe it will have something to do with the router. I'd also like to keep the authentication information attached to a persistent user object so it can be used in controlling the visibility and functionality of navigation options later on.
The Angular code that I am using:
var profileApp = angular.module('profileApp', ['ngRoute', 'firebase']);
profileApp.controller('LoginCtrl', ['$scope', '$rootScope', '$firebaseAuth', function($scope, $rootScope, $firebaseAuth) {
var ref = new Firebase('https://FIREBASEURL.firebaseio.com/');
$rootScope.auth = $firebaseAuth(ref);
$scope.signIn = function () {
$rootScope.auth.$login('password', {
email: $scope.email,
password: $scope.password
}).then(function(user) {
$rootScope.alert.message = '';
}, function(error) {
if (error = 'INVALID_EMAIL') {
console.log('email invalid or not signed up — trying to sign you up!');
$scope.signUp();
} else if (error = 'INVALID_PASSWORD') {
console.log('wrong password!');
} else {
console.log(error);
}
});
}
$scope.signUp = function() {
$rootScope.auth.$createUser($scope.email, $scope.password, function(error, user) {
if (!error) {
$rootScope.alert.message = '';
} else {
$rootScope.alert.class = 'danger';
$rootScope.alert.message = 'The username and password combination you entered is invalid.';
}
});
}
}
]);
profileApp.controller('AlertCtrl', [
'$scope', '$rootScope', function($scope, $rootScope) {
$rootScope.alert = {};
}
]);
profileApp.controller('HistoryCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.historyItems = data;
});
});
profileApp.controller('FaceCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.faceItems = data;
});
});
profileApp.controller('PhysicalCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.physicalItems = data;
});
});
profileApp.controller('MenuCtrl', function ($scope, $http){
$http.get('profile.json').success(function(data) {
$scope.profileItems = data;
});
});
profileApp.controller('ContentCtrl', function ($scope, $http){
$http.get('content.json').success(function(data) {
$scope.contentItems = data;
});
});
profileApp.controller('OrdersCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.ordersItems = data;
});
});
profileApp.controller('MedAdminCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.medadminItems = data;
});
});
profileApp.controller('LabsCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.labItems = data;
});
});
profileApp.controller('VitalsCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.vitalItems = data;
});
});
profileApp.controller('AssessmentCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.asessmentItems = data;
});
});
profileApp.controller('IoCtrl', function ($scope, $http){
$http.get('patient.json').success(function(data) {
$scope.ioItems = data;
});
});
profileApp.config(['$routeProvider', function ($routeProvider) {
__insp.push(["virtualPage"]);
$routeProvider
// Home
.when("/", {
templateUrl: "partials/face.html",
controller: "FaceCtrl"
})
.when("/face", {
templateUrl: "partials/face.html",
controller: "FaceCtrl"
})
// Pages
.when("/medicalHistory", {
templateUrl: "partials/medicalhistory.html",
controller: "HistoryCtrl"
})
.when("/physicalExam", {
templateUrl: "partials/physicalexam.html",
controller: "PhysicalCtrl"
})
.when("/orders", {
templateUrl: "partials/orders.html",
controller: "OrdersCtrl"
})
.when("/medAdmin", {
templateUrl: "partials/medadmin.html",
controller: "MedAdminCtrl"
})
.when("/labs", {
templateUrl: "partials/labs.html",
controller: "LabsCtrl"
})
.when("/vitals", {
templateUrl: "partials/vitals.html",
controller: "VitalsCtrl"
})
.when("/assessment", {
templateUrl: "partials/assessment.html",
controller: "AssessmentCtrl"
})
.when("/io", {
templateUrl: "partials/io.html",
controller: "IoCtrl"
})
//.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
// else 404
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);
Here!, Iv changed the code.... Check this out and let me know if this solves the problem!
To Sign In and Sign Up:
profileApp.controller('LoginCtrl', ['$scope', '$location', '$firebase',
function($scope, $location, $firebase) {
$scope.message = "";
var username = "";
var password = "";
var ref = new Firebase("https://FIREBASEURL.firebaseio.com/");
$scope.signIn = function() {
username = $scope.username;
password = $scope.password;
ref.authWithPassword({
email: username,
password: password
}, function(error, authData) {
if (error) {
switch (error.code) {
case "INVALID_EMAIL":
alert("The specified user account email is invalid.");
break;
case "INVALID_PASSWORD":
alert("The specified user account password is incorrect.");
break;
case "INVALID_USER":
alert("The specified user account does not exist.");
break;
default:
alert("Error logging user in:", error)
}
$scope.message = "Wrong Username/Password;";
} else {
$location.path("/home");
}
}, {
remember: "sessionOnly"
});
};
};
$scope.signUp = function () {
$rootScope.auth.$createUser($scope.email, $scope.password, function (error, user) {
if (!error) {
$rootScope.alert.message = '';
} else {
$rootScope.alert.class = 'danger';
$rootScope.alert.message = 'The username and password combination you entered is invalid.';
}
});
};
]);
To Sign Out:
profileApp.controller('home', ['$scope', '$location', '$firebase',
function($scope, $location, $firebase) {
function authDataCallback(authData) {
if (authData) {
alert("Logged in...");
} else {
$location.path("/login");
alert("Log in to access this page");
}
};
var ref = new Firebase("https://FIREBASEURL.firebaseio.com/");
ref.onAuth(authDataCallback);
$scope.logoutUser = function() {
ref.unauth();
$location.path("/login");
};
// Authentication Code
One more thing! You click the submit button and you will not be navigated to another desired view on correct Username/Password. Here what you will do:
1- After clicking submit button wait for 5-10 seconds.
2- After that click the submit button again. Try this out for now.
Cheers!