Pattern Lock Library For Web App – PatternLockJS

Category: Form , Javascript | September 16, 2018
Author: phenax
Views Total: 552
Official Page: Go to website
Last Update: September 16, 2018
License: MIT

Preview:

Pattern Lock Library For Web App – PatternLockJS

Description:

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:

09/16/2018

  •   Toggle button text change

09/15/2018

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

You Might Be Interested In:

Leave a Reply