In meteor, I current am using the default login field. However, I would like to have the user create a unique user ID upon creating an account. I could hardcode this in, but I was wondering if there was a way to do this by editing the loginButton field somehow.
Would anybody know how to add extra fields in general that the user signing up would be forced to fill out? Such as name, username, etc.?
The loginButtons helper is meant to be an easy, drop-in helper for prototyping. For customization, you need to create your own custom login/signup forms. This is actually pretty easy with the documented Accounts API. Here's a simple example of custom login/signup forms:
<template name="signupForm">
<form id="signup-form">
<h2>Sign Up</h2>
<label for="signup-username">Username</label>
<input type="text" id="signup-username" placeholder="Username" />
<label for="signup-password">Password</label>
<input type="password" id="signup-password" placeholder="Password" />
<label for="signup-name">Full Name</label>
<input type="text" id="signup-name" placeholder="Full Name" />
<button type="submit">Sign Up</button>
</form>
</template>
<template name="loginForm">
<form id="login-form">
<h2>Log In</h2>
<label for="login-username">Username</label>
<input type="text" id="login-username" placeholder="Username" />
<label for="login-password">Password</label>
<input type="password" id="login-password" placeholder="Password" />
<button type="submit">Log In</button>
</form>
</template>
<template name="logoutForm">
<form id="logout-form">
<button type="submit">Log Out</button>
</form>
</template>
Template.signupForm.events({
"submit #signup-form": function(event, template) {
event.preventDefault();
Accounts.createUser({
username: template.find("#signup-username").value,
password: template.find("#signup-password").value,
profile: {
name: template.find("#signup-name").value
// Other required field values can go here
}
}, function(error) {
if (error) {
// Display the user creation error to the user however you want
}
});
}
});
Template.loginForm.events({
"submit #login-form": function(event, template) {
event.preventDefault();
Meteor.loginWithPassword(
template.find("#login-username").value,
template.find("#login-password").value,
function(error) {
if (error) {
// Display the login error to the user however you want
}
}
);
}
});
Template.logoutForm.events({
"submit #logout-form": function(event, template) {
event.preventDefault();
Meteor.logout(function(error) {
if (error) {
// Display the logout error to the user however you want
}
});
}
});
You can use the Accounts.validateNewUser() and Accounts.onCreateUser() methods to validate the user fields and perform further customization on the user objects, respectively. For example, in your onCreateUser callback, you can change the user's _id field to whatever you want before returning the user object to be inserted into the DB.
Note that this example doesn't include the code for when the user forgot their password and wants to reset it. You can use the Accounts.forgotPassword and Accounts.resetPassword methods for that.
If you are having email as a field in your 'users' collection and you enters email id in the place of username it makes login into the system as we are not using accounts-ui here. So we can not be able to use accounts-ui config facility.
Related
I'm making two forms with html and javascript, one for "log in" and one for "register". Im using javascript to check that the inputs on the forms are valid. Im running into an issue where the "email" field on the "log in" form is being validated properly, but the "email" field on my "register" form is not, although they are using nearly identical event listeners to validate the inputs.
this is a condensed version of the code that I am using to do this
<html>
<form class="forms" id="login-form" onsubmit="return false" novalidate>
<h1>Log In</h1>
<div class="form-div">
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
<span class="error"></span>
</div>
<button class="wide-buttons" type="submit">Log In</button>
<p onclick="toggleForms()">Need an account? Click here to sign up!</p>
</form>
<form class="forms" id="register-form" onsubmit="return false" novalidate>
<h1>Register</h1>
<div class="form-div">
<label for="email">Your Email:</label>
<input type="email" id="register-email" name="register-email" required>
<span class="error"></span>
</div>
<button class="wide-buttons" type="submit" onclick="validateRegister()">Sign Up</button>
<p onclick="toggleForms()">Already have an account? Click here to log in!</p>
</form>
<script>
const loginForm = document.getElementById("login-form");
const emailError = document.querySelector("#email + span.error");
const registerForm = document.getElementById('register-form');
const regEmailError = document.querySelector("#register-email + span.error");
loginForm.addEventListener("submit", (event) => {
if (!email.validity.valid) {
emailError.textContent = "You must enter a valid email address";
}
});
registerForm.addEventListener("submit", (event) => {
if (!email.validity.valid) {
regEmailError.textContent = "You must enter a valid email address";
}
});
</script>
Im using event listeners for a "submit" event on each form and the one for "loginForm" Is working the way that I intend it to, but the one for "registerForm" is showing my error message when the email is a valid email or anything else is put into the email field. Im stumped by this considering the listeners are practically identical. I don't need to actually submit the form to anything, I'm just trying to learn how some basic form validation works. This code is a snippet of everything else that I have written, but my passwords, checkboxes, etc. are working fine for me. I just need to know how to get the "registerForm" event listener to work the same way that the "loginForm" one is.
edit: Im aware of the onclick="validateRegister()" on the register form- I have removed this in my code and I am still having the issue.
Any help, constructive criticism, or funny jokes are appreciated.
thanks.
It looks like you are trying to check the validity of the email input element on both forms, but you should be checking the validity of the register-email input element on the registerForm event listener.
Change:
if (!email.validity.valid) {
regEmailError.textContent = "You must enter a valid email address";
}
To:
const registerEmail = document.getElementById('register-email');
if (!registerEmail.validity.valid) {
regEmailError.textContent = "You must enter a valid email address";
}
and it should be ok
Edit1: Ofc you can declare registerEmail above event listener
I have developed some forms using Eleventy and I never had any issues with the credentials appending themselves to URL, but now I have made a new password authentication form and this one is appending the password to the url and I am unclear as to why.
This is the Eleventy form:
module.exports = function() {
return `
<form class="rds-form">
<div>
<input
type="password"
id="input_password"
name="Password"
aria-required="true"
class="form-control to-switch"
maxlength="32"
data-required-message="A password is required to login. Please add it now"
/ >
</div>
<div class="pull-right">
<button
type="submit"
class="btn btn-primary btn-lg submit-btn"
id="custom-password"
>
Login
</button>
</div>
</form>
`
}
the logic for it:
document.querySelector('.rds-form').addEventListener('submit', function () {
alert('form submitted!');
});
The form default method is GET so set the method attribute to POST.
<form class="rds-form" method="post">
So apparently the API I am working with from a third party vendor does an AJAX call, so I had to add e.preventDefault() to prevent the default browser behavior like so:
document.querySelector('.rds-form').addEventListener('submit', function (e) {
e.preventDefault();
alert('form submitted!');
});
I am creating a Sign in and Sign up page. Both sign in and sign up will be shown on the same page, without redirecting it to another page.
Right now, I have two functions showSignUp and showSignIn. These two returns the form. I then render them by calling {this.showSignIn()}. I have a button says "Sign In", and a Link saying "Create a new account". Clicking on the create a new account should show the "Sign up" form. I inserted my showSignIn() function below. The showSignUp function is similar to this.
But I am unsure how should I solve the clicking on a link calls another function.
{I solved the problem by creating one js file for sign in and one for sign up previously. But this cause alot of repetitive code. That is why I am trying to merging them.}
return (
<form>
<div className="login-screen">
<div className="formField">
<label className="formField-Label" htmlFor="name">
E-mail
</label>
<input
type="email"
id="email"
className="formField-Input"
placeholder="Enter your e-mail address"
name="email"
value={email}
onChange={this.handleChange}
/>
</div>
<div className="formField">
<label className="formField-Label" htmlFor="password">
Password
</label>
<input
type="password"
id="password"
className="formField-Input"
placeholder="Enter your password"
name="password"
value={password}
onChange={this.handleChange}
/>
</div>
<div className="formField">
<button className="form-button" onClick={this.signin}>
Sign In
</button>
<Link to={this.showSignUp} className="form-link">
Create a new account
</Link>
</div>
</div>
</form>
);
I suppose your Link comes from react-router-dom, so it only accepts string or object as to prop, see https://reacttraining.com/react-router/web/api/Link.
You should replace it with a <button onClick={this.showSignUp}>Create...</button>
Note that your showSignUp function should trigger a state change in order to render again and change the form displayed. It would look something like :
state = {
showSignUp: false,
}
renderSignUp() {
return (
<form>
// ...
<button onClick={() => this.setState({ showSignUp: false })} className="form-link">Create a new account</button>
</form>
);
}
renderSignIn() {
// Returns your sign in form
}
render() {
return this.state.showSignUp ? this.renderSignUp() : this.renderSignIn();
}
I second adesurirey's answer, but it doesn't have to be a button, you can attach and onClick listener to just about any html element so if you wanted it to behave more like a normal link it could even be an <a /> tag with no new route or a <span> that you style to look like a <Link>
I have an application with add friend feature, in that feature, user must fill their friend's username in the textbox. this is the html code:
<div content-for="title">
<span>Add Friend</span>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">User ID</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="User ID">
</div>
<button type="submit" class="btn btn-default" data-ng-click="addfriends()">Add</button>
the interface will be like this
and this is the js code:
// addfriend
$scope.add = {};
$scope.addfriends = function(){
$scope.messages = {
email : $scope.add.email,
userid : $scope.datauser['data']['_id']
};
//event add friend
socket.emit('addfriend',$scope.messages,function(callback){
if(!callback['error']){
$scope.datauser['data']['penddingrequest'].push(callback['data']);
//push pendding request to localstorage user
localStorageService.remove('user');
localStorageService.add('user', $scope.datauser);
$scope.add['email'] = '';
alert('Successfully added friend');
}else{
var msg = callback['error'];
navigator.notification.alert(msg,'','Error Report','Ok');
}
});
};
I want to change this feature little bit, I want to make this textbox showing some suggestion based on the input, like if user input 'a', the textbox will show all user id that start with 'a'. something like twitter's searchbox or instagram searchbox. these user ids is from database.
example searchbox of web instagram
my question is how to change this textbox to be autocomplete but still work like before? thanks very much
There are many ways to do this.
First is this one: You basically create Angular directive for your input.
http://jsfiddle.net/sebmade/swfjT/
Another way to do is to attach onKeyUp event to your input:
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">User ID</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="User ID" ng-keyup="searchFriends()">
<div ng-model="searchFriendsResult" />
</div>
And then, in your controller, you create a searchFriends function that will:
Search your database
Display the result in the view.
Something like this (not a complete code):
$scope.searchFriends = function(value){
// Make Ajax call
var userRes = $resource('/user/:username', {username: '#username'});
userRes.get({username:value})
.$promise.then(function(users) {
$scope.searchFriendsResult = users;
});
};
Use Bootstrap Typeahead
<input type="text" ng-model="asyncSelected"
placeholder="Locations loaded via $http"
uib-typeahead="address for address in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-no-results="noResults"
class="form-control"/>
I have been trying to log in to a offline HTML/CSS page using the enter key but unable to start with JavaScript which needs I'm sure.
But can log in using the mouse when I click the log in button which i have created ..
How do i use the enter key stroke to log in?
This is the javascript which I have hard coded for credential test which works using the mouse click.. I want it for the enter key.. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<div align="center">
<div id="bor">
<h1>
Login Page
</h1>
<div>
<form name="login">
 <input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br /><br />
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</div>
<script language="javascript">
function check(form)
{
if(form.user.value == "user" && form.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
}
</script>
Use the submit event handler. The click handler on an element will only fire if you click on it. What you are trying to do is submitting a form, but handling the form with javascript instead of on the server. I would recommend binding that dynamically, but as you have all javascript here inline, I'll give an example inline too.
You'll need to attach a submit event handler to the form element. If you do it inline, this will work with onsubmit="..." instead. The return is there to prevent/allow the form to be submitted to the server. If the function returns 'true', the form will be submitted to the server. If the function returns 'false', the form will not be submitted. You'll also need to change the type of your submit button to submit. This will tell the browser to submit the form if that button is clicked. Alternatively, if you press enter in an input field, the browser will see this as submitting the form too.
<form name="login" onsubmit="return check(this)">
 <input type="text" placeholder="Enter the Username" name="user"/> <br />
<input type="password" placeholder="Enter the Password" name="pwd"/><br/><br/>
<input type="checkbox" name="en" value="en" />Remember Me<br>
<input type="submit" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
The javascript behind it will remain mostly the same. You'll notice that we passed this to the function. This will pass the element itself (in this case the form element) to the function. As said before, you'll need to return false. I've changed form to frm as form is a globally defined variable in some browsers.
function check(frm)
{
if(frm.user.value == "user" && frm.pwd.value == "pwd")
{
window.open('inbox.html','_self')
}
else
{
alert("Error Password or Username")
}
return false;
}
An example jsfiddle: http://jsfiddle.net/AS5t5/