TouchID Demo/index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />

    <script src="cordova.js"></script>
    <script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>

    <script src="scripts/demo.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body>
    <!--Home View-->
    <div id="tabstrip-home"
        data-role="view"
        data-title="Plugin Info">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a id="skin-change" data-role="button" data-align="right" data-click="app.changeSkin">Flat</a>
            </div>
        </header>

        <div class="logo-image-wrapper">
  	      <div class="logo-image"></div>            
        </div>
        <h3>TouchID Plugin Demo</h3>
        <p>
          The TouchID plugin allows you to use the fingerprint scanner first introduced with the iPhone 5S.
          With this plugin you can replace traditional password / pincode login mechanisms by
          a convenient and secure biometric authentication mechanism.
        </p>
        <p>
          The developer can choose to offer a fallback method as well. To iOS passcode (typically a 4-digit code),
          or the plugin gives control back to the app so a custom password UI may be presented.
        </p>
        <p>
          Custom plugins don't work in the simulator and the AppBuilder companion app,
          so inside AppBuilder choose Run - Build - iOS - App package.
        </p>
        <p style="text-align:center; margin-top: 20px">
          <img src="styles/images/fingerprint.png" width="81px" height="129px"/>
        </p>
  </div>

    <!--Demo View-->
    <div id="tabstrip-demo"
        data-role="view"
        data-title="Plugin Demo"
        data-model="app.demoService.viewModel">

      <div class="demo">
        <h3 class="hassubtitle">Check availability</h3>
        <div class="subtitle">
          Only iOS devices with a TouchID fingerprintscanner running at least iOS 8 are supported.
          Also, the user must have Touch ID enabled in the settings for this check to succeed.
        </div>
        <button data-role="button" class="button" data-bind="click: checkAvailability">Is TouchID available?</button>

        <br/>
        <h3 class="hassubtitle">Authenticate</h3>
        <div class="subtitle">
          If for some reason a fingerprint can't be scanned, the user can be offered a fallback
          to iOS passcode (the first button), or the plugin gives control back to the app so a
          custom password UI may be presented.
        </div>
        <button data-role="button" class="button" data-bind="click: authenticateWithPasscodeFallback">Authenticate with passcode fallback</button>
        <button data-role="button" class="button" data-bind="click: authenticateWithCustomPasswordFallback">Authenticate with custom password fallback</button>
      </div>      
    </div>

    <!--Layout-->
    <div data-role="layout" data-id="tabstrip-layout">
        <!--Header-->
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <!--Footer-->
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#/" data-icon="info">info</a>
                <a href="#tabstrip-demo" data-icon="play">demo</a>
            </div>
        </div>
    </div>
</body>
</html>