Biblioteca de bloqueo de patrones para la aplicación web-PatternLockJS

Vista prévia

Descripción

Solo otra biblioteca de JavaScript (ES6) que le permite crear una pantalla de bloqueo de patrón basado en lienzo para proteger el contenido de la aplicación Web.

Totalmente personalizable y styleable. Actualmente viene con 3 temas incorporados: default, Success, y Failure.

Funcionamiento

Instale el PatternLockJS con NPM o yarn.

# Yarn
$ yarn add @phenax/pattern-lock-js

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

Importe el PatternLockJS.

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

Cree un elemento canvas para el bloqueo de patrón.

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

Cree una nueva pantalla de bloqueo de patrón.

const myLock = PatternLock({



$canvas: document.querySelector('#example')
});

Personalice la altura/anchura del bloqueo de patrón.

const myLock = PatternLock({



$canvas: document.querySelector('#example'),



width: 300, // default



height: 430 // default
});

Establezca el número de cuadrículas.

const myLock = PatternLock({



$canvas: document.querySelector('#example'),



grid: [3, 3]
});

Establezca el tema.

const myLock = PatternLock({



$canvas: document.querySelector('#example'),



theme: 'default' // or success, and failure
});

O crea tus propios estilos:

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

}
});

Realice una acción después de dibujar el patrón.

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

Compruebe si el código hash coincide con la contraseña.

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

Registro de cambios

09/16/2018

• Alternar cambio de texto del botón

09/15/2018

• Corregido: patrón vacío (sin nodos), devuelve ' MA = = '