How can log-in using $http.post? - angularjs

Ionic Controller
.controller('LoginCtrl', function($scope, $ionicPopup, $state, $http) {
$scope.data = {};
$scope.login = function() {
$http.post('https://mywebsite/login', $scope.email) THIS PART IS TOTALLY WRONG
.success(function(data) {
$state.go('improvements');
}).error(function(data) {
console.log(data)
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'User/Password is Wrong'
});
});
}
})
I'm trying to login in a web using an ionic APP, so I used inspect element in form log-in from the website that i want login and I got this:
WEB that I want login
<form action="/login" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="+NAqH2wFj+OC3q5kX3UWLymVHDzpS9ei8a9/F5O8MM76EM6Fhf/RyOVRpCeYmGMtoxzB43Gf70WLbR+1EqD5xA==">
<label for="session_email">Email</label>
<input class="form-control" type="email" name="session[email]" id="session_email">
<label for="session_password">Password</label>
<input class="form-control" type="password" name="session[password]" id="session_password">
<label class="checkbox inline" for="session_remember_me">
<input name="session[remember_me]" type="hidden" value="0"><input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me">
<span>Remember me on this computer</span>
</label>
<input type="submit" name="commit" value="Log in" class="btn btn-primary">
</form>
Anyone could help me ? and I'm so sorry for this newbie question

var params = {
utf8: "the utf8 value"'
authenticity_token : "token value",
session:{
email:"email#mail.com",
password : "apassword"
}
};
$http.post("https://mywebsite/login", params)
.success(function(data) {
$state.go('improvements');
}).error(function(data) {
console.log(data)
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'User/Password is Wrong'
});
});

Related

How to check if query params are empty with AngularJS forms

I have a project where i use query params which are passed to the back end for a search.
They are passed using the $http.get method in AngularJS.
Some params are not required for the search, so I want them to not be in the url when they are empty.
How can i get this functionality?
Below is my code:
<!DOCTYPE html>
<html lang="en" ng-app = "searchApp">
<script type="text/javascript">
var searchApp = angular.module("searchApp", []);
searchApp.controller("searchListingsCtrl", ['$scope', '$http', function($scope, $http) {
$scope.searchListings = function(){
if ($scope.checkIn == '') {}
var searchListingObj = {
checkIn : $scope.checkIn,
checkOut : $scope.checkOut,
country : $scope.country,
city : $scope.city,
state : $scope.state,
accommodates : $scope.accommodates,
}
var res = $http.get('http://www.localhost:8080/messenger/webapi/listings', searchListingObj);
res.success(function(data, status, headers, config) {
$scope.message = data;
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
};
}]);
</script>
<body ng-controller="searchListingsCtrl">
<form action="/listings" name="listings" ng-submit="searchListings()">
<input type="text" name="neighborhood" placeholder="Neighborhood:" ng-model="state">
<input type="text" name="town" placeholder="Town:" ng-model="city">
<input type="text" name="country" placeholder="Country:" ng-model="country">
People:<select class="peopleSelect" placeholder="People:" ng-model="accommodates"> </select>
<input type="text" id="arrival" name="arrival" value="Arrival" ng-model="checkIn">
<input type="text" id="departure" name="depart" value="Departure" ng-model="checkOut">
<input type="submit" name="submit" value="Search" id="Search_submit">
</form>
</body>
Use the required attribute on inputs to prevent form submission of empty fields:
<form ̶a̶c̶t̶i̶o̶n̶=̶"̶/̶l̶i̶s̶t̶i̶n̶g̶s̶"̶ name="listings" ng-submit="searchListings()">
<input type="text" name="neighborhood" placeholder="Neighborhood:"
ng-model="fdata.state" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
<input type="text" name="town" placeholder="Town:"
ng-model="fdata.city" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
<input type="text" name="country" placeholder="Country:"
ng-model="fdata.country" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
People:<select class="peopleSelect" placeholder="People:"
ng-model="fdata.accommodates" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
</select>
<input type="text" id="arrival" name="arrival" value="Arrival"
ng-model="fdata.checkIn" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
<input type="text" id="departure" name="depart" value="Departure"
ng-model="fdata.checkOut" ͟r͟e͟q͟u͟i͟r͟e͟d͟ />
<input type="submit" name="submit" value="Search" id="Search_submit" />
</form>
For more information, see AngularJS Developer Guide - Forms.
Also notice how the ng-model attributes have been changed to put the data on a JavaScript object. This makes it easier to submit:
$scope.fdata = {};
var url = "http://www.localhost:8080/messenger/webapi/listings";
$scope.searchListings = function() {
var config = { params: fdata };
$http.get(url, config)
.then(function(response) {
$scope.message = response.data;
})
.catch(function(response) {
var data = response.data;
console.log( "failure message: " + JSON.stringify({data: data}));
throw response;
});
};
Also be aware that the $http .success and .catch methods have been deprecated and removes from AngularJS v1.6. Instead, use the .then and .catch methods.

Post angularjs form to nodejs Express ( Bad request)

im new in angularJs, im trying to make a basic login with angularJS and nodejs ( server side), i dont care about security for now im just trying to learn how to post. so i made a login form and a controller with angular :
My Login Form :
<div class="col-md-4">
<h1>Login</h2>
<form class="form" >
<div class="form-group">
<label>Username</label>
<input type="email" class="form-control" ng-model="login.mail" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" ng-model="login.password" required>
</div>
<div>
<button type="text" class="btn btn-default" ng-click="login()">Login</button>
</div>
</form>
</div>
then my router & controller Angularjs :
'use strict';
angular.module('login', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'views/login.html',
controller: 'loginCtrl'
});
}])
.controller('loginCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.login = function() {
$http.post('/api/users/login', $scope.login).success(function (response) {
console.log(response);
// refresh();
});
};
}]);
and Server side i have that :
router.post('/login/', function(req, res) {
// here "/login/" means "/users/login" ( in index of controllers)
console.log(req.body.mail);
var usermail = req.body.mail;
var pass = req.body.password;
console.log(usermail + pass);
User.find({mail: usermail}, function(err, user) {
if (err) {
res.send(err);
console.log("ça marche pas")
} else {
res.json( user );
console.log(user);
}
})
});
server side : it works ( when i use DHC chrome extension to Post) but when im using angularjs view i got that error :
POST http://localhost:3000/api/users/login 400 (Bad Request)
Please help me to solve that, i think i missed something. Thank you in advance.
I think you are sending your login function as in below line:
$http.post('/api/users/login', $scope.login)
You probably want to pass a parameter in your login function that can be sent to server as below:
$scope.login = function(loginData) {
$http.post('/api/users/login', loginData).success(function (response)
Update
You are assigning your form values to $scope.login. If you would create a separate variable for it, for example loginForm, you can send this as valid JSON to your API:
<div class="col-md-4">
<h1>Login</h2>
<form class="form" >
<div class="form-group">
<label>Username</label>
<input type="email" class="form-control" ng-model="loginForm.mail" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" ng-model="loginData.password" required>
</div>
<div>
<button type="text" class="btn btn-default" ng-click="login(loginData)">Login</button>
</div>
</form>
</div>
And .js:
.controller('loginCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.loginForm = {
mail: '',
password: ''
};
$scope.login = function(loginData) {
// Check what this prints out:
console.log(loginData);
$http.post('/api/users/login', loginData).success(function (response) {
console.log(response);
// refresh();
});
};
}]);

Did Firebase authentication change over night?

I am using Firebase email authentication. It worked pretty well yesterday, but for some reason, it suddenly stopped working this morning, and I have not touched the authentication part in the code at all. I am wondering if there is any changes in Firebase that i am not aware? or I did something may affect it?
Here is the code in controller:
// Home controller
.controller('LoginCtrl', ['$scope', '$firebaseAuth', function($scope, $firebaseAuth) {
// Auth Logic will be here
var firebaseObj = new Firebase("https://xxxx/");
var loginObj = $firebaseAuth(firebaseObj);
$scope.user = {};
$scope.SignIn = function(e){
e.preventDefault(); //To prevent from refresh
var email = $scope.user.username + '#whateverdomain.com';
var password = $scope.user.password;
console.log('Authentication start inside SignIn:' + );
loginObj.$authWithPassword({
email: email,
password: password
})
.then(function(user) {
//Success callback
console.log('Authentication successful');
$location.path('/dashboard');
}, function(error) {
//Failure callback
console.log(error.code);
if(error.code === "INVALID_USER") {
console.log('INVALID_USER');
$scope.loginForm.username.$invalid = true;
}
if(error.code === "INVALID_PASSWORD") {
console.log('INVALID_Password');
$scope.loginForm.password.$invalid = true;
}
});
}
}]);
Here is the view:
<body ng-controller="LoginCtrl">
<div class="container-login">
<div style="padding-bottom:0px; ">
<h1> Login</h1>
</div>
<form class="form-signin" name="loginForm" style="color:#C3BCB6;">
<div class="form-group" ng-class="{'has-error':loginForm.username.$invalid}">
<label>Username</label>
<input ng-model="user.username" type="text" name="username" class="form-control" placeholder="Input your username" ng-minlength="5" ng-maxlength="12"></input>
</div>
<div class="form-group" ng-class="{ 'has-error' : loginForm.password.$invalid }">
<label>Password</label>
<input ng-model="user.password" type="password" name="password" class="form-control" placeholder="Password" ng-minlength="8"></input>
</div>
<button type="button" ng-click="SignIn($event)" ng-disabled="!user.username || !user.password" class="btn btn-lg btn-primary btn-block">Sign in</button>
</form>
</div>
When authentication success, the user is supposed to redirect to the dashboard, or when it failed, it will show error message in the console.
Currently, it only shows "Authentication starts", but no "Authentication success" or any error message, from error.code.
I even checked out previous git commit, the authentication still did not work. Any thoughts? thanks!

AngularJS submit form to db via php

i'm approching angularJS and i'd like to submit a form to db via php.
i tried this but it does not work.
any help?
i get an error when i click the submit button.
thanks.
//index.html
angular.module("myApp")
.controller("addUtentiCtrl", function($scope, $http) {
$scope.utenteForm = {};
$scope.submit = function() {
$http({
method : 'POST',
url : 'backInsertUtenti',
data : param($scope.utenteForm),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function() {
alert("Dati inseriti correttamente!");
})
.error(function() {
alert("Errore inserimento dati!");
});
};
});
//aggiungiUtente.html
<form ng-submit="submit()" ng-controller="addUtentiCtrl" novalidate>
<input type="text" ng-model="utenteForm.nome" name="nome" ng-maxlength="10" ng-required="true">
<input type="text" ng-model="utenteForm.cognome" name="cognome" ng-maxlength="10" ng-required="true">
<input type="text" ng-model="utenteForm.citta" name="citta" ng-maxlength="10" ng-required="true">
<input ng-enable="utenteForm.$valid" type="submit" id="submit" value="Submit" />
</form>
//backInsertUtenti.php
<?php
//define of variable for the connection
$db= new mysqli($host,$username,$password,$db_name);
$sql=$db->prepare("INSERT INTO utenti (id, nome, cognome, citta) VALUES (0, ?, ?, ?)");
$sql->bind_param('sss',$_POST['nome'],$_POST['cognome'],$_POST['citta']);
$sql->execute();
?>

Authentication when using AngularJS, Express.js and PassportJS

I have AngularJS for front - Node.js(Express.js) for sever side web application and having trouble getting the authentication.
this is login page URL.
http://localhost:3000/#/extra-signin
After I filled email and password, and pushed login button. but still same page displayed.
URL after pushed login button is just like below.
http://localhost:3000/?email=test%40test.com&password=test#/extra-signin
I expected Angular controller would help posting login data to server by post method, but Angular controller seems not working. It seems get method working.
Angular controller:
App.controller('ExtraSigninController', function($scope, $routeParams, $http, $location, $rootScope, $alert, $window) {
$scope.login = function() {
$http.post('/auth/login',$scope.user)
.success(function(data) {
$window.localStorage.token = data.token;
var payload = JSON.parse($window.atob(data.token.split('.')[1]));
$rootScope.currentUser = payload.user;
$location.path('/');
$alert({
title: 'Cheers!',
content: 'You have successfully logged in.',
animation: 'fadeZoomFadeDown',
type: 'material',
duration: 3
});
})
.error(function() {
delete $window.localStorage.token;
$alert({
title: 'Error!',
content: 'Invalid username or password.',
animation: 'fadeZoomFadeDown',
type: 'material',
duration: 3
});
});
}
}
Angular config:
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/extra-signup', {
templateUrl: 'templates/states/extra-signup.html',
controller: 'ExtraSignupController'
})
.when ....
.when ....
.otherwise({
redirectTo: '/'
});
});
HTML login page:
<div id="signin-page">
<div class="page-form-wrapper"></div>
<div class="page-form">
<div class="header-content">
<h1>login</h1>
</div>
<div class="body-content">
<p>login:</p>
<div class="row mbm text-center">
<div class="col-md-4"><i class="fa fa-twitter fa-fw"></i>Twitter</div>
<div class="col-md-4"><i class="fa fa-facebook fa-fw"></i>Facebook</div>
<div class="col-md-4"><i class="fa fa-google-plus fa-fw"></i>Google +</div>
</div>
<form class="form">
<div class="form-group">
<div class="input-icon right"><i class="fa fa-user"></i>
<input type="text" placeholder="Email" name="email" ng-model="user.email" class="form-control input-lg" required autofocus/>
</div>
</div>
<div class="form-group">
<div class="input-icon right"><i class="fa fa-key"></i>
<input type="password" placeholder="password" name="password" mg-model="user.password" class="form-control input-lg" required/>
</div>
</div>
<div class="form-group pull-right">
<input type="submit" class="btn btn-success" ng-click="login()" value="login">
</div>
</form>
</div>
</div>
</div>
this is server side code:
app.post('/users/session', passport.authenticate('local'));
//passport local strategy
passport.use(new LocalStrategy({
usernameField: 'email',
passwordField: 'password'
},
function(email, password, done) {
db.User.find({ where: { email: email }}).success(function(user) {
if (!user) {
// done(null, false, { message: 'Unknown user' });
res.send(401, 'User does not exist');
} else if (!user.authenticate(password)) {
// done(null, false, { message: 'Invalid password'});
res.send(401, 'Invalid email and/or password');
} else {
logger.debug('Login (local) : { id: ' + user.id + ', username: ' + user.username + ' }');
// done(null, user);
var token = createJwtToken(user);
res.send({ token: token });
}
}).error(function(err){
done(err);
});
}
));
I don't know why Angular Controller's post method doesn't work. and I don't understand why returned url is like that. Position of get parameter is something wrong.
Not sure what I am doing wrong?
Any advice would be great

Resources