React Enigma Pin Lock 🔐

• Used when dealing with Admin Auth if you are bored with simple enter username password screen.

• Provides an easier way to manage the related logic concisely.

• For example you can choose to handle the try depletion logic, on success and on failure events.

• Easily customizable: Uses default classes to apply custom css

TL;DR;

React component that displays a pattern input field and a set of buttons. See Screenshots

The user can enter a pattern by clicking on the buttons, and the component will check if the entered pattern matches the original pattern. See Use cases

The buttons and the pattern/pin itself can be formatted in different ways by clicking on the "Format" button.

Installation

npm:

npm i react-enigma-pattern-lock

yarn:

yarn add react-enigma-pattern-lock

Props:

| Property | Description | Type | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | pin | The pin set for authentication purposes (String env variable) 4 to 8 characters | String | | format | Array of format characters representing the unique format of pin See Format Characters (optional) | Array | | letterSpacing | A value of letter spacing in unit 'rem' to make the letters fit perfectly as per your prefrence in the input field (Optional) default 2.3 | Number | | onSuccess | Callback function to be executed on successful pin entry | Function | | onFailure | Callback function executed when incorrect attempts exceed totalTries | Function | | onTryDepeletion | Callback function with the depleted number of tries for user-side alert | Function | | totalTries | Number of tries allowed for pin entry (optional default 5) | Number | | changeKeypad | Boolean indicating if format change affects keypad numbers (optional default true) | Boolean | | formatChangeBtn | Boolean to show/hide the formatChange button (optional default true) the button on click switches between the format characters and changes the format as per the provided characters in format prop. | Boolean |

Format Characters:

"P" => Numeric Ascending Order,
"Q" => Shuffles odd with even,
"R" => Reverse,
"S" => First even then odd

To understand format characters let us assume that the pin is "1040". And the prop changeKeypad is set to true.

| Format | Pin | Keypad Numbers | | ------ | ---- | ---------------------------- | | P | 0014 | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 | | Q | 1040 | 1, 0, 3, 2, 5, 4, 7, 6, 9, 8 | | R | 0401 | 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 | | S | 0401 | 0, 2, 4, 6, 8, 1, 3, 5, 7, 9 |

Note: If the changeKeypad is set to false it will not change the keypad.

Use cases:

Basic Code to get started:

// Imports:
import EnigmaPatternLock from "react-enigma-pin-lock";
import "react-enigma-pin-lock/dist/styles/bundle.css";

// Component:
<EnigmaPatternLock
  pin="1020"
  totalTries={5}
  onSuccess={() => alert("Success")}
  onFailure={() => alert("Failure")}
  onTryDepeletion={(remainingTries) =>
    console.log("Tries remain: " + remainingTries)
  }
  formatChangeBtn
  letterSpacing={2}
  format={["P", "Q", "R", "S"]}
/>;

Can be used in a NextJS application with the following method:

• Create a component file and import this component as default and use "use client" directive then again export the component as default.

Save the remainingTries value as cookie to preserve the remaining tries. This is considered a good authentication practice. It requires a getCookie, setCookie method which can be imported throught the default package. Or by creating custom methods to handle the cookies.

Screenshots:

Drop a follow or star

Check out NPM Package