I am working with Parse for Javascript, and below is my dilema:
During the signup process, along with the username, and password, the first and last name of the user would have to recorded into parse. As of now, only the username and password is stored.
Below is the javascript signup function code:
SignUp: function(e) {
var self = this;
var username = this.$("#signup-username").val();
var password = this.$("#signup-password").val();
var first_name = this.$("#fname").val();
var last_name = this.$("#lname").val();
Parse.User.signUp(username, password, { ACL: new Parse.ACL() }, {
success: function(user) {
user.set("first_name", first_name);
user.set("last_name", last_name);
new ManageTodosView();
self.undelegateEvents();
delete self;
},
Below is the html form code (ask user to enter their information):
<form class="signup-form">
<h2>Sign Up</h2>
<div class="error" style="display:none"></div>
<input type="text" id="fname" placeholder="Please enter your First Name" />
<input type="text" id="lname" placeholder="Please enter your Last Name" />
<input type="email" id="signup-username" placeholder="Please enter your email" />
<input type="password" id="signup-password" placeholder="Create a Password" />
<button>Sign Up</button>
</form>
Any help would be greatly appreciated.
User.set won't save the changes you will need to call save once you set the first name and last name. Also you don't need to do this after calling signing up. Try the code below it should work.
SignUp: function(e) {
var self = this;
var username = this.$("#signup-username").val();
var password = this.$("#signup-password").val();
var first_name = this.$("#fname").val();
var last_name = this.$("#lname").val();
var user = new Parse.User();
user.set("username", username);
user.set("password", password);
user.set("first_name", first_name);
user.set("last_name", last_name);
user.signUp(null, {
success: function(user) {
new ManageTodosView();
self.undelegateEvents();
delete self;
}
}
Related
I'm making a social Media Website I have added Firebase Authorization in it by now. I want to redirect Users to there profile page based on their email address that they entered, but I don't know much about JavaScript and don't want to use PHP. I want to make it Using HTML, JavaScript and Firebase only. Profile page contains their profile photo and name linked with their Google account. There will be only one profile page that manages all the users
Here's my code
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
function SignUp() {
var firstname = document.getElementById("fname");
var lastname = document.getElementById("lname");
var username = document.getElementById("username");
var email = document.getElementById("email");
var passoword = document.getElementById("password");
const promise = auth.createUserwithEmailAndPassword(username.value, email.nodeValue, password.value);
promise.catch(e => alert(e.message));
alert("Signed Up");
}
function SignIn() {
var username = document.getElementById("username");
var email = document.getElementById("email");
var passoword = document.getElementById("password");
const promise = auth.signInwithEmailAndPassword(email.Value, password.value);
promise.catch(e => alert(e.message));
alert("Signed In" + email.value, "as" + username.value);
}
function SignOut() {
auth.signOut();
alert("Signed Out")
}
auth.onAuthStateChanged(function(user) {
if (user) {
var email = user.email
alert("Active user " + email)
//is signed in
} else {
alert("No Active User")
//no user is signed in
}
})
<div id="formContainer">
<br><input type="email" name="Email" id="email" size="25px" placeholder="Email Address">
<br><input type="password" name="Password" id="password" size="25px" placeholder="Password">
<br><input type="submit" name="submit" value="Sign Up!" onclick="signUp()">
<br><input type="submit" name="submit" value="Sign In!" onclick="signIn()">
<br><input type="submit" name="submit" value="Sign Out!" onclick="signOut()">
</div>
I have a textbox of input type email because it's meant for email addresses. So my page looks like this:
The input type of email should handle the syntax of email.So if email is test###gmail.com,it should not gone through though. When I hit send, it still able to initiate the email.
My javascript function:
<script>
//function to send email
function sendmessage(){
var recipient = document.getElementById("recipient").value;
var subject = document.getElementById("subject").value;
var content=document.getElementById("content").value;
$.ajax({
url: 'sendemail.jsp',
type: 'POST',
data: {
recipient:recipient,
subject:subject,
content:content
},
success: function (data) {
alert("Successfully initiated email to queue");
},
error: function (request, error) {
alert("Request: " + JSON.stringify(error));
}
});
}
</script>
<body>
<div class="email_font">
To:<input type="email" style="font-size: 10pt;" size="70" id="recipient"><br><br>
Subject:<input type="text" style="font-size: 10pt" size="70" id="subject" ><br><br>
Content:<br><textarea cols="80" rows="10" id="content" style="font-size: 13pt;">
<%=files%>: <%=url%>
</div>
<div class="Send">
<button type="button" style="font: 13px/1.231 Trebuchet MS;" onclick="sendmessage()"> Send </button>
</div>
Clicking send still allows to send, is there anything I made wrong?
You can Split the emails on a comma and validate the entries one by one
Following is the code to accept multiple valid email id both comma and semicolon as separator
function validateEmails(emailString) {
var regex = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var result = emailString.replace(/\s/g, "").split(/,|;/);
for(var i = 0;i < result.length;i++) {
if(!regex.test(result[i])) {
return false;
}
}
return true;
}
Use the following code and it should help:
HTML:
<div class="input-wrp">
<input type="email" name="email" placeholder="E-MAIL ID*" required>
<p class="error">Email Error</p>
</div>
JS:
$('input[type="email"]').on('input', function() {
email($(this)); //Function Call
});
function email(input) { //Function
var inputVal = input.val();
var reg = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!reg.test(inputVal) && inputVal.length > 0) {
input.parent().find('.error').show();
} else {
input.parent().find('.error').hide();
}
}
I am trying to set up an email contact page on my heroku website using sendgrid. I have tried the code with the helper mailer and the one without; however, both do are not able to send an email to my email address. I added my sendgrid API key as a variable in my heroku app settings and also imported the username and password.
My email process starts when the user click on a button. I have an action to a post route within the form element, and I use body parser to retrieve the input values from the user (message, their email address, and their message). Within my post route, I call a function in my email.js file that wraps the code from sendgrid.
//My html using handlebars.
<div class = "mainDiv" id = "sectionAbout">
<h1 class="mainDivH1" id = "AboutMe">{{ ContactLi }}</h1>
<form action="/email" method="POST">
<label for="fullName">{{ formName }}</label> <br><br>
<input type="text" name="fullName">
<br>
<br>
<label for="subject">{{ formSubject }}</label> <br><br>
<input type="text" name="subject">
<br>
<br>
<label for="email">{{ formEmail }}</label> <br><br>
<input type="text" name="email">
<br>
<br>
<label for="message">{{ formMessage }}</label> <br><br>
<textarea rows="15" cols="80" type="text" name="message id="textbox"></textarea>
<br>
<br>
<button id="but" type="submit">Submit</button>
</form>
</div>
//The code for the POST route
var email = require('../mail/email');
router.post('/email', function(req, res){
var name = req.body.fullName;
var emSubject = req.body.subject;
var senderMail = req.body.email;
var message = name + " " + req.body.message;
var myEmail = 'examplee#yahoo.com';
email.send(emSubject, senderMail, message, function(){
res.redirect('/contact');
});
});
//email.js
var helper = require('sendgrid').mail
var sg = require('sendgrid')(process.env.SENDGRID_API_KEY);
var email = {
send: function(emSubject, senderMail, message, callback){
var from_email = new helper.Email(senderMail);
var to_email = new helper.Email('helper#yahoo.com');
var subject = emSubject;
var content = new helper.Content("text/plain", message);
var mail = new helper.Mail(from_email, subject, to_email, content);
var request = sg.emptyRequest({
method: 'POST',
path: '/v3/mail/send',
body: mail.toJSON()
});
console.dir("request");
console.dir(JSON.stringify(request, null, 4));
sg.API(request, function(error, response) {
if(error){
console.log(error);
}
console.log(response.statusCode)
console.log(response.body)
console.log(response.headers)
callback(error);
});
}
}
module.exports = email;
You mentioned that you added your Sendgrid API key as an env var, and imported your username and password. You should not have to do any of that. Just add the Sendgrid add-on to your Heroku account as follows:
heroku addons:create sendgrid:starter
I have a form set up with the jQuery Validation plugin.
see here: http://jsfiddle.net/9q865xof/
And I have this (non-jquery) javascript function from how my form was validated before adding the plugin.
function busregform(form, password) {
// new input for hashed password
var p = document.createElement("input");
// create element
form.appendChild(p);
p.name = "p";
p.type = "hidden";
p.value = hex_sha512(password.value);
// clear plaintext password
password.value = "";
// submit the form
form.submit();
return true;
}
With the hex_sha512() function in its own file too.
The idea here is to post the password from the form through busregform() to create a hashed password to then post for my PHP script to process.
I have tried adding this to my validation jquery code:
submitHandler: function(){
var pw = $("#pass").val();
var form = $("#business-reg-form");
busregform(form,pw);
}
With no luck... Not sure what to do now. I'm thinking I should use ajax?
How can I call busregform() when the plugin-validated form is submitted?
The busregform method is expecting a dom element reference for form so you need
$('#business-reg-form').validate({
rules: {
address: {
required: true,
minlength: 6
},
email: {
required: true,
email: true,
minlength: 6
},
company: {
required: true
},
pass: {
required: true,
minlength: 6
},
confirmpw: {
required: true,
minlength: 6,
equalTo: "#pass"
}
},
submitHandler: function() {
var pw = $("#pass");
var form = $("#business-reg-form");
//pass the dom element reference
busregform(form[0], pw[0]);
return false;
}
});
function busregform(form, password) {
// Create a new element input, this will be our hashed password field.
var p = document.createElement("input");
// Add the new element to our form.
form.appendChild(p);
p.name = "p";
p.type = "hidden";
p.value = hex_sha512(password.value);
// Make sure the plaintext password doesn't get sent.
password.value = "";
// Finally submit the form.
form.submit();
return true;
}
if (!window.hex_sha512) {
//stub method
window.hex_sha512 = function(value) {
return 'hex_sha512-' + value;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form method="post" name="business_regform" id="business-reg-form" action="">
<p>
<input type="text" name="company" id="company" placeholder="company name" required />
</p>
<p>
<input type="text" name="address" id="address" placeholder="address" required />
</p>
<p>
<input type="text" name="email" id="email" placeholder="email" required />
</p>
<p>
<input type="text" name="pass" id="pass" placeholder="password" required />
</p>
<p>
<input type="text" name="confirmpw" id="confirmpw" placeholder="confirm password" required />
</p>
<p>
<input type="submit" class="btn" id="business-reg-submit" value="submit" />
</p>
</form>
Demo: Fiddle - You can inspect the request using the network tab to see the hashed password
I don't understand why my is not giving the value properly to my javascript variable. I have tried countless times, changing IDs and whatnot... still nothing... I searched everywhere for an answer... Please help
HTML SNIPPET
<form action="" method="post" onsubmit= "return validateForm()" class="registerform">
First Name: <input type="text" name="fname" id="fname"><br/>
Last Name: <input type="text" name="lname" id="lname"><br/>
Email: <input type="text" name="email" id="email"><br/>
Phone Number: <input type="text" name="phone" id="phone"><br/>
Password: <input type="password" name="password" id="myPass"><br/>
Confirm Password: <input type="password" name="confirmpassword" id="confirmPass"><br/>
<p><input type="submit" value="Submit"></p>
</form>
register.js
...
var password = document.getElementById("myPass").value;
var confirmPassword = document.getElementById("confirmPass").value;
...
function validateForm()
{
alert(password);
alert(confirmPassword);
error = '';
var fNamePass = validateFName();
var lNamePass = validateLName();
var emailPass = validateEmail();
var phonePass = validatePhone();
var passwordPass = validatePassword();
var passwordConfirmPass = validateConfirmationPassword();
...
in my alerts, the value keeps showing as null. Firebug shows me the value at null...
I'm not new to JS, but I feel like I'm doing something really silly here, but my mind is not catching it...
I think you are running into a scoping issue.
You need to make sure you pass the 'password' and 'confirmPassword' argument on to the function.
Fine... do it the same way you did the rest
function validateForm()
{
var password = validatePassword();
var confirmPassword = validateConfirmPassword();
alert(password);
alert(confirmPassword);
error = '';
var fNamePass = validateFName();
var lNamePass = validateLName();
var emailPass = validateEmail();
var phonePass = validatePhone();
var passwordPass = validatePassword();
var passwordConfirmPass = validateConfirmationPassword();
You are setting the value of password and confirmpassword at time of load of document.
Move your definition of password and confirmpassword inside the function
var password, confirmPassword;
function validateForm()
{
password = document.getElementById("myPass").value;
confirmPassword = document.getElementById("confirmPass").value;
alert(password);
alert(confirmPassword);