Forem: fawazsullia

Build a Password Generator API on Nodejs

fawazsullia — Mon, 14 Jun 2021 11:27:46 +0000

Some sites auto generates complex passwords during user signup.

I found this cool and wanted to try building a similar feature.

Instead of turning it into an app, I decided to create a public API, so that anyone could use this in their applications.

Features:

The password by default should have only lower case letters.
Users can select if they want to add uppercase letters, numbers and characters to it.
Users can select the password length
Password should be random with no predictable pattern

So grab your popcorns, this is going to be a detailed one.

For you all super curious folks out there, here's the link :)

Now, on with the tutorial.

Tech requirements

Nodejs installed
Express js
Cors
dotenv

The usual server stuff

Create an empty package.json file inside the directory with npm init
Next, install dependencies.

We need express to handle the routes, cors to allow cross-origin access and dotenv to access our environment variables.

npm i express dotenv cors

Require all the dependencies and your index.js should look like this:

const express = require('express');

const app = express();

const cors = require('cors');

dotenv.configure();

//Defining port

const PORT = process.env.PORT | 5000;

//listen to the server event on PORT

app.listen(PORT)

//Add routes

app.get('/generate', (req, res) => {
//we will come back here later
}

The password generating algorithm

To avoid cluttering, we'll write the main algorithm in a separate file.

Go ahead. Create a file and name it whatever you want.

I’ll create a wrapper function ( generate-password ) and then export it. This function takes in 4 parameters and will return us the password.

Parameters:

Length of password (default 8)
Caps required (default false)
Number required (default false)
Special character required ( default false )

Inside this function, I’ll create 4 different functions that generates lower case, upper case, number and a special character respectively. We will use these functions later.

//generate number

let generateNumber = () => {
let number = Math.floor(9*Math.random());
return number.toString();
};

//generate a special character

let generateChar = () => {
const charArray = [64, 38, 35, 37, 36, 42, 43];
let index = Math.floor(7*Math.random());
return String.fromCharCode(charArray[index]);
};

//generate capital letters

let generateCaps = ()=>{
return String.fromCharCode(Math.floor(25 * Math.random() + 65));
};

//generate small case letters

let generateSMall = ()=>{
return String.fromCharCode(Math.floor(25 * Math.random() + 97))
};

Now, to generate the whole password, we create a new function that takes in the length of the password required as the parameter.

Next, create a global array and set it to empty. We will push the password into this.

We will set the max-number of upper-case letters or special characters or numbers to (password-length)/3. The rest would be small case alphabets.

The password will contain numbers, uppercase letters or special chars only if the users specify it, if not we go with the default false.

Let's create 3 if statements. These will push number, sp.char or uppercase to the password array, depending on the wrapper function parameters.

//generate the whole pass

let generate = (len) => {

let turn = Math.floor(len/3);
var rem = len;

if(charRequired){
  let temp = Math.floor(turn * Math.random() + 1);
  for(i=0; i<temp; i++){
    passwordArray.push(generateChar());
    }
  rem = rem - temp;
}

if(numRequired){
  let temp = Math.floor(turn * Math.random() + 1);
  for(i=0; i<temp; i++){
    passwordArray.push(generateNumber());
    }
  rem = rem - temp;
}

if(capsRequired){
  let temp = Math.floor(turn * Math.random() + 1);
  for(i=0; i<temp; i++){
    passwordArray.push(generateCaps());
    }
  rem = rem - temp;
}

for(i=0; i<rem; i++){
  passwordArray.push(generateSMall());
  }

return passwordArray;

};

Note that, we just only set the upper limit of the type of character pushed to the password array. The actual value is decided by the Math.random() method.

This pretty much gives us the password, but it's not random enough. Look closely, there's a pattern. The password will always have sp.char, number, uppercase and lowercase in the same order.

Let’s add one more layer of randomness to it.

I made use of a standard shuffling algo to jumble the array.

//shuffle Array
function shuffleArray(arr){
    for (let i = arr.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

We then convert this into string with array.join() and return it.

Back to index.js

Let’s add a basic routing.

I’m using a get method on the “/generate” route.

Remember that we had 4 parameters for the password generating function? We get values to that using query parameters.

Destructure caps, num, char, len from req.parameters object.

Invoke the function with the above password and send the password generated.

app.get('/generate', cors(), (req, res)=>{

let {caps, num, char, len} = req.query;

let passtoSend = password(num, char, len, caps);
res.status(200).json({ data : passtoSend}).end();
})

That’s all.

The API we just built is accessible at basehost/generate

You can add query parameters for additional complexity.

What next?

You can either build a similar backend API or a front end that fetches this API to generate passwords for users.

You can read about accessing the API here.

If you found this useful, consider connecting with me on twitter.

See you in the next one!

How to send Email with node js for free

fawazsullia — Mon, 31 May 2021 17:01:04 +0000

If you are building a project that involves customer interactions, then probably at some point you would have to send them an email as well.

For example, on successful form submits, you need to send a confirmation email. Or on every purchase, a receipt or order details.

You could hook up some of the existing apis like send in blue, mail chimp etc, but you can do it for free in nodejs itself.

Node Mailer is a nodejs module, that makes it easy to send emails.

Here's how you do it;

-> First, install Node Mailer

npm install nodemailer

-> Then require('nodemailer')

-> Create a transporter

Transporter is the object that is able to send the email. It contains data about the connection.
I'm using gmail to send emails and this is how the transporter looks for me:

const transporter = nodemailer.createTransport({ service: 'gmail', auth: { user: myemail@gmail.com, pass: password } });

-> We also need an object containing the message to be sent

const mailOptions = { from: 'The Idea project', to: toAddress, subject: 'My first Email!!!', text: "This is my first email. I am so excited!" };

You can send html emails with html key instead of text.

-> Next, to actually send the email, use
transporter.sendMail(mailOptions, callback)

The call back takes error and info arguments and is executed once the sending process is complete. You can use this to log errors if any.

You can customise the emails you send, where you send from and how you send it anyway you want. Read the docs here.

The complete code should look like this,

![Full code nodemailer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i116of2cgdf0d7eljgtb.png)

Less annoying CSS in React with CSS modules

fawazsullia — Tue, 18 May 2021 18:15:10 +0000

A fundamental problem with CSS is that it's globally scoped.

So, if you have a number of components in your React app, you would have to think of unique classes to name your components.

And the bigger your app gets, the harder.

This is where CSS modules come in.

CSS modules let you create CSS files that are locally scoped.

Here's how you do it;

Create a CSS file with .module.css extension
In your component, use import * as anyName from 'relative path'
And in yout jsx elements, use className={anyName.nameofclass}
In your module.css file, use .nameofclass to select the elements

Note that, you can select child elements with .nameofclass element name as well (.container button)

This way, you don't have to worry about thinking of unique names to name your class.

Note: Css modules are not intrinsic css features. On compilation, they get compiled to normal css. You would need the right compiler configuration to be able to use this. If you use web pack, it's already included.

If you found this useful, let me know in the comments. if there's a better way to CSS in react, drop a comment

Reduce React app loading time with lazy loading

fawazsullia — Sun, 16 May 2021 17:42:35 +0000

When I pushed a front end portfolio project to production, I noticed that there was a delay when the web app loaded for the first time.

Being a beginner, I started researching why. Here's what I found out:

React is based on components ( obviously ) and it makes use of bundlers like webpack to bundle up all the imports ( components, views etc) into a single file, which is then loaded when the user first opens the app.

Which means, even if the user never visits a particular component,it is still loaded.

How do we solve this? By code splitting.

The solution is to dynamically import components depending on the route or components the user is trying to access. This results in only those components loading, thereby reducing the load time.

Here's how the syntax is;

Without lazy, import About from './about'

With lazy, const About = React.lazy(()=> {import './about'}

Additionally, we use Suspense, which allows us to use a fall back when the components are loading.

Example:

<Suspense fallback={<p>Loading></p>}> <App /> </Suspense>

For detailed explanation on this, visit https://reactjs.org/docs/code-splitting.html

How I built a simple 'word guessing game' using Javascript ( for Beginners )

fawazsullia — Fri, 14 May 2021 13:10:30 +0000

I wanted to build something fun for my portfolio. After spending sometime thinking, I decided to code a game that was popular in my childhood.

Hangman

Players will have to fill the dashes with letters, until they guess the word. The game ends if the player guesses the correct word or if he chooses the wrong letter 5 times.

Here’s how the game looks:

Before we start building, let's see what the game needs to do.

Generate a random word
Generate dashes for the players to fill letters
Provide letters for the players to choose
End the game when the player loses or wins

Now, with that sorted, lets start building.

Also, you might want to keep the game and the source code open for reference.

HTML:

The basic structure of the game is quite simple.

A section for the title : This section contains the title and the number of chances a player has left
A section for the word: The blank space for the word is displayed here. We will dynamically display this, depending on the word length
A section for the letters: English alphabet to select will be displayed here. You can create a span tag for each letter, but it is much easier to do this with Javascript.

Styling

Styling entirely depends on your preferences, but to get started, here’s the link to my stylesheet.

The dynamics of the game ( Javascript )

As I said earlier, we need to create a section of alphabets that the players can select.

Steps:

Create an array of alphabets, from a - z
Map through this array with array.map
For each alphabet on the array, create a span node, set the id to the alphabet and set a common classname ("alphabet")
Create a text node with the letter as the inner text
Append the textnode to the span and the span to our div ( alphabet section)

It should look something like this ( after styling )

Fetching a random word.

I’m sure you have heard about the acronym API before. We will be using an API called ‘Random word Api’ by M C Naveen, to generate a random word.

The endpoint we are going to use is https://random-words-api.vercel.app/word.

Steps:

Fetch request at endpoint
Resolve the promise with .then.
Resolve the json promise returned
Inside the callback, invoke a function that adds functionality to the game. By doing this, we make sure that the game becomes functional only after the fetch is successful

The game function:

Let’s split the fetched word into an array and store it.

To create empty spaces for the players to fill in, we use a similar method we used to create alphabets, but instead of an alphabet, the textnode will be an empty string.

Let’s then append it the div called word section.

It should ook like this.

Also, using foreach, we add an event listener to each alphabet.

We now define a call back for the event listener (click) we added in each letter, so that whenever a player clicks a letter, the call back is executed.

Inside the callback

Select the letter with event.taget.innertext
Check if the letter is in the word we fetched with array.includes
Mark the letter as selected in the DOM ( for styling )

Now, the conditional. We have 2 conditions. \
a. The selected letter is in the word fetched.
b. The selected letter isn’t.

Selected letter is in the word

Check where the selected letter is in the word and store it in an array(indexes). This lets us store multiple values.
With DOM manipulation, add the letter in position stored in the array indexes
Store the number of elements in the indexes array in a variable.
If the variable becomes equal to word length, the player wins the game.

Selected letter is not in the word

Increase the false count by 1
When false count is 5, game over

That’s it! You successfully created a Word Game.

Feel free to build this on your own and modify it as you see fit.

If you have questions or improvements, feel free to ping me here.