Package Exports

@kezoponk/iphonepasscode
@kezoponk/iphonepasscode/dist/iphonepasscode.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kezoponk/iphonepasscode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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