Blog

Check password strength with vanilla JavaScript and HTML5

Weak passwords are bad and a real danger. So we should encourage our users to use stronger passwords for their online accounts.

Therefore nowadays it is state of the art to give the user instant feedback about the password quality, e.g. on a registration form or a change-password form.

There are great out-of-the-box solutions to tackle this task, like

These packages can even check against known password lists and dictionaries. But on the downside they will add some additional 100kB to the javascript code or even require frameworks like jQuery or Bootstrap.

For my use case this would be too much. I don’t want to bother users with restrictive and complicated password rules. I just want to give a quick feedback about the password strength, based on a few simple rules. So I implemented my own very basic password strength indicator.

Given, we have an html form with a password input:

<input type="password" id="pwd" placeholder="enter password">

We now add a HTML5 progress bar to be used as a password strength indicator:

<progress id="strength" value="0" max="5"></progress>

Each of these elements have an id, so we can easily address it later via JavaScript.

Of course, now we also need a JavaScript function to evaluate the password, it should get the password string as a parameter and return a numeric value as a measure for the password strength.

function passwordStrength(pw) {
  return /.{8,}/.test(pw) * (  /* at least 8 characters */
    /.{12,}/.test(pw)          /* bonus if longer */
    + /[a-z]/.test(pw)         /* a lower letter */
    + /[A-Z]/.test(pw)         /* a upper letter */
    + /\d/.test(pw)            /* a digit */
    + /[^A-Za-z0-9]/.test(pw)  /* a special character */
   )
}

In this function we check the password input against some regular expressions using the test() method and then treating the boolean return value as a number (0 or 1).

To get the top score of 5 a password must be at least 12 characters long and must have numbers, upper and lower letters and other special characters. Passwords shorter than 8 characters are considered insecure and will get a rating of 0.

Finally we just need some magic glue to connect all the bits and pieces properly. We want to evaluate the password whenever a key is pressed in the password input field and update the password strength indicator immediately:

let pwInput = document.getElementById("pwd")

pwInput.addEventListener('keyup', function() { 
 document.getElementById("strength").value = passwordStrength(pwInput.value)
})

Just have a try or see and edit the full source code at jsbin.com.

Feel free to modify the password rules to your needs, add your own rules or some textual output to the user interface.

How to drastically increase Docker performance on Mac and Windows

On Windows and Mac you will probably see a poor performance for your thoroughly dockerized application. This is due to very slow storage I/O operations on your mounted volumes from the local filesystem. On Mac and Windows Docker file has to route file system operations through more layers compared to running Docker on Linux.

If using docker-compose there is a very easy way to speed up the file access and the whole application. Just use the mount options delegated or cached in your docker-compose.yml file like this:

version: '2'
services:
  app:
    container_name: app
    image: php:7.3.8-fpm-stretch
    user: www-data
    working_dir: /var/www
    volumes:
      - ./:/var/www:delegated

  web:
    container_name: web
    image: nginx:1.13-alpine
    working_dir: /var/www/html
    ports:
      - "80:80"
    volumes:
      - ./:/var/www/html:ro,delegated
      - ./docker/nginx.conf:/etc/nginx/conf.d/default.conf:ro

On my Mac I use the option delegated and the speedup of the application is about 140%, the runtime of PHPUnit dropped from about 4.0 minutes to 1.7!

Please read the docs for more information and consequences.

Reset and sync local git repository with remote branch

Messed up your local files and git repo?
Just clean up the mess and make it like the remote master branch again:

git fetch origin
git reset --hard origin/master
git clean -f -d

Your local branch is now an exact copy of the remote branch.

How to create a MySQL/MariaDB database and user

When you want to create a new Database for MySQL or MariaDB and an extra DB user for it:

CREATE DATABASE MYNEWDB;
CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON MYNEWDB.* TO 'newuser'@'localhost';
FLUSH PRIVILEGES;

This will create a general purpose database user, that can not only read and write data, but also modify the structure of the database, like ALTER or DROP tables.