https://github.com/tympanix/pattern-lock-js

An android inspired pattern lock in scalable vector graphics and pure javascript
https://github.com/tympanix/pattern-lock-js

android authentication javascript pattern-lock smartphone svg tablet touch web

Last synced: 13 days ago
JSON representation

An android inspired pattern lock in scalable vector graphics and pure javascript

• Host: GitHub
• URL: https://github.com/tympanix/pattern-lock-js
• Owner: tympanix
• License: mit
• Created: 2017-08-07T16:05:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-05T18:19:10.000Z (8 months ago)
• Last Synced: 2024-10-12T23:34:20.038Z (about 1 month ago)
• Topics: android, authentication, javascript, pattern-lock, smartphone, svg, tablet, touch, web
• Language: JavaScript
• Homepage: https://tympanix.github.io/pattern-lock-js/
• Size: 153 KB
• Stars: 131
• Watchers: 8
• Forks: 29
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pattern-lock-js

A passcode mechanism built with scalable vector graphics (SVG) and javascript for modern web application with mobile and tablet support

## [Demo](https://tympanix.github.io/pattern-lock-js/)

## Install

Install using npm:

```

npm i pattern-lock-js --save

```

... or install using yarn:

```

yarn add pattern-lock-js

```

## Getting started

Import dependecies:

```html

```

Import the module:

```html

```

Design your desired svg pattern (or use the default one below). Your svg graphics must as a minimum have the `patternlock` class and three groups `` with the classes `lock-actives`, `lock-lines` and `lock-dots`

```html

    

    

    

        

        

        

        

        

        

        

        

        

    

```

Initialise the component

```javascript

var lock = new PatternLock("#lock", {

  onPattern: function(pattern) {

    // Context is the pattern lock instance

    console.log(pattern)

   }

});

```

## Options

The returned object from `new PatternLock(...)` has the following utility functions:

* **`clear()`** Clears the current pattern

* **`success()`** Validates the pattern as correct

* **`error()`** Validates the pattern as incorrect

* **`getPattern()`** Returnes the currently active pattern or `NaN`

The pattern lock constructor accepts a second argument - an object literal with the following properties:

* **`onPattern: function`** Called when a pattern is drawn with the pattern as argument. Returning true/false validates/invalidates the pattern - the same as calling `success()` and `error()`. The context is set to the pattern lock instance itself.

* **`vibrate: boolean`** Defines if there should be vibrations while using the PatternLock (if available). Default: `true`