@kezoponk/iphonepasscode

IPhonePasscode.js

IPhonePasscode creates very easily a highly customizable and functional copy of the IPhone pin passcode.
Use the main import for standard js, or import from dist/react for the included React component.

Security note

Don't use this on anything big unless:
Passcode is 12+ digits long.
If passcode is 12- digits - leave md5passcode empty and either limit requests or use csrf token

Installation

Install from the command line:

$ npm install @kezoponk/iphonepasscode

Install via package.json:

"@kezoponk/iphonepasscode": "1.1.1" 

Usage

MD5 hash your passcode: md5hashgenerator.com
A back-end is required to validate the passcode, see examples bellow.

Option / Prop	Description
md5passcode	Leave empty if you wish to validate pin only in the specified redirect url/page - safer
length Required	Length of passcode
redirect Required	Back-end file or directory to redirect if passcode is right. Works with custom parameters!
title	Text appearing above passcode pins Default: "Enter Passcode"

new IPhonePasscode(Element, { Options });

CSS Classes for customization
ipasscode__press-animation
ipasscode__button
ipasscode__button-big-number
ipasscode__button-small-letters
ipasscode__title
ipasscode__pinsdiv
ipasscode__pins

Use !important if nothing changes

Example with standard JS and PHP backend

<div id="iphonePasscode" />

new IPhonePasscode(
  document.getElementById('iphonePasscode'), {
    md5passcode: 'ec6a6536ca304edf844d1d248a4f08dc',
    length: '4',
    redirect: 'keychain.php'
  }
);

if($_GET['pass'] == md5('1234')) {
  session_start();
  $_SESSION['keychain'] = True;
  header('location: ../index.html');
}

• Passcode is 1234
• PHP used for back-end with a keychain session variable

Example with React

<IPhonePasscode length="4" title="Enter Passcode To Login" redirect="/checkpasscode">

• Passcode not exposed on client side, causing it reload page on each try