i have a problem with log in in my site - it doesn't work on iphone 6.
Here's my code:
JS:
$scope.signin = function() {
$http({
method: 'POST',
url: link,
data: $.param({
action: 'sign_in',
username: $scope.username,
password: $scope.password
}),
withCredentials: true,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function successCallback(response){
if (response.data === true)
console.log(response);
$location.path('/home');
} else {
console.log('wrong stuff');
}
}, function errorCallback(response){
console.log(response);
console.log('error');
});
}
HTML:
<div class="container" ng-controller="Ctrl">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="username" class="sr-only">Email address</label>
<input type="username" ng-model="username" id="username" class="form-control" placeholder="Username" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" ng-model="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="signin()">Sign in</button>
</form>
</div>
In my website on computer after click "Sign in" i get cookies from server, and angular rout move me to "/home".
When i click "Sign in" on iphone 6 it looks like it is failing when the response returned by the server, and nothing happens.
Thanks for answers in advance.
Related
I am using Bootstrap/jquery for client side. On server side I am using node.js and express
The form is as follows:
<form id="signupform" action="">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<input type="text" class="form-control" id="username" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="number" class="form-control" id="contact" placeholder="Contact" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="custom-file">
<label class="custom-file-label" for="cover">Profile Picture</label>
<input type="file" class="custom-file-input" id="cover">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg" id="sign-up">Sign Up</button>
</div>
</form>
My jquery is as follows:
$(document).ready(function(){
$("#sign-up").click(function(event){
event.preventDefault();
var formData = new FormData();
formData.append("username",$("#username").val())
formData.append("email",$("#email").val())
formData.append("contact",$("#contact").val())
formData.append("password",$("#password").val())
formData.append("cover",$("#cover")[0].files)
$.ajax({
url: "http://localhost:3000/users/",
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
});
On server side, when I view the incoming request I see this:
body: {
username: 'Sree',
email: 'example#gmail.com',
contact: '1',
password: '1',
cover: '[object FileList]'
},
On the server side I am using express-fileupload, but the image is being sent in the body instead of req.files. How to send formData's file to req.files instead of body?
You should be passing a File object to append(), to access the file object use the prop method to get access to the FileList and take the item at the first index
formData.append("cover", $("#cover").prop('files')[0])
I keep getting a 500 error server when I try to submit form data to my API /users/signup. I verified that the API works using Postman so I think the way I am doing my fetch post is wrong. What is the best practice here?
JS
document.getElementById("create_user").addEventListener("click", (e) => {
e.preventDefault();
const signup = {
username: document.querySelector("#create_username").value.toString(),
email: document.querySelector("#create_email").value.toString(),
password: document.querySelector("#create_password").value.toString()
}
const data = new FormData();
data.append("json", JSON.stringify(signup));
fetch('/users/signup', {
method: 'POST',
body: data
})
.then((response) => response.json())
.catch((error) => {
console.error('Error:', error);
});
});
HTML
<form class="hide" id="sign_up_form">
<div class="form-row">
<h3>Sign up</h3>
</div>
<div class="form-row">
<div class="form-group col">
<label for="create_username">Username</label>
<input id="create_username" name="username" type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="create_email">Email</label>
<input id="create_email" name="email" type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="create_password">Password</label>
<input id="create_password" name="password" type="password" class="form-control" placeholder="Password">
<small id="passwordHelp" class="text-muted">
Must be at least 8 characters long
</small>
</div>
</div>
<div class="form-row flex-end">
<div class="form-group col-auto">
<button id="create_user" type="submit" class="btn btn-warning mb-2">Sign up</button>
</div>
</div>
<div class="form-row">
<span class="mr-2">Already have an account?</span>Login
</div>
</form>
You don't need to create a form object, you can directly send the json data to your backend.
Add yous json data in the body and the 'Content-Type': 'application/json' header in the request.
The value property of the querySelector method will always return string, you don't need to call toString method on it.
Try this.
document.getElementById("create_user").addEventListener("click", (e) => {
e.preventDefault();
const signup = {
username: document.querySelector("#create_username").value,
email: document.querySelector("#create_email").value,
password: document.querySelector("#create_password").value
}
fetch('/users/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(signup)
})
.then((response) => response.json())
.then(data => console.log(data))
.catch((error) => {
console.error('Error:', error);
});
});
I want to make two post requests to the back end, Flask. I successfully got the login request yesterday, because I can see the information printed in the browser console. But After adding the second click event, both are failed.
And the "login" post and "search" post request failed differently, because for the first I can see "clicked" in the console, but for the second nothing.
I also used request.get_data() and request.get_json(), but got nothing. I have used an easier way to get post request from Flask, like request.form. However, I am still very confused what's wrong with the code.
Thank you for offering help!
Below is the .js file
$(document).ready(function () {
// login, for sending the email and password
$(function () {
$("form#formLogin").on('click','button#buttonLogin', function () {
console.log('clicked');
$.ajax({
url: "http://127.0.0.1:5000",
type: "POST",
data: $('form#formLogin').serialize(),
contentType: 'json; charset=UTF-8',
cache: false,
success: function (response) {
console.log(response.d);
console.log("login info sent");
},
fail: function (response) {
console.log(response.d);
console.log("failed");
}
})
});
})
// search, for executing sql
$(function () {
$('form#formSearch').on('click', 'button#buttonSearch', function () {
console.log('begin sending select');
$.ajax({
url: "http://127.0.0.1:5000",
type: "POST",
data: $('form#formSelect').serialize(),
contentType: 'json; charset=UTF-8',
cache: false,
success: function (response) {
console.log(response.d);
console.log("search info sent");
},
fail: function (response) {
console.log(response.d);
console.log("failed");
}
})
});
})
})
Below is .html, the login part
<form id="formLogin" class="formLogin" method="post">
<h1 class="h3 mb-3 font-weight-normal">Please Login</h1>
<input type="hidden" name="post" class="form-control" value="login"/>
<label for="inputEmail" class="sr-only">Email:</label>
<input type="email" id="inputEmail" name="userEmail" class="form-control" placeholder="Email address" required autofocus/>
<label for="inputPassword" class="sr-only">Password:</label>
<input type="password" id="inputPassword" name="userPwd" class="form-control" placeholder="Password" required/>
<label for="buttonLogin" class="sr-only">Login:</label>
<button id="buttonLogin" class="btn btn-lg btn-primary btn-block" value="login">login</button>
</form>
Below is .html, the search part
<form id="formSearch" method="post">
<input type="hidden" name="post" class="form-control" value="select"/>
<div class="input-group mb-3 mt-4">
<label for="selectRecord" class="sr-only">SelectRecord:</label>
<input type="text" id="selectRecord" name="selectRecord" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" required autofocus/>
<div class="input-group-prepend">
<label for="buttonSearch" class="sr-only">Search:</label>
<button id="buttonSearch" name="buttonSearch" class="btn btn-outline-secondary search" value="search">Search</button>
</div>
</div>
<label for="checkBoxRegion" class="sr-only">Region:</label>
<input id="checkBoxRegion" name="checkBoxRegion" type="checkbox"> <span class="checkboxFontSize">Region</span>
<label for="checkBoxProductName" class="sr-only">ProductName:</label>
<input id="checkBoxProductName" name="checkBoxProductName" type="checkbox"> <span class="checkboxFontSize">Product Name</span>
<label for="checkBoxStoreName" class="sr-only">StoreName:</label>
<input id="checkBoxStoreName" name="checkBoxStoreName" type="checkbox">
<span class="checkboxFontSize">Store Name</span>
</form>
I'm trying to create a pop-up form login with Ajax jQuery, but It's always fail to send data. I've many ways on Internet that I can find but nothing change. Please take a look and help me. Thanks so much:
This is my form:
<form id="loginform" name="loginform" method="POST">
{{ csrf_field() }}
<div class='modal-body-left' >
<div class="form-group">
<input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu
</label>
Quên mật khẩu?
</div>
<button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton" style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button>
</div>
</form>
This is my js:
$("#loginbutton").click(function(event) {
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
var data ={"email":username, "password":password};
alert(data.email);
// alert(data.password);
$.ajax(
{
url: '{{url('/')}}/loginHandling',
type: 'POST',
data: {'email': "ruoitrau95#gmail.com", 'password':"tuyen12345"},
dataType: 'json',
success: function(data)
{
alert(data);
alert("done");
}
}
)
.fail(function(data) {
alert("fail");
});
});
And this is controller:
public function loginHandling() {
$email = Input::get('email');
$password = Input::get('password');
$check $this->pages->checkLogin($email, $password);
echo "alert(In loginHandling)";
if ($check) {
$name = $this->pages->getNameFromMail($email);
Session::put('logined', true);
Session::put('email', $email);
Session::put('name', $name);
die json_encode(array("success"=>"true"));
} else {
die json_encode(array("success"=>"false"));
}
}
I'm working on Laravel framework so my url is defined:
Route::post('/loginHandling',['as'=>'loginHandling','uses'=>'LoginController#loginHandling']);
Thanks again for your time
You need to pass the CSRF token in order for Laravel to process the request. There are a few ways to do this - try this one:
Form:
<meta name="_token" content="{{ csrf_token() }}" />
<form id="loginform" name="loginform" method="POST">
<div class='modal-body-left' >
<div class="form-group">
<input type="text" id="username" name="username" placeholder="Tên đăng nhập" value="" class="form-control login-field">
<i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Mật khẩu" value="" class="form-control login-field">
<i class="fa fa-lock login-field-icon"></i>
</div>
<div class="checkbox">
<label>
<input type="checkbox" style="margin-top: -8px"> Nhớ mật khẩu
</label>
Quên mật khẩu?
</div>
<button class="btn btn-success modal-login-btn" id="loginbutton" name="loginbutton" style="background-color: #47a49a; background: #fec10f;" type="submit">Đăng nhập</button>
</div>
</form>
Javascript:
$("#loginbutton").click(function(event) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
$.ajax(
{
url: '{{url('/')}}/loginHandling',
type: 'POST',
data: {'email': username, 'password': password},
dataType: 'json',
success: function(data)
{
alert(data);
alert("done");
}
}
)
.fail(function(data) {
alert("fail");
});
});
You should now be able to access the submitted data in your controller with $request->all().
here email should be showing null
That's why i am getting the error 412
and my code is look like
function Submit() {
var objectData =
{
"emailId": $("#emailId").val(),
"password": $("#password").val()
};
var objectDataString = JSON.stringify(objectData);
console.log(objectDataString);
localStorage.setItem("email",$("#emailId").val());
$.ajax({
type: "POST",
url: "http://localhost:8080/feasthunt/common/changePassword",
contentType: "application/json; charset=utf-8",
data: objectDataString,
dataType: "json",
success: function (data,status,xhr) {
console.log(objectDataString);
alert('success');
},
error: function () {
alert('error');
}
});
}
<div class="container">
<div class="col-md-4 col-md-offset-4">
<form role="form" id="form">
<div class="heading"><h3 class="text-center">Change Password</h3></div>
<div class="form-group" class="hidden" style="display:none">
<label for="emailId">EmailId</label>
<input type="emailId" class="form-control" id="emailId" placeholder="emailId" required />
</div>
<div class="form-group">
<label for="pwd">Old Password:</label>
<input type="password" class="form-control" id="password" placeholder="Old Password" required />
</div>
<div class="form-group">
<label for="pwd">New Password:</label>
<input type="password" class="form-control" id="password1" placeholder="New Password" required />
</div>
<div class="form-group">
<label for="pwd">Retype New Password:</label>
<input type="password" class="form-control" id="password2" placeholder="Retype New Password" required />
</div>
<input class="text-center" type="submit" class="btn btn-default" value="SAVE CHANGES" onclick="Submit()">
</form>
</div>
</div>
and above is HTML code
so how can i get email?
here the only problem is email
tell me one thing it is possible to get the email
so any one can answer this question
You don't need to stringify your object, you can just send objectData. If you really need the parameters as JSON, you will have to assign a variable name for it, like {data:JSON.stringify(objectData)}.
You're sending the old password, not the new one.
And, are your running the script at http://localhost:8080? It may not have access to http://localhost:8080/feasthunt/common/changePassword from file:// or from other domain.
Check http://localhost:8080/feasthunt/common/changePassword for errors. You may find useful the Network tab of the webkit's (Chrome/Opera/etc.) Inspector.