I am creating an app and I need a SignIn / SignUp functionality for the same. Here is my SignIn HTML:
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form action="verifySignin" method="post" id="verifySignin" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username" required="" autofocus="" >
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button class="btn btn-md btn-primary btn-block" type="submit">Login</button>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > Don't have an account?
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
My app.js has the following to route:
app.post('/verifySignin', home.verifySignin);
app.get('/verifySignin', home.verifySignin);
Under routes folder> I have created a home.js file which contains the following:
function verifySignin(req,res)
{
req.session.name=req.param("username");
var password = req.param("password");
console.log("session name:"+req.session.name);
var verifyUserQuery="select username, password from Users where Username='"+req.param("username")+"' and Password = '"+req.param("password")+"'";
mysql.fetchData(function(err,results){
if(err){
throw err;
}
else
{
if(results.username==req.param("username") && results.password == password){
res.render('kanban', { name: req.param("username") });}
else {
res.render('ErrorPage');
}
}
},verifyUserQuery);
}
exports.verifySignin=verifySignin;
When I click on the Login button, I get the error : Cannot POST /verifySignin.
Any help would really be appreciated. Thanks.
Try to use it like,
var users = require('./home/users');
in addition, this is a very bad practice due to security concerns
"select username, password from Users where Username='"+req.param("username")+"' and Password = '"+req.param("password")+"'"
pass values as parameters or bind them.
Related
I'm really new at sails.js and at the moment I'm using sails 1.0 . I've got the problem when I try to validate my signup page that the once the form is invalid the error message is shown above the form as expected but when I do the refresh it is still there. Beside that everything is okay.
Routing is done manually and I think the problem is here req.session.flash = {}; in api/controllers/UsersController.js which is not being empty object !!
api/controllers/UsersControllers.js
module.exports = {
signup:function(req,res,next){
res.locals.flash = _.clone(req.session.flash);
res.view('pages/signup');
req.session.flash = {};
},
create:function(req,res,next){
var values = req.allParams();
Users.create(values).exec(function(err,user){
// if there's an error
if(err){
console.log(err);
req.session.flash = {
err: err
}
// if error redirect back to signup page
return res.redirect('/users/signup');
}
// After successfully creating the user
// redirect to the show action
res.view('pages/create');
req.session.flash = {};
});
}
};
view/pages/signup.ejs
<div class="container">
<% if(flash) { %>
<ul class="alert alert-success">
<% Object.keys(flash.err).forEach(function(error){ %>
<li> <%- JSON.stringify(flash.err[error]) %> </li>
<% }) %>
</ul>
<% } %>
<div class="row login-pannel">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading login-pannel-heading">
<h3 class="panel-title"> User Signup </h3>
</div>
<div class="panel-body login-pannel-body">
<form class="login-form" method="post" action="/users/create">
<div class="form-group">
<label for="loginUsername">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name" autofocus>
</div>
<div class="form-group">
<label for="loginUsername">Email address</label>
<input type="email" class="form-control" id="loginEmail" name="email" aria-describedby="emailHelp" placeholder="Your Email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="loginPassword">Password</label>
<input type="password" class="form-control" id="pass" name="password" placeholder="Password">
<label class="text-danger" id="signup-pass"></label>
</div>
<div class="form-group">
<label for="loginPassword">Confirm Password</label>
<input type="password" class="form-control" id="con-pass" name="conPassword" placeholder="Confirm Password">
<label class="text-danger" id="signup-con-pass"></label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-danger reset-button">Reset</button>
<input type='hidden' name='_csrf' value='<%= _csrf %>'>
</form>
</div>
</div>
</div>
</div>
</div>
If my memory does not betray me, you must make any changes to your session object before sending the response. In your api/controllers/UsersControllers.js try to swap these two lines:
res.view('pages/create');
req.session.flash = {};
It should be:
req.session.flash = {};
res.view('pages/create');
Read more about sessions here. The most important thing there:
The property will not be stored in the session store nor available to
other requests until the response is sent.
I'm authenticating users registered in my firebase database and i want to redirect the user after successful authentication
const txtEmail = document.getElementById('email');
const txtPass = document.getElementById('password');
const loginBtn= document.getElementById('reg');
loginBtn.addEventListener('click', e => {
const mail = txtEmail.value;
const pass = txtPass.value;
const auth = firebase.auth();
const promise = auth.signInWithEmailAndPassword(mail, pass);
if(promise){
window.location = "{{ route('users') }}";
console.log("{{ route('users') }}");
}else{
}
});
the log is successfully printed but the redirection fails may someone help
this is my form i don't know but maybe there is something wrong in it
<form class="form-horizontal m-t-20" method="post">
{{ csrf_field() }}
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required="" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" id="password" required="" name="password" placeholder="Password">
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox-signup" type="checkbox">
<label for="checkbox-signup">
Remember me
</label>
</div>
</div>
</div>
<div class="form-group text-center m-t-30">
<div class="col-xs-12">
<button class="btn btn-custom btn-bordred btn-block waves-effect waves-light" class="reg" id="reg">
Login
</button>
</div>
</div>
<div class="form-group m-t-30 m-b-0">
<div class="col-sm-12">
<i class="fa fa-lock m-r-5"></i> Forgot your password?
</div>
</div>
</form>
I was trying to create a signup form where a user has to give his data along with the image. I have attached the snippet of the code I was trying but couldn't achieve please help me. I have already been through other similar question but none of them helped me.
function submitForm1()
{
var data = $("#signup").serialize();
$.ajax({
type : 'POST',
url : 'signup_process.php',
data : data,
async: false,
beforeSend: function()
{
$("#error1").fadeOut();
$("#btn-signup").html('<span class="glyphicon glyphicon-transfer"></span> Signing Up..Please wait.');
},
success : function(response)
{
if(response=="ok"){
$("#error1").fadeIn(1000, function(){
$("#error1").html('<div class="alert alert-success"> <span class="glyphicon glyphicon-info-sign"></span> An Email has been sent to your entered email address. Please follow the instruction to activate your account.</div>');
$("#btn-signup").html('<span class="glyphicon glyphicon-transfer"></span> Sign Up');
});
}
else{
$("#error1").fadeIn(1000, function(){
$("#error1").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#btn-signup").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
}
cache: false,
contentType: false, //must, tell jQuery not to process the data
processData: false,
});
return false;
}
/* login submit */
});
<div class="container">
<div class="signup-form-container">
<form id="signup" name="form1">
<div class="head"></div>
<div class="form-header" style="text-align:center;">
<div class="image" id="preview">
<div id="timelineShade" style="background:url(assets/pic.png) center;"></div>
</div>
<h3 class="form-title" style="margin-top:-60px;"><span style="margin-right:50px;"></span>Recruiter Sign-up Portal</h3>
</div>
<div class="form-body">
<!-- json response will be here -->
<div id="error1"></div>
<!-- json response will be here -->
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" name="name" class="form-control" placeholder="Full Name" id="name" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input type="text" name="email" class="form-control" placeholder="Email" id="email" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="row">
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input type="password" name="password" id="password" class="form-control"placeholder="Password" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input type="password" name="cpassword" class="form-control" placeholder="Confirm Password"/> </div>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="form-group col-lg-6" style="max-width:145px; margin-top:10px;">
<div class="input-group">
<label>Company Logo</label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="imagein" name="image" type="file" class="form-control" limit=1/>
</div>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="form-footer">
<button type="submit" name="btn-signup" id="btn-signup" class="btn bt-login" style="margin-left:8%; width:92%" >Sign-up <span class="glyphicon glyphicon-log-in"></span> </button>
</div>
<div class="form-footer"> <div class="col-xs-4 col-sm-4 col-md-4" style="margin-left:0%; float:left;">
<i class="fa fa-lock"></i>
Forgot password? </div>
<div class="col-xs-4 col-sm-4 col-md-4" style="margin-left:0%; float:right;">
<i class="fa fa-user"></i>
Log-In </div>
</div>
</form>
</div>
</div>
<?php
session_start();
$upload_dir = '/upload/'; // upload directory
error_reporting(0);
require_once 'class.user.php';
$reg_user = new USER();
if($reg_user->is_logged_in()!="")
{$reg_user->redirect('home.php');}if(isset($_POST['btn-signup'])){
$phone = trim($_POST['phone']);$email = trim($_POST['email']);
$upass = trim($_POST['password']);$code = md5(uniqid(rand()));
$imgExt = strtolower(pathinfo($imgFile,PATHINFO_EXTENSION));
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif');
$userpic = rand(1000,1000000).".".$imgExt;
if(in_array($imgExt, $valid_extensions)){if($imgSize < 5000000){
move_uploaded_file($tmp_dir,$upload_dir.$userpic);}else{
$errMSG = "Sorry, your file is too large.";}}else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";}
if($reg_user->register($phone,$email,$upass,$code,$userpic)){
$id = $reg_user->lasdID();$key = base64_encode($id);$id = $key;
$message = "Hello $email,<br /><br />
Welcome to Coding Cage!To complete your registration please , just
clickfollowing link<br/><br /><br /><a href='http://localhost/x/verify.php?
id=$id&code=$code'>Click HERE to Activate :)</a><br /><br />Thanks,";
$subject = "Confirm Registration";require_once('mailer/class.phpmailer.php');
$mail = new PHPMailer();$mail->IsSMTP(); $mail->SMTPDebug = 0;
$mail->SMTPAuth = true; $mail->SMTPSecure = "ssl";
$mail->Host= "smtp.gmail.com"; $mail->Port= 465;
$mail->AddAddress($email);
$mail->Username="sharma.himanshu0405#gmail.com";
$mail->Password="mypassword";
$mail->SetFrom('sharma.himanshu0405#gmail.com','Himanshu');
$mail->Subject = $subject;
$mail->Subject = $subject; $mail->MsgHTML($message);
if($mail->send()) { echo "ok" ; } else {
echo "Sorry, Registration is not possible this time. Please try again after some time or Contact Admin";
$stmt = $reg_user->runQuery("DELETE FROM tbl_users WHERE user_email=:email_id");
$stmt->execute(array(":email_id"=>$email));
}
}
}
?>
Have to encode the image in the form to base64 (not sure) before providing serialized form data in ajax call
When i am clicking on the "Sign Up" button, it is also going to the handler of "login" button. I have used $event.stopPropagation() for "Sign Up" button to avoid it, but it is not working.
The code -
<form role="form" ng-submit="login(userName, password)" class="form-horizontal">
<div class="form-group">
<label for="usrNm" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" id="usrNm" ng-model="userName" class="form-control input-lg" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" id="pwd" ng-model="password" class="form-control input-lg" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default">LOGIN</button>
<button class="btn" ng-click="register(); $event.stopPropagation();">SIGN UP</button>
</div>
</div>
</form>
controller.js -
expmodule.controller('loginForm', function($scope, sharedProperties) {
var auth;
$scope.login = function (userid, password) {
auth = sharedProperties.session.isAuthenticated(userid, password);
if (auth) {
alert("Welcome "+userid);
window.location = "home.html";
} else {
alert("Invalid Login");
}
}
$scope.register = function () {
window.location = "register.html";
}
});
The default behaviour for <button>s is to submit the form they are part of.
Change your code to this:
<button class="btn btn-default">LOGIN</button>
<button type="button" class="btn" ng-click="register();">SIGN UP</button>
My AJAX call gets triggered for one condition, however when it proceeds to new nested php function it showing the output is the php processing file...Below is my Code.. i am using bootstrap 3.0 framework on this one and pure javascript.
<!-- Modal Register -->
<div id="register" class="modal fade">
<div class="modal-dialog">
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-1" style="max-width:400px;">
<form role="form" method="POST" id="reg" action="reg-check.php">
<div class="panel panel-primary" style="border:1px solid black;">
<div class="panel-heading" style="background-color:black;">
<h3 class="panel-title">
Register
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
</h3>
</div>
<div class="panel-body ">
<div class="login-box">
<img src="images/newlogo2.png" width="100%;"><br/><br/>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" name="name" placeholder="Name" autofocus />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-earphone"></span>
</span>
<input type="tel" class="form-control" name="mobile" placeholder="Mobile Number" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-briefcase"></span>
</span>
<input type="email" class="form-control" name="email" placeholder="email" required/>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id="pass" class="form-control" name="password" placeholder="Password" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id = "pass1"class="form-control" name="password1" placeholder="Confirm Password" required />
</div>
<label>
<input type="checkbox" name="agree" value="agree"> I agree to the terms and conditions of the website and cookie policy</label>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="text-align:center;">
<p><span id="errorMessage"></span></p>
<button id="submitreg" type="submit" class="btn btn-labeled btn-success" data-dismiss="none" onClick="javascript:ajax_post();">
<span class="btn-label">
<i class="glyphicon glyphicon-ok"></i>
</span>Submit</button>
<button type="reset" class="btn btn-labeled btn-danger" >
<span class="btn-label">
<i class="glyphicon glyphicon-remove"></i>
</span>lReset</button>
</div>
</div>
</div>
</div>
</div>
</form>
<div><p id="errorMessage"></p></div>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
My Ajax Scripts`
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "reg-check.php?";
hr.open("POST", url, true);
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
console.log(return_data);
document.getElementById("errorMessage").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(); // Actually execute the request
document.getElementById("errorMessage").innerHTML = "processing...";
}
MY PHP Script
<?php
require ("/Pages/dbc.php");
if(!empty($_POST['name']) && !empty($_POST['mobile']) && !empty($_POST['email']) && !empty($_POST['password']) && !empty($_POST['password1']))
{
$name =mysql_real_escape_string($_POST['name']);
$mobile =mysql_real_escape_string($_POST['mobile']);
$email =mysql_real_escape_string($_POST['email']);
$password =mysql_real_escape_string($_POST['password']);
$password1 =mysql_real_escape_string($_POST['password1']);
$query =mysql_query("SELECT * FROM `register` WHERE `mobile`= $mobile");
$numrows =mysql_num_rows($query);
if($numrows == 0){
$query1 =mysql_query("SELECT * FROM `register` WHERE `email`= '$email'");
$numrows1 =mysql_num_rows($query1);
if($numrows1==0){
if($password == $password1){
mysql_query("INSERT INTO `cabs4rent`.`register` (`name`, `mobile`, `email`, `password`) VALUES ('$name', '$mobile', '$email', '$password');");
echo "Registration Successful";
}else{
echo "Passwords do not match";
}
}else{
echo "Emails is already registered";
}
}else{
echo "Mobile Number Already Registered";
}
}
else
{
echo 'Please fill all the details';
}
exit;
?>
I will changing to mysqli/pdo very soon.
The problem was with the action attr in my form element. hence i removed the form element and and in ajax made changes and used urlencoder to send the data... everything work smoothly..
Here is the code
function ajax_post(){
// Create our XMLHttpRequest object
//preventDefault();
var hr = new XMLHttpRequest();
var name =document.getElementById("name").value;
var mobile =document.getElementById("mobile").value;
var email =document.getElementById("email").value;
var password =document.getElementById("pass").value;
var password1 =document.getElementById("pass1").value;
var vars = "name="+name+"&mobile="+mobile+"&email="+email+"&password="+password+"&password1="+password1;
// Create some variables we need to send to our PHP file
var url = "reg-check.php?";
hr.open("POST", url, true);
hr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
console.log(return_data);
document.getElementById("errorMessage").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("errorMessage").innerHTML = "processing...";
}
Form without the formelement
<!-- Modal Register -->
<div id="register" class="modal fade">
<div class="modal-dialog">
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-1" style="max-width:400px;">
<div class="panel panel-primary" style="border:1px solid black;">
<div class="panel-heading" style="background-color:black;">
<h3 class="panel-title">
Register
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white;">×</button>
</h3>
</div>
<div class="panel-body ">
<div class="login-box">
<img src="images/newlogo2.png" width="100%;"><br/><br/>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control"id="name" name="name" placeholder="Name" autofocus />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-earphone"></span>
</span>
<input type="tel" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-briefcase"></span>
</span>
<input type="email" class="form-control" id="email" name="email" placeholder="email" required/>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id="pass" class="form-control" name="password" placeholder="Password" required />
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-hand-right"></span>
</span>
<input type="password" id = "pass1"class="form-control" name="password1" placeholder="Confirm Password" required />
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="text-align:center;">
<p><span id="errorMessage"></span></p>
<button id="submitreg" type="submit" class="btn btn-labeled btn-success" data-dismiss="none" onClick="javascript:ajax_post();">
<span class="btn-label">
<i class="glyphicon glyphicon-ok"></i>
</span>Submit</button>
<button type="button" id="regReset" onclick="rested();" class="btn btn-labeled btn-danger" >
<span class="btn-label">
<i class="glyphicon glyphicon-remove"></i>
</span>Reset</button>
</div>
<p><span id="errorMessage"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog -->
</div>
No changes made to to PHP script.
It looks like you're not posting any data.
// Create some variables we need to send to our PHP file
var url = "reg-check.php?";
doesn't add any of the values to the url.
You schould do something like
var name_value=document.getElementById('name').value;
var mobile_value=document.getElementById('mobile').value;
var url = "reg-check.php?" + "name=" + name_value + "&mobile=" + mobile_val;