Package Exports

@kezoponk/iphonepasscode

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
MD5 hash your numerical password twice: md5hashgenerator.com
A back-end is required to validate the passcode, see examples bellow

Options	Description
doublemd5password Required	MD5 a numerical password twice Example: 1234 > 81dc9bdb52d04dc20036dbd8313ed055 > ec6a6536ca304edf844d1d248a4f08dc
length Required	Length of password
redirect Required	Back-end file or directory to redirect if password is right
background Required	Button color
color Required	Color of button text and title text
title	Text appearing above password pins Default: Enter Password
title_color	Title text color Default: Same as 'color'
pin_background	Filled pin background Default: Same as 'color'
pin_border	Empty pin color Default: Same as 'color'
animation	Button press keyframes animation Default is same animation as the IPhone
animationDuration	Animation duration Default: 300ms
animationType	linear, ease-in, ease-in-out... etc Default:linear

new IPhonePasscode('#targetDiv', { Options });

Example 1 with PHP

<div class="index-password" id="iphonePasscode"></div>

new IPhonePasscode('#iphonePasscode', {
                     doublemd5password: 'ec6a6536ca304edf844d1d248a4f08dc',
                     length: '4',
                     background: 'white',
                     color: 'black',
                     redirect: '../php/keychain.php'});

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

Password is 1234
White buttons, black text
PHP used for back-end with a keychain session variable

Example 2 with Python Django

<div class="index-password" id="iphonePasscode"></div>

new IPhonePasscode('.index-password', {
                     doublemd5password: 'ec6a6536ca304edf844d1d248a4f08dc',
                     length: '4',
                     background: 'gray',
                     color: 'white',
                     animation: '100% { transform: rotate(360deg); }',
                     animationType: 'ease-out',
                     animationDuration: '0.8s',
                     title: 'Enter Password To Login',
                     redirect: '/checkpasscode/'});

def login_func(request):
    if request.GET['pass'] is '1234':
        return redirect('/loggedin/')

Password is 1234
Gray buttons, white text
Modified title
Ease-out rotate animation for 0.8s
Python django used for back-end