Skip to content

React UI/UX component library that displays a pin input field and a set of buttons. Used for authentication purposes enriched with many cool enigma capacities that makes it cherry on top.

License

Notifications You must be signed in to change notification settings

Idrisvohra9/react-enigma-pin-lock

Repository files navigation

Alt Text

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:

Screenshot Screenshot Screenshot Screenshot Screenshot Screenshot

Github

About

React UI/UX component library that displays a pin input field and a set of buttons. Used for authentication purposes enriched with many cool enigma capacities that makes it cherry on top.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published