sergioastudillo / signupform-js

Signup && login fullstack app.

SignUp + LogIn FORM

This is my first FULLSTACK project 💻

Description:

It's a signup and login web (with password and email validation in both frontend and backend):

• The web automatically validates the password in a dynamic way in the /signup page and in the /profile/edit page. If the validation isn't completed the user can't send the data.

Before validation:

After validation:

• There are flashes (SweetAlert2 personalized alerts) for every or almost every possibility (the user introduced an already used email in the signup, he couldn't update his password, etc.).

• The user can see all his data once logged in and edit the fullname or password if he wants to (in a dynamic way too).

• The password is encrypted in the DB so in case anyone gains access to it he won't know the "real (plaintext)" password (salt of 12).

Notes:

• The web is fully responsive.
• There are 2 functional icons in every form:
  • The clear button (it only shows if you focus on the email or fullname inputs.)
  • The show/hide dynamic icon to show or hide the passwords you're typing.
• The project has more small details that you can check for yourself.
• Feel free to contact me on Twitter if you want to talk about this project or something else: My twitter.

Things to do before trying out the project:

1. Install MySQL in your computer.
2. Use the command npm i to install all the necessary node modules.
3. Execute the script located in /database/db.sql
4. Create a .env file with the following variables:
   • DB_HOST: the IP or hostname of the computer you're going to use for testing the project.
   • DB_USER: the username you use to access MySQL.
   • DB_PASSWORD: the password you use to access MySQL (You can leave it blank if you don't use any. But it has to be created.)
   • DB_NAME: the name of the DB where you're going to store the users (If you used the script this will be "mainDatabase").
   • SECRET: the secret keyword for the session.
   • PORT: the port you're going to use for testing the app. (I recommend 3000 || 5000 || 8080)

Once you do all this you can start using the project with no problems. Use npm start to start the server.

Technologies used:

• Handlebars (HTML)
• SaSS/ScSS (CSS3)
• JS (with ES6 features)
• Node.JS
• MySQL (SQL)

Libraries/frameworks:

• FontAwesome for the icons.
• SweetAlert2 for the alerts.
• NormalizeCSS for adapting the webpage to all browsers.

Node.JS modules used for development:

• Express.
• Express-mysql-session
• Express-session
• Express-validator
• Express-handlebars
• Connect Flash
• Morgan
• Nodemon (only in development)
• MySQL
• Passport
• Passport-local
• TimeAgo.js
• Dot.env
• Bcrypt.js

signupform-js's Issues

Length is insufficient for 'password' column while creating DB

Error Log:

Error:` ER_DATA_TOO_LONG: Data too long for column 'password' at row 1
    at Query.Sequence._packetToError (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/protocol/sequences/Sequence.js:47:14)
    at Query.ErrorPacket (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/protocol/sequences/Query.js:79:18)
    at Protocol._parsePacket (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/protocol/Protocol.js:291:23)
    at Parser._parsePacket (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/protocol/Parser.js:433:10)
    at Parser.write (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/protocol/Parser.js:43:10)
    at Protocol.write (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/protocol/Protocol.js:38:16)
    at Socket.<anonymous> (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/Connection.js:88:28)
    at Socket.<anonymous> (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/Connection.js:526:10)
    at Socket.emit (events.js:314:20)
    at addChunk (_stream_readable.js:303:12)
    --------------------
    at Pool.query (~/Documents/nodejs/signupForm-JS-master/node_modules/mysql/lib/Pool.js:199:23)
    at internal/util.js:297:30
    at new Promise (<anonymous>)
    at Pool.query (internal/util.js:296:12)
    at Strategy._verify (~/Documents/nodejs/signupForm-JS-master/src/lib/passport.js:73:33)
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  code: 'ER_DATA_TOO_LONG',
  errno: 1406,
  sqlMessage: "Data too long for column 'password' at row 1",
  sqlState: '22001',
  index: 0,
  sql: "INSERT INTO users set `email` = '[email protected]', `fullname` = '[email protected]', `password` = '$2a$12$9mKxHPuT4R5GdVx4vh*h&hY4JCjtKopTNVUQx.2WBRam8UiYV/EO'"
}
There has been an error inserting the data in the DB.

Possible Fix:

From
https://github.com/SeRGiioxAG/signupForm-JS/blob/e36070dd2e31d165611375b26e873bed3ea3c105/database/db.sql#L12

Change to

password VARCHAR(256) NOT NULL,