Pattern Lock Library For Web App – PatternLockJS

Just another JavaScript library (es6) that lets you create a canvas based pattern lock screen to protect content on the web app.

Fully customizable and styleable. Currently comes with 3 built-in themes: default, success, and failure.

How to use it:

Install the PatternLockJS with NPM or Yarn.

# Yarn
$ yarn add @phenax/pattern-lock-js
# NPM
$ npm install @phenax/pattern-lock-js --save

Import the PatternLockJS.

import PatternLock from '@phenax/pattern-lock-js';

Create a canvas element for the pattern lock.

<canvas id="example"></canvas>

Create a new pattern lock screen.

const myLock = PatternLock({
      $canvas: document.querySelector('#example')
});

Customize the height/width of the pattern lock.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      width: 300, // default
      height: 430 // default
});

Set the number of grids.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      grid: [3, 3]
});

Set the theme.

const myLock = PatternLock({
      $canvas: document.querySelector('#example'),
      theme: 'default' // or success, and failure
});

Or create your own styles:

patternLock.setTheme({
  colors: {
    accent: '#1abc9c',     // Accent color for node
    primary: '#ffffff',    // Primary node and line color
    bg: '#2c3e50',         // Canvas background color
  },
  dimens: {
    node_radius: 20,       // Radius of the outer ring of a node
    line_width: 6,         // Thickness of the line joining nodes
    node_core: 8,          // Radius of the inner circle of a node
    node_ring: 1,          // Outer ring thickness
  }
});

Perform an action after you draw the pattern.

myLock.onComplete(({ hash }) => (myRealHash === hash) ? success() : failure());

Check if the hash code matches the password.

lock.matchHash('MTA1MDA0MzEw')
.onSuccess(() => lock.setTheme('success'))
.onFailure(() => lock.setTheme('failure'));

Changelog:

v0.1.2 (06/19/2022)

• Fixed recalculateBounds

v0.1.1 (11/27/2021)

• removes multiple unnecassary calls to getBoundingClientRect

09/16/2018

•   Toggle button text change

09/15/2018

• Fixed: Empty pattern (no nodes), returns ‘MA==’