Form data not pushed to const users = [] - vue.js

I am recreating this tutorial for node.js login: https://youtu.be/-RCnNyD0L-s?t=839
I get "[nodemon] starting node server.js
[]" when I submit the form. Why is submitted form data not pushing to const users = []? Maybe I need eyes checked but it does not look like indentation error, and code is exactly like in the tutorial upto this point.
server.js
const express = require("express");
const app = express();
const bcrypt = require("bcrypt");
const users = [];
app.set("view-engine", "ejs");
app.use(express.urlencoded({ extended: false }));
app.get("/", (req, res) => {
res.render("index.ejs", { name: "Julio" });
});
app.get("/login", (req, res) => {
res.render("login.ejs");
});
app.post("/login", (req, res) => {
// res.render('login.ejs')
});
app.get("/register", (req, res) => {
res.render("register.ejs");
});
app.post("/register", async (req, res) => {
try {
const hashedPassword = await bcrypt.hash(req.body.password, 10);
users.push({
id: Date.now().toString(),
name: req.body.name,
email: req.body.email,
password: hashedPassword,
});
res.redirect("/login");
} catch {
res.redirect("/register");
}
console.log(users);
});
app.listen(3000);
register.ejs
<h1> Register </h1>
<form action="/register" method="POST">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" password="password" required>
</div>
<button type="submit"> Register </button>
</form>
Login

Related

v-model two way data binding not working in Nuxt 3 web app

I was using Nuxt 3 to create a login and signup page for a web app.
This is the code for the login page:
<template>
<form #submit.prevent="handleSubmit">
<h3>Login</h3>
<label for="email"> Email Address</label>
<input
type="email"
placeholder="The good-old email field"
name="email"
id="email"
v-model="email"
/>
<label for="password"> Password</label>
<input
type="password"
placeholder="Top secret...."
name="password"
id="password"
v-model="password"
/>
<div v-if="error.show" class="error">{{ error.message }}</div>
<button v-if="!isPending" :disabled="!email || !password">Log In</button>
<button v-if="isPending" disabled>Loading</button>
</form>
</template>
<script setup>
import { useGlobalStore } from "#/stores/global";
import { useAccountStore } from "#/stores/account";
const globalStore = useGlobalStore();
const accountStore = useAccountStore();
const error = computed(() => globalStore.error);
const isPending = ref(false);
const email = ref("");
const password = ref("");
const handleSubmit = async () => {
isPending.value = true;
console.log("The user is trying to log in");
await accountStore.login({
email: email.value,
password: password.value,
});
isPending.value = false;
};
</script>
The problem with this is even when email and password have been entered, the submit button still remains disabled. I have been able to figure out the reason as even when user enters the values for both of them, the values of the refs is not updating.
Can anyone help me figure out why?

How to fix passport local authentication error that prevents registered users from logging in

I have spent some time tring to figure out why the code for my passport local authentication is not functioning properly but I haven't
been able. The program has username field and password field. So people can register with their username and password. The issue in the code lies
in the login section. If I login with any registered username and password, the browser displays Data not found instead of displaying
the content of the redirected page. Please, what could be responsible for this error. The code for the program is shown below.
Auth schema file:
const mongoose = require("mongoose");
const passportLocalMongoose = require("passport-local-mongoose");
const userSchema = mongoose.Schema({
username: {
type: String,
required: true
},
password: String,
});
userSchema.plugin(passportLocalMongoose);
const User = mongoose.model("User", userSchema);
module.exports = User;
Setup
const express = require("express");
const Post = require("./../models/post");
const User = require("./../models/user")
//Connecting mongoose with mongodb
const mongoDB = "mongodb://localhost/blog";
mongoose.connect("mongodb://localhost/blog", {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true
});
const db = mongoose.connection;
//Adding success or error message to node console
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", function(){
console.log("Connection successful");
});
const router = express.Router();
const bodyParser = require("body-parser");
router.use(bodyParser.json());
//const User = require("../models/user");
var passport = require("passport");
var localStrategy = require("passport-local").Strategy;
//Passport configuration
router.use(require("express-session")({
secret: "A programmer",
resave: false,
saveUninitialized: false
}));
router.use(passport.initialize());
router.use(passport.session());
passport.use(new localStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
Auth routes:
router.get("/new", isLoggedIn, (req, res) => {
console.log(req.params)
res.render("new", {post: new Post()});
})
router.get("/register", async(req, res)=>{
res.render("register");
})
router.post("/register", function(req, res){
req.body.username
req.body.password
var newUser = new User ({username: req.body.username})
User.register(newUser, req.body.password, function (err, user){
if(err){
console.log(err)
return res.render("register")
}
passport.authenticate("local")(req, res, function(){
res.redirect("login");
})
})
})
router.get("/login", function(req, res){
res.render("login");
});
router.post("/login", passport.authenticate("local", {
successRedirect: "new",
failureRedirect: "login",
}), (req, res, next)=>{
})
router.get("/logout", (req, res)=>{
req.logout();
res.redirect("login")
})
function isLoggedIn(req, res, next){
if(req.isAuthenticated()){
return next
}
res.redirect("login")
}
Login template file (login.ejs)
<%- include ('partials/header') %>
<div class="container mb-4 mt-4">
<div>
<span class="loginIcon float-right"><img src="/public/images/e73b6446-110b-413d-9c0a-1d05fa9acc6e.jfif" alt="login icon"></span>
<h2 class="text-center">Login</h2>
</div>
<form action="posts/login" method="POST">
<div class="form-group">
<label for="author">Username</label>
<input required type="text" name="username" class="form-control" id="username" placeholder="Please enter your Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input required type="password" name="password" class="form-control" id="title" placeholder="Please enter your password">
</div>
<div class="text-center">
<button type="submit" class="btn btn-outline-primary btn-lg btn-block mb-2">Submit</button>
Cancel
</div>
</form>
<div class="text-center">Sign up if you don't have an account</div>
</div>
<%- include ('partials/footer') %>
After some time I have been able to find out Why the browser was displaying data not found when a registered user tried to login. The issue was from the middlewere. And since failureRedirect was working appropriately, the issue came from the next method of the middlewere. It should be:
function isLoggedIn(req, res, next){
if(req.isAuthenticated()){
return next()
}
res.redirect("login")
}
The issue occurs when the parentesis at the end of the returned next function is omitted. Hence, it should be return next() not return next

How to properly configure my backend in order to receive data from my form? I'm using Vue.js

My goal is to send emails with nodemailer, so I need to do that from my backend. I have a form in my vue component and I'm trying to send the data to http://localhost:3000/ but I get an error : POST http://localhost:3000/ 404 (Not Found). I'm using Axios to do that.
When I make a get request I get a response without any errors, but I cannot make a post request.
First, I created a server just to deploy my site on heroku (responsive proposes), but now I'm not sure if my backend configuration is ok to receive data from my client side. I looked around but I didn't find a specific answer to my problem.
Contact.vue:
<form class="form" #submit.prevent="sendData">
<ul>
<li>
<label for="name">Name</label>
<input type="text" id="name" name="user_name" v-model="name">
</li>
<li>
<label for="mail">E-mail</label>
<input type="email" id="mail" name="user_email" v-model="email">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message" v-model="message"></textarea>
</li>
</ul>
<button type="submit" class="btn">Send</button>
</form>
<script>
import * as axios from 'axios';
export default {
data(){
return{
name: "",
email: "",
message: ""
}
},
methods: {
sendData(){
console.log(this.name, this.email,this.message);
axios.post("http://localhost:3000/",{
name: this.name,
email: this.email,
message: this.message
})
.then(response => {
console.log(response)
})
.catch(error =>{
this.error = error;
})
}
}
}
</script>
My server.js:
const express = require('express');
const port = process.env.PORT || 3000;
var cors = require('cors')
const app = express();
app.use(cors())
app.use(express.static(__dirname + "/dist/"));
app.get("/", function(req, res) {
res.sendfile(__dirname + '/dist/index.html');
})
app.listen(port);
console.log('Server started...');
You are sending a POST request to http://localhost:3000/, but this is set as a GET in your server. So try:
app.post("/", function(req, res) {
res.sendfile(__dirname + '/dist/index.html');
})

Insert and updating the data to database from frontend

I am new to web development. I am working in development of an angular application. I have developed an Angular form in front end, Node.js and Sql server in backend. I need some help to connect my angular form to the sql server database. I want to save the data from my angular form to my sql server database.
Versions:
Angular CLI: 8.0.3
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
I have tried using the restful api to insert data through the server page using post and get.
How can i to connect my angular form to sql databse and insert and update the data when the submit button in my angular form is clicked.
var express = require("express");
var bodyParser = require("body-parser");
var tediousExpress = require("express4-tedious");
var path = require("path")
var app = express();
// Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
//CORS Middleware
app.use(function (req, res, next) {
//Enabling CORS
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
next();
});
app.get('/', function (req, res) {
var sql = require("mssql");
// config for your database
var config = {
server:'******',
database: '*******',
user:'******',
password: '*****',
};
// connect to your database
sql.connect(config, function (err) {
if (err) console.log(err);
// create Request object
var request = new sql.Request();
// query to the database and get the records
request.query('select * from dbo.contact', function (err, recordset) {
if (err)
console.log(err)
else
// send records as a response
res.send(recordset);
});
});
});
app.use("/contact", (req, res) => {
res.sendfile( __dirname + "/src/app/contact/contact.component.html");
});
app.use("/product", (req, res) => {
res.sendfile( __dirname + "/src/app/product/product.component.html");
});
app.use("/homepage", (req, res) => {
res.sendfile( __dirname + "/src/app/home/home.component.html");
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}....`));
<div style="text-align:center">
<h1 class="well">
We are available here for you
</h1>
<div class="loader" *ngIf="dataloading"></div>
<div class = "row">
<div class="column">
<div class ="container">
<div class="col-md-5">
<div class="form-area">
<form role="form" (ngSubmit)="processForm()">
<br style="clear:both">
<h3 style="margin-bottom: 50px; text-align: center;">Contact</h3>
<div class="form-group">
<input required ngModel name="Name" #FirstName="ngModel" (change)="log(Name)" type="text" class="form-control" id="Name" name="name" placeholder="Name" [(ngModel)]="name" required>
<div class="alert alert-danger" *ngIf="Name.touched && !Name.valid" > Name is required.</div>
</div>
<div class="form-group">
<input required type="email" class="form-control" id="email" name="email" placeholder="Email" [(ngModel)]="email" required>
<div class="alert alert-danger" *ngIf="email.touched && !email.valid" > Email is required.</div>
</div>
<div class="form-group">
<input type="phone" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" [(ngModel)]="mobile" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" [(ngModel)]="subject" required>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" name="message" placeholder="Message max(200)" [(ngModel)]="message" maxlength="140" rows="7"></textarea>
</div>
<hr class="mb-4">
<button type="button" id="submit" name="submit" class="btn btn-primary btn-lg btn-block" (click)="save(name, email, mobile, subject, message)">Submit</button>
</form>
</div>
</div>
</div>
````
````contact.component.ts
import { Component, OnInit} from '#angular/core';
import {HttpClient} from '#angular/common/http';
import {HttpErrorResponse} from '#angular/common/http';
import {Router} from '#angular/router';
#Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})
export class ContactComponent {
title = 'Simple Example Contact-us page using Angular 4';
public data:any=[]
constructor(private http: HttpClient){
}
save(name, email, mobile, subject, message): void {
this.data['name']= name;
this.data['email']= email;
this.data['mobile']= mobile;
this.data['subject']= subject;
this.data['message']= message;
console.log(this.data);
//add request to send email or into mysql
this.http.post<any>('/contact1', this.data).subscribe(
res => {
console.log(res);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log("Client-side error occured.");
} else {
console.log("Server-side error occurred.");
}
});
}
}
````

express req body empty in contact form

I am using nodemailer to achieve myself sending emails from contact form.
My app.js looks like this
app.post('/jobs/join-us', (req, res) => {
console.log(req.body); //to return body
const output = `
<p>You have a new message from contact form.</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: 'xx', // generated ethereal user
pass: 'xx',
},
tls: {
rejectUnauthorized: false
}
});
// setup email data with unicode symbols
let mailOptions = {
from: 'xx', // sender address
to: 'xx', // list of receivers
subject: 'Contact Request', // Subject line
text: 'Hello world?', // plain text body
html: output // html body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.end("error");
} else {
console.log('Message sent: %s', info.messageId);
//console.log('Preview URL: %s', nodemailer.getTestMessageUrl(info));
res.sendStatus(200);
}
});
});
Could anybody help me? I also try something like console.log(req) before const output but that didnt' return me anything viable.
This is my contact form itself, the POST request returns 200.
<div class='input-wrapper'>
<input class="flying-label-input" type="text" name="job_form[role]" id="job_form_role" />
<label class="flying-label required" for="job_form_role">Role</label>
</div>
<div class='input-wrapper'>
<input class="flying-label-input" type="text" name="job_form[email]" id="job_form_email" />
<label class="flying-label required" for="job_form_email">E-mail</label>
</div>
<div class='input-wrapper'>
<input class="flying-label-input" type="text" name="job_form[phone_number]" id="job_form_phone_number" />
<label class="flying-label" for="job_form_phone_number">Phone number</label>
</div>
<div class='input-wrapper'>
<label class="label required" for="job_form_cv">CV (PDF)</label>
<input type="file" name="job_form[cv]" id="job_form_cv" />
</div>
<div class='input-wrapper-space-top'>
<input type="hidden" name="job_form[referer]" id="job_form_referer" />
<input type="submit" name="commit" value="Submit Job Application" class="btn-round btn-primary" />
</div>
My app.js middleware functions:'
const express = require('express')
var app = express();
var path = require('path')
const nodemon = require('nodemon')
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
// Static folder
app.use(express.static('public'))
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json())
The req.body is by default undefined so the fact that you get an empty object means that you are not populating the req.body with a body-parser and/or multer. This is also supported by the fact that the error-catching if statement does not return an error in the console so the req.body is there and it is an empty object. Try the following express middleware before your app.post and update the app.post as follows:
var app = require('express')();
var bodyParser = require('body-parser');
var multer = require('multer'); // v1.0.5
var upload = multer(); // for parsing multipart/form-data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/jobs/join-us', upload.array(), function (req, res, next) {
console.log(req.body);
res.json(req.body);
});