I am learning ExpressJS and bootstrapped an application.
In a simple login application I am trying to render value of email address already entered by customer with incorrect password.
So when user enters correct email and wrong password for signing in they see error password incorrect but I want to fill email address field.
Here is the code
https://github.com/bradtraversy/node_passport_login/blob/master/config/passport.js#L25
} else {
console.log(email)
return done(null, false, { message: 'Password incorrect' });
}
it is printing correct email but I need to render it here
https://github.com/bradtraversy/node_passport_login/blob/master/views/login.ejs#L14
You need to populate the value attribute of the email field
You should have something like that if you provide a email parameter to your template :
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Enter Email"
<%= !email ? '' : "value="+email %>
/>
Related
Ok, so first off, this is my first post. I've searched high and low for a solution, but have found none. I have posted this first on Udemy, for the course I've taken, but no one has answered, so I'm reposting it here.
I have been trying very hard to figure out why the new-password page will not display correctly for me. The reset link works fine, and I can even reset the password on my new password page when I am sent there from the email link.
However, no matter what I do, I can't get it to display any styling. It only gives me basic html. The logic works fine, it's just the page that doesn't display correctly.
I know it isn't a path issue to the css folder either. If I simply render as another basic page without any token logic, such as replacing my index page with the new-password page, then it displays normally. I just don't know what I'm missing, or if there was some updates that I need to take into consideration.
I'm hoping someone sees this and can help me out. It's the only thing that doesn't work right, and it's very frustrating.
Just to be a little more clear, if I do something like below, and just replace or create a route, the page shows up correctly. It's the token logic I believe that is breaking the rendering, I just don't know how, since I don't get any errors.
Please let me know what code you may need to see, as I'm not sure what sections would be helpful, there are a lot of moving parts here. I will be happy to post whatever is needed.
exports.getNewPassword = (req, res, next) => {
res.render("auth/new-password", {
path: "/new-password",
pageTitle: "Update Password",
});
};
With the logic built-in and following the email reset link, the below will not render any styling, only the html.
exports.getNewPassword = (req, res) => {
const token = req.params.token;
User.findOne({
resetToken: token,
resetTokenExpiration: { $gt: Date.now() },
})
.then((user) => {
if (!user) {
req.flash(
"error",
"That reset password link has already been used."
);
return res.redirect("/");
}
let message = req.flash("error");
message.length > 0 ? (message = message[0]) : (message = null);
res.render("auth/new-password", {
path: "/new-password",
pageTitle: "New Password",
errorMessage: message,
userId: user._id.toString(),
passwordToken: token,
});
})
.catch((err) => console.log(err));
};
I am using ejs for templating as well. As I said above, if I remove all token logic and just render the page as a normal view, it works fine.
<main>
<% if (errorMessage) { %>
<div class="user-message user-message--error"><%= errorMessage %></div>
<% } %>
<form class="login-form" action="/new-password" method="POST">
<div class="form-control">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<input type="hidden" name="userId" value="<%= userId %>">
<input type="hidden" name="passwordToken" value="<%= passwordToken %>">
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<button class="btn" type="submit">Update Password</button>
</form>
</main>
Well, in case anyone stumbles across this, the answer was pretty simple, though I'm not sure why in this one instance is was a problem. However, the solution was to add a forward slash in front of my path to the css location for the update password page.
Again, not sure why it needed it, seeing as all my other css and view pages were in the same folder structures and worked fine, but it apparently solved the issue. SMDH.
<link rel="stylesheet" href="/css/login.css" />
I am new to react. Currently I am working on creating a login screen. I have this code:
function login(e) {
fetch('/login')
.then(response => {
if(response === 'fail'){
return(SignIn());
}else{
return(Ide());
}
})
.then((proposals) => {
console.log(proposals);
this.setState({ proposals });
});
}
export default function SignIn() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
fullWidth
onClick={login}
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</form>
</div>
</Container>
);
And then the login handler
app.get('/login', (req, res, next) => {
const { email, password } = req.body;
console.log(email, password);
//User.find({email: })
});
But when I press the submit button, email and password both console log as undefined. How do I send information using react between the client and the server? Thank you in advance
Whenever you use fetch as a way to send info to an endpoint like '/login' above, the req.body needs to be added as part of the fetch call. To do this, people usually do
fetch('/login', {
body: (whatever you send in the form of one object)
});
The body passed in as the second argument can be then used as req.body in your code that console.logs it.
This is not advised though since GET commands usually do not have bodies passed along as the second argument. Usually POST and PUT commands have the body to make it easy to add and change data. What I recommend is do:
fetch('/login/' + email + '/' + password);
This allows for an email and username object to be a part of your url in for your backend to use. This is one of the ways that people do GET commands without passing in a body. With the new format, you should change the backend to be:
app.get('/login/:email/:password', (req, res) => {
const email = req.params.email;
const password = req.params.password;
console.log(email, password);
With :email and :password in the url, this lets you use req.params and then directly call each identifier as the last value.
Btw if you feel like the fetch call above looks messy with the + commands, you can instead do:
fetch(`/login/${email}/${password}`);
Which are Template Literals that make it easier to read code by adding the values directly into the string. (Note they use the ` key next to the 1 key not ' or ")
Also if you want more info on fetch commands, I advise to start with the MDM Documentation. This website is extremely helpful whenever you need to learn something about JS or other web languages.
I'm sure there's a sound reason as to why I can't get this to work but I've been staring at the code for a long time and I'm brutally stuck. I'm trying to build out a very basic registration form that should store the data in my PostgreSQL database. I'm using bcrypt to hash out the password, but even without still having issues.
My HTML has the following:
<form action="/register/new" method="post">
<label for="username">Username</label>
<input type="text" name="username">
<label for="password">Password</label>
<input type="password" name="password">
<label for="confirm">Confirm Password</label>
<input type="password" name="confirm">
<button type="submit">Submit</button>
</form>
Then for the code I have:
app.get("/register", function(req,res){
res.render("register");
})
app.post('register', function(req,res){
let newUser = {
username: req.body.username,
passwordHash: bcrypt.hashSynce(req.body.password, 8)
}
models.Users.create(newUser).then(function(){
res.redirect('/login');
})
});
The plan for the registration data to be stored and the user redirected to the login page, login stores them in session, and so on. I thought for a bit that the issue was the action on the form but regardless I'm getting Cannot POST /register/new. I've also played around with doing a findOrCreate and do a comparison but I wanted to start with actually just creating before I make it more complex. The same issue occurs with cannot post.
Any thoughts on what I need to change?
Probably would've worked better if I did a app.post("/register"...
Simple miss of an "/"
try this modified code...
app.post('/register', function(req,res) {
let newUser = {
username: req.body.username,
passwordHash: bcrypt.hashSync(req.body.password, 8)
}
// if it does not connect/save try using models.User instead of models.Users below.
models.Users.create(newUser).then(function(){
res.location('/login');
res.redirect('/login');
})
});
I'm newbie to Redis and Nodejs, I've watched this tutorial and i'm trying to search users by name,
Here is the object, returned from redis when i pass the id:
{
first_name: 'john',
last_name: 'doe',
email: 'john#gmail.com',
phone: '543313305',
id: 'user001'
}
Here is the function of the search :
app.post('/user/search',function (req,res,next) {
let id = req.body.id;
client.hgetall(id ,function(err,obj){
if(!obj){
res.render('searchusers',{
error:"user doesn't exist",
});
} else {
obj.id = id
console.log(obj);
res.render('details',{
user:obj, });
}
});
});
I've tried to replace the search by id to search by first_name by doing this:
First I've changed the field name to "first_name" instead of "id"
<h1>Search Users</h1>
{{#if error}} <span>{{error}}</span>{{/if}}
<form class="form-inline" method="POST" action="/user/search">
<div class="form-group">
<input type="text" name="first_name" placeholder="Search" class="form-
control">
</div>
<input type="submit" class="btn btn-primary" value="Search">
And than I've changed it in the app.js ;
app.post('/user/search',function (req,res,next) {
let first_name = req.body.first_name;
client.hgetall(first_name ,function(err,obj){
if(!obj){
res.render('searchusers',{
error:"user doesn't exist",
});
} else {
obj.first_name = first_name
console.log(obj);
res.render('details',{
user:obj, });
}
});
});
The hgetall method that you are using in the search function of the method looks up a hash by the key, which in this case is the user id and returns all of the fields of the hash from Redis.
There is no function to search over the fields of the hash. If you need to be able to map from a first name to a user, you will need to manually build a secondary index using a data structure such as sets, that allows you to go from first name to the users that have that first name.
I am using the exsisting PasswordReset form in WebMatrix. I didn't change anything in the module but, it's not working. When I click the "Did you forget your password?" link and it takes me to the ForgotPassword form. After I enter my email address and click 'Send Instructions' it goes to my email. But, when I click on the link it provides I immediately get the Password Reset screen but, he top of the screen says, "Could not reset password. Please correct the errors and try again." Eventhough, I try resetting my password anyway nothing happens.
Below is the Password Reset code:
#* Remove this section if you are using bundling *#
#section Scripts {
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
}
#{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Password Reset";
var passwordResetToken = Request.Form["resetToken"] ?? Request.QueryString["resetToken"];
bool tokenExpired = false;
bool isSuccess = false;
// Setup validation
Validation.RequireField("newPassword", "The new password field is required.");
Validation.Add("confirmPassword",
Validator.EqualsTo("newPassword", "The new password and confirmation password do not match."));
Validation.RequireField("passwordResetToken", "The password reset token field is required.");
Validation.Add("newPassword",
Validator.StringLength(
maxLength: Int32.MaxValue,
minLength: 6,
errorMessage: "New password must be at least 6 characters"));
if (IsPost && Validation.IsValid()) {
AntiForgery.Validate();
var newPassword = Request["newPassword"];
var confirmPassword = Request["confirmPassword"];
if (WebSecurity.ResetPassword(passwordResetToken, newPassword)) {
isSuccess = true;
} else {
ModelState.AddError("passwordResetToken", "The password reset token is invalid.");
tokenExpired = true;
}
}
}
<hgroup class="title">
<h1>#Page.Title.</h1>
<h2>Use the form below to reset your password.</h2>
</hgroup>
#if (!WebMail.SmtpServer.IsEmpty()) {
if (!Validation.IsValid()) {
<p class="validation-summary-errors">
#if (tokenExpired) {
<text>The password reset token is incorrect or may be expired. Visit the forgot password page
to generate a new one.</text>
} else {
<text>Could not reset password. Please correct the errors and try again.</text>
}
</p>
}
if (isSuccess) {
<p class="message-success">
Password changed! Click here to log in.
</p>
}
<form method="post">
#AntiForgery.GetHtml()
<fieldset>
<legend>Password Change Form</legend>
<ol>
<li class="new-password">
<label for="newPassword" #if (!ModelState.IsValidField("newPassword")) {<text>class="error-label"</text>}>New password</label>
<input type="password" id="newPassword" name="newPassword" disabled="#isSuccess" #Validation.For("newPassword") />
#Html.ValidationMessage("newPassword")
</li>
<li class="confirm-password">
<label for="confirmPassword" #if (!ModelState.IsValidField("confirmPassword")) {<text>class="error-label"</text>}>Confirm password</label>
<input type="password" id="confirmPassword" name="confirmPassword" disabled="#isSuccess" #Validation.For("confirmPassword") />
#Html.ValidationMessage("confirmPassword")
</li>
<li class="reset-token">
<label for="resetToken" #if (!ModelState.IsValidField("resetToken")) {<text>class="error-label"</text>}>Password reset token</label>
<input type="text" id="resetToken" name="resetToken" value="#passwordResetToken" disabled="#isSuccess" #Validation.For("resetToken") />
#Html.ValidationMessage("resetToken")
</li>
</ol>
<input type="submit" value="Reset password" disabled="#isSuccess"/>
</fieldset>
</form>
} else {
<p class="message-info">
Password recovery is disabled for this website because the SMTP server is
not configured correctly. Please contact the owner of this site to reset
your password.
</p>
}
Here is the code in my _AppStart:
WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", autoCreateTables: true);
OAuthWebSecurity.RegisterGoogleClient();
WebMail.SmtpServer = "smtp.gmail.com";
WebMail.EnableSsl = true;
WebMail.SmtpPort = 587;
WebMail.UserName = "mark.anthnony#yahoo.com";
WebMail.Password = "September";
WebMail.From = "mark.anthony#yahoo.com";
Change constancies in your User object. Delete required attributes from there. Also. I suggest to write your own base authentication.