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.