I have a Django ModelForm which is displayed in the template by using using crispy forms. After the user fills out the fields and presses a Submit button, an email is sent at the backend using Django's core send_email.
The problem is that the call to send_email is synchronous, so the user has to wait for the next page to load (success/failure page) but in this time the user might press the Submit button again and this generates multiple POSTs, making multiple emails.
I want to use Vue.js to make the button inactive once the user presses it but only if it passes Django's form validation. Is there a way to detect this?
Add to your button :disabled="!readyToSend" where readyToSend can be returned by your data function or a computed propoerty.
Before submitting the form set this variable to false, afater receiving data from your API, reset it to true.
In the following example I've choosen to make readyToSend a computed proporty where it will return true if the form is valid and if the process is not waiting for the API response.
The complete Code Pen example is here
html file :
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<form #submit.prevent>
<input type="text" v-model="dataToSend" placeholder="Something to send">
<button type="button" :disabled="!readyToSend" #click="send">Send</button>
</form>
</div>
</body>
</html>
javascript:
var vm = new Vue({
el: '#app',
data: function(){
return {
message: "please enter your message and click on send.",
dataToSend: "",
sentAndWaiting: false,
}
},
methods:{
send: async function(){
this.sentAndWaiting = true;
// Send Data Here
this.message = "sending....";
try{
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let jsonResponse = await response.json();
}
catch(e){
this.message = e.message;
}
// reponse received ... do Something with it
this.reponseReceived();
},
reponseReceived: function(){
this.sentAndWaiting = false;
this.message = "Ok. Got The response.";
}
},
computed:{
readyToSend: function(){
return this.dataToSend.length > 0 && !this.sentAndWaiting;
}
},
});
in my browser I had to test this by going to the developper tools and limit my internet connexion to the GPRS and disabling cache:
Screenshot DevTools
I am trying to create a simple static website that uses AWS Cognito to authenticate users. That means I'm not using any advanced libraries but basing my code on the AWS example here.
If I use the default 'token' flow then the example works for my domain. However, as recommended by Amazon themselves in several places e.g. here I want to used 'code grant' flow, and as state in the example above I just uncomment line 221:
auth.useCodeGrantFlow();
However this fails causing the onFailure function to be called although oddly I do see the URL bar containing code=xxxxx. It appears there are more steps I need to do but all examples I find demonstrate the less favourable 'token flow'.
This is my specific index.html based on the above example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Cognito Auth JS SDK Sample</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheets/styleSheetStart.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/amazon-cognito-auth.min.js"></script>
<!-- To enable the advanced security feature -->
<!-- <script src="https://amazon-cognito-assets.<region>.amazoncognito.com/amazon-cognito-advanced-security-data.min.js">
</script> -->
<!-- E.g. -->
<!-- <script src="https://amazon-cognito-assets.us-east-1.amazoncognito.com/amazon-cognito-advanced-security-data.min.js">
</script> -->
</head>
<body onload="onLoad()">
<ul>
<li><a href="https://aws.amazon.com/cognito/" target="_blank"
title="Go to AWS Cognito Console">Cognito Console</a></li>
<li><a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html"
target="_blank" title="See Cognito developer docs">Docs</a>
</li>
</ul>
<h1>
<a href="http://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html" target="_blank">
<img src="img/MobileServices_AmazonCognito.png" alt="Amazon Cognito" title="Amazon Cognito"
style="width:144px;height:144px;"></a><br>
Amazon Cognito Auth Demo
</h1>
<!--removed for brevity -->
<div><br></div>
<div>
<p id="statusNotAuth" title="Status">
Sign-In to Continue
</p>
<p id="statusAuth" title="Status">
You have Signed-In
</p>
</div>
<div class="tabsWell">
<div id="startButtons">
<div class="button">
<a class="nav-tabs" id="signInButton" href="javascript:void(0)" title="Sign in">Sign In</a>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="userdetails">
<p class="text-icon" title="Minimize" id="tabIcon" onclick="toggleTab('usertab');">_</p>
<br>
<h2 id="usertabtitle">Tokens</h2>
<div class="user-form" id="usertab">
<pre id="idtoken"> ... </pre>
<pre id="acctoken"> ... </pre>
<pre id="reftoken"> ... </pre>
</div>
</div>
</div>
</div>
<script>
// Operations when the web page is loaded.
function onLoad() {
var i, items, tabs;
items = document.getElementsByClassName("tab-pane");
for (i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
document.getElementById("statusNotAuth").style.display = 'block';
document.getElementById("statusAuth").style.display = 'none';
// Initiatlize CognitoAuth object
var auth = initCognitoSDK();
document.getElementById("signInButton").addEventListener("click",
function() {
userButton(auth);
});
var curUrl = window.location.href;
auth.parseCognitoWebResponse(curUrl);
}
// Operation when tab is closed.
function closeTab(tabName) {
document.getElementById(tabName).style.display = 'none';
}
// Operation when tab is opened.
function openTab(tabName) {
document.getElementById(tabName).style.display = 'block';
}
// Operations about toggle tab.
function toggleTab(tabName) {
if (document.getElementById("usertab").style.display == 'none') {
document.getElementById("usertab").style.display = 'block';
document.getElementById("tabIcon").innerHTML = '_';
} else {
document.getElementById("usertab").style.display = 'none';
document.getElementById("tabIcon").innerHTML = '+';
}
}
// Operations when showing message.
function showMessage(msgTitle, msgText, msgDetail) {
var msgTab = document.getElementById('message');
document.getElementById('messageTitle').innerHTML = msgTitle;
document.getElementById('messageText').innerHTML = msgText;
document.getElementById('messageDetail').innerHTML = msgDetail;
msgTab.style.display = "block";
}
// Perform user operations.
function userButton(auth) {
var state = document.getElementById('signInButton').innerHTML;
if (state === "Sign Out") {
document.getElementById("signInButton").innerHTML = "Sign In";
auth.signOut();
showSignedOut();
} else {
auth.getSession();
}
}
// Operations when signed in.
function showSignedIn(session) {
document.getElementById("statusNotAuth").style.display = 'none';
document.getElementById("statusAuth").style.display = 'block';
document.getElementById("signInButton").innerHTML = "Sign Out";
/* Removed for brevity */
openTab("userdetails");
}
// Operations when signed out.
function showSignedOut() {
document.getElementById("statusNotAuth").style.display = 'block';
document.getElementById("statusAuth").style.display = 'none';
document.getElementById('idtoken').innerHTML = " ... ";
document.getElementById('acctoken').innerHTML = " ... ";
document.getElementById('reftoken').innerHTML = " ... ";
closeTab("userdetails");
}
// Initialize a cognito auth object.
function initCognitoSDK() {
var authData = {
ClientId : '<Removed>', // Your client id here
AppWebDomain : '<Removed>', // Exclude the "https://" part.
TokenScopesArray : [<removed>], // like ['openid','email','phone']...
RedirectUriSignIn : '<domain removed>/index.html',
RedirectUriSignOut : '<domain removed>/index.html'
};
var auth = new AmazonCognitoIdentity.CognitoAuth(authData);
// You can also set state parameter - do I need to set this?
auth.setState('ABCDXYZ');
auth.userhandler = {
onSuccess: function(result) {
alert("Sign in success");
showSignedIn(result);
},
onFailure: function(err) {
alert("Error!" + err);
}
};
// The default response_type is "token", uncomment the next line will make it be "code".
auth.useCodeGrantFlow();
return auth;
}
</script>
</body>
</html>
In dev tools I do see a call to https://<domain-name-removed>/oauth2/token but looks like it comes back with a 400 error.The response text is "error":"invalid_client".
Is there some additional configuration I need to do, or as suggested in the AWS docs for authorisation code grant flow I need to implement additional BE code? I feel the example code is lacking a full description for code grant flow.
According to
It turns out that when I created the the app client for the user pool I created it with a secret key. This key must be returned in the header as part of the authentication process which I wasn't doing; the aws example doesn't indicate how this is achieved. Instead direction is given to create the app client without an app secret key
If I understand your use case correctly you should not use an app client secret for this. The AWS example is indeed correct, the code you get in the url is meant to be used in another request in the process of acquiring the real code aka access_token.
I'm new to Google's Places API. I'm trying to get a Django form to autocomplete, but for some reason, only one of the fields (Street 2) will autocomplete. The rest are just blank. And my console throws no errors, so I really have no idea what the issue is.
The other WEIRD thing . . . the inputs are holding the initial values that I passed to the form from the Django view even though the google autocomplete javascript has set them to "" before trying to autofill them. Is that normal?
Here's the HTML:
<div id="locationField">
<input id="autocomplete" name="search_address" onFocus="geolocate()" placeholder="Search for your address . . ." type="text" />
</div>
<hr class="hr-style">
<div >
<strong>Street</strong>
<input id="street_name" name="street" type="text" value="1030 E State Street" />
</div>
<div >
<strong>Street 2</strong>
<input id="route" name="street2" type="text" value="Apt. 2A" />
</div>
<div >
<strong>City</strong>
<input id="city" name="city" type="text" value="Los Angeles" />
</div>
<div class="6u 12u$(small) ">
<strong>State</strong>
<select id="state" name="state">
<!-- options removed for brevity's sake -->
</div>
<div class="6u 12u$(small) ">
<strong>Zip</strong>
<input id="zipcode" name="zipcode" type="text" value="90210" />
</div>
And the javascript, just copied from Google and modified with my input id's:
//geosearch powered by Google
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
$(function(){
initAutocomplete();
});
var placeSearch, autocomplete;
var componentForm = {
street_name: 'short_name',
route: 'long_name',
city: 'long_name',
state: 'short_name',
zipcode: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** #type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = "";
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation
I'm thinking it has got to be failing somehow at this if statement in fillinAddress(), but I can't tell why:
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
Any help would be appreciated! And here's a screenshot of the form!
Turns out you can NOT rename the address form components. (I had renamed 'locality' to be 'city' and 'administrative_area_level_1' to be 'state.') I'm so new to this; I had no idea! I just thought that the variable names in the javascript had to match your input id's in your HTML. Turns out the address form components have to stay:
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
I'd like to allow users to submit a title for each file that is dragged into Dropzone that will be inputted into a text input. But i don't know how to add it. Everyone can help me?
This is my html code code
<form id="my-awesome-dropzone" class="dropzone">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<!-- Now setup your input fields -->
<input type="email" name="username" id="username" />
<input type="password" name="password" id="password" />
<button type="submit">Submit data and files!</button>
</form>
And this is my script code
<script>
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
url: "upload.php",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
maxFilesize:10,//MB
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
},
accept: function (file, done) {
//maybe do something here for showing a dialog or adding the fields to the preview?
},
addRemoveLinks: true
}
</script>
You can actually provide a template for Dropzone to render the image preview as well as any extra fields. In your case, I would suggest taking the default template or making your own, and simply adding the input field there:
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<input type="text" placeholder="Title">
</div>
The full default preview template can be found in the source code of dropzone.js.
Then you can simply pass your custom template to Dropzone as a string for the previewTemplate key of the option parameters. For example:
var myDropzone = new Dropzone('#yourId', {
previewTemplate: "..."
});
As long as your element is a form, Dropzone will automatically include all inputs in the xhr request parameters.
I am doing something fairly similar. I accomplished it by just adding a modal dialog with jquery that opens when a file is added. Hope it helps.
this.on("addedfile", function() {
$("#dialog-form").dialog("open");
});
In my answer, substitute your "title" field for my "description" field.
Add input text or textarea to the preview template. For example:
<div class="table table-striped files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<input class="text" type="text" name="description" id="description" placeholder="Searchable Description">
</div> ... etc.
</div>
</div>
Then in the sending function, append the associated data:
myDropzone.on("sending", function(file, xhr, formData) {
// Get and pass description field data
var str = file.previewElement.querySelector("#description").value;
formData.append("description", str);
...
});
Finally, in the processing script that does the actual upload, receive the data from the POST:
$description = (isset($_POST['description']) && ($_POST['description'] <> 'undefined')) ? $_POST['description'] : '';
You may now store your description (or title or what have you) in a Database etc.
Hope this works for you. It was a son-of-a-gun to figure out.
This one is kind of hidden in the docs but the place to add additional data is in the "sending" event. The sending event is called just before each file is sent and gets the xhr object and the formData objects as second and third parameters, so you can modify them.
So basically you'll want to add those two additional params and then append the additional data inside "sending" function or in your case "sendingmultiple". You can use jQuery or just plain js to get the values. So it should look something like:
this.on("sendingmultiple", function(file, xhr, formData) {
//Add additional data to the upload
formData.append('username', $('#username').val());
formData.append('password', $('#password').val());
});
Here is my solution:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: 'yourUploader.php',
init: function () {
this.on(
"addedfile", function(file) {
caption = file.caption == undefined ? "" : file.caption;
file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
file._captionBox = Dropzone.createElement("<input id='"+file.filename+"' type='text' name='caption' value="+caption+" >");
file.previewElement.appendChild(file._captionLabel);
file.previewElement.appendChild(file._captionBox);
}),
this.on(
"sending", function(file, xhr, formData){
formData.append('yourPostName',file._captionBox.value);
})
}
});
yourUploader.php :
<?php
// Your Dropzone file named
$myfileinfo = $_POST['yourPostName'];
// And your files in $_FILES
?>
$("#my-awesome-dropzone").dropzone({
url: "Enter your url",
uploadMultiple: true,
autoProcessQueue: false,
init: function () {
let totalFiles = 0,
completeFiles = 0;
this.on("addedfile", function (file) {
totalFiles += 1;
localStorage.setItem('totalItem',totalFiles);
caption = file.caption == undefined ? "" : file.caption;
file._captionLabel = Dropzone.createElement("<p>File Info:</p>")
file._captionBox = Dropzone.createElement("<textarea rows='4' cols='15' id='"+file.filename+"' name='caption' value="+caption+" ></textarea>");
file.previewElement.appendChild(file._captionLabel);
file.previewElement.appendChild(file._captionBox);
// this.autoProcessQueue = true;
});
document.getElementById("submit-all").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
const myDropzone = Dropzone.forElement(".dropzone");
myDropzone.processQueue();
});
this.on("sending", function(file, xhr, formData){
console.log('total files is '+localStorage.getItem('totalItem'));
formData.append('description[]',file._captionBox.value);
})
}
});
For those who want to keep the automatic and send datas (like an ID or something that does not depend on the user) you can just add a setTimeout to "addedfile":
myDropzone.on("addedfile", function(file) {
setTimeout(function(){
myDropzone.processQueue();
}, 10);
});
Well I found a solution for me and so I am going to write it down in the hope it might help other people also. The basic approach is to have an new input in the preview container and setting it via the css class if the file data is incoming by succeeding upload process or at init from existing files.
You have to integrate the following code in your one.. I just skipped some lines which might necessary for let it work.
photowolke = {
render_file:function(file)
{
caption = file.title == undefined ? "" : file.title;
file.previewElement.getElementsByClassName("title")[0].value = caption;
//change the name of the element even for sending with post later
file.previewElement.getElementsByClassName("title")[0].id = file.id + '_title';
file.previewElement.getElementsByClassName("title")[0].name = file.id + '_title';
},
init: function() {
$(document).ready(function() {
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
photowolke.myDropzone = new Dropzone("div#files_upload", {
init: function() {
thisDropzone = this;
this.on("success", function(file, responseText) {
//just copy the title from the response of the server
file.title=responseText.photo_title;
//and call with the "new" file the renderer function
photowolke.render_file(file);
});
this.on("addedfile", function(file) {
photowolke.render_file(file);
});
},
previewTemplate: previewTemplate,
});
//this is for loading from a local json to show existing files
$.each(photowolke.arr_photos, function(key, value) {
var mockFile = {
name: value.name,
size: value.size,
title: value.title,
id: value.id,
owner_id: value.owner_id
};
photowolke.myDropzone.emit("addedfile", mockFile);
// And optionally show the thumbnail of the file:
photowolke.myDropzone.emit("thumbnail", mockFile, value.path);
// Make sure that there is no progress bar, etc...
photowolke.myDropzone.emit("complete", mockFile);
});
});
},
};
And there is my template for the preview:
<div class="dropzone-previews" id="files_upload" name="files_upload">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail width="150" /></span>
</div>
<div>
<input type="text" data-dz-title class="title" placeholder="title"/>
<p class="name" data-dz-name></p><p class="size" data-dz-size></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
</div>
I want to make mail validation with regex but it's not working.where is my mistake?
It's normally working but when I put a regex control its never see yes the mail you key in is enable for this regex format.
Here is my code;
index.jsp
<head>
<title>Mail Control From Db</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="check.js"></script>
</head>
<body>
<div align="left">
<form name="chkForm" id="chkForm" method="post" >
<table>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" id="email" size="20" ></td>
<td>
<div id="emailInfo" align="left"></div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
check.js
$(document).ready(function()
{
var myForm = $("#chkForm"), email = $("#email"), emailInfo = $("#emailInfo");
//send ajax request to check email
email.blur(function()
{
$.ajax({
type: "POST",
data: "email="+$(this).attr("value"),
url: "check.jsp",
beforeSend: function()
{
emailInfo.html("<font color='blue'>Kontrol Ediliyor..</font>");
},//end beforeSend: function()
success: function(data)
{
var reg = /\S+#\S+\.\S+/;
if (reg.test(email.val()))
{
var checkData = data.toString();
if(checkData == 0)
{
emailok = false;
emailInfo.html("<font color='red'>Mail in use</font>");
}//end if(checkData == 0)
else if(checkData == 1)
{
emailok = true;
emailInfo.html("<font color='green'>Mail is not in use</font>");
}//end else if(checkData == 1)
}//end if (reg.test(email.val()))
else
{
emailInfo.html("<font color='red'>ınvalid mail</font>");
}//end else
}// end success: function(data)
});
});//end email.blur(function()
});//end $(document).ready(function()
I had a problem in check.jsp. and solved it.
problem is about regex.Regex was false.
condition was false. i change it with if (reg.test(email.val())).
Your regex only allows capital letters, so TEXT#EXAMPLE.COM would be okay but test#example.com not. You can change that either by adding the case-insensitive-flag to your regex
/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,6}$/i
or simply allow a-z in the regex itself
/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/
But keep in mind that checking emails for validity is quite a difficult tasks to do, as the range of allowed mail-adresses is extremely broad and they even could contain special-chars like äüö etc. So your regex is not perfect, keep that in mind!
In PHP, I used this function for years and it always seemed to work.
Why exactly are you using .toString() in this case? .test() gives you an boolean which you can perfectly check with == false - is there any reason why you want to convert this to a string?