Initial commit
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9432647
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,14 @@
+.sass-cache
+bower_components
+browser/css
+browser/nbproject/
+browser/nbproject/private/
+build/out
+build/tmp/
+dist/
+mobile/in/
+mobile/nbproject/
+node_modules
+npm-debug.log
+settings.json
+
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..816bc61
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,201 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
diff --git a/NOTICE b/NOTICE
new file mode 100644
index 0000000..212d15e
--- /dev/null
+++ b/NOTICE
@@ -0,0 +1,5 @@
+Milagro MFA JavaScript Client
+Copyright 2015 The Apache Software Foundation
+
+This product includes software developed at
+The Apache Software Foundation (http://www.apache.org/).
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..67e71b0
--- /dev/null
+++ b/README.md
@@ -0,0 +1,43 @@
+M-Pin JavaScript Client
+=======================
+
+The **M-Pin System** consists of two groups of Services - Customer-hosted Services and Miracl-hosted Services.
+
+The third, but no less important component, is the *Client*. Currently there are two clients available - the Browser Client, also called the *PIN Pad*, and the *Mobile Client*, known as the Mobile App
+
+##PIN Pad
+
+The PIN Pad is a JavaScript software component that should be integrated into the Customer's Application Web Page. The PIN Pad encapsulates all the operations and logic that needs to be performed at the front-end, in order to register and authenticate an end-user.
+
+##Mobile App
+
+The Mobile App is a JavaScript application, much similar to the PIN Pad. The Mobile App also carries out the operations needed to register and authenticate an end-user, but the user is authenticated to a browser session, rather than to a session on the mobile device.
+
+##Building the PIN Pad
+
+1. NOTE: You might have to update your package distribution system. For Ubuntu you would need to do: `sudo apt-get update`
+2. Install *Node Package Manager* and *Node*. For instance on Ubuntu you need to do:
+ 1. `sudo apt-get install npm`
+ 2. `sudo npm install -g n`
+ 3. `sudo n 0.10.33`. NOTE that you need *curl* installed to do this.
+3. Install *grunt* and the required modules
+ 1. `sudo npm install -g grunt-cli`
+4. Install *handlebars* and the required modules
+ 1. `sudo npm install -g handlebars@3.0.1`
+5. Install *bower* and the required modules
+ 1. `sudo npm install -g bower`
+6. Checkout/Clone the repository to `<work-dir>`
+7. Install the locally required modules for Node
+ 1. `cd <work-dir>/browser` or `cd <work-dir>/mobile`
+ 2. `sudo npm install`
+8. Create `settings.json` file
+ 1. `cp settings.json_build settings.json`
+ 2. NOTE Available templates: milagro.
+9. Build the app
+ 1. `grunt build`
+
+The built app should be placed in `<work-dir>/build/out/browser` or `<work-dir>/build/out/mobile`.
+
+**NOTE** that the `settings.json` file that was created above, should be modified with the correct base URL for the PIN Pad resources and with the desired template. For more details see the bellow documentation.
+
+For further details on M-Pin Core, see the [M-Pin Core Documentation](http://docs.miracl.com/m-pin-core).
diff --git a/browser/Gruntfile.js b/browser/Gruntfile.js
new file mode 100644
index 0000000..c6e4cf5
--- /dev/null
+++ b/browser/Gruntfile.js
@@ -0,0 +1,155 @@
+module.exports = function (grunt) {
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ settings: grunt.file.readJSON('settings.json'),
+ sass: {
+ dist: {
+ files: {
+ '../build/out/browser/css/main.css': '../build/out/tmp/browser/sass/main.scss'
+ }
+ }
+ },
+ concat: {
+ options: {
+ separator: ';'
+ },
+ mergeJs: {
+ src: ['bower_components/milagro-crypto/js/DBIG.js', 'bower_components/milagro-crypto/js/BIG.js', 'bower_components/milagro-crypto/js/FP.js', 'bower_components/milagro-crypto/js/ROM.js', 'bower_components/milagro-crypto/js/HASH.js', 'bower_components/milagro-crypto/js/RAND.js', 'bower_components/milagro-crypto/js/AES.js', 'bower_components/milagro-crypto/js/GPM.js', 'bower_components/milagro-crypto/js/ECP.js', 'bower_components/milagro-crypto/js/FP2.js', 'bower_components/milagro-crypto/js/ECP2.js', 'bower_components/milagro-crypto/js/FP4.js', 'bower_components/milagro-crypto/js/FP12.js', 'bower_components/milagro-crypto/js/PAIR.js', 'bower_components/milagro-crypto/js/MPIN.js', 'bower_components/milagro-crypto/js/MPINAuth.js', '../libs/topLevelCode.js', 'bower_components/handlebars/handlebars.runtime.min.js', 'bower_components/qrcode/lib/qrcode.min.js', 'bower_components/handlebars/handlebars.runtime.min.js', 'bower_components/qrcodejs/qrcode.min.js', '../build/out/tmp/browser/templates.js', 'bower_components/milagro-mfa-js-lib/lib/mpin.js', 'js/mpin.js'],
+ dest: '../build/out/tmp/browser/mpin-all.js'
+ }
+ },
+ clean: {
+ build: {
+ cwd: '../build/',
+ files: 'out',
+ options: {
+ force: true
+ }
+ }
+ },
+ bgShell: {
+ createDir: {
+ cmd: "mkdir -p ../build/out/tmp/browser",
+ options: {
+ stdout: true
+ }
+ },
+ createTemplate: {
+ cmd: 'handlebars ./themes/<%= settings.templateName %>/views/*.handlebars -f ../build/out/tmp/browser/templates.js',
+ options: {
+ stdout: true
+ }
+ },
+ bowerInstall: {
+ cmd: 'bower install --allow-root',
+ options: {
+ stdout: true
+ }
+ },
+ replaceURLBASE: {
+ cmd: "sed 's#%URL_BASE%#<%= settings.URLBase %>#' ../build/out/tmp/browser/mpin-all.js > ../build/out/tmp/browser/mpin-url.js",
+ options: {
+ stdout: true
+ }
+ },
+ replaceTEMPLATENAME: {
+ cmd: "sed 's#%TEMPLATE_NAME%#<%= settings.templateName %>#' ../build/out/tmp/browser/mpin-url.js > ../build/out/tmp/browser/mpin.js",
+ options: {
+ stdout: true,
+ }
+ },
+ mkdirTmpSass: {
+ cmd: "mkdir -p ../build/out/tmp/browser/sass/templates",
+ options: {
+ stdout: true
+ }
+ },
+ copyTmpSass: {
+ cmd: "cp -r sass/* ../build/out/tmp/browser/sass/",
+ options: {
+ stdout: true
+ }
+ },
+ copyTmpFile: {
+ cmd: "cp -r themes/<%= settings.templateName %>/sass/_template.scss ../build/out/tmp/browser/sass/templates/",
+ options: {
+ stdout: true
+ }
+ },
+ createFolders: {
+ cmd: 'mkdir -p ../build/out/browser/images',
+ options: {
+ stdout: true
+ }
+ },
+ copyResources: {
+ cmd: 'cp -r themes/<%= settings.templateName %>/images/* ../build/out/browser/images/',
+ options: {
+ stdout: true
+ }
+ },
+ copyJs: {
+ cmd: 'cp -r ../build/out/tmp/browser/mpin.js ../build/out/browser/',
+ options: {
+ stdout: true
+ }
+ }
+ },
+ uglify: {
+ my_target: {
+ files: {
+ '../build/out/browser/mpin.js': ['../build/out/browser/mpin.js']
+ }
+ }
+ },
+ hashres: {
+ options: {
+ fileNameFormat: '${hash}.${name}.${ext}'
+ },
+ changeCss: {
+ expand: true,
+ cwd: '../build/out/browser/css',
+ src: 'main.css',
+ dest: 'mpin.js',
+ rename: function (d) {
+ return '../build/out/browser/mpin.js'
+ }
+ }
+ },
+ cssmin: {
+ target: {
+ files: [{
+ expand: true,
+ cwd: '../build/out/browser',
+ src: ['css/main.css'],
+ dest: 'css/main.css'
+ }]
+ }
+ },
+ watch: {
+ css: {
+ files: ['src/sass/*.scss', 'src/sass/templates/*.scss'],
+ tasks: ['sass']
+ },
+ views: {
+ files: 'src/views/*.html',
+ tasks: ['bgShell:makeViews']
+ }
+ }
+ });
+
+
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-bg-shell');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-hashres');
+ grunt.loadNpmTasks('grunt-replace');
+ grunt.loadNpmTasks('grunt-sass');
+ grunt.loadNpmTasks('grunt-contrib-cssmin');
+ grunt.loadNpmTasks('grunt-contrib-clean');
+
+ grunt.registerTask('default', ['watch']);
+ grunt.registerTask('build', ['clean:build', 'bgShell:createDir', 'bgShell:createTemplate', 'bgShell:bowerInstall', 'concat', 'bgShell', 'sass', 'bgShell:copyJs', 'hashres']);
+ grunt.registerTask('build-prod', ['clean:build', 'bgShell:createDir', 'bgShell:createTemplate', 'bgShell:bowerInstall', 'concat', 'bgShell', 'sass', 'cssmin', 'bgShell:copyJs', 'hashres', 'uglify']);
+}
diff --git a/browser/bower.json b/browser/bower.json
new file mode 100644
index 0000000..2d4f014
--- /dev/null
+++ b/browser/bower.json
@@ -0,0 +1,16 @@
+{
+ "name": "pinpad",
+ "version": "1.0.0",
+ "description": "JavaScript Client",
+ "authors": [
+ "MILAGRO"
+ ],
+ "dependencies": {
+ "milagro-crypto": "https://github.com/miracl/milagro-crypto.git#1.0.0",
+ "milagro-mfa-js-lib": "https://github.com/miracl/milagro-mfa-js-lib.git#1.0.0",
+ "qrcodejs": "0.1.0",
+ "handlebars": "~3.0.3"
+ },
+ "moduleType": "globals",
+ "main": "js/mpin.js"
+}
diff --git a/browser/index.html b/browser/index.html
new file mode 100644
index 0000000..e1c447f
--- /dev/null
+++ b/browser/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>M-Pin demo</title>
+<!-- <link href="/public/css/certivox.css?v=ee4d555e38d8c86110e6130f077bc6e2" rel="stylesheet" type="text/css" /> -->
+<link href="css/mpin.min.css?v=b7676587a6d88e2818ef2f1a7d1fdae6" rel="stylesheet" type="text/css" />
+<!-- Favicons
+================================================== -->
+<link rel="shortcut icon" href="/public/images/favicon.ico?v=206feb63bb8d6b052afb1192d57d83a7">
+<!-- Fonts
+================================================== -->
+<link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
+
+<script type="text/javascript" src="js/mpin.js?r=139636144551"></script>
+<script type="text/javascript">
+(function() {
+new mpin({
+targetElement: "pinHolder",
+clientSettingsURL: "http://192.168.10.114:8011/rps/clientSettings",
+mobileAppFullURL: "http://192.168.10.114:8005/m/index.html",
+// identityCheckRegex: /.*/,
+useWebSocket: false,
+onSuccessLogin: function(authData) {
+window.location = "/protected";
+}
+});
+})();
+</script>
+</head>
+<body>
+<div id="pinHolder" style="margin:auto; width:260px;">
+
+</div>
+</body>
+</html>
diff --git a/browser/js/mpin.js b/browser/js/mpin.js
new file mode 100644
index 0000000..52079bc
--- /dev/null
+++ b/browser/js/mpin.js
@@ -0,0 +1,2444 @@
+/*
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+ */
+
+var mpin = mpin || {};
+
+(function () {
+ "use strict";
+ var lang = {}, hlp = {}, loader, MPIN_URL_BASE, IMAGES_PATH, CSS_FILENAME, TEMPLATE_NAME;
+ MPIN_URL_BASE = "%URL_BASE%";
+ TEMPLATE_NAME = "%TEMPLATE_NAME%";
+ IMAGES_PATH = MPIN_URL_BASE + "/images/" + TEMPLATE_NAME + "/";
+
+ CSS_FILENAME = "main.css";
+
+ //CONSTRUCTOR
+ mpin = function (options) {
+ var self = this, domID;
+
+ loader(MPIN_URL_BASE + "/css/" + CSS_FILENAME, "css", function () {
+ var opts = {}, mpinServer, docLoc;
+
+ Handlebars.registerHelper("txt", function (optionalValue) {
+ return hlp.text(optionalValue);
+ });
+
+ Handlebars.registerHelper("img", function (optionalValue) {
+ return hlp.img(optionalValue);
+ });
+
+ Handlebars.registerHelper("loop", function (n, block) {
+ var accum = '';
+ for (var i = 0; i < n; ++i)
+ accum += block.fn(i);
+ return accum;
+ });
+ Handlebars.registerHelper("substr", function (longStr) {
+ if (longStr.length < 82) {
+ return longStr;
+ } else {
+ return longStr.substr(0, 82) + "...";
+ }
+ });
+
+
+ if (!options.clientSettingsURL) {
+ return self.error(4002);
+ }
+
+ self.currentDate = null;
+
+ //http || https
+ if (options.clientSettingsURL.indexOf("http") === -1) {
+ docLoc = document.location;
+ mpinServer = docLoc.protocol + "//" + docLoc.host;
+ } else {
+ var tmpSrv = options.clientSettingsURL.split("/");
+ mpinServer = tmpSrv[0] + "//" + tmpSrv[2];
+ }
+
+ self.mpinLib = new mpinjs({
+ server: mpinServer
+ });
+
+ domID = options.targetElement;
+ opts.client = options;
+
+ self.mpinLib.init(function (serverOptions) {
+ if (options || options.targetElement) {
+ self.el = document.getElementById(options.targetElement);
+ addClass(self.el, "mpinMaster");
+ self.setupHtml();
+ } else {
+ return console.error("::: TargetElement are missing or wrong !");
+ }
+ self.recover();
+
+ if (serverOptions && serverOptions.error) {
+ return self.error(serverOptions.error);
+ }
+ opts.server = serverOptions;
+
+ // check if Dom ready if not wait until fire load event.
+ if (document.readyState === "complete") {
+ self.initialize.call(self, domID, opts);
+ } else {
+ window.addEventListener("load", function () {
+ self.initialize.call(self, domID, opts);
+ });
+ }
+ });
+
+ });
+ };
+
+ //CONFIGS
+ mpin.prototype.cfg = {
+ language: "en",
+ pinSize: 4,
+ requiredOptions: "appID; seedValue; signatureURL; mpinAuthServerURL; timePermitsURL; authenticateURL; registerURL",
+ restrictedOptions: "signatureURL; mpinAuthServerURL; timePermitsURL",
+ renderMap: {"add": "renderAddIdentity", "home": "renderHome"},
+ defaultOptions: {
+ identityCheckRegex: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+ setDeviceName: false,
+ mobileSupport: true,
+ mobileOnly: false,
+ keyboardEnable: true,
+ mobileNativeApp: false
+ },
+ expireOtpSeconds: 99,
+ lastRequestDelay: 3000 //milliseconds
+ };
+
+ /**
+ * Mpin Constructor
+ *
+ * @param {type} domID PinPad element ID
+ * @param {type} options
+ *
+ * @returns {Boolean}
+ */
+ mpin.prototype.initialize = function (domID, options) {
+ this.addHelp();
+
+ //set Options
+ this.setDefaults().setOptions(options.client);
+
+ //if false browser unsupport
+ if (!this.checkBrowser()) {
+ return;
+ }
+
+ this.opts.mobileSupport = (this.opts.mobileAppFullURL) ? this.opts.mobileSupport : false;
+
+ //if set & exist
+ if (this.opts.language && lang[this.opts.language]) {
+ this.language = this.opts.language;
+ } else {
+ this.language = this.cfg.language;
+ }
+
+ this.setLanguageText();
+ this.renderLanding();
+ };
+
+ mpin.prototype.setupHtml = function () {
+ this.el.innerHTML = Handlebars.templates["mpin"]();
+ this.el = document.getElementById("mpinMiracle");
+ };
+
+ mpin.prototype.checkBrowser = function () {
+ var navAgent, onUnsupport = true, ieVer;
+ navAgent = navigator.userAgent.toLowerCase();
+
+ if (navAgent.indexOf('msie') !== -1) {
+ ieVer = parseInt(navAgent.split('msie')[1], 10);
+ if (ieVer < 10) {
+ this.unsupportedBrowser(4004);
+ onUnsupport = false;
+ }
+ }
+
+ if (typeof window.localStorage === "undefined") {
+ this.unsupportedBrowser(4005);
+ onUnsupport = false;
+ }
+
+ return onUnsupport;
+ };
+
+ mpin.prototype.unsupportedBrowser = function (errCode) {
+ var errMessage;
+ if (this.opts.onUnsupportedBrowser) {
+ errMessage = hlp.text("error_code_" + errCode);
+ this.opts.onUnsupportedBrowser(errMessage);
+ } else {
+ this.renderError(errCode);
+ }
+ return;
+ };
+
+ // check minimal required Options
+ // which should be set up
+ mpin.prototype.checkOptions = function (options) {
+ var opts, k;
+ opts = this.cfg.requiredOptions.split("; ");
+ for (k = 0; k < opts.length; k++) {
+ if (typeof options[opts[k]] === "undefined") {
+ return false;
+ }
+ }
+ return true;
+ };
+ //set defaults OPTIONS
+ mpin.prototype.setDefaults = function () {
+ this.opts || (this.opts = {});
+ for (var i in this.cfg.defaultOptions) {
+ this.opts[i] = this.cfg.defaultOptions[i];
+ }
+
+ this.opts.useWebSocket = ('WebSocket' in window && window.WebSocket.CLOSING === 2);
+
+ return this;
+ };
+ mpin.prototype.setOptions = function (options) {
+ var _i, _opts, _optionName, _options = "requestOTP; successSetupURL; onSuccessSetup; successLoginURL; onSuccessLogin; onLoaded; onGetPermit; ";
+ _options += "onAccountDisabled; onUnsupportedBrowser; prerollid; onError; onGetSecret; signatureURL; certivoxURL; ";
+ _options += "mpinAuthServerURL; registerURL; accessNumberURL; mobileAppFullURL; customHeaders; authenticateRequestFormatter; accessNumberRequestFormatter; ";
+ _options += "registerRequestFormatter; identityCheckRegex; seedValue; appID; useWebSocket; setupDoneURL; timePermitsURL; timePermitsStorageURL; authenticateURL; ";
+ _options += "language; customLanguageTexts; setDeviceName; getAccessNumberURL; mobileSupport; mobileOnly; keyboardEnable; landingPage; mobileNativeApp; mobileConfigURL";
+ _opts = _options.split("; ");
+ this.opts || (this.opts = {});
+ for (_i = 0; _i < _opts.length; _i++) {
+ _optionName = _opts[_i];
+ if (typeof options[_optionName] !== "undefined")
+ this.opts[_optionName] = options[_optionName];
+ }
+
+ MPINAuth.hash_val = this.opts.seedValue;
+
+ return this;
+ };
+ mpin.prototype.addHelp = function () {
+ var hlpHtml;
+ hlpHtml = Handlebars.templates["help-tooltip"]();
+ this.el.insertAdjacentHTML("afterend", hlpHtml);
+ this.elHelpOverlay = document.getElementById("mpinHelpTag");
+ this.elHelp = document.getElementById("mpinHelpContainer");
+ };
+ mpin.prototype.readyHtml = function (tmplName, tmplData) {
+ var data = tmplData, html;
+ html = Handlebars.templates[tmplName]({data: data, cfg: this.cfg});
+ if (html[0] !== "<") {
+ html = html.substr(1);
+ }
+ return html;
+ };
+ mpin.prototype.render = function (tmplName, callbacks, tmplData) {
+ var data = tmplData || {}, k, self = this, homeElem;
+ this.el.innerHTML = this.readyHtml(tmplName, data);
+ for (k in callbacks) {
+ if (document.getElementById(k)) {
+ document.getElementById(k).onclick = callbacks[k];
+ }
+ }
+
+ //mpin_home - can remove all mpin_home definition
+ homeElem = document.getElementById("mpin_home");
+ if (homeElem && !callbacks.mpin_home) {
+ homeElem.onclick = function () {
+ self.renderHome.call(self);
+ };
+ }
+ };
+ /**
+ * funciton setLanguageText
+ *
+ * replace lang with customLanguageTexts
+ */
+ mpin.prototype.setLanguageText = function () {
+ hlp.language = this.language;
+ // setLanguageText
+ if (this.opts.customLanguageTexts && this.opts.customLanguageTexts[this.language]) {
+ for (var k in this.opts.customLanguageTexts[this.language]) {
+ if (lang[this.language][k]) {
+ lang[this.language][k] = this.opts.customLanguageTexts[this.language][k];
+ }
+ }
+ }
+ };
+ mpin.prototype.toggleHelp = function () {
+ if (this.elHelpOverlay.style.display === "block") {
+ this.elHelpOverlay.style.display = "none";
+ this.elHelpOverlay.style.opacity = "0";
+ this.elHelp.style.display = "none";
+ } else {
+ this.elHelpOverlay.style.display = "block";
+ this.elHelpOverlay.style.opacity = "1";
+ this.elHelp.style.display = "block";
+ }
+ };
+ //////////////////////// //////////////////////// ////////////////////////
+ //////////////////////// RENDERS BEGIN FROM HERE
+ //////////////////////// //////////////////////// ////////////////////////
+
+ //landing Page
+ mpin.prototype.renderLanding = function () {
+ var self = this, totalAccounts, userId;
+
+ this.clrInterval();
+
+
+ //check for prerollid
+ if (this.opts.prerollid) {
+ userId = this.readIdentity();
+ //check if this identity is not register already !!!
+ if (userId !== this.opts.prerollid) {
+
+ var idenList = this.mpinLib.listUsers();
+ for (var uId in idenList) {
+ var uName = idenList[uId].userId;
+ if (uName === this.opts.prerollid) {
+ this.saveIdentity(uName);
+ this.setIdentity(uName, true, function () {
+ self.renderLogin.call(self);
+ });
+ return;
+ }
+ }
+
+ this.actionSetupHome(this.opts.prerollid);
+ return;
+ }
+ }
+
+ var identity = this.readIdentity();
+
+ if (identity) {
+ totalAccounts = this.mpinLib.listUsers();
+ totalAccounts = totalAccounts.length;
+ } else {
+ totalAccounts = 0;
+ }
+
+ //landingPage option
+ if (this.opts.landingPage && totalAccounts === 0) {
+ if (this.cfg.renderMap[this.opts.landingPage]) {
+ this[this.cfg.renderMap[this.opts.landingPage]]();
+ return;
+ }
+ }
+
+ if (this.opts.mobileOnly) {
+ this.renderMobile();
+ return;
+ }
+
+ if (totalAccounts >= 1) {
+ this.renderLogin();
+ return;
+ }
+
+
+ if (this.opts.mobileSupport && this.opts.requestOTP !== "1") {
+ this.renderMobile();
+ } else {
+ this.renderHome();
+ }
+ };
+
+ mpin.prototype.renderHome = function () {
+ var callbacks = {}, self = this;
+ //not set landingPage
+ if (this.opts.prerollid && !this.opts.landingPage) {
+ var userId = self.readIdentity();
+ //check if this identity is not register already !!!
+ if (userId !== this.opts.prerollid) {
+ this.actionSetupHome(this.opts.prerollid);
+ return;
+ }
+ }
+
+ if (this.opts.mobileOnly) {
+ self.renderMobile.call(self);
+ return;
+ } else if (!this.opts.mobileSupport) {
+ self.renderDesktop.call(self);
+ return;
+ }
+
+ callbacks.mpin_desktop = function () {
+ self.renderDesktop.call(self);
+ };
+ callbacks.mpin_mobile = function () {
+ self.renderMobile.call(self);
+ };
+ callbacks.mpin_help = function () {
+ self.lastView = "renderHome";
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "home");
+ };
+ //mobile SUPPORT :::
+ this.render('home', callbacks, {mobileSupport: this.opts.mobileSupport, mobileOnly: !this.opts.mobileOnly});
+ this.clrInterval.call(this);
+ if (this.opts.onLoaded) {
+ this.opts.onLoaded();
+ }
+ };
+ //new View redirect to
+ //0 identity - addIdentity
+ //1 identity - login
+ mpin.prototype.renderDesktop = function () {
+ var totalAccounts, identity;
+ identity = this.readIdentity();
+
+ if (identity) {
+ totalAccounts = this.mpinLib.listUsers();
+ totalAccounts = totalAccounts.length;
+ } else {
+ totalAccounts = 0;
+ }
+
+ if (totalAccounts === 0) {
+ if (this.opts.prerollid) {
+ this.actionSetupHome(this.opts.prerollid);
+ } else {
+ this.renderAddIdentity();
+ }
+ } else {
+ this.renderLogin();
+ }
+ };
+
+
+ mpin.prototype.clrInterval = function () {
+ if (this.intervalID) {
+ clearInterval(this.intervalID);
+ }
+ if (this.intervalID2) {
+ clearTimeout(this.intervalID2);
+ }
+
+ this.mpinLib.cancelMobileAuth();
+ };
+
+ // Access NUMBER
+ mpin.prototype.renderMobile = function () {
+ var callbacks = {}, self = this;
+
+ this.clrInterval();
+
+ if (this.opts.requestOTP === "1") {
+ this.renderMobileSetup();
+ return;
+ }
+
+ callbacks.mpin_home = function (evt) {
+ self.clrInterval.call(self);
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_action_setup = function () {
+ self.clrInterval.call(self);
+ if (self.opts.mobileConfigURL) {
+ self.renderMobileConfig.call(self);
+ } else {
+ self.renderMobileSetup.call(self);
+ }
+ };
+ callbacks.mpinLogo = function (evt) {
+ self.clrInterval.call(self);
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_desktop = function () {
+ self.clrInterval.call(self);
+ self.renderDesktop.call(self);
+ };
+ callbacks.mpin_access_help = function () {
+ self.lastView = "renderMobile";
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "landing1");
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderMobile";
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "landing2");
+ };
+
+ this.render("mobile", callbacks, {mobileOnly: !this.opts.mobileOnly});
+
+ setTimeout(function () {
+ self.getAccessNumber.call(self);
+ }, 0);
+ };
+
+ mpin.prototype.renderHelp = function (tmplName, callbacks, tmplData) {
+ var k, self = this;
+ tmplData = tmplData || {};
+ this.elHelp.innerHTML = this.readyHtml(tmplName, tmplData);
+ //parse directly to element...//handlebars cannot parse html tags...
+ document.getElementById("mpin_help_text").innerHTML = tmplData.helpText;
+ for (k in callbacks) {
+ if (document.getElementById(k)) {
+ document.getElementById(k).addEventListener('click', callbacks[k], false);
+ }
+ }
+
+ //close tooltip by pressing I
+ document.getElementById("mpinInfoCloseCorner").onclick = function () {
+ self.toggleHelp.call(self);
+ };
+ };
+ mpin.prototype.renderHelpTooltip = function (helpLabel) {
+ var callbacks = {}, self = this, helpText, secondBtn = "";
+ callbacks.mpin_help_ok = function () {
+ self.toggleHelp.call(self);
+ };
+
+ callbacks.mpin_help_more = function () {
+ self.clrInterval.call(self);
+ delete self.lastViewParams;
+ self.toggleHelp.call(self);
+ self.renderHelpHub.call(self);
+ };
+
+ if (helpLabel === "login" || helpLabel === "setup" || helpLabel === "loginerr") {
+ secondBtn = hlp.text("help_text_" + helpLabel + "_button");
+ if (helpLabel === "login" || helpLabel === "loginerr") {
+ this.isLoginScreen = true;
+ callbacks.mpin_help_second = function () {
+ self.toggleHelp.call(self);
+ self.renderLogin(true, "renderReactivatePanel");
+ };
+ } else if (helpLabel === "setup") {
+ callbacks.mpin_help_second = function () {
+ self.toggleHelp.call(self);
+ self.renderHelpHubPage.call(self, 5);
+ };
+ }
+ }
+
+ helpText = hlp.text("help_text_" + helpLabel);
+ this.renderHelp("help-tooltip-home", callbacks, {helpText: helpText, secondBtn: secondBtn});
+ };
+ mpin.prototype.renderHelpHub = function () {
+ var callbacks = {}, self = this;
+ callbacks.mpin_home = function () {
+ self.renderHome.call(self);
+ };
+ callbacks.mpin_hub_li1 = function () {
+ self.renderHelpHubPage.call(self, 1);
+ };
+ callbacks.mpin_hub_li2 = function () {
+ self.renderHelpHubPage.call(self, 2);
+ };
+ callbacks.mpin_hub_li3 = function () {
+ self.renderHelpHubPage.call(self, 3);
+ };
+ callbacks.mpin_hub_li4 = function () {
+ self.renderHelpHubPage.call(self, 4);
+ };
+ callbacks.mpin_hub_li5 = function () {
+ self.renderHelpHubPage.call(self, 5);
+ };
+ callbacks.mpin_hub_li6 = function () {
+ self.renderHelpHubPage.call(self, 6);
+ };
+ callbacks.mpin_hub_li7 = function () {
+ self.renderHelpHubPage.call(self, 7);
+ };
+ callbacks.mpin_hub_li8 = function () {
+ self.renderHelpHubPage.call(self, 8);
+ };
+ callbacks.mpin_hub_li9 = function () {
+ self.renderHelpHubPage.call(self, 9);
+ };
+ callbacks.mpin_hub_li10 = function () {
+ self.renderHelpHubPage.call(self, 10);
+ };
+ callbacks.mpin_hub_li11 = function () {
+ self.renderHelpHubPage.call(self, 11);
+ };
+ callbacks.mpin_close_hub = function () {
+ self.renderLastView.call(self);
+ };
+ this.render("help-hub", callbacks);
+ };
+ mpin.prototype.renderHelpHubPage = function (helpNumber) {
+ var callbacks = {}, self = this, tmplName;
+ callbacks.mpin_help_hub = function () {
+ self.renderHelpHub.call(self);
+ };
+ tmplName = "help-hub-" + helpNumber;
+ this.render(tmplName, callbacks);
+ };
+ //
+ mpin.prototype.renderLastView = function () {
+ var param1, param2;
+ //for render accounts
+ this.lastViewParams || (this.lastViewParams = []);
+ param1 = this.lastViewParams[0] || false;
+ param2 = this.lastViewParams[1] || false;
+ //call renderHome
+ this[this.lastView](param1, param2);
+ };
+ mpin.prototype.renderAddIdentity = function (email) {
+ var callbacks = {}, self = this, userId, deviceName = "", deviceNameHolder = "";
+ //set Temporary params if enter email and then press tooltip without submit request...
+ function setTemp () {
+ self.tmp || (self.tmp = {});
+ self.tmp.setupEmail = document.getElementById("emailInput").value;
+ if (self.opts.setDeviceName) {
+ self.tmp.setupDeviceName = document.getElementById("deviceInput").value;
+ }
+ }
+
+ callbacks.mpin_home = function () {
+ delete self.tmp;
+ self.renderHome.call(self);
+ };
+ callbacks.mpin_help = function () {
+ setTemp();
+ self.lastView = "renderAddIdentity";
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "addidentity");
+ };
+ callbacks.mpin_helphub = function () {
+ setTemp();
+ self.lastView = "renderAddIdentity";
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_setup = function () {
+ delete self.tmp;
+ self.actionSetupHome.call(self);
+ };
+ userId = (email) ? email : ((this.tmp && this.tmp.setupEmail) ? this.tmp.setupEmail : "");
+
+ //one for
+ if (this.opts.setDeviceName) {
+ //get from localStorage - already set
+ if (this.readIdentity("device")) {
+ deviceName = (this.tmp && this.tmp.setupDeviceName) ? this.tmp.setupDeviceName : this.readIdentity("device");
+ deviceNameHolder = deviceName;
+ } else {
+ //set only placeholder value
+ deviceName = (this.tmp && this.tmp.setupDeviceName) ? this.tmp.setupDeviceName : "";
+ deviceNameHolder = this.suggestDeviceName();
+ }
+
+ //devicename callback
+ callbacks.mpin_help_device = function () {
+ setTemp();
+ self.lastView = "renderAddIdentity";
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "devicename");
+ };
+ }
+
+ this.render("add-identity", callbacks, {setDeviceName: this.opts.setDeviceName});
+ //security Fixes
+ var emailField = document.getElementById("emailInput");
+ emailField.placeholder = hlp.text("setup_placeholder");
+ emailField.value = userId;
+ if (this.opts.setDeviceName) {
+ var deviceNameField = document.getElementById("deviceInput");
+ deviceNameField.placeholder = deviceNameHolder + " " + hlp.text("setup_device_default");
+ deviceNameField.value = deviceName;
+ }
+
+ document.getElementById("emailInput").focus();
+ };
+
+ mpin.prototype.renderAddIdentity2 = function () {
+ var renderElem, self = this, deviceName = "", deviceNameHolder = "";
+ this.lastViewParams = [true, "renderAddIdentity2"];
+ //set Temporary params if enter email and then press tooltip without submit request...
+ function setTemp () {
+ self.tmp || (self.tmp = {});
+ self.tmp.setup2Email = document.getElementById("emailInput").value;
+ if (self.opts.setDeviceName) {
+ self.tmp.setup2DeviceName = document.getElementById("deviceInput").value;
+ }
+ }
+
+ renderElem = document.getElementById("mpin_identities");
+ if (this.opts.setDeviceName) {
+ if (this.readIdentity("device")) {
+ deviceName = (this.tmp && this.tmp.setup2DeviceName) ? this.tmp.setup2DeviceName : this.readIdentity("device");
+ deviceNameHolder = deviceName;
+ } else {
+ deviceName = (this.tmp && this.tmp.setup2DeviceName) ? this.tmp.setup2DeviceName : "";
+ deviceNameHolder = this.suggestDeviceName();
+ }
+ }
+
+ renderElem.innerHTML = this.readyHtml("add-identity-2", {setDeviceName: this.opts.setDeviceName});
+ renderElem.style.top = "0px";
+ addClass("mpinCurrentIden", "mpHide");
+ //security Fixes
+ var emailValue, emailField = document.getElementById("emailInput");
+ emailField.placeholder = hlp.text("setup_placeholder");
+ emailValue = (this.tmp && this.tmp.setup2Email) ? this.tmp.setup2Email : "";
+ emailField.value = emailValue;
+ if (this.opts.setDeviceName) {
+ var deviceNameField = document.getElementById("deviceInput");
+ deviceNameField.placeholder = deviceNameHolder + " " + hlp.text("setup_device_default");
+ deviceNameField.value = deviceName;
+ }
+
+ if (document.getElementById("mpin_help")) {
+ document.getElementById("mpin_help").onclick = function () {
+ setTemp();
+ self.lastView = "renderLogin";
+ self.lastViewParams = [true, "renderAddIdentity2"];
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "addidentity");
+ };
+ }
+ if (document.getElementById("mpin_accounts_btn")) {
+ document.getElementById("mpin_accounts_btn").onclick = function (evt) {
+ self.renderLogin.call(self, true);
+ };
+ }
+
+ document.getElementById("mpin_arrow").onclick = function (evt) {
+ delete self.tmp;
+ self.toggleButton();
+ renderElem.style.top = "40px";
+ };
+
+ document.getElementById("mpin_setup").onclick = function () {
+ delete self.tmp;
+ self.actionSetupHome.call(self);
+ };
+
+ if (this.opts.setDeviceName && document.getElementById("mpin_help_device")) {
+ document.getElementById("mpin_help_device").onclick = function () {
+ setTemp();
+ self.lastView = "renderLogin";
+ self.lastViewParams = [true, "renderAddIdentity2"];
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "devicename");
+ };
+ }
+ };
+
+
+ mpin.prototype.renderOtp = function (authData) {
+ var callbacks = {}, self = this, leftSeconds, timerEl, timer2d, totalSec, timerExpire, drawTimer;
+ //check if properties for seconds exist
+ if (!authData.expireTime && !authData.nowTime) {
+ self.error(4016);
+ return;
+ }
+
+ //draw canvas Clock
+ drawTimer = function (expireOn) {
+ var start, diff;
+ diff = totalSec - expireOn;
+ start = -0.5 + ((diff / totalSec) * 2);
+ start = Math.round(start * 100) / 100;
+ timer2d.clearRect(0, 0, timerEl.width, timerEl.height);
+ timer2d.beginPath();
+ timer2d.strokeStyle = "#36424a";
+ timer2d.arc(21, 21, 18, start * Math.PI, 1.5 * Math.PI);
+ timer2d.lineWidth = 5;
+ timer2d.stroke();
+ };
+
+ function expire () {
+ leftSeconds = (leftSeconds) ? leftSeconds - 1 : Math.floor((timerExpire - (new Date())) / 1000);
+ if (leftSeconds > 0) {
+ if (document.getElementById("mpTimer")) {
+ document.getElementById("mpin_seconds").innerHTML = leftSeconds;
+ drawTimer(leftSeconds);
+ } else {
+ document.getElementById("mpin_seconds").innerHTML = leftSeconds + " " + hlp.text("mobileAuth_seconds");
+ }
+
+ } else {
+ //clear Interval and go to OTP expire screen.
+ clearInterval(self.intervalExpire);
+ self.renderOtpExpire();
+ }
+ }
+
+ callbacks.mpin_home = function () {
+ clearInterval(self.intervalExpire);
+ self.renderHome.call(self);
+ };
+ callbacks.mpin_cancel = function () {
+ clearInterval(self.intervalExpire);
+ self.renderLogin.call(self);
+ };
+ callbacks.mpin_help = function () {
+ clearInterval(self.intervalExpire);
+ self.lastView = "renderOtp";
+ self.renderHelpHub.call(self);
+ };
+
+ this.render("otp", callbacks);
+
+ document.getElementById("mpinOTPNumber").innerHTML = authData.otp;
+ if (document.getElementById("mpTimer")) {
+ timerEl = document.getElementById("mpTimer");
+ timer2d = timerEl.getContext("2d");
+ }
+ timerExpire = new Date();
+ totalSec = authData.ttlSeconds;
+ timerExpire.setSeconds(timerExpire.getSeconds() + totalSec);
+
+ expire();
+ this.intervalExpire = setInterval(expire, 1000);
+ };
+
+ mpin.prototype.renderOtpExpire = function () {
+ var callbacks = {}, self = this;
+ callbacks.mpin_login_now = function () {
+ self.renderLogin.call(self);
+ };
+ callbacks.mpin_help = function () {
+ self.lastView = "renderOtpExpire";
+ self.renderHelpHub.call(self);
+ };
+ this.render("otp-expire", callbacks);
+ };
+ mpin.prototype.suggestDeviceName = function () {
+ var suggestName, platform, browser;
+ platform = navigator.platform.toLowerCase();
+// browser = navigator.appCodeName;
+ browser = navigator.userAgent;
+ if (platform.indexOf("mac") !== -1) {
+ platform = "mac";
+ } else if (platform.indexOf("linux") !== -1) {
+ platform = "lin";
+ } else if (platform.indexOf("win") !== -1) {
+ platform = "win";
+ } else if (platform.indexOf("sun") !== -1) {
+ platform = "sun";
+ } else {
+ platform = "__";
+ }
+
+ if (browser.indexOf("Chrome") !== -1) {
+ browser = "Chrome";
+ } else if (browser.indexOf("MSIE") !== -1 || browser.indexOf("Trident") !== -1) {
+ browser = "Explorer";
+ } else if (browser.indexOf("Firefox") !== -1) {
+ browser = "Firefox";
+ } else if (browser.indexOf("Safari") !== -1) {
+ browser = "Safari";
+ } else {
+ browser = "_";
+ }
+
+ suggestName = platform + browser;
+ return suggestName;
+ };
+
+ mpin.prototype.renderSetup = function (email) {
+ var callbacks = {}, self = this;
+
+ this.tmp || (this.tmp = {});
+ this.tmp.email = (email && email != true) ? email : this.tmp.email;
+ //text || circle
+ this.setupInputType = "text";
+
+ callbacks.mpin_home = function (evt) {
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_clear = function () {
+ self.addToPin.call(self, "clear_setup");
+ };
+ //fix login ...
+ callbacks.mpin_login = function () {
+ var digitLen = self.pinpadInput.length;
+ if (digitLen === self.cfg.pinSize) {
+ self.actionSetup.call(self, email);
+ }
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderSetup";
+ delete self.lastViewParams;
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_help_pinpad = function () {
+ self.lastView = "renderSetup";
+ delete self.lastViewParams;
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "setup");
+ };
+ this.render("setup", callbacks, {email: this.tmp.email, pinSize: this.cfg.pinSize});
+ this.enableNumberButtons(true);
+ this.bindNumberButtons();
+
+ this.display(hlp.text("pinpad_setup_screen_text2"), false);
+
+ if (this.opts.prerollid) {
+ var userId = this.identity;
+
+ //check if this identity is not register already !!!
+ if (userId === this.opts.prerollid) {
+ document.getElementById("mpin_home").onclick = function () {
+ };
+ }
+ }
+ };
+
+ mpin.prototype.renderLogin = function (listAccounts, subView) {
+ var callbacks = {}, self = this;
+ var identity = this.readIdentity();
+ if (!identity) {
+ this.renderAddIdentity();
+ return;
+ }
+
+ callbacks.mpin_home = function (evt) {
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_clear = function () {
+ self.addToPin.call(self, "clear");
+ };
+ callbacks.mpin_arrow = function () {
+ self.addToPin.call(self, "clear");
+ self.toggleButton.call(self);
+ };
+ callbacks.mpin_login = function () {
+ self.actionLogin.call(self);
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderLogin";
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_help_pinpad = function () {
+ self.lastView = "renderLogin";
+ self.toggleHelp.call(self);
+ self.renderHelpTooltip.call(self, "login");
+ };
+ this.render("login", callbacks, {pinSize: this.cfg.pinSize});
+ this.enableNumberButtons(true);
+ this.bindNumberButtons();
+ //fix - there are two more conditions ...
+ if (listAccounts) {
+ self.display(hlp.text("pinpad_default_message"));
+ document.getElementById("mpinCurrentIden").innerHTML = identity;
+ this.toggleButton();
+ if (subView) {
+ this[subView]();
+ }
+ } else {
+ addClass("mpinUser", "mpinIdentityGradient");
+ this.setIdentity(identity, true, function () {
+ self.display(hlp.text("pinpad_default_message"));
+ }, function () {
+ return false;
+ });
+ }
+ };
+
+ mpin.prototype.renderExpire = function () {
+ var callbacks = {}, self = this;
+
+ callbacks.mpin_home = function (evt) {
+ self.renderHome.call(self, evt);
+ };
+
+ callbacks.mpin_access = function (evt) {
+ self.renderMobile.call(self, evt);
+ };
+
+ callbacks.mpin_action_setup = function () {
+ if (self.opts.mobileConfigURL) {
+ self.renderMobileConfig.call(self);
+ } else {
+ self.renderMobileSetup.call(self);
+ }
+ };
+
+ callbacks.mpin_desktop = function () {
+ self.renderDesktop.call(self);
+ };
+
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderExpire";
+ self.renderHelpHub.call(self);
+ };
+
+ this.render("an-expire", callbacks, {mobileOnly: !this.opts.mobileOnly});
+ this.clrInterval.call(this);
+ };
+
+ mpin.prototype.getAccessNumber = function () {
+ var self = this, drawTimer, timerEl, timer2d, totalSec, timerExpire, expire;
+
+ if (document.getElementById("mpTimer")) {
+ timerEl = document.getElementById("mpTimer");
+ timer2d = timerEl.getContext("2d");
+ }
+ //draw canvas Clock
+ drawTimer = function (expireOn) {
+ var start, diff;
+ diff = totalSec - expireOn;
+ start = -0.5 + ((diff / totalSec) * 2);
+ start = Math.round(start * 100) / 100;
+ timer2d.clearRect(0, 0, timerEl.width, timerEl.height);
+ timer2d.beginPath();
+ timer2d.lineCap = "line";
+ timer2d.strokeStyle = "#36424a";
+ timer2d.arc(21, 21, 18, start * Math.PI, 1.5 * Math.PI);
+ timer2d.lineWidth = 5;
+ timer2d.stroke();
+ };
+
+ expire = function () {
+ var expireAfter = Math.ceil((timerExpire - (new Date())) / 1000);
+ if (expireAfter <= 0) {
+ self.clrInterval.call(self);
+ // Set timer to 0
+ if (document.getElementById("mpTimer")) {
+ document.getElementById("mpin_seconds").innerHTML = 0;
+ drawTimer(0);
+ }
+ setTimeout(function () {
+ //final request
+ self._getAccess.call(self, 3);
+ self.renderExpire.call(self);
+ }, self.cfg.lastRequestDelay);
+ } else {
+ //////////////////////////////////////////Clockwise
+ ///// Check if Timer Element exist some template did not have timer
+ if (document.getElementById("mpTimer")) {
+ document.getElementById("mpin_seconds").innerHTML = expireAfter;
+ drawTimer(expireAfter);
+ } else {
+ document.getElementById("mpin_seconds").innerHTML = expireAfter + " " + hlp.text("mobileAuth_seconds");
+ }
+ }
+ };
+
+ this.mpinLib.getAccessNumber(function (err, data) {
+ if (err) {
+ return self.error(4014);
+ }
+
+ document.getElementById("mpinAccessNumber").innerHTML = data.accessNumber;
+ timerExpire = new Date();
+ totalSec = data.ttlSeconds;
+ timerExpire.setSeconds(timerExpire.getSeconds() + data.ttlSeconds);
+ expire();
+ self.intervalID = setInterval(expire, 1000);
+
+ self._getAccess.call(self, totalSec);
+
+ });
+ };
+
+ mpin.prototype._getAccess = function (totalSec) {
+ var self = this;
+ this.mpinLib.waitForMobileAuth(totalSec, 3, function (accErr, accData) {
+ if (accErr) {
+ return self.renderExpire.call(self);
+ }
+
+ self.successLogin.call(self, accData);
+ });
+ };
+
+ mpin.prototype.renderMobileSetup = function () {
+ var callbacks = {}, self = this, qrElem, mobileBtnText = "";
+ callbacks.mpin_home = function () {
+ self.renderHome.call(self);
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderMobileSetup";
+ self.renderHelpHub.call(self);
+ };
+
+ if (this.opts.requestOTP === "1") {
+ callbacks.mpinbtn_mobile = function () {
+ self.renderHome.call(self);
+ };
+ //
+ mobileBtnText = hlp.text("mobileGet_button_back");
+ } else {
+ callbacks.mpinbtn_mobile = function () {
+ self.renderMobile.call(self);
+ };
+ mobileBtnText = hlp.text("mobile_footer_btn2");
+ }
+
+ if (!this.opts.mobileAppFullURL) {
+ return this.error(4006);
+ }
+
+ // mobile Html5 or Native APP
+ if (this.opts.mobileNativeApp) {
+ this.render("mobile-setup", callbacks, {mobileButtonText: mobileBtnText});
+ } else {
+ this.render("mobile-setup-html5", callbacks, {mobileAppFullURL: this.opts.mobileAppFullURL, mobileButtonText: mobileBtnText});
+ qrElem = document.getElementById("mpin_qrcode");
+ new QRCode(qrElem, {
+ text: this.opts.mobileAppFullURL,
+ width: 129,
+ height: 129
+ });
+ }
+ };
+
+ mpin.prototype.renderMobileConfig = function () {
+ var callbacks = {}, self = this;
+
+ callbacks.mpin_home = function () {
+ self.renderHome.call(self);
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderMobileConfig";
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_mobile_app = function () {
+ self.renderMobileSetup();
+ };
+ callbacks.mpinbtn_mobile = function () {
+ self.renderMobile.call(self);
+ };
+ callbacks.mpin_mobile_app = function () {
+ self.renderMobileSetup();
+ };
+ callbacks.mpinbtn_mobile = function () {
+ self.renderMobile.call(self);
+ };
+
+ this.render("mobile-setup-config", callbacks);
+ new QRCode(document.getElementById("mpin_qrcode"), {
+ text: this.opts.mobileConfigURL,
+ width: 129,
+ height: 129
+ });
+ };
+
+ mpin.prototype.renderConfirmEmail = function () {
+ var callbacks = {}, self = this, email;
+ email = this.getDisplayName(this.identity);
+ callbacks.mpin_home = function (evt) {
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_helphub = function (evt) {
+ self.lastView = "renderConfirmEmail";
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_activate = function () {
+ if (self.checkBtn(this))
+ self.beforeRenderSetup.call(self, this);
+ };
+ callbacks.mpin_resend = function () {
+ if (self.checkBtn(this))
+ self.actionResend.call(self, this);
+ };
+ callbacks.mpin_accounts_btn = function () {
+ self.renderLogin.call(self, true);
+ };
+ this.render("confirm-email", callbacks, {email: email});
+ };
+
+ mpin.prototype.mpinButton = function (btnElem, busyText) {
+ var oldHtml = btnElem.innerHTML;
+ addClass(btnElem, "mpinBtnBusy");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(busyText) + "</span>";
+ return {
+ error: function (errorText) {
+ removeClass(btnElem, "mpinBtnBusy");
+ addClass(btnElem, "mpinBtnError");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(errorText) + "</span>";
+ setTimeout(function () {
+ removeClass(btnElem, "mpinBtnError");
+ btnElem.innerHTML = oldHtml;
+ }, 1500);
+ }, ok: function (okText) {
+ removeClass(btnElem, "mpinBtnBusy");
+ addClass(btnElem, "mpinBtnOk");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(okText) + "</span>";
+ setTimeout(function () {
+ removeClass(btnElem, "mpinBtnOk");
+ btnElem.innerHTML = oldHtml;
+ }, 1500);
+ }};
+ };
+
+ mpin.prototype.renderConfirmEmail = function (email) {
+ var callbacks = {}, self = this;
+
+ callbacks.mpin_home = function (evt) {
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_helphub = function (evt) {
+ self.lastView = "renderConfirmEmail";
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_activate = function () {
+ if (self.checkBtn(this))
+ self.beforeRenderSetup.call(self, this, email);
+ };
+ callbacks.mpin_resend = function () {
+ if (self.checkBtn(this))
+ self.actionResend.call(self, this, email);
+ };
+ callbacks.mpin_accounts_btn = function () {
+ self.renderLogin.call(self, true);
+ };
+ this.render("confirm-email", callbacks, {email: email});
+ };
+
+ mpin.prototype.mpinButton = function (btnElem, busyText) {
+ var oldHtml = btnElem.innerHTML;
+ addClass(btnElem, "mpinBtnBusy");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(busyText) + "</span>";
+ return {
+ error: function (errorText) {
+ removeClass(btnElem, "mpinBtnBusy");
+ addClass(btnElem, "mpinBtnError");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(errorText) + "</span>";
+ setTimeout(function () {
+ removeClass(btnElem, "mpinBtnError");
+ btnElem.innerHTML = oldHtml;
+ }, 1500);
+ }, ok: function (okText) {
+ removeClass(btnElem, "mpinBtnBusy");
+ addClass(btnElem, "mpinBtnOk");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(okText) + "</span>";
+ setTimeout(function () {
+ removeClass(btnElem, "mpinBtnOk");
+ btnElem.innerHTML = oldHtml;
+ }, 1500);
+ }};
+ };
+
+//custom render
+ mpin.prototype.renderAccountsPanel = function () {
+ var self = this, renderElem, c = 0, defaultIdentity;
+ if (!this.identity) {
+ self.setIdentity(self.readIdentity(), false);
+ }
+
+ // Add logic to close the identity screen
+ var menuBtn = document.getElementById('mpin_arrow');
+ addClass(menuBtn, "mpinAUp");
+ //inner ELEMENT
+ renderElem = document.getElementById("mpin_identities");
+ renderElem.innerHTML = this.readyHtml("accounts-panel", {mobileSupport: this.opts.mobileSupport});
+ renderElem.style.display = "block";
+ // button
+ document.getElementById("mpin_add_identity").onclick = function () {
+ if (document.getElementById("mpinCurrentIdentityTitle")) {
+ addClass("mpinCurrentIdentityTitle", "mpHide");
+ }
+ self.renderAddIdentity2.call(self);
+ };
+ // button
+ if (this.opts.mobileSupport) {
+ document.getElementById("mpin_phone").onclick = function () {
+ self.renderMobileSetup.call(self);
+ };
+ }
+
+ //arrow show pinpad
+ menuBtn.onclick = function () {
+ document.getElementById('mpinUser').style.height = "";
+ removeClass(menuBtn, 'mpinClose');
+ //setIdentity if empty
+
+ if (document.getElementById("mpinUser").innerHTML === "") {
+ self.setIdentity(self.readIdentity(), true, function () {
+ self.display(hlp.text("pinpad_default_message"));
+ }, function () {
+ return false;
+ });
+ }
+
+ self.toggleButton.call(self);
+ };
+ //default IDENTITY
+ var cnt = document.getElementById("mpin_accounts_list");
+ defaultIdentity = this.readIdentity();
+ if (defaultIdentity) {
+ this.addUserToList(cnt, defaultIdentity, true, 0);
+ }
+ //bug1 default identity
+ var userList = this.mpinLib.listUsers();
+ for (var i in userList) {
+ c += 1;
+ if (userList[i].userId != defaultIdentity)
+ this.addUserToList(cnt, userList[i].userId, false, c);
+ }
+ };
+ mpin.prototype.renderUserSettingsPanel = function (iD) {
+ var renderElem, self = this;
+ //lastView settings
+ this.lastViewParams = [true, "renderUserSettingsPanel"];
+ this.isLoginScreen = false;
+ renderElem = document.getElementById("mpinUser");
+ renderElem.innerHTML = this.readyHtml("user-settings", {name: iD});
+ this.lastView = "renderUserSettingsPanel";
+ document.getElementById("mpin_deluser_btn").onclick = function (evt) {
+ self.renderDeletePanel.call(self, iD);
+ };
+ document.getElementById("mpin_reactivate_btn").onclick = function (evt) {
+ self.renderReactivatePanel.call(self, iD);
+ };
+ document.getElementById("mpin_cancel_btn").onclick = function (evt) {
+ self.renderLogin.call(self, true);
+ };
+ };
+
+ mpin.prototype.renderReactivatePanel = function (iD) {
+ var renderElem, name, self = this;
+ name = iD;
+ this.lastViewParams = [true, "renderReactivatePanel"];
+ renderElem = document.getElementById("mpinUser");
+ renderElem.innerHTML = this.readyHtml("reactivate-panel", {name: name});
+ document.getElementById("mpin_reactivate_btn").onclick = function () {
+ self.mpinLib.deleteUser(iD);
+ self.actionSetupHome.call(self, iD);
+ };
+ document.getElementById("mpin_cancel_btn").onclick = function () {
+ self.renderLogin.call(self, !self.isLoginScreen);
+ };
+ };
+ mpin.prototype.renderDeletePanel = function (iD) {
+ var renderElem, name, self = this;
+ name = iD;
+ this.lastViewParams = [true, "renderDeletePanel"];
+ renderElem = document.getElementById("mpinUser");
+ addClass(renderElem, "mpPaddTop10");
+ renderElem.innerHTML = this.readyHtml("delete-panel", {name: name});
+ document.getElementById("mpin_deluser_btn").onclick = function (evt) {
+ self.deleteIdentity(iD);
+ };
+ document.getElementById("mpin_cancel_btn").onclick = function (evt) {
+ self.renderLogin.call(self, true);
+ };
+ };
+ mpin.prototype.renderSetupDone = function () {
+ var callbacks = {}, self = this, userId;
+ userId = this.readIdentity() || this.identity;
+ callbacks.mpin_home = function () {
+ self.renderHome.call(self);
+ };
+ callbacks.mpin_login_now = function () {
+ self.renderLogin.call(self);
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderSetupDone";
+ self.renderHelpHub.call(self);
+ };
+ this.render("setup-done", callbacks, {userId: userId});
+ };
+ //after warning
+ mpin.prototype.renderRevokeIdentity = function (userId) {
+ var callbacks = {}, self = this;
+ callbacks.mpin_home = function () {
+ self.renderHome.call(self);
+ };
+
+ callbacks.mp_action_go = function () {
+ self.renderAddIdentity.call(self, userId);
+ };
+
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderRevokeIdentity";
+ self.lastViewParams = [userId];
+ self.renderHelpHub.call(self);
+ };
+ callbacks.mpin_accounts_btn = function () {
+ self.renderLogin.call(self, true);
+
+ };
+ this.render("revoke-identity", callbacks, {userId: userId});
+ };
+
+ mpin.prototype.addUserToList = function (cnt, uId, isDefault, iNumber) {
+ var rowClass, self = this, name, userRow;
+ rowClass = (isDefault) ? "mpinRow mpinRowActive" : "mpinRow";
+ name = uId;
+ userRow = document.createElement("li");
+ userRow.setAttribute("data-identity", uId);
+ userRow.className = rowClass;
+ userRow.innerHTML = Handlebars.templates['user-row']({data: {name: name}});
+ //security Fixes
+ userRow.children[0].id = "mpin_settings_" + iNumber;
+ userRow.children[1].title = name;
+ userRow.children[1].setAttribute("alt", name);
+ cnt.appendChild(userRow);
+ document.getElementById("mpin_settings_" + iNumber).onclick = function (ev) {
+ self.renderUserSettingsPanel.call(self, uId);
+ ev.stopPropagation();
+ return false;
+ };
+ userRow.onclick = function () {
+ self.saveIdentity(uId);
+ self.setIdentity(uId, true, function () {
+ self.display(hlp.text("pinpad_default_message"));
+ }, function () {
+ self.error(4008);
+ return false;
+ });
+ return false;
+ };
+ userRow.ondblclick = function () {
+ self.toggleButton.call(self);
+ };
+ };
+ //prevent mpin button multi clicks
+ mpin.prototype.checkBtn = function (btnElem) {
+ var btnClass = btnElem.className;
+ return (btnClass.indexOf("mpinBtnBusy") === -1 && btnClass.indexOf("mpinBtnError") === -1 && btnClass.indexOf("mpinBtnOk") === -1);
+ };
+ mpin.prototype.renderIdentityNotActive = function (email) {
+ var callbacks = {}, self = this;
+ email = (email) ? email : this.identity;
+
+ var usrState = this.mpinLib.getUser(email, "state");
+ if (usrState === "ACTIVATED") {
+ this.mpinLib.deleteUser(email);
+ this.actionSetupHome(email);
+ return;
+ }
+
+ callbacks.mp_action_home = function (evt) {
+ self.renderHome.call(self, evt);
+ };
+ callbacks.mpin_activate_btn = function () {
+ if (self.checkBtn(this))
+ self.beforeRenderSetup.call(self, this, email);
+ };
+ callbacks.mpin_resend_btn = function () {
+ if (self.checkBtn(this))
+ self.actionResend.call(self, this, email);
+ };
+ callbacks.mpin_accounts_btn = function () {
+ self.renderLogin.call(self, true);
+ };
+ callbacks.mpin_helphub = function () {
+ self.lastView = "renderIdentityNotActive";
+ self.lastViewParams = [email];
+ self.renderHelpHub.call(self);
+ };
+ this.render("identity-not-active", callbacks, {email: email});
+ };
+ mpin.prototype.bindNumberButtons = function () {
+ var self = this, btEls;
+ btEls = document.getElementsByClassName("mpinPadBtn");
+ for (var i = 0; i < btEls.length; i++) {
+ btEls[i].onclick = function (el) {
+ self.addToPin(el.target.getAttribute("data-value"));
+ return false;
+ };
+ }
+
+ this.bindKeys();
+ };
+
+ mpin.prototype.bindKeys = function () {
+ var self = this, nool = function () {
+ };
+ if (this.opts.keyboardEnable && !this.keyprs && !this.keyprs2) {
+ this.keyprs = true;
+ document.removeEventListener("keypress", nool);
+ document.removeEventListener("keydown", nool);
+ document.addEventListener("keypress", function (evt) {
+ var code = !evt.which ? evt.keyCode : evt.which;
+ if (document.activeElement && document.activeElement.hasAttribute("type")) {
+ return;
+ }
+ if (code >= 48 && code <= 57 && self.pinpadInput.length < self.cfg.pinSize) {
+ self.addToPin(code - 48);
+ } else if (code == 88 || code == 120 || code == 27) {
+ self.addToPin('clear');
+ } else if (code == 13 && self.pinpadInput.length === self.cfg.pinSize) {
+ document.getElementById("mpin_login").onclick();
+ }
+ });
+ //escape keydown
+ document.addEventListener("keydown", function (evt) {
+ self.keyprs2 = true;
+ var code = !evt.which ? evt.keyCode : evt.which;
+ if (document.activeElement && document.activeElement.hasAttribute("type")) {
+ return;
+ }
+ if (code === 27) {
+ self.addToPin("clear");
+ } else if (code === 13 && self.pinpadInput.length === self.cfg.pinSize) {
+ document.getElementById("mpin_login").onclick();
+ } else if (code === 8) {
+ self.removePin();
+ evt.preventDefault();
+ }
+ });
+ }
+ };
+ // remove last PIN
+ mpin.prototype.removePin = function () {
+ var _leng = this.pinpadInput.length, _lastPinElem, _clearType;
+ _lastPinElem = document.getElementById("mpin_circle_" + (_leng - 1));
+ if (_lastPinElem && _lastPinElem.childNodes[3]) {
+ _lastPinElem.removeChild(_lastPinElem.childNodes[3]);
+ this.pinpadInput = this.pinpadInput.slice(0, -1);
+ }
+
+ //new size - Disable Login || Clear
+ if (this.pinpadInput.length === 0) {
+ _clearType = (document.getElementById("mpin_arrow")) ? "clear" : "clear_setup";
+ this.addToPin(_clearType);
+ } else if (this.pinpadInput.length === (this.cfg.pinSize - 1)) {
+ this.enableButton(false, "go");
+ this.enableNumberButtons(true);
+ }
+ };
+
+ mpin.prototype.enableNumberButtons = function (enable) {
+ var els = document.getElementsByClassName("mpinPadBtn");
+ for (var i = 0; i < els.length; i++) {
+ var element = els[i];
+ if (enable && !element.id) {
+ element.className = "mpinPadBtn";
+ element.disabled = false;
+ } else if (!element.id) {
+ element.className = "mpinPadBtn mpinBtnDisabled";
+ element.disabled = true;
+ }
+ }
+ };
+ //
+ mpin.prototype.addToPin = function (digit) {
+ var digitLen;
+ this.pinpadInput || (this.pinpadInput = "");
+ this.pinpadInput += digit;
+ digitLen = this.pinpadInput.length;
+ if (this.setupInputType === "text") {
+ addClass("mpin_input_text", "mpHide");
+ removeClass("mpin_input_circle", "mpHide");
+ removeClass("mpin_input_parent", "mpinInputError");
+ this.setupInputType = "circle";
+ }
+
+ if (digitLen <= this.cfg.pinSize) {
+ this.display();
+ }
+
+ if (digitLen === 1) {
+ this.enableButton(true, "clear");
+ } else if (digitLen === this.cfg.pinSize) {
+ this.enableNumberButtons(false);
+ this.enableButton(true, "go");
+ }
+
+ //click clear BUTTON
+ if (digit === 'clear') {
+ this.display(hlp.text("pinpad_default_message"));
+ this.enableNumberButtons(true);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ removeClass("mpin_inner_text", "mpinInputErrorText");
+ } else if (digit === 'clear_setup') {
+ this.display(hlp.text("pinpad_setup_screen_text2"), false);
+ this.enableNumberButtons(true);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ }
+ };
+ /**
+ * wrap all buttons function inside ...
+ *
+ * @param {type} enable
+ * @param {type} buttonName
+ * @returns {undefined}
+ */
+ mpin.prototype.enableButton = function (enable, buttonName) {
+ var buttonValue = {}, _element;
+ buttonValue.go = {id: "mpin_login", trueClass: "mpinPadBtn2", falseClass: "mpinPadBtn2 mpinBtnDisabled"};
+ buttonValue.clear = {id: "mpin_clear", trueClass: "mpinPadBtn2", falseClass: "mpinPadBtn2 mpinBtnDisabled"};
+ buttonValue.toggle = {id: "mp_toggleButton", trueClass: "mp_DisabledState", falseClass: ""};
+ _element = document.getElementById(buttonValue[buttonName].id);
+ if (!buttonValue[buttonName] || !_element) {
+ return;
+ }
+
+ _element.disabled = !enable;
+ _element.className = buttonValue[buttonName][enable + "Class"];
+ };
+ //showInPinPadDisplay
+ mpin.prototype.display = function (message, isErrorFlag) {
+ var removeCircles, self = this, textElem;
+ removeCircles = function () {
+ var pinSize = self.cfg.pinSize + 1, circles = [];
+ for (var i = 1; i < pinSize; i++) {
+ circles[i] = document.getElementById("mpin_circle_" + i);
+ if (circles[i] && circles[i].childNodes[3]) {
+ circles[i].removeChild(circles[i].childNodes[3]);
+ }
+ }
+ };
+ textElem = document.getElementById("mpin_inner_text");
+ if (!message && !isErrorFlag) {
+
+ var newCircle = document.createElement('div');
+ newCircle.className = "mpinCircleIn";
+ var circleID = "mpin_circle_" + (this.pinpadInput.length - 1);
+ if (document.getElementById(circleID))
+ document.getElementById(circleID).appendChild(newCircle);
+ } else if (!isErrorFlag) {
+ removeCircles();
+ this.pinpadInput = "";
+ removeClass("mpin_input_text", "mpHide");
+ removeClass("mpin_inner_text", "mpinInputErrorText");
+ addClass("mpin_input_circle", "mpHide");
+ this.setupInputType = "text";
+ if (textElem) {
+ textElem.innerHTML = message;
+ }
+ } else {
+ //error MESSAGE
+ removeCircles();
+ this.pinpadInput = "";
+ removeClass("mpin_input_text", "mpHide");
+ addClass("mpin_input_parent", "mpinInputError");
+ addClass("mpin_inner_text", "mpinInputErrorText");
+ addClass("mpin_input_circle", "mpHide");
+ this.setupInputType = "text";
+ if (textElem) {
+ textElem.innerHTML = message;
+ }
+ }
+ };
+ mpin.prototype.getDisplayName = function (uId) {
+ if (!uId)
+ uId = this.identity;
+ try {
+ return JSON.parse(mp_fromHex(uId)).userID;
+ } catch (err) {
+ return uId;
+ }
+ };
+ mpin.prototype.toggleButton = function () {
+ var pinpadElem, idenElem, menuBtn, userArea, identity;
+ pinpadElem = document.getElementById("mpin_pinpad");
+ idenElem = document.getElementById("mpin_identities");
+ menuBtn = document.getElementById("mpin_arrow");
+ userArea = document.getElementById("mpinUser");
+ if (!pinpadElem) {
+ return;
+ }
+
+ //list identities
+ if (menuBtn && !menuBtn.classList.contains("mpinAUp")) {
+ this.lastViewParams = [true];
+ addClass(userArea, "mpUserFat");
+ addClass(menuBtn, "mpinClose");
+ this.renderAccountsPanel();
+ removeClass("mpinUser", "mpinIdentityGradient");
+ //only for new design
+ var titleElem = document.getElementById("mpinCurrentIdentityTitle");
+ if (titleElem) {
+ titleElem.innerHTML = hlp.text("identity_current_title");
+ titleElem.style.lineHeight = "24px";
+ addClass("mpinCurrentIden", "mpHide");
+ }
+
+ } else {
+ //if identity not Active render ACTIVATE
+ var usrState = this.mpinLib.getUser(this.identity, "state");
+
+ //new flow v0.3
+ if (usrState !== "REGISTERED") {
+ this.renderIdentityNotActive(this.identity);
+ return;
+ }
+
+ //clear padScreen on flip screens
+ this.addToPin("clear");
+ removeClass(userArea, "mpUserFat");
+ addClass(userArea, "mpUserSlim");
+ removeClass(menuBtn, "mpinAUp");
+ //if come from add identity remove HIDDEN
+ removeClass("mpinCurrentIden", "mpHide");
+ addClass("mpinUser", "mpinIdentityGradient");
+ this.lastViewParams = [false];
+ //only for new design
+ var titleElem = document.getElementById("mpinCurrentIdentityTitle");
+ if (titleElem) {
+ titleElem.innerHTML = hlp.text("login_current_label");
+ titleElem.style.lineHeight = "12px";
+ removeClass("mpinCurrentIden", "mpHide");
+ removeClass(titleElem, "mpHide");
+ }
+ }
+ return false;
+ };
+
+ //error PAGE
+ mpin.prototype.renderError = function (error) {
+ var callbacks = {}, errorMsg, self = this, errorCode = "";
+ if (error === parseInt(error)) {
+ if (!hlp.language) {
+ hlp.language = this.cfg.language;
+ }
+ errorCode = (error === 4009) ? hlp.text("error_not_auth") : error;
+ errorMsg = hlp.text("error_code_" + error);
+ } else {
+ errorMsg = error;
+ }
+
+ callbacks.mpin_cancel = function () {
+ self.renderHome.call(self);
+ };
+ this.render("error", callbacks, {errorMsg: errorMsg, errorCode: errorCode});
+ };
+
+ mpin.prototype.actionSetupHome = function (uId) {
+ var self = this, _email, _deviceName, _deviceNameInput, removeError, elems = [];
+
+ _email = (uId) ? uId : document.getElementById("emailInput").value;
+ _deviceNameInput = (document.getElementById("deviceInput")) ? document.getElementById("deviceInput").value.trim() : "";
+
+ if ((_email.length === 0 || !this.opts.identityCheckRegex.test(_email)) && !(this.opts.prerollid)) {
+ document.getElementById("emailInput").focus();
+
+ elems[0] = document.getElementsByClassName("mpinLabel")[0];
+ elems[1] = document.getElementsByClassName("mpinInputAdd")[0];
+ elems[2] = document.getElementById("emailInput");
+
+ elems[3] = document.getElementById("emailInput");
+
+ removeError = function () {
+ elems[0].className = "mpinLabel";
+ elems[1].className = "mpinInputAdd";
+ elems[2].className = "mpinInput";
+
+ elems[3].removeEventListener("keypress");
+ };
+
+ elems[0].className += " mpinLabelErr";
+ elems[1].className += " mpinLeftErr";
+ elems[2].className += " mpinInputErr";
+
+ elems[3].removeEventListener("keypress", function () {
+ });
+ elems[3].addEventListener("keypress", removeError);
+
+ return;
+ }
+
+ _deviceNameInput = (document.getElementById("deviceInput")) ? document.getElementById("deviceInput").value.trim() : "";
+ //DEVICE NAME
+ if (!this.readIdentity("device") && _deviceNameInput === "") {
+ _deviceName = this.suggestDeviceName();
+ } else if (!this.readIdentity("device") && _deviceNameInput !== "") {
+ _deviceName = _deviceNameInput;
+ } else if (_deviceNameInput !== this.readIdentity("device")) {
+ _deviceName = _deviceNameInput;
+ } else {
+ _deviceName = false;
+ }
+
+ if (this.opts.setDeviceName) {
+ _deviceNameInput = (_deviceNameInput === "") ? this.suggestDeviceName() : _deviceNameInput;
+ this.mpinLib.makeNewUser(_email, _deviceNameInput);
+ this.saveIdentity(_email, _deviceNameInput);
+ } else {
+ this.mpinLib.makeNewUser(_email);
+ this.saveIdentity(_email);
+ }
+
+ this.mpinLib.startRegistration(_email, function (regErr, regData) {
+ if (regErr && regErr.status === 403) {
+ self.deleteIdentity(_email);
+ self.error(4009);
+ return;
+ } else if (regErr) {
+ self.error(4010);
+ return;
+ }
+
+ self.mpinLib.confirmRegistration(_email, function (conErr, conData) {
+ if (conErr) {
+ self.renderConfirmEmail.call(self, _email);
+ return;
+ }
+
+ self.renderSetup.call(self, _email);
+ });
+ });
+ };
+
+ mpin.prototype.beforeRenderSetup = function (btnElem, email) {
+ var self = this, btn;
+
+ btnElem && (btn = this.mpinButton(btnElem, "setupNotReady_check_info1"));
+ this.mpinLib.confirmRegistration(email, function (conErr, conData) {
+ if (conErr && conErr.type === "IDENTITY_NOT_VERIFIED") {
+ btn && btn.error("setupNotReady_check_info2");
+ return;
+ } else if (conErr && conErr.type === "WRONG_FLOW") {
+ btn && btn.error("setupNotReady_check_expire");
+ return;
+ } else if (conErr) {
+ self.error(4013);
+ return;
+ }
+
+ self.renderSetup.call(self, email);
+ });
+ };
+
+ mpin.prototype.error = function (msg) {
+ if (this.opts && this.opts.onError) {
+ this.opts.onError(msg);
+ } else if (msg === parseInt(msg)) {
+ this.renderError(msg);
+ } else {
+ console.error("Error : " + msg);
+ }
+ };
+
+ mpin.prototype.actionResend = function (btnElem, email) {
+ var btn;
+
+ btn = this.mpinButton(btnElem, "setupNotReady_resend_info1");
+
+ this.mpinLib.restartRegistration(email, function (err, data) {
+ if (err) {
+ btn.error();
+ return;
+ }
+
+ btn.ok("setupNotReady_resend_info2");
+ });
+ };
+
+ mpin.prototype.actionSetup = function (email) {
+ var userId, userPin, res;
+
+ userId = email;
+ userPin = this.pinpadInput;
+ this.display("Verifying PIN...");
+ res = this.mpinLib.finishRegistration(userId, userPin);
+
+ if (res && res.code) {
+ console.log("error");
+ } else {
+ this.successSetup();
+ }
+ };
+
+ mpin.prototype.actionLogin = function () {
+ var self = this, usrIdentity, pinValue, authFunc;
+ usrIdentity = this.readIdentity();
+ pinValue = this.pinpadInput;
+ this.enableNumberButtons(false);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ this.enableButton(true, "toggle");
+ this.display(hlp.text("authPin_pleasewait"));
+
+ authFunc = (self.opts.requestOTP) ? this.mpinLib.finishAuthenticationOtp : this.mpinLib.finishAuthentication;
+
+ authFunc.call(this.mpinLib, usrIdentity, pinValue, function (authErr, authData) {
+ var usrState;
+ if (authErr) {
+ switch (authErr.type) {
+ case "WRONG_PIN":
+ usrState = self.mpinLib.getUser(usrIdentity, "state");
+ if (usrState === "BLOCKED") {
+ var iD = self.readIdentity();
+ self.deleteIdentity(iD, true);
+ if (self.opts.onAccountDisabled) {
+ self.opts.onAccountDisabled(iD);
+ }
+ return;
+ } else {
+ self.display(hlp.text("authPin_errorInvalidPin"), true);
+ }
+ break;
+ case "IDENTITY_NOT_AUTHORIZED":
+ self.display(hlp.text("authPin_errorNotAuthorized"), true);
+ break;
+ case "REQUEST_EXPIRED":
+ self.display(hlp.text("authPin_errorExpired"), true);
+ break;
+ default:
+ self.display(hlp.text("authPin_errorServer"), true);
+ }
+
+ self.enableNumberButtons(true);
+ self.enableButton(false, "go");
+ self.enableButton(false, "clear");
+ self.enableButton(true, "toggle");
+ return;
+ }
+
+ if (self.opts.requestOTP) {
+ self.renderOtp(authData);
+ return;
+ }
+
+ self.successLogin(authData);
+ });
+ };
+
+ mpin.prototype.setIdentity = function (newIdentity, requestPermit, onSuccess, onFail) {
+ var accId, self = this;
+
+ if ((typeof (newIdentity) === "undefined") || (!newIdentity)) {
+ this.identity = "";
+ } else {
+ this.identity = newIdentity;
+ }
+ accId = document.getElementById('mpinCurrentIden');
+ if (accId) {
+ accId.innerHTML = this.identity;
+ accId.setAttribute("title", this.identity);
+ }
+
+ // no Identity go to setup HOME
+ if (!this.identity) {
+ this.renderAddIdentity();
+ return;
+ }
+
+ if (requestPermit) {
+ var usrState = this.mpinLib.getUser(newIdentity, "state");
+
+ //new flow v0.3
+ if (usrState !== "REGISTERED") {
+ this.renderIdentityNotActive(newIdentity);
+ return;
+ }
+
+ this.addToPin("clear");
+ this.display(hlp.text("pinpad_initializing"), false);
+ this.enableNumberButtons(false);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ this.enableButton(true, "toggle");
+ this.requestPermit(newIdentity, function () {
+ self.enableNumberButtons(true);
+ onSuccess();
+ }, function (message, statusCode) {
+ if (statusCode === 404) {
+ self.renderIdentityNotActive(self.identity);
+ onFail();
+ } else {
+ // Fatal server error!
+ // Error getting permit 500
+ self.display(hlp.text("pinpad_errorTimePermit") + " " + statusCode, true);
+ self.error("Error getting the time permit.", statusCode);
+ onFail();
+ }
+ });
+ }
+ };
+
+ mpin.prototype.successSetup = function (authData) {
+ var self = this;
+ if (this.opts.successSetupURL) {
+ window.location = this.opts.successSetupURL;
+ } else if (this.opts.onSuccessSetup) {
+ this.opts.onSuccessSetup(authData, function () {
+ self.renderSetupDone.call(self);
+ });
+ } else {
+ this.renderSetupDone();
+ }
+ };
+
+ mpin.prototype.requestPermit = function (identity, onSuccess, onFail) {
+ var usrId;
+
+ usrId = this.readIdentity();
+ this.mpinLib.startAuthentication(usrId, function (err, authData) {
+ if (err) {
+ return onFail(err, err.code);
+ }
+
+ onSuccess();
+ });
+ };
+
+ mpin.prototype.deleteIdentity = function (iID, renderWarningFlag) {
+ var delIden, usrList, newIdentity = "", self = this;
+ delIden = this.mpinLib.deleteUser(iID);
+
+ usrList = this.mpinLib.listUsers();
+ for (var i in usrList) {
+ newIdentity = usrList[i].userId;
+ break;
+ }
+
+ if (newIdentity) {
+ this.saveIdentity(newIdentity);
+ this.setIdentity(newIdentity, true, function () {
+ self.display(hlp.text("pinpad_default_message"));
+ }, function () {
+ self.error(4008);
+ });
+
+ if (!renderWarningFlag) {
+ this.renderLogin(true, "renderAccountsPanel");
+ }
+ } else {
+ this.saveIdentity("");
+ this.setIdentity(newIdentity, false);
+ this.identity = "";
+ if (!renderWarningFlag) {
+ this.renderAddIdentity();
+ }
+ }
+
+ //check
+ if (renderWarningFlag) {
+ this.renderRevokeIdentity(iID);
+ }
+ };
+
+ //recover default Identity
+ // & delete it
+ mpin.prototype.recover = function () {
+ var oldData, defaultId, deviceId;
+ oldData = JSON.parse(localStorage.getItem("mpin"));
+
+ if (!oldData || oldData.version !== "0.3" || !oldData.defaultIdentity) {
+ return;
+ }
+
+ defaultId = oldData.defaultIdentity;
+ defaultId = (JSON.parse(this.mpinLib.fromHex(defaultId))).userID;
+
+ if (oldData.deviceName) {
+ deviceId = oldData.deviceName;
+ this.saveIdentity(defaultId, deviceId);
+ } else {
+ this.saveIdentity(defaultId);
+ }
+ //remove from storage ...
+ if (!oldData.accounts) {
+ localStorage.removeItem("mpin");
+ } else {
+ delete oldData.defaultIdentity;
+ delete oldData.version;
+ oldData.deviceName && delete oldData.deviceName;
+ localStorage.setItem("mpin", JSON.stringify(oldData));
+ }
+ };
+
+ mpin.prototype.storeLabel = "pinpad";
+
+ //save {identity ; device}
+ mpin.prototype.saveIdentity = function (userId, deviceId) {
+ var saved;
+
+ saved = this.readIdentity("all");
+ saved || (saved = {version: "4"});
+
+ if (userId || userId === "") {
+ saved.identity = userId;
+ }
+ if (deviceId) {
+ saved.device = deviceId;
+ }
+
+ localStorage.setItem(this.storeLabel, JSON.stringify(saved));
+ };
+
+ //by default return identity
+ mpin.prototype.readIdentity = function (opts) {
+ var rData;
+ rData = JSON.parse(localStorage.getItem(this.storeLabel));
+
+ if (!rData) {
+ return "";
+ }
+
+ if (!opts) {
+ rData = rData.identity;
+ } else if (opts && opts === "device") {
+ rData = rData.device;
+ }
+
+ return rData;
+ };
+
+ mpin.prototype.successLogin = function (authData) {
+ if (this.opts.successLoginURL) {
+ window.location = this.opts.successLoginURL;
+ } else if (this.opts.onSuccessLogin) {
+ this.opts.onSuccessLogin(authData);
+ }
+ };
+
+ function mp_fromHex (s) {
+ if (!s || s.length % 2 != 0)
+ return '';
+ s = s.toLowerCase();
+ var digits = '0123456789abcdef';
+ var result = '';
+ for (var i = 0; i < s.length; ) {
+ var a = digits.indexOf(s.charAt(i++));
+ var b = digits.indexOf(s.charAt(i++));
+ if (a < 0 || b < 0)
+ return '';
+ result += String.fromCharCode(a * 16 + b);
+ }
+ return result;
+ }
+ ;
+ // HELPERS and Language Dictionary
+
+ //loader
+ loader = function (url, type, callback) {
+ if (type === "css") {
+ var script = document.createElement('link');
+ script.setAttribute('rel', 'stylesheet');
+ script.setAttribute('type', 'text/css');
+ script.setAttribute('href', url);
+ } else if (type === "js") {
+ var script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = url;
+ }
+ //IE feature detect
+ if (script.readyState) {
+ script.onreadystatechange = callback;
+ } else {
+ script.onload = callback;
+ }
+ document.getElementsByTagName('head')[0].appendChild(script);
+ };
+ function addClass (elId, className) {
+ var el;
+ if (typeof (elId) === "string") {
+ el = document.getElementById(elId);
+ } else {
+ el = elId;
+ }
+
+ if (el && el.className) {
+ var cNames = el.className.split(/\s+/g);
+ if (cNames.indexOf(className) < 0)
+ el.className += " " + className;
+ } else if (el)
+ el.className = className;
+ }
+ ;
+ function hasClass (elId, className) {
+ var el;
+ if (typeof (elId) == "string")
+ el = document.getElementById(elId);
+ else
+ el = elId;
+ var cNames = el.className.split(/\s+/g);
+ return (cNames.indexOf(className) >= 0)
+ }
+ ;
+ function removeClass (elId, className) {
+ var el;
+ if (typeof (elId) == "string")
+ el = document.getElementById(elId);
+ else
+ el = elId;
+ if ((el) && (el.className.indexOf(className) !== -1)) {
+ var cNames = el.className.split(/\s+/g);
+ cNames.splice(cNames.indexOf(className), 1);
+ el.className = cNames.join(" ");
+ }
+ }
+ ;
+ //private variable
+ //en
+ lang.en = {};
+ lang.en = {
+ "pinpad_initializing": "Initializing...",
+ "pinpad_errorTimePermit": "ERROR GETTING PERMIT:",
+ "home_alt_mobileOptions": "Mobile Options",
+ "home_button_authenticateMobile": "Authenticate <br/>with your Smartphone",
+ "home_button_authenticateMobile_description": "Get your Mobile Access Number to use with your M-Pin Mobile App to securely authenticate yourself to this service.",
+ "home_button_getMobile": "Get",
+ "home_button_getMobile1": "M-Pin Mobile App",
+ "mobile_button_setup": "Setup your phone",
+ "home_button_getMobile_description": "Install the free M-Pin Mobile App on your Smartphone now! This will enable you to securely authenticate yourself to this service.",
+ "home_button_authenticateBrowser": "Authenticate <br/>with this Browser",
+ "home_button_authenticateBrowser_description": "Enter your M-PIN to securely authenticate yourself to this service.",
+ "home_button_setupBrowser": "Add an <br/>Identity to this Browser",
+ "home_button_setupBrowser_description": "Add your Identity to this web browser to securely authenticate yourself to this service using this machine.",
+ "mobileGet_header": "GET M-PIN MOBILE APP",
+ "mobileGet_header2": "Get M-Pin mobile app",
+ "mobileConfig_header": "Configure the M-Pin App",
+ "mobileGet_text1": "Scan this QR Code or open this URL on your Smartphone:",
+ "mobileGet_text2": "or open this URL on your mobile:",
+ "mobileConfig_text": "Scan the QR code using the M-Pin App to configure it to use this service.",
+ "mobileConfig_link": "Click here to get the M-Pin App",
+ "mobileSet_app_title": "Coming soon on:",
+ "mobileSet_apps": "Windows Phone",
+ "mobileSet_app2": "Android",
+ "mobileSet_app3": "Windows Phone",
+ "mobileSet_note": "NOTE: See the following link regarding Apple's requirements for app store links:",
+ "mobileGet_button_back": "Back",
+ "mobileAuth_header": "AUTHENTICATE WITH YOUR M-PIN",
+ "mobileAuth_seconds": "seconds",
+ "mobileAuth_text1": "Your Access Number is:",
+ "mobile_accessNumber_text": "Your access number is:",
+ "mobileAuth_text2": "Note: Use this number in the next",
+ "mobileAuth_text3": "with your M-Pin Mobile App.",
+ "mobileAuth_text4": "Warning: Navigating away from this page will interrupt the authentication process and you will need to start again to authenticate successfully.",
+ "otp_text1": "Your One-Time Password is:",
+ "otp_signin_header": "Sign in with One-Time Password",
+ "otp_text2": "Note: The password is only valid for<br/>{0} seconds before it expires.", // {0} will be replaced with the max. seconds
+ "otp_seconds": "Remaining: {0} sec.", // {0} will be replaced with the remaining seconds
+ "otp_expired_header": "Your One-Time Password has expired.",
+ "otp_expired_button_home": "Login again to get a new OTP",
+ "login_current_label": "Sign in as:",
+ "setup_header": "ADD AN IDENTITY TO THIS DEVICE",
+ "setup_header2": "Add an identity",
+ "setup_screen_header": "Creating ",
+ "setup_text1": "Enter your email address:",
+ "setup_label1": "Email address:",
+ "setup_label2": "Device name:",
+ "setup_placeholder": "Enter your Email",
+ "setup_text2": "Your email address will be used as your identity when M-Pin authenticates you to this service.",
+ "setup_error_unathorized": "{0} has not been registered in the system.", // {0} will be replaced with the userID
+ "setup_error_server": "Cannot process the request. Please try again later.",
+ "setup_error_signupexpired": "Your signup request has been expired. Please try again.",
+ "setup_button_setup": "Setup M-Pin",
+ "setupPin_header": "Create your M-Pin with {0} digits", // {0} will be replaced with the pin length
+ "setupPin_header2": "Setup your PIN", // {0} will be replaced with the pin length
+ "setupPin_initializing": "Initializing...",
+ "setupPin_pleasewait": "Please wait...",
+ "setupPin_button_clear": "Clear",
+ "setupPin_button_done": "Setup<br />Pin",
+ "setupPin_errorSetupPin": "ERROR SETTING PIN: {0}", // {0} is the request status code
+ "setupDone_header": "Congratulations!",
+ "setupDone_text1": "Your M-Pin identity:",
+ "setupDone_text2": "is setup, you can now sign in.",
+ "setupDone_text3": "",
+ "setupDone_button_go": "Sign in now with your new M-Pin!",
+ "setupDone_button_go2": "Sign in now",
+ "setupReady_header": "VERIFY YOUR IDENTITY",
+ "setup_new_identity_title": "Setup new identity...",
+ "setupReady_text1": "Your M-Pin identity",
+ "setupReady_text2": "is ready to setup, now you must verify it.",
+ "setupReady_text3": "We have just sent you an email, simply click the link to verify your identity.",
+ "setupReady_button_go": "Verified your identity? <br/>Setup your M-Pin now",
+ "setupReady_button_resend": "Not received the email? <br/>Send it again",
+ "setupNotReady_header": "IDENTITY ACTIVATION REQUIRED",
+ "setupNotReady_text1": "Your M-Pin identity:",
+ "setupNotReady_text2": "has not been activated via the M-Pin email we sent you.",
+ "setupNotReady_text3": "You need to click the link in the email we sent you, and then choose 'Setup M-Pin'.",
+ "setupNotReady_check_info1": "Checking",
+ "setupNotReady_check_expire": "Identity expired!",
+ "setupNotReady_check_info2": "Identity not verified!",
+ "setupNotReady_resend_info1": "Sending email",
+ "setupNotReady_resend_info2": "Email sent!",
+ "setupNotReady_resend_error": "Sending email failed!",
+ "setupNotReady_button_check": "I've activated, check again",
+ "setupNotReady_button_check2": "I confirmed my email",
+ "setupNotReady_button_resend": "Send me the email again",
+ "setupNotReady_button_resend2": "Resend confirmation email",
+ "setupNotReady_button_back": "Go to the identities list",
+ "authPin_header": "Enter your M-Pin",
+ "authPin_button_clear": "Clear",
+ "authPin_button_login": "Login",
+ "authPin_pleasewait": "Authenticating...",
+ "authPin_success": "Success",
+ "authPin_errorInvalidPin": "Incorrect PIN!",
+ "authPin_errorNotAuthorized": "You are not authorized!",
+ "authPin_errorExpired": "The auth request expired!",
+ "authPin_errorServer": "Server error!",
+ "deactivated_header": "SECURITY ALERT",
+ "deactivated_text1": "has been de-activated and your M-Pin token has been revoked.",
+ "deactivated_text2": "To re-activate your identity, click on the button below to register again.",
+ "revoke_text1": "You have entered your pin incorrect 3 times.",
+ "revoke_text2": "Your M-Pin identity:",
+ "revoke_text3": "has been revoked.",
+ "deactivated_button_register": "Register again",
+ "deactivated_button_register2": "Register new identity",
+ "deactivated_button_back": "Back to identity list",
+ "account_button_addnew": "Add a new identity to this list",
+ "account_button_add": "Add new identity",
+ "account_button_delete": "Remove this M-Pin Identity from this browser",
+ "account_button_delete2": "Remove Identity",
+ "account_button_reactivate": "Forgot my PIN. Send me a new activation email.",
+ "account_button_reactivate2": "Reset PIN",
+ "account_button_backToList": "Go back to identity list",
+ "account_button_backToList2": "Back to identity list",
+ "account_button_cancel": "Cancel and go back",
+ "account_button_cancel2": "Cancel",
+ "account_delete_question": "Are you sure you wish to remove this M-Pin Identity from this browser?",
+ "account_delete_button": "Yes, remove this M-Pin Identity",
+ "account_delete_button2": "Yes, Remove it",
+ "account_reactivate_question": "Are you sure you wish to reactivate this M-Pin Identity?",
+ "account_reactivate_button": "Yes, reactivate this M-Pin Identity",
+ "account_reactivate_button2": "Yes, Reactivate it",
+ "noaccount_header": "No identities have been added to this browser!",
+ "noaccount_button_add": "Add a new identity",
+ "home_intro_text": "First let's establish truth to choose the best way for you to access this service:",
+ "home_intro_text2": "Choose a sign in option:",
+ "signin_btn_desktop1": "Sign in with Browser",
+ "signin_btn_desktop2": "(This is a PERSONAL device I DO trust)",
+ "signin_btn_desktop3": "Sign in with browser",
+ "signin_btn_mobile1": "Sign in with Smartphone",
+ "signin_mobile_btn_text": "Sign in with your Smartphone",
+ "signin_mobile_header": "Sign in with your phone",
+ "signin_mobile_btn_text2": "Sign in with phone",
+ "signin_button_mobile": "Sign in with Phone",
+ "signin_btn_mobile2": "(This is a PUBLIC device I DO NOT trust)",
+ "home_txt_between_btns": "or",
+ "home_hlp_link": "Not sure which option to choose?",
+ "mobile_header_txt1": "I",
+ "mobile_header_donot": "DON'T",
+ "mobile_header_do": "DO",
+ "mobile_header_txt3": "trust this computer",
+ "mobile_header_txt4": "Sign in with Smartphone",
+ "mobile_button_signin": "Sign in with this device",
+ "mobile_button_signin2": "Sign in from here",
+ "mobile_header_access_number": "Your Access Number is",
+ "identity_current_title": "Change identity:",
+ "help_ok_btn": "Ok, Got it",
+ "help_more_btn": "I'm not sure, tell me more",
+ "help_hub_title": "M-Pin Help Hub",
+ "help_hub_li1": "What’s the difference between browser and smartphone authentication?",
+ "help_hub_li2": "What should I do if I don’t have a smartphone and I don’t trust this computer?",
+ "help_hub_li3": "What happens if I forget my PIN?",
+ "help_hub_li4": "What happens if someone sneaks my PIN?",
+ "help_hub_li5": "How should I choose my PIN number?",
+ "help_hub_li6": "Can I set the same PIN on all devices every time?",
+ "help_hub_li7": "How can a 4 digit PIN be more secure than a long complex password?",
+ "help_hub_li8": "Should I change my PIN often?",
+ "help_hub_li9": "Does the server know my PIN?",
+ "help_hub_li10": "Why do I have to register from each device and browser?",
+ "help_hub_li11": "Why do I have to register from each app and browser?",
+ "help_hub_button": "Exit Help Hub and return to previous page",
+ "help_hub_button2": "Exit Help Hub",
+ "help_hub_1_p1": "The browser authentication logs you in to your account on a desktop browser using M-Pin two-factor authentication.",
+ "help_hub_1_p2": "With smartphone authentication you use M-Pin Mobile app as a portable ID card to two-factor authenticate out-of-band to a desktop or browser on any external machine.",
+ "help_hub_2_p1": "You can still use the browser log in, but if you are on a shared computer or feel the machine is not secure, we advise you remove the identity from the browser after you’ve completed your session.",
+ "help_hub_2_p2": "",
+ "help_hub_3_p1": "You will simply need to provide an",
+ "help_hub_3_p11": "email address",
+ "help_hub_3_p12": "in order to set up your identity. You will receive an activation email to complete the set up process.",
+ "help_hub_3_p2": "You will also need to create a PIN number, this will be a secret",
+ "help_hub_3_p21": "4 digit",
+ "help_hub_3_p22": "code known only to you which you will use to login to the service.",
+ "help_hub_4_p1": "Your PIN can only be used from a machine and browser you’ve previously registered from. If you feel your PIN could be reused from the same machine, simply follow the instructions to reset it clicking the “Forgot my PIN button”.",
+ "help_hub_4_p2": "",
+ "help_hub_5_p1": "You can choose any PIN number, and reuse it across different devices, without compromising the security of your credentials. With M-Pin there is no need of complex rules to choose a password, just pick an easy to remember value.",
+ "help_hub_5_p2": "",
+ "help_hub_6_p1": "Yes, you can use the same PIN for different accounts, different machines and different browsers, across mobile and desktop, without affecting the security of M-Pin Authentication.",
+ "help_hub_6_p2": "",
+ "help_hub_7_p1": "M-Pin is two-factor authentication, meaning we save “something” in your browser and mobile app to recognise you every time you access a service. The PIN number (something you know) works only with that something you have in your browser or mobile app.",
+ "help_hub_7_p2": "Unlike password based authentication, M-Pin is an online authentication protocol, so it’s resistant to brute force attacks, which means you can use a low entropy PIN number and still be secure.",
+ "help_hub_8_p1": "There is no need for the PIN to be changed periodically, since only you know your PIN, and it is not stored anywhere. However, changing the PIN is a simple operation. Simply click on the 'Forgot my PIN' button and follow the instructions.",
+ "help_hub_8_p2": "",
+ "help_hub_9_p1": "No, only you know your PIN number. It is not stored or saved anytime or anywhere during the course of operation. Your PIN is used to re-assemble a cryptographic key, and re-assembly only happens transiently, when you authenticate.",
+ "help_hub_9_p2": "The cryptographic key used in authentication is not stored or saved anytime or anywhere during the course of operation.",
+ "help_hub_10_p1": "To use M-Pin, you need your PIN number together with “something” saved in your browser, so you need to register from each browser to have that “something” and be able to authenticate with M-Pin.",
+ "help_hub_10_p2": "",
+ "help_hub_11_p1": "To use M-Pin, you need your PIN number together with 'something' saved in your browser or app, so you need to register from each browser to have that 'something', combined with your PIN number (something you know), to be able to authenticate with M-Pin.",
+ "help_hub_11_p2": "",
+ "help_hub_return_button": "Return to Help Hub",
+ "activate_header": "ACTIVATE YOUR IDENTITY",
+ "activate_header2": "Creating new identity...",
+ "activate_text1": "Your M-Pin identity:",
+ "activate_text2": "is ready to setup.",
+ "activate_text3": "We have just send you an email, simply click the link in the email to activate your identity.",
+ "activate_text_new1": "We have sent you an email to:",
+ "activate_text_new2": "Click the link in the email, to confirm your identity and proceed.",
+ "activate_btn1": "Activated your identity via email? Setup your M-Pin now",
+ "activate_btn2": "Not received the activation email? Send it again!",
+ "activate_btn_new1": "I confirmed my email",
+ "activate_btn_new2": "Resend confirmation email",
+ "settings_title": "IDENTITY OPTIONS",
+ "settings_title2": "Edit identity",
+ "landing_button_newuser": "I'm new to M-Pin, get me started",
+ "revoke_header_text": "Revoking identity ...",
+ "mobile_header": "GET THE M-PIN SMARTPHONE APP",
+ "mobile_footer_btn": "Now, sign in with your Smartphone",
+ "mobile_footer_btn2": "Sign in with Phone",
+ "pinpad_setup_screen_text": "CREATE YOUR M-PIN:<br> CHOOSE 4 DIGIT",
+ "pinpad_setup_screen_text2": "Setup your PIN",
+ "pinpad_default_message": "Enter your PIN",
+ "setup_device_label": "Choose your device name:",
+ "setup_device_default": "(default name)",
+ "help_text_1": "Simply choose a memorable <b>[4 digit]</b> PIN to assign to this identity by pressing the numbers in sequence followed by the 'Setup' button to setup your PIN for this identity",
+ //2A
+ "help_text_landing1": "This Access Number allows you to sign in with M-Pin from your smartphone. Enter the Access Number into the M-Pin app installed on your Smartphone when prompted and follow the instructions to sign into a browser session. This number is valid for 99 seconds, once this expires a new Access number will be generated.",
+ "help_text_landing2": "If you have a smartphone and are signing someone else’s device or a public computer, then please: <br>1. Download the ‘M-Pin Smartphone App’ <br> 2. Open the App and follow the steps to sign in, this will tell you when you need to enter the access code.",
+ "help_text_login": "Simply enter your <span class=mpinPurple>[4 digit]</span> PIN that you assigned to this identity by pressing the numbers in sequence followed by the ‘Sign in’ button. If you have forgotten your PIN, then you can reset it by clicking the ‘Reset PIN’ button below.",
+ "help_text_login_button": "Reset my PIN",
+ "help_text_setup": "Simply choose a memorable <span class=mpinPurple>[4 digit]</span> PIN to assign to this identity by pressing the numbers in sequence followed by the ‘Setup’ button to setup your PIN for this identity.",
+ "help_text_setup_button": "Advice on choosing PIN",
+ "help_text_addidentity": "Your <span class=mpinPurple>[email address]</span> will be used as your identity when M-Pin signs you into this service.<br>You will receive an activation email to the address you provide.",
+ "help_text_loginerr": "You have entered your PIN incorrectly.<br><br>You have 3 attempts to enter your PIN, after 3 incorrect attempts your identity will be removed and you will need to re-register.",
+ "help_text_loginerr_button": "I've forgotton my PIN",
+ "otp_header_btn_text": "Your One-time Password is:",
+ "back_identity_btn": "Back to choose identity",
+ "otp_under_btn_text": "Note: The password is only valid for 99 seconds before it expries.",
+ "otp_remain_text": "Remaining:",
+ "otp_expire_header": "Your One-Time Password has expired.",
+ "otp_expire_btn": "Login again to get a new OTP.",
+ "an_expire_header": "Your Access Number has expired.",
+ "an_btn_generate": "Generate a new one",
+ "an_btn_phone": "Setup Your Phone",
+ "help_text_devicename": "This <span class=mpinPurple>[device name]</span> will be used to identify this device and the identities you create from here",
+ "help_text_home": "If you are signing into your own personal device like your computer or tablet then you can ‘Sign in with Browser’, but if you are using someone else’s device or a public computer, then ‘Sign in with Smartphone’ is recommended for additional security.",
+ "error_page_title": "Error page:",
+ "error_page_code": "Error code:",
+ "error_page_button": "Back",
+ "button_back_text": "Back",
+ "error_page_error": "Error:",
+ "error_code_4001": "We are experiencing a technical problem. Please try again later or contact the service administrator.",
+ "error_code_4002": "We are experiencing a technical problem. Please try again later or contact the service administrator.",
+ "error_code_4003": "We are experiencing a technical problem. Please try again later or contact the service administrator.",
+ "error_code_4004": "We detected you are using a non-compatible browser.<br> Please visit <a href='http://www.miracl.com/browser-compatibility-page'>our browser compatibility page</a> for more info.",
+ "error_code_4005": "We detected you are using a non-compatible browser.<br> Please visit <a href='http://www.miracl.com/browser-compatibility-page'>our browser compatibility page</a> for more info.",
+ "error_code_4006": "We are experiencing a technical problem. Please try again later or contact the service administrator.",
+ "error_code_4007": "We are experiencing a technical problem. Please try again later or contact the service administrator.",
+ "error_code_4008": "We are experiencing a technical problem. Please try again later or contact the service administrator.",
+ "error_code_4009": "We could not complete your registration. Please contact the service administrator or try again later.", //403
+ "error_code_4010": "We could not complete your registration. Please contact the service administrator or try again later.", //
+ "error_code_4011": "We are experiencing a technical problem. Please try again later or contact the service administrator.", //
+ "error_code_4012": "We could not complete your authentication request. Please contact the service administrator.", //
+ "error_code_4013": "We could not complete your registration. Please contact the service administrator or try again later.", //
+ "error_code_4014": "We are experiencing a technical problem. Please try again later or contact the service administrator.", //
+ "error_code_4015": "We are experiencing a technical problem. Please try again later or contact the service administrator.", //
+ "error_code_4016": "We are experiencing a technical problem. Please try again later or contact the service administrator.", //
+ "error_not_auth": "You are not authorized.", //
+ "pinpad_btn_login": "Login", //
+ "pinpad_btn_clear": "Clear", //
+ "pinpad_btn_setup": "Setup" //
+ };
+ // image should have config properties
+ hlp.img = function (imgSrc) {
+ return IMAGES_PATH + imgSrc;
+ };
+ // translate
+ hlp.text = function (langKey) {
+ //hlp.language set inside render
+ //customLanguageTexts - language
+ return lang[hlp.language][langKey];
+ };
+})();
+
diff --git a/browser/package.json b/browser/package.json
new file mode 100644
index 0000000..6fd7a88
--- /dev/null
+++ b/browser/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "mpinpinpad",
+ "type": "browser",
+ "version": "0.0.1",
+ "description": "Browser PinPad",
+ "main": "Gruntfile.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/miracl/milagro-mfa-js-client.git"
+ },
+ "license": "Apache License",
+ "devDependencies": {
+ "grunt": "~0.4.1",
+ "grunt-bg-shell": "~2.3.1",
+ "grunt-contrib-concat": "*",
+ "grunt-contrib-cssmin": "^0.12.3",
+ "grunt-contrib-sass": "^0.8.1",
+ "grunt-contrib-uglify": "*",
+ "grunt-contrib-watch": "~0.4.4",
+ "grunt-hashres": "^0.4.1",
+ "grunt-replace": "~0.7.7",
+ "grunt-sass": "^1.0.0",
+ "handlebars": "3.0.1",
+ "node-sass": "^3.2.0"
+ },
+ "dependencies": {
+ "grunt-contrib-clean": "^1.0.0"
+ }
+}
diff --git a/browser/sass/_reset.scss b/browser/sass/_reset.scss
new file mode 100644
index 0000000..149dc62
--- /dev/null
+++ b/browser/sass/_reset.scss
@@ -0,0 +1,33 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
+
+// Put everything in border-box
+
+ *, *:before {
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+box-sizing: border-box;
+-webkit-tap-highlight-color: rgba(0,0,0,0);
+-webkit-touch-callout: none;
+-webkit-user-drag: none;
+-ms-touch-action: none;
+}
diff --git a/browser/sass/buttons.scss b/browser/sass/buttons.scss
new file mode 100644
index 0000000..4f8d162
--- /dev/null
+++ b/browser/sass/buttons.scss
@@ -0,0 +1,168 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+.mpinBtnBox {
+ //instead of width: 90%
+
+ @include buttons-box();
+
+ &.mpinBtnDown {
+ @include button-area-down();
+ }
+
+ &.mpBtnThin {
+ padding-top: 0px;
+ }
+
+ .mpinButton {
+ @include mpinButton();
+
+ &.mpBtnHome {
+ padding: 10px;
+ font-size: 95%;
+ line-height:130%;
+ margin:0px;
+ }
+ &.mpFontNormal {
+ font-weight: normal;
+ font-size: 16px;
+ margin-bottom: 5px;
+ }
+
+ &.mpinBtnOk {
+ color: #00a800;
+ }
+ &.mpinBtnError {
+ color: red;
+ }
+
+ &.mpinBtnBack {
+ background: #ededed;
+ border-bottom-color: #bcbcbc;
+ color: #000;
+ }
+
+ p {
+ font-size: 87%;
+ color: #fff;
+ }
+ //MOBILE buttons
+ .mpBorderWhite {
+ border-bottom: 1px solid white;
+ font-size:0.93em;
+ padding-bottom:3px;
+ }
+ .mpbtnPadding {
+ padding: 7px 0 3px;
+
+ #mpinAccessNumber, #mpinOTPNumber {
+
+ @include identity-text();
+ }
+ }
+ .mpbtnExpire {
+ @include mpin-button();
+ width: 80px;
+ background: white;
+ box-shadow: none;
+ margin: auto;
+ text-align: center;
+ padding: 0px;
+ font-weight: bold;
+ margin-bottom: 5px;
+ font-size:0.75em;
+ border-radius: 0.6em;
+ min-height:1.6em
+ }
+
+ .mpbtnIconArrow {
+ @include arrow-icon();
+ display: block;
+ position: absolute;
+ right: 5%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .mpinBtnIcon {
+ height: 20px;
+ width: 20px;
+ position: absolute;
+
+ &.mpMobile {
+ @include button-icon-mobile();
+ }
+
+ &.mpDesktop {
+ @include button-icon-desktop();
+ }
+ }
+
+ &.mpMobileAccessNumber {
+ background: none;
+ border: 1px solid $BGCOLOR4;
+ }
+
+ }
+ //.mpinButton
+
+ &.mpNoPadding {
+ padding-top:0;
+ padding-bottom:0;
+ }
+
+ .mpGreen {
+ background: #00a800;
+ font-size:0.93em;
+ }
+
+ .mpinMobileBtn {
+ @include mpin-mobile-button();
+ }
+
+ .mpinWarnBtn {
+ @include mpin-warning-button();
+ }
+
+ .mpinButtonDark {
+ @include mpin-dark-button();
+ }
+
+ .mpinBtnBig {
+ height: 60px;
+ padding-top: 18px;
+ margin-bottom: 30px;
+ }
+
+
+ .mpBtnOnlyGreen {
+ background: none;
+ color: #00a800;
+ border-color: #00a800;
+ }
+ .mpBtnOnlyBlue {
+ background: none;
+ color: #007cc2;
+ border-color: #007cc2;
+ font-size: 0.87em;
+ padding: 14px 0;
+ }
+}
+
+
diff --git a/browser/sass/general.scss b/browser/sass/general.scss
new file mode 100644
index 0000000..4194715
--- /dev/null
+++ b/browser/sass/general.scss
@@ -0,0 +1,555 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+/*@import "http://fonts.googleapis.com/css?family=Open+Sans:400,700,300";*/
+//http://bourbon.io/docs/#font-face
+
+/*@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);*/
+/*
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
+@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
+*/
+/*@import url(http://fonts.googleapis.com/css?family=Open+Sans);*/
+
+
+.mpinHeader {
+
+ @include mpin-header();
+
+ .mpinHome {
+ @include header-home();
+ }
+
+ .mpinLogo {
+ @include header-logo();
+ }
+}
+
+.mpMobileColor {
+ @include mobile-bgcolor();
+}
+
+.mpinHeaderBig {
+ width: 90%;
+ margin: auto;
+ line-height: 1.3em;
+ @include mpin-header-big();
+
+ #mpinLogo {
+ @include logo();
+ }
+
+ &.mpMobColor {
+ @include mobile-color();
+ }
+}
+
+.mpinHeaderRow {
+ @include mpin-header-row();
+
+ &.mpHeaderPadd {
+ padding: 0px;
+ font-size: 15px;
+ }
+
+ .mpinMobileIcon {
+ @include mobile-icon();
+ background-position:center;
+ width:50px !important;
+ }
+
+ .mobIconRight { background-position:24px 0; width:47px !important}
+
+ .mpinBorderBottom {
+ border-bottom:1px solid #00a800;
+ margin:0px 12px;
+ }
+ &.mpMobColor {
+ @include mobile-color();
+ }
+
+ &.mpHeaderRowThin {
+ padding: 4%;
+ }
+
+ &.mpinHeaderRed {
+ color: red;
+ }
+}
+
+.mpinIdentityRow {
+ @include identity-row();
+ z-index: 99;
+ /*width: 100%;*/
+ .mpinArrowDown {
+ &.mpinADown {
+ @include arrow-up-icon();
+ }
+
+ &.mpinAUp {
+ @include arrow-icon-open();
+ }
+
+ img {
+ height: 20px;
+ width: 20px;
+ /*float: right;*/
+ /*top: -16px;*/
+ transition: 1s all ease-in-out;
+ position: relative;
+ margin-bottom: 5px;
+ }
+
+ .mpinArrowImg {
+ @include arrow-up-icon();
+ }
+ }
+
+ /*#mpinCurrentIden, .mpinCurrentIdentity {*/
+ .mpinCurrentIdentity {
+ padding: 0px;
+ margin: 0px;
+ text-align: left;
+ padding-left: 10px;
+
+ .mpinIdentityLabel {
+ font-size: 12px;
+ color: #444;
+ }
+ .mpinIdentityTitle {
+ font-size:14px;
+ color: #4891dc;
+ margin-right: 30px;
+ }
+
+ &.mp10Padd {
+ margin: 10px;
+ }
+ }
+
+ #mpinCurrentIdenSetup {
+ padding: 0px;
+ margin: 0px;
+ text-align: left;
+ padding-left: 10px;
+ @include mpin-current-identity();
+ }
+
+ .mpWrappedIdentity {
+ text-align: left;
+ margin-left: 2px;
+ padding-top: 5px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-decoration: none;
+ display: block;
+ }
+
+
+
+ .mpinIdentityRowInner {
+ line-height: 30px;
+ font-size: 14px;
+ }
+ /* .mpinArrowUp {
+ height: 20px;
+ width: 20px;
+ float: right;
+ margin: 3px;
+ background: url('#{$IMAGES}/arrow-up-black.svg') no-repeat;
+ background-size: auto 100%;
+ background-position: right bottom;
+ }*/
+ .mpinIdentity {
+ text-align: center;
+ padding: 5px 0px;
+
+ //turquoise theme fix
+ &.mpBrowserTop {
+ text-align: left;
+ padding-left: 10px;
+ }
+
+ }
+
+ .mpinIdentityGradient {
+ @include mpin-identity-gradient();
+ }
+
+}
+
+.mpinPinpad {
+ @include pin-pad-wrapper();
+
+ @import 'pinpads';
+}
+
+@import 'help';
+
+.mpinMain {
+ @include mpin-main();
+
+ @import 'identity';
+
+ @import 'buttons';
+
+ .mpinCenter5 {
+ padding-top: 3% !important;
+ }
+ .mpinCenter0 {
+ padding-top: 0% !important;
+ }
+
+ #appLinks {
+ padding-top: 10% !important;
+
+ a {
+ padding-bottom: 20px;
+ display: block;
+ word-break: break-word;
+
+ img {
+ display: block;
+ position: relative;
+ margin: 0 auto;
+ }
+ }
+
+ .note {
+ padding-top: 10px;
+ font-size: 12px;
+ }
+ }
+
+ &.mpNoHeight {
+ height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .mpinCenter {
+ width: 90%;
+ margin:0 auto;
+ text-align: center;
+ padding-top: 20%;
+
+ &.mpCenterTop {
+ padding-top: 0%;
+ }
+
+ .mpinInput {
+ @include mpin-input-field();
+ }
+
+ .mpinInput::-webkit-input-placeholder {
+ font-style: italic;
+ }
+ .mpinInput:-moz-placeholder { /* Firefox 18- */
+ font-style: italic;
+ }
+ .mpinInput::-moz-placeholder { /* Firefox 19+ */
+ font-style: italic;
+ }
+ .mpinInput:-ms-input-placeholder {
+ font-style: italic;
+ }
+
+ .mpinInputErr {
+ border-top-color: red;
+ border-right-color: red;
+ border-bottom-color: red;
+ }
+
+ .mpinLabel {
+ height: 40px;
+ padding-top:10px;
+ display: block;
+ text-align: left;
+ }
+
+ .mpinLabelErr {
+ color: red;
+ }
+
+ .mpinInputGroup {
+ width: 100%;
+ display: inline-table;
+ vertical-align: middle;
+ position: relative;
+ border-collapse: separate;
+ display: table;
+ box-sizing: border-box;
+
+ .mpinInputAdd {
+ width: auto;
+
+ white-space: nowrap;
+ vertical-align: middle;
+
+ display: table-cell;
+
+ background-color: rgba(109, 198, 231, 0.1);
+ border: 1px solid #4891dc;
+ border-radius: 4px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: 0;
+
+ @include email-input-before();
+ }
+
+ .mpinLeftErr {
+ border-left-color: red;
+ border-top-color: red;
+ border-bottom-color: red;
+ }
+
+ .mpinScr {
+ @include device-input-before();
+ }
+ }
+
+ .mpinIdentityText {
+ @include identity-text();
+ font-size: 14px;
+ }
+
+ .mpIdentityBrowser {
+ color: $BGCOLOR;
+ word-break: break-word;
+ }
+
+ .mpinInfoText {
+ color: #353535;
+ padding: 10px;
+ }
+
+ &.mpHomeTxt {
+ font-size: 150%;
+ padding-bottom: 4%;
+ }
+
+
+ .mpComming {
+ @include mobile-comming();
+ }
+
+ .mpinIdentityTextSm {
+ color: $BGCOLOR;
+ }
+ }
+
+ .mpinInfo {
+ background-image: url('#{$IMAGES}/info.svg');
+ background-repeat: no-repeat;
+ background-position: bottom;
+ width: 25px;
+ height: 25px;
+ display: inline-block;
+ margin-right: 3px;
+ margin-bottom: -3px;
+ cursor: pointer;
+ }
+
+ &.mpinAnimateIn {
+ transition: all 0.5s ease-in;
+ }
+ &.mpinAnimateOut {
+ transition: all 0.5s ease-out;
+ }
+
+ .mpErrorIcon {
+ @include mpin-error-icon();
+ }
+ .mpErrorNumber {
+ margin: 20px auto;
+ }
+
+}
+
+.mpinInfoCenter {
+ background-image: url('#{$IMAGES}/info-white.svg');
+ background-repeat: no-repeat;
+ background-position: bottom;
+ width: 23px;
+ height: 23px;
+ display: inline-block;
+ margin-right: 3px;
+ margin-top: -2px;
+ position: absolute;
+ left: 22%;
+ cursor: pointer;
+
+}
+
+.mpLeft20 {
+ margin-left: 20px;
+}
+
+.mpWrapped {
+ width: 97%;
+ word-wrap: break-word;
+ overflow: hidden;
+ text-decoration: none;
+
+ &.mpAreaFixed {
+ max-height: 61px;
+ overflow: hidden;
+ display: block;
+ margin: 0 auto;
+ a {
+ display: block;
+ word-break: break-all;
+ -ms-word-break: break-all;
+ -moz-word-break: break-all;
+ -webkit-word-break: break-all;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ }
+ }
+}
+
+
+.mpHide {
+ display: none;
+}
+
+.mpZero {
+ height: 0px;
+ padding: 0px;
+}
+.mpinColorRed {
+ color: #FC0409;
+ font-style: italic;
+}
+
+.mpPointer {
+ @include mpin-logo-pointer();
+}
+
+.mpPaddTop10 {
+ padding-top: 20px;
+}
+
+.mpPaddBot10 {
+ padding-bottom: 20px;
+}
+
+.mpinBold { font-weight:bold;}
+.mpinItalic { font-style:italic;}
+
+.mpTop25per {
+ padding-top: 25%;
+}
+.mp10Down {
+ margin-down: 10px;
+}
+
+.marBot10 {
+ margin-bottom: 10px;
+}
+
+.marBot20 {
+ margin-bottom: 20px;
+}
+
+.marTop20 {
+ margin-top: 10px;
+ @include margin-top();
+}
+
+.border0 {
+ border:0px
+}
+
+//MOBILE
+#mpin_qrcode {
+ display: block;
+ width: 130px;
+ height: 130px;
+ margin: 0 auto 10px;
+}
+#mpin_seconds {
+ @include mpin-expire-second();
+ /*margin: 15px 0;*/
+}
+
+/////////////////////////////////////////////////
+//timer Feature
+.mpinTimerBox {
+ position: relative;
+ margin: 15px;
+ height: 42px;
+ width: 87%;
+ /* #mpTimer {
+ border: 1px solid green;
+ }*/
+
+ #mpTimer {
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .mpLeftTime {
+ position: absolute;
+ display: block;
+ width: 100%;
+ margin-top: 11px;
+ text-align: center;
+ }
+}
+
+
+
+.mpinFooterRow {
+ bottom: 0%;
+ min-height: 6%;
+ width: 100%;
+ z-index: 99;
+ position: absolute;
+}
+
+.mpinFooter {
+ @include footer();
+
+
+ .mpinHelpHub {
+ @include footer-helphub();
+ }
+ .mpinPowered {
+ @include footer-copyright();
+ }
+
+ &.mpinFooterHome {
+ border: none;
+ height:11%;
+ /*bottom: 2vh;*/
+ }
+
+ &.mpMobileFooter {
+ @include mobile-footer();
+ }
+}
diff --git a/browser/sass/help.scss b/browser/sass/help.scss
new file mode 100644
index 0000000..ef9f79e
--- /dev/null
+++ b/browser/sass/help.scss
@@ -0,0 +1,216 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+help#mpinHelpTag {
+ display: none;
+ opacity: 0;
+ color: black;
+ -webkit-transition: all 1s ease-out;
+ position: absolute;
+ background-color: rgba(255,255,255,0.8);
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ width: 99%;
+ height: 95%;
+ z-index: 999999;
+ margin:1px;
+
+ #mpinHelpContainer {
+ display: none;
+ background-color: white;
+ width: 85%;
+ height: 80%;
+ position: relative;
+ text-align: left;
+ border: 1px solid #acacac;
+ margin: 0 auto;
+ top: 45px;
+ @include border-radius(5px);
+ padding: 15px 10px 10px;
+ -webkit-box-shadow: 1px 2px 4px 0px rgba(50, 50, 50, 0.50);
+ -moz-box-shadow: 1px 2px 4px 0px rgba(50, 50, 50, 0.50);
+ box-shadow: 1px 2px 4px 0px rgba(50, 50, 50, 0.50);
+
+ //, &:before
+ #mpinInfoCloseCorner {
+ @include help-popup-corner-icon();
+ }
+
+ #mpinButtonsContainer {
+ position: absolute;
+ width: 90%;
+ bottom: 0%;
+
+ .mpinBtm10 {
+ margin-bottom: 10px;
+ }
+ .mpinPadd12 {
+ padding:12px 0px;
+ }
+ }
+
+ .mpinBtnContainer {
+ @include buttons-box();
+
+ .mpinButton {
+ @include mpinButton();
+ &.mpinBtnClick {
+
+ }
+ }
+
+ .mpinButtonDark {
+ @include mpin-dark-button();
+ }
+
+ .mpinBtnBack {
+ background: #ededed;
+ border-bottom-color: #bcbcbc;
+ color: #000;
+
+ }
+ }
+
+ }
+
+ // Option choose styling
+ .mpinGrey {
+ background: #7E7E7E;
+ padding:12px 0px;
+ }
+
+ .mpinGreen {
+ background: #44A800;
+ margin-bottom: 8px;
+ }
+
+ .mpinBlue {
+ background: #0686CF;
+ margin-bottom: 8px;
+ padding:12px 0px;
+ }
+
+ .mpinHelpText {
+ height: 68%;
+ color:#353535;
+ font-size:0.93em;
+ line-height:1.3em;
+ }
+
+}
+
+info.mpinHelpInfo {
+ width: 100%;
+ display: block;
+ color: black;
+ cursor: pointer;
+ text-align: center;
+ /*position: absolute;*/
+ /*bottom: 10%;*/
+ font-size: 13px;
+
+ &.mpAbsolute {
+ position: absolute;
+ bottom: 14%;
+ }
+
+ i {
+ display: block;
+ height: 20px;
+ display: inline-block;
+ position: relative;
+ top: 5px;
+ margin: 0px 5px 0px -8px;
+
+ @include help-info-icon();
+ }
+
+ &.helpHubTitle {
+ bottom: auto;
+ position: relative;
+ font-weight: bold;
+ padding: 10px 10px 15px;
+ border-bottom: 1px solid #EAEAEA;
+ font-size: 90%;
+ }
+ &.mpinInitialPos {
+ position: initial;
+ }
+ &.mpinBorder0 {
+ border: 0px;
+ min-height: 16%;
+ }
+
+}
+
+.mpinHelpBlock {
+ /*width: 90%;*/
+ margin: 0px auto;
+ overflow: hidden;
+ /*margin-bottom: 15px;*/
+ & ul {
+ /*list-style-type:disc;*/
+ }
+ & li {
+ border-bottom: 1px solid #EAEAEA;
+ padding: 10px 10px 10px 30px;
+ margin: 0px;
+ cursor: pointer;
+ text-align:left;
+ background-image: url("#{$IMAGES}/bullet.svg");
+ background-position: 10px 12px;
+ background-repeat: no-repeat;
+ }
+ & li a:hover {
+ color:red;
+ }
+ p {
+ font-size: 90%;
+ padding: 5px 15px 10px;
+ text-align: left;
+ }
+}
+
+.mpinHelpAnswerBlock {
+ @include help-box();
+}
+.mpinHelpAnswerBlock2 {
+ @include help-box();
+ height: 65%;
+}
+
+.mpinHelpHubFooter {
+ /*width: 90%;*/
+ margin: 0px auto;
+ padding: 10px;
+ margin-top: 5%;
+ border-bottom: 1px solid grey;
+}
+
+.mpinPurple, .mpinPurple strong {
+ font-weight: bold;
+ @include mobile-text();
+}
+.mpinPurple a {
+ font-weight: bold;
+ @include mobile-text();
+ text-decoration: none;
+}
diff --git a/browser/sass/home.scss b/browser/sass/home.scss
new file mode 100644
index 0000000..e59e8d4
--- /dev/null
+++ b/browser/sass/home.scss
@@ -0,0 +1,224 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+#header {
+ @include top-bar();
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #mpinLogo {
+ @include logo();
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+ }
+
+ #menuIcon {
+ @include menu-icon();
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ float: right;
+ margin: 10px 10px 0 10px;
+ }
+}
+
+.mpinIntroText {
+ width: 90%;
+ margin: 10px auto;
+}
+
+.mpinCenterTxt {
+ text-align: center;
+ font-weight: bold;
+ width: 90%;
+ padding: 10px;
+}
+.mpinJustifyTxt {
+ text-align: justify;
+ line-height: 17px;
+ margin: 5px;
+ &.mpinTextFont18 {
+ font-size: 18px;
+ }
+}
+
+.mpinColorGreen {
+ color: #06B405;
+ font-style: italic;
+}
+
+.mpinColorRed {
+ color: #FC0409;
+ font-style: italic;
+}
+
+.mpinBtm10 {
+ margin-bottom: 10px;
+}
+
+
+#homeIcon {
+
+ margin-top: 5px;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: white;
+ /*padding: 10% 0px 20px;*/
+ /*float:right;*/
+
+ #mobileIcon {
+ @include mobile-icon();
+ }
+ #desktopIcon {
+ @include desktop-icon();
+ }
+
+}
+
+#buttonsContainer {
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ -webkit-box-orient: vertical !important;
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ width: 100%;
+
+ .mpinBtn {
+ width: 90%;
+
+ &.mpinBtnBusy {
+ background: url('#{$IMAGES}/checking.gif') no-repeat 95% center;
+ padding: 10px;
+ }
+
+ &.mpinBtnError {
+ color: red;
+ padding: 10px;
+ box-shadow: none;
+ background: none;
+ text-align: center;
+ }
+ &.mpinBtnOk {
+ padding: 10px;
+ }
+ &.green {
+ background: #44A800;
+ }
+ &.grey {
+ background: #7E7E7E;
+ }
+ }
+
+ .mpinBlueBtn {
+ background: #0686CF;
+ padding: 10px;
+ }
+
+ .mpinGreenBtn {
+ background: #06B405;
+ padding: 10px;
+ }
+ .mpinBold {
+ font-weight: bold;
+ display: block;
+ }
+}
+
+.mpinWhiteGrBtn {
+ @include mpin-button();
+ background: none;
+ border: 1px solid $green !important;
+ padding: 5px;
+ color: $green;
+ width: 90%;
+ margin-top: 30px;
+ text-align: center;
+ text-shadow: none;
+ font-weight: bold;
+}
diff --git a/browser/sass/identity.scss b/browser/sass/identity.scss
new file mode 100644
index 0000000..43ceb46
--- /dev/null
+++ b/browser/sass/identity.scss
@@ -0,0 +1,67 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+.mpinLists {
+ width: 90%;
+ margin: 0 auto;
+ /*max-height: 70%;*/
+ height: 60%;
+ overflow: auto;
+ @include identity-list();
+
+ &.mpNoHeight {
+ height: auto;
+ }
+
+ ul {
+ padding: 0px;
+ margin: 0px;
+ }
+
+ .mpinRow {
+ padding: 5px;
+ width: 100%;
+ /*line-height: 35px;*/
+ @include users-row();
+ }
+
+ .mpinRow:hover {
+ @include users-row-hover();
+ }
+
+ .mpinSettings {
+ float: right;
+
+ @include setting-icon();
+ }
+
+ .mpinSettingsRow {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-decoration: none;
+ display: block;
+
+ @include mpin-settings-row();
+
+ &.mpVerCenter {
+ line-height: 16px;
+ }
+ }
+}
diff --git a/browser/sass/main.scss b/browser/sass/main.scss
new file mode 100644
index 0000000..d42d19c
--- /dev/null
+++ b/browser/sass/main.scss
@@ -0,0 +1,837 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
+
+$MOBILE : false;
+$green : #06B405;
+
+
+// Import template
+
+//@import 'templates/_darkgrey';
+//@import 'templates/_flatwhite';
+@import 'templates/_template';
+
+// General mixins
+
+@mixin display-box-flex() {
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+@mixin box-flex-value($value) {
+ -moz-box-flex:$value; /* Firefox */
+ -webkit-box-flex:$value; /* Safari and Chrome */
+ -ms-flex:$value; /* Internet Explorer 10 */
+ box-flex:$value;
+}
+
+@mixin border-radius($value) {
+ border-radius: $value;
+ -webkit-border-radius: $value;
+ -moz-border-radius: $value;
+ -o-border-radius: $value;
+ -ms-border-radius: $value;
+}
+
+.mpinContainer {
+
+ @import '_reset';
+ @import 'general';
+
+ h1,h2,h3,h4,h5,h6{
+ font-size:100%;
+ font-weight:normal;
+ }
+
+ // Include pinpad reset
+
+
+
+ // Body styles here
+
+ font-size: 104%;
+ @include font-family();
+
+ // Hide the overflow
+ overflow: hidden;
+ // Set default text size of the H1 tag
+ h1 {
+ font-size: 20px;
+ color: darkgrey;
+ }
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -ms-text-size-adjust: 100%; /* 2 */
+
+ clear: both;
+ position: relative;
+ width: 260px;
+ height: auto;
+ font-size: 14px;
+ /*font-family: 'Alegreya Sans',Arial,Helvetica,sans-serif;*/
+
+ // Import the pinpad styles
+ #mpinHolder {
+
+ width: 100%;
+ position: relative;
+ width: 100;
+ z-index: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ background-color: inherit;
+
+ /*padding: 5px;*/
+
+ .mpinMaster {
+ position: relative;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ min-height: 430px;
+ height: 430px;
+ // background color
+ @include bg-color();
+ border: 1px solid #acacac;
+
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+
+ -webkit-box-orient: vertical !important;
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+
+ #mpinUser {
+ position: absolute;
+ width: 100%;
+ transition: all 0.5s ease-in-out;
+ overflow: hidden;
+ z-index: 999999;
+ margin: 0px;
+
+ @include user-row();
+
+ #mpin_arrow {
+ position: absolute;
+ z-index: 10;
+ right: 0;
+ /*bottom: 0;*/
+ top: 0;
+ z-index: 10000;
+
+ @include mpin-user-arrow();
+ }
+
+ &.mpUserSlim {
+ @include user-area-slim();
+ }
+
+ &.mpUserFat {
+ @include user-area-fat();
+ }
+
+ }
+
+ #mpin_identities {
+ position: absolute;
+ z-index: 9999;
+ top: 40px;
+ left: 0;
+ right: 0;
+ height: 80%;
+ /*@include identity-list();*/
+ }
+
+ #mpin_pinpad {
+
+ }
+
+ #pinpadEls {
+ @include pin-pad-elements();
+ }
+
+ .mpStripTxt {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ text-decoration: none;
+ }
+
+ }
+ }
+
+ #topNav {
+
+ padding: 0px 10px 0px 10px !important;
+
+ @include header-bar();
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #mp_action_home {
+ display: block;
+ @include home-icon();
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ cursor: pointer;
+ }
+
+ #mpinLogo {
+ @include mpin-logo();
+ display: block;
+ }
+
+ }
+
+ #accountTopBar {
+
+ margin: 10px 10px 0 10px;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #mpinUser {
+
+ @include box-flex-value(1.0);
+ @include mpin-user();
+ }
+
+ #menuBtn {
+ display: block;
+ overflow: hidden;
+ border: none;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ -o-border-radius: 0;
+ -ms-border-radius: 0;
+ min-height: 2em;
+ padding: .3em .6em;
+ @include mpin-menu();
+
+ &.activeBtn {
+ margin-left: 87%;
+ @include mpin-menu-active();
+ }
+ }
+
+ }
+
+ #addIdentity {
+
+ @include top-heading();
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ text-align: center;
+ text-transform: uppercase;
+
+ display: flex !important;
+ display: -webkit-box !important;
+ display: -ms-flexbox !important;
+
+ .identityHeader {
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -ms-flex-pack: center;
+
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ #mpinIdentities {
+ margin-top: 20px;
+ margin-bottom: 5px;
+
+ .mp_accountField {
+
+ }
+ }
+
+ #mp_accountListView, #mp_operationView {
+
+ height: 250px;
+ overflow: auto;
+ overflow-x: hidden;
+
+ @include central-content();
+
+ /*To be put in _darkgrey*/
+
+ &.active {
+ border: 1px solid #666;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .mp_customScrollBox {
+ width: 100%;
+ color: #FFFFFF;
+ }
+
+ .mp_starIcon{
+ background: url('#{$IMAGES}/star_inactive.svg') right top no-repeat;
+ position: relative;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ margin: 21px 10px;
+ border-style: none;
+ border-width: 0;
+ border: 0;
+ }
+
+ .mp_titleItem {
+ display: inline-block;
+ position: absolute;
+ top: 21px;
+ }
+
+ -webkit-box-flex: 10;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ .default {
+ background: #3c9dcb;
+ .mp_starIcon {
+ background: url('#{$IMAGES}/star_active.svg') right top no-repeat;
+ }
+ }
+
+ .one-edge-shadow {
+ box-shadow: 0 8px 6px -6px #000000;
+ font-size: 12px;
+ }
+
+ .mp_buttonItem {
+ float: right;
+ }
+
+ .mp_buttonItem {
+ display: block;
+ position: absolute;
+ top: 15px;
+ right: 10px;
+ z-index: 9999;
+ cursor: pointer;
+
+ img {
+ background-color: white;
+ border-radius: 4px;
+ }
+ }
+
+
+ .mp_contentItem {
+ position: relative;
+ height: 58px;
+ border-bottom: 2px solid #666666;
+ }
+ .mp_accountField {
+ text-align: center;
+ color: #3C9DCB;
+ }
+
+
+ .mp_bottomFrame {
+ border-top-color: #666666;
+ border-top-style: solid;
+ border-top-width: 2px;
+ height: 108px;
+ text-align: center;
+ }
+
+ .mpinBtn {
+ padding: 10px;
+ }
+
+
+ button.mpinGreyButton {
+ border-color: #aaa #888 #888 #aaa;
+ border-image: none;
+ border-right: 1px solid #888;
+ border-style: solid;
+ border-width: 1px;
+ border: 1px solid transparent!important;
+ border-radius: .3em .3em .3em .3em;
+ box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 25px 30px -12px rgba(255,255,255,0.4) inset,0 1px 2px rgba(0,0,0,0.6);
+ outline: medium none;
+ background-color: #fff;
+ cursor: pointer;
+ color: #3c3c3c;
+ font-size: 12px;
+ font-weight: bold;
+ padding: 13px 10px 10px;
+ margin-top: 10px;
+ }
+ button.mpinGreyButton:hover {
+ background-color: #e2e2e2;
+ color: #3c3c3c;
+ cursor: pointer;
+ }
+
+
+ .mp_headerFrame {
+ height: 175px;
+ text-align: center;
+ color: white;
+ }
+ .mp_alertTitle {
+ font-weight: bold;
+ padding-bottom: 20px;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 20px;
+ }
+ }
+
+ #mp_operationView {
+ height: 291px;
+ }
+
+
+ #identityContainer {
+
+ @include central-content();
+
+ /*To be put in _darkgrey*/
+
+ &.active {
+ border: 1px solid #666;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ -webkit-box-flex: 10;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+
+ box-shadow: 0 8px 6px -6px #000000;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+
+ .inputContainer {
+
+ min-height: 0 !important;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ // Align items center
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ background-color: transparent;
+ margin-bottom: 2%;
+ width: 100%;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ .identityElHolder {
+
+ background-color: transparent;
+ margin-bottom: 2%;
+ width: 90%;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ .identityText {
+
+ @include input-heading();
+
+ }
+
+ .identityInput {
+
+ width: 100%;
+ position: relative;
+ min-width: 3.7em;
+
+ #emailInput {
+
+ @include email-input();
+
+ -webkit-user-select: text;
+ -webkit-appearance: none;
+
+ border-width: 0;
+ -webkit-appearance: none;
+
+ }
+ }
+
+ }
+
+
+ }
+
+ .identityMainText {
+ color: white;
+
+ .mp_accountField {
+ color: #3c9dcb;
+ }
+
+ h1 {
+ font-size: 1em;
+ font-weight: bold;
+ padding-top: 20px;
+ color: white;
+ }
+
+ .mp_center {
+ padding-top: 30px;
+ }
+
+ .mp_after_center {
+ padding-top: 30px;
+ padding-bottom: 10px;
+ }
+
+ @include central-text();
+
+ display: block;
+
+ .congrats {
+ /*font-size: 1vh;*/
+ font-size: 140%;
+ color: rgb(255, 255, 255);
+ padding: 0px 1%;
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-top: 20px;
+ }
+
+ .identityBodyText {
+
+ @include body-text();
+ display: block;
+ }
+
+ .email {
+ color: #3c9dcb;
+ padding: 10px 5px 20px 5px;
+ display: block;
+ }
+ }
+
+ }
+
+ #mpinFooter {
+
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ @include mpin-copyright();
+
+ .mpinHelpHub {
+ height: 45px;
+ width: 120px;
+ background: url('#{$IMAGES}/m-pin-header-logo.svg') no-repeat;
+ background-size: 100px 30px;
+ background-position: center;
+ display: block;
+ position: relative;
+ top: -8px;
+ }
+ }
+
+ // General button styling
+
+ #mp_action_setup {
+ @include mpin-button();
+ padding: 13px 10px 10px;
+ }
+
+ .mpinBtn {
+ @include mpin-button();
+
+ // Set as display flex
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+
+ margin-bottom: 1%;
+
+ width: 100%;
+ height: auto;
+
+ .iconArrow {
+ @include arrow-icon();
+ display: block;
+
+ position: relative;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .btnLabel {
+ @include btn-text-label();
+
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ // white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
+ display: block;
+ overflow: hidden;
+ text-shadow:none;
+ }
+
+ .btnLabelArrow {
+ margin-left: 40px;
+ }
+ }
+}
+
+// Activate Identity Screen
+
+
+// Import mediaqueries
+@if $MOBILE == true {
+ /*@import 'mediaqueries';*/
+ @media only screen and (max-width: 480px) and (min-width: 320px)
+ {
+ body {
+ min-height: 400px;
+ }
+ }
+
+ @media screen and (orientation: landscape) {
+
+
+ .pinpadGlobal {
+ padding: 10px;
+ }
+
+
+
+ header.pinpad {
+
+ #topNav #mpinLogo {
+ position: absolute;
+ right: 50%;
+ bottom: 10px;
+ }
+
+ #mp_action_home {
+ left: 0;
+ right: 50%;
+ bottom: 12px;
+ z-index: 10;
+ position: absolute;
+ cursor: pointer;
+ }
+
+ border-bottom: 0 !important;
+ }
+
+ #mpinMaster #accountTopBar {
+ margin: 0 ;
+ }
+
+ #homeIcon {
+ display: none !important;
+ }
+
+ .mpinBtn {
+ padding: 0px 10px 0px !important;
+ }
+
+ #pinsHolder {
+ left: auto !important;
+ width: 47% !important;
+ width: calc(50% - 15px) !important;
+ font-size: 14px !important;
+ position: absolute !important;
+ right: 0 !important;
+ top: 0 !important;
+ margin-bottom: 0 !important;
+ @if $BORDERLESS == true {
+ border: 2px solid white !important;
+ }
+ z-index: 5 !important;
+ }
+
+ #inputContainer {
+ position: absolute!important;
+ top: 47%!important;
+ border: 2px solid white!important;
+ border-right: none!important;
+ height: auto!important;
+ margin-top: -10px!important;
+ margin-right: -10px!important;
+ z-index: 10!important;
+ left: -100%;
+ width: 100%;
+ }
+
+ #accountTopBar {
+ width: 100%!important;
+ position: absolute!important;
+ margin: 0 !important!important;
+ top: 27%!important;
+ right: 0!important;
+ }
+
+ #mpinFooter.pinpad {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ margin: 0;
+ }
+
+
+
+ #mpinContainer #accountTopBar #menuBtn {
+ position: absolute;
+ right: 50%;
+ margin-right: 10px;
+ margin-top: -15px;
+ z-index: 100;
+ }
+
+ }
+}
diff --git a/browser/sass/pinpads.scss b/browser/sass/pinpads.scss
new file mode 100644
index 0000000..c6ea8a7
--- /dev/null
+++ b/browser/sass/pinpads.scss
@@ -0,0 +1,125 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+.mpinInput {
+ height: 23%;
+ background: #fff;
+ margin: 0 auto;
+ padding: 1%;
+
+
+
+ &.mpinInputError {
+ @include pin-pad-input-error();
+ }
+
+ .mpinInputIn {
+ margin: 0 auto;
+ width: 90%;
+ padding: 7% 1%;
+ text-align: center;
+
+ & i {
+ background-image: url('#{$IMAGES}/info.svg');
+ display: block;
+ width: 21px;
+ height: 35px;
+ float:left;
+ background-repeat: no-repeat;
+ background-position:center;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
+ .mpinInputErrorText {
+ @include pin-pad-input-text-error();
+ }
+
+ }
+
+ .mpinCircle {
+ @include pinpad-circle();
+
+ .mpinCircleIn {
+ @include pinpad-circlein();
+ }
+ .mpinCircleOut {
+ @include pinpad-circleout();
+ }
+ }
+
+
+ .mpinInputText {
+ text-align: center;
+ line-height: 20px;
+
+ @include pin-pad-input-text();
+
+ &.mpinInputTop {
+ display: block;
+ margin-top: 9px;
+ }
+ }
+
+ .mpin80width {
+ /*width: 75% !important;*/
+ width: 80%;
+ text-align: center;
+ }
+
+ .mpin70width {
+ width: 70%;
+ text-align: center;
+ }
+}
+
+.mpin-pre-row {
+
+ height: 19%;
+
+ .mpin-row {
+ @include display-box-flex();
+
+ height: 100%;
+
+ .mpinPadBtn {
+ @include pin-pad-button();
+
+ &:active {
+ @include pin-pad-button-active();
+ }
+
+ }
+
+ .mpinPadBtn2 {
+ @include pin-pad-button-text();
+
+ &:active {
+ @include pin-pad-button-active();
+ }
+ }
+
+ .mpinBtnDisabled {
+ opacity: 0.5;
+ }
+ }
+
+}
+
+
diff --git a/browser/settings.json_build b/browser/settings.json_build
new file mode 100644
index 0000000..f906f12
--- /dev/null
+++ b/browser/settings.json_build
@@ -0,0 +1,5 @@
+{
+"URLBase": "/public/mpin",
+"templateName": "milagro",
+"canvasColor": "444"
+}
diff --git a/browser/themes/milagro/images/arrow-icon.svg b/browser/themes/milagro/images/arrow-icon.svg
new file mode 100644
index 0000000..f73a5e4
--- /dev/null
+++ b/browser/themes/milagro/images/arrow-icon.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#4891dc" d="M8,3.5l8,5v4l-8-5l-8,5v-4L8,3.5z"/>
+</svg>
diff --git a/browser/themes/milagro/images/blank.svg b/browser/themes/milagro/images/blank.svg
new file mode 100644
index 0000000..9aa6200
--- /dev/null
+++ b/browser/themes/milagro/images/blank.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1000"
+ height="600"
+ viewBox="0 0 5 3">
+
+ <defs>
+ <clipPath id="a">
+ <rect
+ width="5"
+ height="3" />
+ </clipPath>
+ </defs>
+
+
+ <path
+ d="M 0,0 L 5,3 M 0,3 L 5,0"
+ stroke="#fff"
+ stroke-width=".3"
+ clip-path="url(#a)" />
+</svg>
diff --git a/browser/themes/milagro/images/blank_footer.svg b/browser/themes/milagro/images/blank_footer.svg
new file mode 100644
index 0000000..b2601ad
--- /dev/null
+++ b/browser/themes/milagro/images/blank_footer.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1000"
+ height="600"
+ viewBox="0 0 5 3">
+
+ <defs>
+ <clipPath id="a">
+ <rect
+ width="5"
+ height="3" />
+ </clipPath>
+ </defs>
+
+
+ <path
+ d="M 0,0 L 5,3 M 0,3 L 5,0"
+ stroke="#ccc"
+ stroke-width=".3"
+ clip-path="url(#a)" />
+</svg>
diff --git a/browser/themes/milagro/images/compose-green.svg b/browser/themes/milagro/images/compose-green.svg
new file mode 100644
index 0000000..e317551
--- /dev/null
+++ b/browser/themes/milagro/images/compose-green.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="104 231 459 459" enable-background="new 104 231 459 459" xml:space="preserve">
+<path fill="#4891dc" d="M104,690V575.2L448.2,231h38.2l76.5,76.5v38.2L218.8,690H104z M276.1,556.1l210.4-210.4l-38.2-38.2
+ L237.9,517.9L276.1,556.1z M180.5,575.2l-38.2,38.2v38.2h38.2l38.2-38.2L180.5,575.2z"/>
+</svg>
diff --git a/browser/themes/milagro/images/compose.svg b/browser/themes/milagro/images/compose.svg
new file mode 100644
index 0000000..a5c62e7
--- /dev/null
+++ b/browser/themes/milagro/images/compose.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="104 231 459 459" enable-background="new 104 231 459 459" xml:space="preserve">
+<path fill="#FFFFFF" d="M104,690V575.2L448.2,231h38.2l76.5,76.5v38.2L218.8,690H104z M276.1,556.1l210.4-210.4l-38.2-38.2
+ L237.9,517.9L276.1,556.1z M180.5,575.2l-38.2,38.2v38.2h38.2l38.2-38.2L180.5,575.2z"/>
+</svg>
diff --git a/browser/themes/milagro/images/en_generic_rgb_wo_45.png b/browser/themes/milagro/images/en_generic_rgb_wo_45.png
new file mode 100644
index 0000000..73dd393
--- /dev/null
+++ b/browser/themes/milagro/images/en_generic_rgb_wo_45.png
Binary files differ
diff --git a/browser/themes/milagro/images/home-white.svg b/browser/themes/milagro/images/home-white.svg
new file mode 100644
index 0000000..648f784
--- /dev/null
+++ b/browser/themes/milagro/images/home-white.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-0.2 270 612 612" enable-background="new -0.2 270 612 612" xml:space="preserve">
+<path fill="#FFFFFF" d="M600.6,507.3L374.7,281.4c-8.6-8.6-20.2-12-31.6-11.1h-74.6c-11.4-1-22.9,2.4-31.6,11.1L191,327.3v-57H76.5
+ v171.5l-65.4,65.4c-8.6,8.6-12,20.2-11,31.6v75.5c0,21.2,17.1,38.2,38.2,38.2h38.2v191.1c0,21.2,17.1,38.2,38.2,38.2l114.7,0.2
+ l0.1-229.7l152.6,0l0.3,229.5h114.6c21.2,0,38.2-17.1,38.2-38.2V652.5h38.2c21.2,0,38.2-17.1,38.2-38.2v-75.5
+ C612.6,527.5,609.2,515.9,600.6,507.3z M229.4,805.4 M382.4,805.5"/>
+</svg>
diff --git a/browser/themes/milagro/images/home.svg b/browser/themes/milagro/images/home.svg
new file mode 100644
index 0000000..8d2df0e
--- /dev/null
+++ b/browser/themes/milagro/images/home.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g opacity="0.3">
+ <line fill="none" stroke="#B35047" x1="48" y1="0" x2="48" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="80" y1="0" x2="80" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="112" y1="0" x2="112" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="144" y1="0" x2="144" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="176" y1="0" x2="176" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="208" y1="0" x2="208" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="240" y1="0" x2="240" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="272" y1="0" x2="272" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="304" y1="0" x2="304" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="336" y1="0" x2="336" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="368" y1="0" x2="368" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="400" y1="0" x2="400" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="432" y1="0" x2="432" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="464" y1="0" x2="464" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="496" y1="0" x2="496" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="48" x2="512" y2="48"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="80" x2="512" y2="80"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="112" x2="512" y2="112"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="144" x2="512" y2="144"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="176" x2="512" y2="176"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="208" x2="512" y2="208"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="240" x2="512" y2="240"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="272" x2="512" y2="272"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="304" x2="512" y2="304"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="336" x2="512" y2="336"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="368" x2="512" y2="368"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="400" x2="512" y2="400"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="432" x2="512" y2="432"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="464" x2="512" y2="464"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="496" x2="512" y2="496"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="16" x2="512" y2="16"/>
+ <line fill="none" stroke="#B35047" x1="16" y1="0" x2="16" y2="512"/>
+</g>
+<g>
+ <line fill="none" stroke="#B35047" x1="32" y1="0" x2="32" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="64" y1="0" x2="64" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="96" y1="0" x2="96" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="128" y1="0" x2="128" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="160" y1="0" x2="160" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="192" y1="0" x2="192" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="224" y1="0" x2="224" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="256" y1="0" x2="256" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="288" y1="0" x2="288" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="320" y1="0" x2="320" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="352" y1="0" x2="352" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="384" y1="0" x2="384" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="416" y1="0" x2="416" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="448" y1="0" x2="448" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="480" y1="0" x2="480" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="32" x2="512" y2="32"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="64" x2="512" y2="64"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="96" x2="512" y2="96"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="128" x2="512" y2="128"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="160" x2="512" y2="160"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="192" x2="512" y2="192"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="224" x2="512" y2="224"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="256" x2="512" y2="256"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="288" x2="512" y2="288"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="320" x2="512" y2="320"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="352" x2="512" y2="352"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="384" x2="512" y2="384"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="416" x2="512" y2="416"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="448" x2="512" y2="448"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="480" x2="512" y2="480"/>
+ <rect fill="none" stroke="#B35047" width="512" height="512"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M502.688,198.484L313.579,9.391c-7.217-7.248-16.901-10.044-26.368-9.263h-62.422
+ c-9.466-0.781-19.151,2.015-26.368,9.263l-38.396,38.397V0.128H64.049v143.636L9.312,198.484
+ c-7.248,7.248-10.028,16.917-9.247,26.368v63.202c0,17.668,14.309,31.993,31.991,31.993h31.992v159.959
+ c0,17.668,14.309,31.992,31.992,31.992H415.96c17.683,0,31.992-14.324,31.992-31.992V320.048h31.991
+ c17.684,0,31.992-14.325,31.992-31.993v-63.202C512.717,215.401,509.937,205.732,502.688,198.484z M447.952,256.063h-63.984v191.951
+ h-63.983V320.048H192.017v127.967h-63.984V256.063H64.049v-17.746L238.255,64.111h35.491l174.206,174.206V256.063z"/>
+</svg>
diff --git a/browser/themes/milagro/images/ios-appstore.svg b/browser/themes/milagro/images/ios-appstore.svg
new file mode 100644
index 0000000..ac111e5
--- /dev/null
+++ b/browser/themes/milagro/images/ios-appstore.svg
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" width="135px" height="40px" viewBox="0 0 135 40" enable-background="new 0 0 135 40" xml:space="preserve">
+<g>
+ <path fill="#A6A6A6" d="M130.197,40H4.729C2.122,40,0,37.872,0,35.267V4.726C0,2.12,2.122,0,4.729,0h125.468
+ C132.803,0,135,2.12,135,4.726v30.541C135,37.872,132.803,40,130.197,40L130.197,40z"/>
+ <path d="M134.032,35.268c0,2.116-1.714,3.83-3.834,3.83H4.729c-2.119,0-3.839-1.714-3.839-3.83V4.725
+ c0-2.115,1.72-3.835,3.839-3.835h125.468c2.121,0,3.834,1.72,3.834,3.835L134.032,35.268L134.032,35.268z"/>
+ <g>
+ <g>
+ <path fill="#FFFFFF" d="M30.128,19.784c-0.029-3.223,2.639-4.791,2.761-4.864c-1.511-2.203-3.853-2.504-4.676-2.528
+ c-1.967-0.207-3.875,1.177-4.877,1.177c-1.022,0-2.565-1.157-4.228-1.123c-2.14,0.033-4.142,1.272-5.24,3.196
+ c-2.266,3.923-0.576,9.688,1.595,12.859c1.086,1.553,2.355,3.287,4.016,3.226c1.625-0.067,2.232-1.036,4.193-1.036
+ c1.943,0,2.513,1.036,4.207,0.997c1.744-0.028,2.842-1.56,3.89-3.127c1.255-1.78,1.759-3.533,1.779-3.623
+ C33.507,24.924,30.161,23.647,30.128,19.784z"/>
+ <path fill="#FFFFFF" d="M26.928,10.306c0.874-1.093,1.472-2.58,1.306-4.089c-1.265,0.056-2.847,0.875-3.758,1.944
+ c-0.806,0.942-1.526,2.486-1.34,3.938C24.557,12.205,26.016,11.382,26.928,10.306z"/>
+ </g>
+ </g>
+ <g>
+ <path fill="#FFFFFF" d="M53.645,31.504h-2.271l-1.244-3.909h-4.324l-1.185,3.909h-2.211l4.284-13.308h2.646L53.645,31.504z
+ M49.755,25.955L48.63,22.48c-0.119-0.355-0.342-1.191-0.671-2.507h-0.04c-0.131,0.566-0.342,1.402-0.632,2.507l-1.105,3.475
+ H49.755z"/>
+ <path fill="#FFFFFF" d="M64.662,26.588c0,1.632-0.441,2.922-1.323,3.869c-0.79,0.843-1.771,1.264-2.942,1.264
+ c-1.264,0-2.172-0.454-2.725-1.362h-0.04v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
+ c0.711-1.146,1.79-1.718,3.238-1.718c1.132,0,2.077,0.447,2.833,1.342C64.284,23.949,64.662,25.127,64.662,26.588z M62.49,26.666
+ c0-0.934-0.21-1.704-0.632-2.31c-0.461-0.632-1.08-0.948-1.856-0.948c-0.526,0-1.004,0.176-1.431,0.523
+ c-0.428,0.35-0.708,0.807-0.839,1.373c-0.066,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.642,1.768
+ s0.984,0.721,1.668,0.721c0.803,0,1.428-0.31,1.875-0.928C62.266,28.496,62.49,27.68,62.49,26.666z"/>
+ <path fill="#FFFFFF" d="M75.699,26.588c0,1.632-0.441,2.922-1.324,3.869c-0.789,0.843-1.77,1.264-2.941,1.264
+ c-1.264,0-2.172-0.454-2.724-1.362H68.67v5.055h-2.132V25.067c0-1.026-0.027-2.079-0.079-3.159h1.875l0.119,1.521h0.04
+ c0.71-1.146,1.789-1.718,3.238-1.718c1.131,0,2.076,0.447,2.834,1.342C75.32,23.949,75.699,25.127,75.699,26.588z M73.527,26.666
+ c0-0.934-0.211-1.704-0.633-2.31c-0.461-0.632-1.078-0.948-1.855-0.948c-0.527,0-1.004,0.176-1.432,0.523
+ c-0.428,0.35-0.707,0.807-0.838,1.373c-0.065,0.264-0.099,0.48-0.099,0.65v1.6c0,0.698,0.214,1.287,0.64,1.768
+ c0.428,0.48,0.984,0.721,1.67,0.721c0.803,0,1.428-0.31,1.875-0.928C73.303,28.496,73.527,27.68,73.527,26.666z"/>
+ <path fill="#FFFFFF" d="M88.039,27.772c0,1.132-0.393,2.053-1.182,2.764c-0.867,0.777-2.074,1.165-3.625,1.165
+ c-1.432,0-2.58-0.276-3.449-0.829l0.494-1.777c0.936,0.566,1.963,0.85,3.082,0.85c0.803,0,1.428-0.182,1.877-0.544
+ c0.447-0.362,0.67-0.848,0.67-1.454c0-0.54-0.184-0.995-0.553-1.364c-0.367-0.369-0.98-0.712-1.836-1.029
+ c-2.33-0.869-3.494-2.142-3.494-3.816c0-1.094,0.408-1.991,1.225-2.689c0.814-0.699,1.9-1.048,3.258-1.048
+ c1.211,0,2.217,0.211,3.02,0.632l-0.533,1.738c-0.75-0.408-1.598-0.612-2.547-0.612c-0.75,0-1.336,0.185-1.756,0.553
+ c-0.355,0.329-0.533,0.73-0.533,1.205c0,0.526,0.203,0.961,0.611,1.303c0.355,0.316,1,0.658,1.936,1.027
+ c1.145,0.461,1.986,1,2.527,1.618C87.77,26.081,88.039,26.852,88.039,27.772z"/>
+ <path fill="#FFFFFF" d="M95.088,23.508h-2.35v4.659c0,1.185,0.414,1.777,1.244,1.777c0.381,0,0.697-0.033,0.947-0.099l0.059,1.619
+ c-0.42,0.157-0.973,0.236-1.658,0.236c-0.842,0-1.5-0.257-1.975-0.77c-0.473-0.514-0.711-1.376-0.711-2.587v-4.837h-1.4v-1.6h1.4
+ v-1.757l2.094-0.632v2.389h2.35V23.508z"/>
+ <path fill="#FFFFFF" d="M105.691,26.627c0,1.475-0.422,2.686-1.264,3.633c-0.883,0.975-2.055,1.461-3.516,1.461
+ c-1.408,0-2.529-0.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487,0.43-2.705,1.293-3.652c0.861-0.948,2.023-1.422,3.484-1.422
+ c1.408,0,2.541,0.467,3.396,1.402C105.283,24.021,105.691,25.192,105.691,26.627z M103.479,26.696
+ c0-0.885-0.189-1.644-0.572-2.277c-0.447-0.766-1.086-1.148-1.914-1.148c-0.857,0-1.508,0.383-1.955,1.148
+ c-0.383,0.634-0.572,1.405-0.572,2.317c0,0.885,0.189,1.644,0.572,2.276c0.461,0.766,1.105,1.148,1.936,1.148
+ c0.814,0,1.453-0.39,1.914-1.168C103.281,28.347,103.479,27.58,103.479,26.696z"/>
+ <path fill="#FFFFFF" d="M112.621,23.783c-0.211-0.039-0.436-0.059-0.672-0.059c-0.75,0-1.33,0.283-1.738,0.85
+ c-0.355,0.5-0.533,1.132-0.533,1.895v5.035h-2.131l0.02-6.574c0-1.106-0.027-2.113-0.08-3.021h1.857l0.078,1.836h0.059
+ c0.225-0.631,0.58-1.139,1.066-1.52c0.475-0.343,0.988-0.514,1.541-0.514c0.197,0,0.375,0.014,0.533,0.039V23.783z"/>
+ <path fill="#FFFFFF" d="M122.156,26.252c0,0.382-0.025,0.704-0.078,0.967h-6.396c0.025,0.948,0.334,1.673,0.928,2.173
+ c0.539,0.447,1.236,0.671,2.092,0.671c0.947,0,1.811-0.151,2.588-0.454l0.334,1.48c-0.908,0.396-1.98,0.593-3.217,0.593
+ c-1.488,0-2.656-0.438-3.506-1.313c-0.848-0.875-1.273-2.05-1.273-3.524c0-1.447,0.395-2.652,1.186-3.613
+ c0.828-1.026,1.947-1.539,3.355-1.539c1.383,0,2.43,0.513,3.141,1.539C121.873,24.047,122.156,25.055,122.156,26.252z
+ M120.123,25.699c0.014-0.632-0.125-1.178-0.414-1.639c-0.369-0.593-0.936-0.889-1.699-0.889c-0.697,0-1.264,0.289-1.697,0.869
+ c-0.355,0.461-0.566,1.014-0.631,1.658H120.123z"/>
+ </g>
+ <g>
+ <g>
+ <path fill="#FFFFFF" d="M49.05,10.009c0,1.177-0.353,2.063-1.058,2.658c-0.653,0.549-1.581,0.824-2.783,0.824
+ c-0.596,0-1.106-0.026-1.533-0.078V6.982c0.557-0.09,1.157-0.136,1.805-0.136c1.145,0,2.008,0.249,2.59,0.747
+ C48.723,8.156,49.05,8.961,49.05,10.009z M47.945,10.038c0-0.763-0.202-1.348-0.606-1.756c-0.404-0.407-0.994-0.611-1.771-0.611
+ c-0.33,0-0.611,0.022-0.844,0.068v4.889c0.129,0.02,0.365,0.029,0.708,0.029c0.802,0,1.421-0.223,1.857-0.669
+ S47.945,10.892,47.945,10.038z"/>
+ <path fill="#FFFFFF" d="M54.909,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.009,0.718-1.727,0.718
+ c-0.692,0-1.243-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.712-0.698
+ c0.692,0,1.248,0.229,1.669,0.688C54.708,9.757,54.909,10.333,54.909,11.037z M53.822,11.071c0-0.435-0.094-0.808-0.281-1.119
+ c-0.22-0.376-0.533-0.564-0.94-0.564c-0.421,0-0.741,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
+ c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.714-0.191,0.94-0.574
+ C53.725,11.882,53.822,11.506,53.822,11.071z"/>
+ <path fill="#FFFFFF" d="M62.765,8.719l-1.475,4.714h-0.96l-0.611-2.047c-0.155-0.511-0.281-1.019-0.379-1.523h-0.019
+ c-0.091,0.518-0.217,1.025-0.379,1.523l-0.649,2.047h-0.971l-1.387-4.714h1.077l0.533,2.241c0.129,0.53,0.235,1.035,0.32,1.513
+ h0.019c0.078-0.394,0.207-0.896,0.389-1.503l0.669-2.25h0.854l0.641,2.202c0.155,0.537,0.281,1.054,0.378,1.552h0.029
+ c0.071-0.485,0.178-1.002,0.32-1.552l0.572-2.202H62.765z"/>
+ <path fill="#FFFFFF" d="M68.198,13.433H67.15v-2.7c0-0.832-0.316-1.248-0.95-1.248c-0.311,0-0.562,0.114-0.757,0.343
+ c-0.193,0.229-0.291,0.499-0.291,0.808v2.796h-1.048v-3.366c0-0.414-0.013-0.863-0.038-1.349h0.921l0.049,0.737h0.029
+ c0.122-0.229,0.304-0.418,0.543-0.569c0.284-0.176,0.602-0.265,0.95-0.265c0.44,0,0.806,0.142,1.097,0.427
+ c0.362,0.349,0.543,0.87,0.543,1.562V13.433z"/>
+ <path fill="#FFFFFF" d="M71.088,13.433h-1.047V6.556h1.047V13.433z"/>
+ <path fill="#FFFFFF" d="M77.258,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.01,0.718-1.727,0.718
+ c-0.693,0-1.244-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.711-0.698
+ c0.693,0,1.248,0.229,1.67,0.688C77.057,9.757,77.258,10.333,77.258,11.037z M76.17,11.071c0-0.435-0.094-0.808-0.281-1.119
+ c-0.219-0.376-0.533-0.564-0.939-0.564c-0.422,0-0.742,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
+ c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.713-0.191,0.939-0.574
+ C76.074,11.882,76.17,11.506,76.17,11.071z"/>
+ <path fill="#FFFFFF" d="M82.33,13.433h-0.941l-0.078-0.543h-0.029c-0.322,0.433-0.781,0.65-1.377,0.65
+ c-0.445,0-0.805-0.143-1.076-0.427c-0.246-0.258-0.369-0.579-0.369-0.96c0-0.576,0.24-1.015,0.723-1.319
+ c0.482-0.304,1.16-0.453,2.033-0.446V10.3c0-0.621-0.326-0.931-0.979-0.931c-0.465,0-0.875,0.117-1.229,0.349l-0.213-0.688
+ c0.438-0.271,0.979-0.407,1.617-0.407c1.232,0,1.85,0.65,1.85,1.95v1.736C82.262,12.78,82.285,13.155,82.33,13.433z
+ M81.242,11.813v-0.727c-1.156-0.02-1.734,0.297-1.734,0.95c0,0.246,0.066,0.43,0.201,0.553c0.135,0.123,0.307,0.184,0.512,0.184
+ c0.23,0,0.445-0.073,0.641-0.218c0.197-0.146,0.318-0.331,0.363-0.558C81.236,11.946,81.242,11.884,81.242,11.813z"/>
+ <path fill="#FFFFFF" d="M88.285,13.433h-0.93l-0.049-0.757h-0.029c-0.297,0.576-0.803,0.864-1.514,0.864
+ c-0.568,0-1.041-0.223-1.416-0.669s-0.562-1.025-0.562-1.736c0-0.763,0.203-1.381,0.611-1.853c0.395-0.44,0.879-0.66,1.455-0.66
+ c0.633,0,1.076,0.213,1.328,0.64h0.02V6.556h1.049v5.607C88.248,12.622,88.26,13.045,88.285,13.433z M87.199,11.445v-0.786
+ c0-0.136-0.01-0.246-0.029-0.33c-0.059-0.252-0.186-0.464-0.379-0.635c-0.195-0.171-0.43-0.257-0.701-0.257
+ c-0.391,0-0.697,0.155-0.922,0.466c-0.223,0.311-0.336,0.708-0.336,1.193c0,0.466,0.107,0.844,0.322,1.135
+ c0.227,0.31,0.533,0.465,0.916,0.465c0.344,0,0.619-0.129,0.828-0.388C87.1,12.069,87.199,11.781,87.199,11.445z"/>
+ <path fill="#FFFFFF" d="M97.248,11.037c0,0.725-0.207,1.319-0.621,1.785c-0.434,0.479-1.008,0.718-1.727,0.718
+ c-0.691,0-1.242-0.229-1.654-0.689c-0.41-0.459-0.615-1.038-0.615-1.736c0-0.73,0.211-1.329,0.635-1.794s0.994-0.698,1.713-0.698
+ c0.691,0,1.248,0.229,1.668,0.688C97.047,9.757,97.248,10.333,97.248,11.037z M96.162,11.071c0-0.435-0.094-0.808-0.281-1.119
+ c-0.221-0.376-0.533-0.564-0.941-0.564c-0.42,0-0.74,0.188-0.961,0.564c-0.188,0.311-0.281,0.69-0.281,1.138
+ c0,0.435,0.094,0.808,0.281,1.119c0.227,0.376,0.543,0.564,0.951,0.564c0.4,0,0.715-0.191,0.941-0.574
+ C96.064,11.882,96.162,11.506,96.162,11.071z"/>
+ <path fill="#FFFFFF" d="M102.883,13.433h-1.047v-2.7c0-0.832-0.316-1.248-0.951-1.248c-0.311,0-0.562,0.114-0.756,0.343
+ s-0.291,0.499-0.291,0.808v2.796h-1.049v-3.366c0-0.414-0.012-0.863-0.037-1.349h0.92l0.049,0.737h0.029
+ c0.123-0.229,0.305-0.418,0.543-0.569c0.285-0.176,0.602-0.265,0.951-0.265c0.439,0,0.805,0.142,1.096,0.427
+ c0.363,0.349,0.543,0.87,0.543,1.562V13.433z"/>
+ <path fill="#FFFFFF" d="M109.936,9.504h-1.154v2.29c0,0.582,0.205,0.873,0.611,0.873c0.188,0,0.344-0.016,0.467-0.049
+ l0.027,0.795c-0.207,0.078-0.479,0.117-0.814,0.117c-0.414,0-0.736-0.126-0.969-0.378c-0.234-0.252-0.35-0.676-0.35-1.271V9.504
+ h-0.689V8.719h0.689V7.855l1.027-0.31v1.173h1.154V9.504z"/>
+ <path fill="#FFFFFF" d="M115.484,13.433h-1.049v-2.68c0-0.845-0.316-1.268-0.949-1.268c-0.486,0-0.818,0.245-1,0.735
+ c-0.031,0.103-0.049,0.229-0.049,0.377v2.835h-1.047V6.556h1.047v2.841h0.02c0.33-0.517,0.803-0.775,1.416-0.775
+ c0.434,0,0.793,0.142,1.078,0.427c0.355,0.355,0.533,0.883,0.533,1.581V13.433z"/>
+ <path fill="#FFFFFF" d="M121.207,10.853c0,0.188-0.014,0.346-0.039,0.475h-3.143c0.014,0.466,0.164,0.821,0.455,1.067
+ c0.266,0.22,0.609,0.33,1.029,0.33c0.465,0,0.889-0.074,1.271-0.223l0.164,0.728c-0.447,0.194-0.973,0.291-1.582,0.291
+ c-0.73,0-1.305-0.215-1.721-0.645c-0.418-0.43-0.625-1.007-0.625-1.731c0-0.711,0.193-1.303,0.582-1.775
+ c0.406-0.504,0.955-0.756,1.648-0.756c0.678,0,1.193,0.252,1.541,0.756C121.068,9.77,121.207,10.265,121.207,10.853z
+ M120.207,10.582c0.008-0.311-0.061-0.579-0.203-0.805c-0.182-0.291-0.459-0.437-0.834-0.437c-0.342,0-0.621,0.142-0.834,0.427
+ c-0.174,0.227-0.277,0.498-0.311,0.815H120.207z"/>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/browser/themes/milagro/images/iphone-white.svg b/browser/themes/milagro/images/iphone-white.svg
new file mode 100644
index 0000000..68397eb
--- /dev/null
+++ b/browser/themes/milagro/images/iphone-white.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-49 141 512 512" enable-background="new -49 141 512 512" xml:space="preserve">
+<path fill="#FFFFFF" d="M367,141H47c-17.7,0-32,14.3-32,32v448c0,17.7,14.3,32,32,32h320c17.7,0,32-14.3,32-32V173
+ C399,155.3,384.7,141,367,141z M335,525H79V205h256V525z"/>
+</svg>
diff --git a/browser/themes/milagro/images/iphone.svg b/browser/themes/milagro/images/iphone.svg
new file mode 100644
index 0000000..254ee33
--- /dev/null
+++ b/browser/themes/milagro/images/iphone.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g opacity="0.3">
+ <line fill="none" stroke="#B35047" x1="48" y1="0" x2="48" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="80" y1="0" x2="80" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="112" y1="0" x2="112" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="144" y1="0" x2="144" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="176" y1="0" x2="176" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="208" y1="0" x2="208" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="240" y1="0" x2="240" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="272" y1="0" x2="272" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="304" y1="0" x2="304" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="336" y1="0" x2="336" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="368" y1="0" x2="368" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="400" y1="0" x2="400" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="432" y1="0" x2="432" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="464" y1="0" x2="464" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="496" y1="0" x2="496" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="48" x2="512" y2="48"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="80" x2="512" y2="80"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="112" x2="512" y2="112"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="144" x2="512" y2="144"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="176" x2="512" y2="176"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="208" x2="512" y2="208"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="240" x2="512" y2="240"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="272" x2="512" y2="272"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="304" x2="512" y2="304"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="336" x2="512" y2="336"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="368" x2="512" y2="368"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="400" x2="512" y2="400"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="432" x2="512" y2="432"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="464" x2="512" y2="464"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="496" x2="512" y2="496"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="16" x2="512" y2="16"/>
+ <line fill="none" stroke="#B35047" x1="16" y1="0" x2="16" y2="512"/>
+</g>
+<g>
+ <line fill="none" stroke="#B35047" x1="32" y1="0" x2="32" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="64" y1="0" x2="64" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="96" y1="0" x2="96" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="128" y1="0" x2="128" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="160" y1="0" x2="160" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="192" y1="0" x2="192" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="224" y1="0" x2="224" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="256" y1="0" x2="256" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="288" y1="0" x2="288" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="320" y1="0" x2="320" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="352" y1="0" x2="352" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="384" y1="0" x2="384" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="416" y1="0" x2="416" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="448" y1="0" x2="448" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="480" y1="0" x2="480" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="32" x2="512" y2="32"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="64" x2="512" y2="64"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="96" x2="512" y2="96"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="128" x2="512" y2="128"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="160" x2="512" y2="160"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="192" x2="512" y2="192"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="224" x2="512" y2="224"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="256" x2="512" y2="256"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="288" x2="512" y2="288"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="320" x2="512" y2="320"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="352" x2="512" y2="352"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="384" x2="512" y2="384"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="416" x2="512" y2="416"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="448" x2="512" y2="448"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="480" x2="512" y2="480"/>
+ <rect fill="none" stroke="#B35047" width="512" height="512"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M416,0H96C78.328,0,64,14.312,64,32v448c0,17.688,14.328,32,32,32h320
+ c17.672,0,32-14.312,32-32V32C448,14.312,433.672,0,416,0z M384,384H128V64h256V384z"/>
+</svg>
diff --git a/browser/themes/milagro/images/mark.svg b/browser/themes/milagro/images/mark.svg
new file mode 100644
index 0000000..4215fb5
--- /dev/null
+++ b/browser/themes/milagro/images/mark.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-49 141 512 512" enable-background="new -49 141 512 512" xml:space="preserve">
+<path fill="#888888" d="M207,653C65.6,653-49,538.4-49,397c0-141.4,114.6-256,256-256s256,114.6,256,256
+ C463,538.4,348.4,653,207,653z M207,205c-106,0-192,86-192,192s86,192,192,192s192-86,192-192S313,205,207,205z M175,461h64v64h-64
+ V461z M175,269h64v160h-64V269z"/>
+</svg>
diff --git a/browser/themes/milagro/images/milagro.svg b/browser/themes/milagro/images/milagro.svg
new file mode 100644
index 0000000..2e5fded
--- /dev/null
+++ b/browser/themes/milagro/images/milagro.svg
@@ -0,0 +1,40 @@
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="581.8px" height="117px" viewBox="0 0 581.8 117" style="enable-background:new 0 0 581.8 117;"
+ xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#3E454C;}
+ .st1{fill:#C2FF17;}
+ .st2{fill:#31BCA4;}
+ .st3{fill:#40D37B;}
+</style>
+<defs>
+</defs>
+<g>
+ <path class="st0" d="M179.1,95h-6.9L148,34.1V95h-9.9V22.9h15.7l21.9,56.3L198,22.9h15.7V95h-9.9V34.1L179.1,95z"/>
+ <path class="st0" d="M230.6,95V22.9h9.9V95H230.6z"/>
+ <path class="st0" d="M257.5,95V22.9h9.9v63.2h31.3V95H257.5z"/>
+ <path class="st0" d="M354,95l-5.7-15.3h-30.7L312.1,95h-10.8l27.9-72.1h8.7L365.4,95H354z M321,70.8h24.2l-12.1-32.9H333L321,70.8z
+ "/>
+ <path class="st0" d="M408.6,63.9V55h28.2v27.4c-6.9,8.8-17.7,13.8-29.6,13.8c-22,0-38.7-14.9-38.7-37.3c0-21.3,17.4-37.3,38.7-37.3
+ c11.1,0,21,4.9,27.9,12.8l-7,5.8c-5-5.7-12.7-9.7-20.9-9.7C391,30.5,379,42.5,379,58.9c0,17.5,11.7,28.4,28.2,28.4
+ c7.6,0,14.6-2.7,19.7-7.5v-16H408.6z"/>
+ <path class="st0" d="M491.2,95l-21.6-30.5h-7.4V95h-9.9V22.9h21.4c11,0,24.6,5.8,24.6,20.7c0,12.3-8.8,18.4-17.6,20.3L503.6,95
+ H491.2z M473.2,31.8h-11v23.9h9c9.6,0,16.7-3.5,16.7-11.7C487.8,36.6,481.9,31.8,473.2,31.8z"/>
+ <path class="st0" d="M544.8,96.2c-21,0-37.1-16.7-37.1-37.3c0-20.6,16.1-37.3,37.1-37.3c21,0,37.1,16.7,37.1,37.3
+ C581.8,79.5,565.8,96.2,544.8,96.2z M544.8,30.5c-15.3,0-26.6,12.5-26.6,28.4s11.2,28.4,26.6,28.4s26.6-12.5,26.6-28.4
+ S560.1,30.5,544.8,30.5z"/>
+</g>
+<g>
+ <path class="st1" d="M85.9,105.4L1.8,66.2C0.7,65.7,0,64.6,0,63.4v-49c0-2.3,2.4-3.8,4.4-2.8l84.1,39.2c1.1,0.5,1.8,1.6,1.8,2.8v49
+ C90.3,104.9,88,106.4,85.9,105.4z"/>
+ <g>
+ <path class="st2" d="M88.8,52.3L0,93.7l0,20.2c0,2.3,2.4,3.8,4.4,2.8l84.1-39.2c1.1-0.5,1.8-1.6,1.8-2.8V53.6
+ c0-0.7-0.2-1.3-0.5-1.8l0,0l0,0c0,0,0,0,0,0l0,0c-0.2-0.4-0.6-0.6-1-0.9c0.2,0.2,0.3,0.4,0.3,0.7C89.1,51.9,89,52.1,88.8,52.3z"/>
+ </g>
+ <g>
+ <path class="st3" d="M1.6,64.7l88.8-41.4V3.1c0-2.3-2.4-3.8-4.4-2.8L1.8,39.5C0.7,40,0,41.1,0,42.3v21.1c0,0.7,0.2,1.3,0.5,1.8
+ l0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,0c0.2,0.4,0.6,0.6,1,0.9c-0.2-0.2-0.3-0.4-0.3-0.7C1.2,65.1,1.3,64.9,1.6,64.7z"/>
+ </g>
+</g>
+</svg>
diff --git a/browser/themes/milagro/images/phone.svg b/browser/themes/milagro/images/phone.svg
new file mode 100644
index 0000000..254ee33
--- /dev/null
+++ b/browser/themes/milagro/images/phone.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<g opacity="0.3">
+ <line fill="none" stroke="#B35047" x1="48" y1="0" x2="48" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="80" y1="0" x2="80" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="112" y1="0" x2="112" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="144" y1="0" x2="144" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="176" y1="0" x2="176" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="208" y1="0" x2="208" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="240" y1="0" x2="240" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="272" y1="0" x2="272" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="304" y1="0" x2="304" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="336" y1="0" x2="336" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="368" y1="0" x2="368" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="400" y1="0" x2="400" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="432" y1="0" x2="432" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="464" y1="0" x2="464" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="496" y1="0" x2="496" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="48" x2="512" y2="48"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="80" x2="512" y2="80"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="112" x2="512" y2="112"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="144" x2="512" y2="144"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="176" x2="512" y2="176"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="208" x2="512" y2="208"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="240" x2="512" y2="240"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="272" x2="512" y2="272"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="304" x2="512" y2="304"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="336" x2="512" y2="336"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="368" x2="512" y2="368"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="400" x2="512" y2="400"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="432" x2="512" y2="432"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="464" x2="512" y2="464"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="496" x2="512" y2="496"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="16" x2="512" y2="16"/>
+ <line fill="none" stroke="#B35047" x1="16" y1="0" x2="16" y2="512"/>
+</g>
+<g>
+ <line fill="none" stroke="#B35047" x1="32" y1="0" x2="32" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="64" y1="0" x2="64" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="96" y1="0" x2="96" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="128" y1="0" x2="128" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="160" y1="0" x2="160" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="192" y1="0" x2="192" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="224" y1="0" x2="224" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="256" y1="0" x2="256" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="288" y1="0" x2="288" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="320" y1="0" x2="320" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="352" y1="0" x2="352" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="384" y1="0" x2="384" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="416" y1="0" x2="416" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="448" y1="0" x2="448" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="480" y1="0" x2="480" y2="512"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="32" x2="512" y2="32"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="64" x2="512" y2="64"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="96" x2="512" y2="96"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="128" x2="512" y2="128"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="160" x2="512" y2="160"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="192" x2="512" y2="192"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="224" x2="512" y2="224"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="256" x2="512" y2="256"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="288" x2="512" y2="288"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="320" x2="512" y2="320"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="352" x2="512" y2="352"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="384" x2="512" y2="384"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="416" x2="512" y2="416"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="448" x2="512" y2="448"/>
+ <line fill="none" stroke="#B35047" x1="0" y1="480" x2="512" y2="480"/>
+ <rect fill="none" stroke="#B35047" width="512" height="512"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M416,0H96C78.328,0,64,14.312,64,32v448c0,17.688,14.328,32,32,32h320
+ c17.672,0,32-14.312,32-32V32C448,14.312,433.672,0,416,0z M384,384H128V64h256V384z"/>
+</svg>
diff --git a/browser/themes/milagro/images/screen-green.svg b/browser/themes/milagro/images/screen-green.svg
new file mode 100644
index 0000000..ab9259a
--- /dev/null
+++ b/browser/themes/milagro/images/screen-green.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 270 612 612" enable-background="new 0 270 612 612" xml:space="preserve">
+<path fill="#4891dc" d="M573.8,270H38.2C17.1,270,0,287.1,0,308.2V729c0,21.2,17.1,38.2,38.2,38.2h229.5v38.2H153
+ c-21.2,0-38.2,17.1-38.2,38.2V882h382.5v-38.2c0-21.2-17.1-38.2-38.2-38.2H344.2v-38.2h229.5c21.2,0,38.2-17.1,38.2-38.2v-421
+ C612,287.1,594.9,270,573.8,270z M535.5,690.8h-459V346.5h459V690.8z"/>
+</svg>
diff --git a/browser/themes/milagro/images/screen.svg b/browser/themes/milagro/images/screen.svg
new file mode 100644
index 0000000..53c6e6f
--- /dev/null
+++ b/browser/themes/milagro/images/screen.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 180 612 612" enable-background="new 0 180 612 612" xml:space="preserve">
+<path fill="#FFFFFF" d="M573.8,180H38.2C17.1,180,0,197.1,0,218.2V639c0,21.2,17.1,38.2,38.2,38.2h229.5v38.2H153
+ c-21.2,0-38.2,17.1-38.2,38.2V792h382.5v-38.2c0-21.2-17.1-38.2-38.2-38.2H344.2v-38.2h229.5c21.2,0,38.2-17.1,38.2-38.2V218.2
+ C612,197.1,594.9,180,573.8,180z M535.5,600.8h-459V256.5h459V600.8z"/>
+</svg>
diff --git a/browser/themes/milagro/images/settings-icon.svg b/browser/themes/milagro/images/settings-icon.svg
new file mode 100644
index 0000000..6f5b683
--- /dev/null
+++ b/browser/themes/milagro/images/settings-icon.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 90 612 612" enable-background="new 0 90 612 612" xml:space="preserve">
+<rect y="90" fill="#4891dc" width="612" height="153"/>
+<rect y="319.5" fill="#4891dc" width="612" height="153"/>
+<rect y="549" fill="#4891dc" width="612" height="153"/>
+</svg>
diff --git a/browser/themes/milagro/images/user-green.svg b/browser/themes/milagro/images/user-green.svg
new file mode 100644
index 0000000..8f5aded
--- /dev/null
+++ b/browser/themes/milagro/images/user-green.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 180 611.9 612" enable-background="new 0 180 611.9 612" xml:space="preserve">
+<path fill="#4891dc" d="M456.4,473.3c1.4-8.4,2.6-16.9,2.6-25.6V333c0-84.5-68.5-153-153-153s-153,68.5-153,153v114.8
+ c0,8.7,1.2,17.2,2.6,25.6C63,506.2,0,567.8,0,639v114.8C0,774.9,17.1,792,38.2,792h535.5c21.2,0,38.2-17.1,38.2-38.2V639
+ C612,567.8,549,506.2,456.4,473.3z M229.5,333c0-42.2,34.3-76.5,76.5-76.5s76.5,34.3,76.5,76.5v114.8c0,42.2-34.3,76.5-76.5,76.5
+ s-76.5-34.3-76.5-76.5V333z M535.5,715.5h-459V639c0-41.4,44-77.2,109.5-97.4c28,35.7,71.1,59.2,120,59.2s92-23.4,120-59.2
+ c65.5,20.2,109.5,56.1,109.5,97.4V715.5z"/>
+</svg>
diff --git a/browser/themes/milagro/images/win-phone.png b/browser/themes/milagro/images/win-phone.png
new file mode 100644
index 0000000..0248e8c
--- /dev/null
+++ b/browser/themes/milagro/images/win-phone.png
Binary files differ
diff --git a/browser/themes/milagro/sass/_template.scss b/browser/themes/milagro/sass/_template.scss
new file mode 100644
index 0000000..e956bb0
--- /dev/null
+++ b/browser/themes/milagro/sass/_template.scss
@@ -0,0 +1,844 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+// GLOBAL CONFIGS
+
+$IMAGES : "../images";
+$BORDERLESS : true;
+
+$BUTTON_COLOR: #ffffff;
+$BUTTON_BGCOLOR: #4891dc;
+
+$BGCOLOR: #4891dc;
+$BGCOLOR2: #dfe5e6;
+$BGCOLOR3: #fff;
+
+$BGCOLOR4: #36424a;
+/*e74a00*/
+$BGCOLOR5: #36424a;
+//warning color
+$BGCOLOR6: #ef984a;
+
+@mixin gradient($color1, $color2) {
+ background-image: -moz-linear-gradient(center top , $color1 0%, $color2);
+ background: -webkit-linear-gradient($color1, $color2); /* For Safari 5.1 to 6.0 */
+ background: -o-linear-gradient($color1, $color2); /* For Opera 11.1 to 12.0 */
+ background: -moz-linear-gradient($color1, $color2); /* For Firefox 3.6 to 15 */
+ background: linear-gradient($color1, $color2);
+}
+
+@mixin border-radius($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+}
+
+// IMPORTANT NOTE:
+// This template USE Open SANS font from GOOGLE
+// Insert directly into index html
+
+
+
+//HEADER
+
+@mixin mpin-header () {
+ padding: 5px !important;
+ height: 40px;
+ background: #4891dc;
+}
+
+@mixin mpin-header-big() {
+ text-align:center;
+ font-size: 18px;
+ color: #36424a;
+}
+
+@mixin mobile-bgcolor () {
+ background: $BGCOLOR4;
+}
+
+@mixin mobile-color () {
+ color: $BGCOLOR4;
+}
+
+@mixin mobile-footer () {
+ border-bottom: 10px solid $BGCOLOR4;
+}
+
+@mixin header-logo() {
+ margin: 5px 0;
+ width: 85px;
+ float: right;
+ background: url('#{$IMAGES}/blank.svg') no-repeat;
+ background-size: auto 100%;
+ background-position: right bottom;
+ height: 24px;
+ margin: 3px 6px;
+}
+
+@mixin header-home () {
+ width: 20px;
+ height: 16px;
+ background: url('#{$IMAGES}/home-white.svg') no-repeat;
+ background-size: auto 100%;
+ background-position: left;
+ margin: 7px 6px;
+}
+
+@mixin mpin-header-row () {
+ padding: 5%;
+ font-size: 18px;
+ text-align: center;
+ color: #4891dc;
+}
+
+@mixin identity-row {
+ background: #dfe5e6;
+ height: 40px
+}
+
+@mixin identity-list() {
+ background: $BGCOLOR3;
+ @include border-radius(3px);
+}
+
+@mixin identity-text() {
+ color: $BGCOLOR4;
+ font-size: 24px;
+ letter-spacing: .2em;
+}
+
+@mixin mobile-text() {
+ color: $BGCOLOR4;
+}
+
+@mixin mobile-comming() {
+ margin: 0px auto 26px;
+
+ .mpAppComming {
+ background: url('#{$IMAGES}/comming-soon.png') center no-repeat;
+ width: 173px;
+ height: 57px;
+ display: block;
+ margin: 10px auto;
+ }
+
+ .mpPlay {
+ background: url('#{$IMAGES}/play-store-comming-soon.png') center no-repeat;
+ background-size: auto 100%;
+ width: 167px;
+ height: 57px;
+ display: block;
+ margin: 10px auto;
+ }
+
+ .mpWindows {
+ background: url('#{$IMAGES}/windows-store-comming-soon.png') center no-repeat;
+ background-size: auto 100%;
+ width: 220px;
+ height: 57px;
+ display: block;
+ margin: 10px auto;
+ }
+}
+
+//identity ROW
+@mixin users-row() {
+ color: $BGCOLOR;
+ background: #fff;
+ border-bottom: 1px solid #dfe5e6;
+ min-height: 40px;
+ list-style-type: none;
+
+ &.mpinRowActive {
+ background: $BGCOLOR;
+ color: #fff;
+ box-shadow: inset 5px 0 0 #3c78b5;
+
+ .mpinSettingsRow {
+ color: #fff;
+ padding-left: 10px;
+ font-size: 14px;
+ }
+ .mpinSettings {
+ @include setting-icon("white");
+ }
+ }
+}
+
+@mixin mpin-settings-row () {
+ text-align: left;
+ margin-left: 2px;
+ padding-top: 5px;
+}
+
+@mixin mpin-user-arrow () {
+ top: 0;
+ z-index: 10000;
+}
+
+
+@mixin mpin-logo-pointer () {
+ cursor: pointer;
+}
+
+//#mpinRow:hover
+@mixin users-row-hover () {
+ background: $BGCOLOR;
+ color: #fff;
+ box-shadow: inset 5px 0 0 #218CC4;
+ cursor: pointer;
+ .mpinSettingsRow {
+ color: #fff;
+ }
+ .mpinSettings {
+ /* background: url('#{$IMAGES}/compose.svg') center no-repeat;
+ background-size: auto 100%;
+ width: 30px;
+ height: 30px;*/
+ @include setting-icon("white");
+
+ }
+}
+
+@mixin user-area-slim () {
+ height: 40px;
+}
+@mixin user-area-fat () {
+ height: 88.5%;
+}
+
+@mixin user-row {
+ height: 40px;
+ background-color: #eaeff3;
+}
+
+@mixin help-popup-corner-icon () {
+ content: '';
+ background-image: url('#{$IMAGES}/mark.svg');
+ width: 32px;
+ height: 31px;
+ display: block;
+ position: absolute;
+ top: -16px;
+ left: -16px;
+ background-color: white;
+ background-repeat: no-repeat;
+ background-position: left;
+ background-size: auto 100%;
+ cursor: pointer;
+}
+
+@mixin setting-icon($type:white) {
+ /*border: 1px solid grey;*/
+ @if $type == "white" {
+ background: url('#{$IMAGES}/compose.svg') center no-repeat;
+ } @else {
+ background: url('#{$IMAGES}/compose-green.svg') center no-repeat;
+ }
+ background-size: auto 100%;
+ width: 16px;
+ height: 16px;
+ margin-top: 6px;
+ margin-right: 6px;
+}
+
+
+// Background color
+@mixin bg-color() {
+ background: #fff;
+}
+@mixin margin-top() {
+ margin-top: 10px;
+}
+
+@mixin mpin-main () {
+ height: 80%;
+}
+@mixin mpin-expire-second () {
+ color: #444;
+ text-shadow:none;
+}
+
+// Font family
+
+@mixin font-family() {
+ font-family: "Open Sans", Arial, sans-serif;
+ font-size: 14px;
+}
+
+//
+@mixin pin-pad-wrapper () {
+ /*@include gradient(#3777ba, #56bce0);*/
+ background: white;
+}
+
+@mixin pin-pad-elements () {
+ /*@include gradient(#3777ba, #56bce0);*/
+ height: 92.5%;
+ width: 100%;
+ /*position: relative;*/
+ /*top: 40px;*/
+ z-index: 8000;
+}
+
+@mixin pin-pad-button () {
+ border: 0;
+ background: none;
+ color: $BGCOLOR5;
+ display: block;
+ text-align: center;
+ width: 33%;
+ font-size: 34px;
+ font-weight:normal;
+ margin: 0px;
+ padding: 0px;
+ &:focus {
+ border: none;
+ outline: none;
+ }
+}
+
+@mixin pin-pad-button-text () {
+ border: 0;
+ background: none;
+ color: $BGCOLOR5;
+ display: block;
+ text-align: center;
+ width: 33%;
+ font-size: 26px;
+ font-weight:normal;
+ margin: 0px;
+ padding: 0px;
+ &:focus {
+ border: none;
+ outline: none;
+ }
+}
+
+@mixin pin-pad-input-text () {
+ font-size: 26px;
+ color: #36424a;
+ opacity: 0.6;
+}
+@mixin pin-pad-input-error () {
+ color: $BGCOLOR6;
+}
+@mixin pin-pad-input-text-error () {
+ /*color: $BGCOLOR6;*/
+ color: #FF0000;
+ opacity: 1;
+}
+
+@mixin help-info-icon() {
+ background-image: url('#{$IMAGES}/mark.svg');
+ width: 20px;
+}
+
+@mixin button-area-down () {
+ position: absolute;
+ bottom: 5%;
+ width: 100%;
+ &.mpButton10 {
+ bottom: 10%;
+ }
+}
+
+@mixin pin-pad-button-active() {
+ background: #dfe5e6;
+}
+
+@mixin buttons-box() {
+ padding: 5% 5%;
+ z-index: 99;
+}
+
+@mixin mpin-input-field () {
+ border: 1px solid #4891dc;
+ border-radius: 4px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ /*color: grey;*/
+ padding: .88em .8em;
+ /*font-style: italic;*/
+ width: 100%;
+ /*margin-top: 6%;*/
+ font-size: 0.88em;
+ display: table-cell;
+ height: 40px;
+ margin: 0px;
+}
+
+@mixin mpin-identity-gradient() {
+}
+
+@mixin pinpad-circle () {
+ width: 25px;
+ height: 25px;
+ display: inline-block;
+ margin: 1%;
+}
+
+@mixin pinpad-circleout() {
+ width: 20px;
+ height: 20px;
+ border: 2px solid $BGCOLOR5;
+ position: absolute;
+ z-index: 800;
+ @include border-radius(61px);
+}
+
+@mixin pinpad-circlein() {
+ background: $BGCOLOR5;
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ z-index: 1000;
+ border: 2px solid $BGCOLOR5;
+ @include border-radius(48px);
+}
+
+// Pin Button style
+
+@mixin pin-btn-style() {
+
+ // Background color
+
+ background: #45484d;
+ background: -moz-linear-gradient(top, #45484d 0, #000 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000));
+ background: -webkit-linear-gradient(top, #45484d 0, #000 100%);
+ background: -o-linear-gradient(top, #45484d 0, #000 100%);
+ background: -ms-linear-gradient(top, #45484d 0, #000 100%);
+ background: linear-gradient(top, #45484d 0, #000 100%);
+
+ // Text color
+
+ color: #fff;
+
+ // Text shadow
+ text-shadow: 3px 3px 3px #000000;
+
+ filter: glow(color=#133353, strength=4);
+
+ // Border radius
+ -webkit-border-radius: 0.1em;
+ -moz-border-radius: 0.1em;
+ -ms-border-radius: 0.1em;
+ -o-border-radius: 0.1em;
+ border-radius: 0.1em;
+
+ // Font size
+ font-size: 1.15em;
+
+ padding: 0;
+ line-height: 100%;
+
+ // Border surrounding the btn
+
+ border: 1px solid #999;
+ border-top-color: #a6a6a6;
+ // Active color on press
+
+ &:active {
+ background: #ccc;
+ }
+
+ &.green {
+ background: #44A800;
+ }
+
+ &.grey {
+ background: #7E7E7E;
+ }
+}
+
+// Top bar
+
+@mixin top-bar(){
+ background-color: #36424a;
+ border-bottom: 1px solid #828284;
+ // -webkit-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.6);
+}
+
+@mixin header-bar(){
+ border-bottom: 1px solid #828284;
+}
+
+// Input pin field
+
+@mixin pin-screen() {
+
+ background: black;
+ border: 1px solid #999;
+ border-top-color: #a6a6a6;
+ color: #fff;
+ -webkit-text-fill-color: #fff;
+ -webkit-border-radius: 0.1em;
+ -moz-border-radius: 0.1em;
+ -ms-border-radius: 0.1em;
+ -o-border-radius: 0.1em;
+ border-radius: 0.1em;
+
+ font-size: 114%;
+
+ min-height: 2.5em;
+}
+
+// User
+
+@mixin mpin-user() {
+ color: rgb(60, 157, 203);
+ font-size: 114%;
+}
+
+
+@mixin mpin-menu() {
+ background: url('#{$IMAGES}/PinPad_button_inactive.svg') top left no-repeat;
+ width: 30px;
+}
+
+@mixin mpin-menu-active() {
+ background: url('#{$IMAGES}/PinPad_button_active.svg') top left no-repeat;
+ width: 30px;
+}
+
+// Mixin home icon
+
+@mixin home-icon() {
+}
+
+@mixin mpin-logo() {
+}
+
+@mixin logo() {
+ height: 35px;
+ background-image: url('#{$IMAGES}/milagro.svg');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ /*margin: 5px 10px 5px 0px;*/
+
+ display: block;
+ @include box-flex-value(1.0);
+ width: 100%;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+@mixin menu-icon() {
+ width: 28px;
+ height: 28px;
+ background-image: url('#{$IMAGES}/mpin_menu.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+
+ @include box-flex-value(1.0);
+}
+
+
+@mixin mobile-icon() {
+ width: 30px !important;
+ height: 42px !important;
+ background-image: url('#{$IMAGES}/phone-green.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ margin: 5px auto;
+ margin-bottom: 9px;
+
+ @include box-flex-value(1.0);
+}
+
+@mixin desktop-icon() {
+ width: 50px !important;
+ height: 42px !important;
+ background-image: url('#{$IMAGES}/computer-blue.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ margin: 5px auto;
+
+ @include box-flex-value(1.0);
+}
+
+//almost deprecate
+@mixin mpin-button() {
+ -moz-transition: all 0.5s ease 0s;
+ border: 1px solid transparent !important;
+ border-radius: 0.3em 0.3em 0.3em 0.3em;
+ /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 25px 30px -12px rgba(255, 255, 255, 0.4) inset, 0 1px 2px rgba(0, 0, 0, 0.6);*/
+ outline: medium none;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+ background: #0073AA;
+ cursor: pointer;
+ color: #FFFFFF;
+ height: auto;
+ min-height: 1.8em;
+ margin-top: 10px;
+ margin: 3px 0 .5em;
+ font-size: 14px;
+}
+
+//except mobile buttons
+@mixin mpinButton {
+ border-radius: 3px;
+ background: $BUTTON_COLOR;
+ cursor: pointer;
+ color: $BGCOLOR;
+ font-size: 16px;
+ min-height: 40px;
+ margin-top: 10px;
+ padding: 7px 10px;
+ align-items: center;
+ text-align: center;
+ margin-bottom: 10px;
+ line-height: 24px;
+
+ &.mpinBtnClick {
+ border-bottom: 3px solid #ccc;
+ }
+}
+
+@mixin mpin-mobile-button () {
+ border-radius: 3px;
+ background: #36424a;
+ color: #fff;
+
+ &.mpinBtnClick {
+ border-bottom: 3px solid #1a2024;
+ }
+}
+
+@mixin button-icon-mobile () {
+ background-image: url('#{$IMAGES}/iphone-white.svg');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+}
+
+@mixin button-icon-desktop () {
+ background-image: url('#{$IMAGES}/screen.svg');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+}
+
+@mixin help-box() {
+ border-bottom: 1px solid #EAEAEA;
+ height: 55%;
+ min-height: 55%;
+ overflow-y: auto;
+}
+
+@mixin mpin-dark-button () {
+ border-radius: 3px;
+ background: #4891dc;
+ color: #fff;
+
+ &.mpinBtnClick {
+ border-bottom: 3px solid #3c78b5;
+ }
+}
+
+@mixin mpin-current-identity() {
+ line-height: 30px;
+}
+
+@mixin mpin-warning-button () {
+ border-radius: 3px;
+ background: #ef984a;
+ color: #fff;
+
+ &.mpinBtnClick {
+ border-bottom: 3px solid #c03800;
+ }
+}
+
+@mixin central-content() {
+ border: 1px solid rgb(86, 86, 86);
+ background-color: rgb(46, 46, 46);
+}
+
+
+@mixin central-text() {
+ color: white;
+ font-size: 14px;
+ width: 100%;
+ text-align: center;
+}
+
+@mixin input-heading(){
+
+ padding: 0px 0px 5px 0px;
+ font-size: 4vh;
+ width: 100% !important;
+ text-align: center;
+
+ span {
+ text-align: center;
+ color: white;
+ background: transparent;
+ font-size: 14px;
+ /*padding: 0px 0px 5px 0px;*/
+ font-weight: bold;
+ padding: 20px 10px;
+ display: inherit;
+ }
+
+}
+
+@mixin email-input-before () {
+ width: 40px !important;
+ height: 20px !important;
+ background-image: url('#{$IMAGES}/user-green.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 40%;
+}
+
+@mixin device-input-before () {
+ width: 40px !important;
+ height: 20px !important;
+ background-image: url('#{$IMAGES}/screen-green.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 40%;
+}
+
+@mixin email-input() {
+ color: black;
+ font-size: 114%;
+ font-weight: normal;
+ background: #fff;
+ width: 100%;
+ background: #fff;
+ width: 100%;
+ padding: .4em;
+ min-height: 2.5em;
+}
+
+@mixin top-heading() {
+ color: white;
+ padding: 3vh;
+ /*font-size: 5vh;*/
+ font-size: 0.81em;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+@mixin central-heading() {
+ color: white;
+ font-size: 4vh;
+ width: 100%;
+ text-align: center;
+}
+
+@mixin body-text() {
+ padding: 2vh !important;
+ color: white;
+ text-align: center;
+}
+
+@mixin arrow-up-icon () {
+ background-image: url('#{$IMAGES}/settings-icon.svg');
+ width: 16px !important;
+ height: 16px !important;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ margin: 10px auto;
+ margin-right: 10px;
+}
+
+@mixin mpin-error-icon() {
+ background-image: url('#{$IMAGES}/mark.svg');
+ width: 65px;
+ height: 65px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ margin: 30px auto;
+ opacity: 0.3;
+}
+
+
+@mixin arrow-icon() {
+ background-image: url('#{$IMAGES}/arrow.svg');
+ width: 1.5em;
+ height: 1.5em;
+ padding: 20px;
+ padding-top: 15px;
+}
+
+@mixin arrow-icon-open() {
+ background-image: url('#{$IMAGES}/arrow-icon.svg');
+ width: 1.5em;
+ height: 1.5em;
+ padding-top: 15px;
+ top: 0;
+}
+
+@mixin btn-text-label() {
+ line-height: 1.2em;
+}
+
+@mixin mpin-copyright {
+
+}
+
+/// FOOTER
+@mixin footer () {
+ position: absolute;
+ bottom: 0px;
+ padding: 5px !important;
+ width: 100%;
+ -webkit-box-align: center;
+ height: 10%;
+ background: white;
+ border-bottom: 10px solid #4891dc;
+}
+
+@mixin footer-helphub() {
+ width: 77px;
+ height: 15px;
+ background: url('#{$IMAGES}/blank_footer.svg') no-repeat;
+ background-size: auto 100%;
+ background-position: left;
+ position: relative;
+ top: 8px;
+}
+
+@mixin footer-copyright() {
+ width: 94px;
+ height: 15px;
+ float: right;
+ background: url('#{$IMAGES}/milagro.svg') no-repeat;
+ background-size: auto 100%;
+ background-position: right bottom;
+ margin-top: 10px;
+}
+
+
diff --git a/browser/themes/milagro/views/accounts-panel.handlebars b/browser/themes/milagro/views/accounts-panel.handlebars
new file mode 100644
index 0000000..38e5b0d
--- /dev/null
+++ b/browser/themes/milagro/views/accounts-panel.handlebars
@@ -0,0 +1,17 @@
+<div class="mpinLists" >
+ <ul id="mpin_accounts_list">
+ </ul>
+</div>
+
+<div class="mpinBtnBox">
+ <div class="mpinButton mpinBtnClick" id="mpin_add_identity">
+ {{txt "account_button_add"}}
+ </div>
+
+ {{#if data.mobileSupport }}
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpin_phone">
+ {{txt "signin_button_mobile"}}
+ </div>
+ {{/if}}
+
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/add-identity-2.handlebars b/browser/themes/milagro/views/add-identity-2.handlebars
new file mode 100644
index 0000000..4c82803
--- /dev/null
+++ b/browser/themes/milagro/views/add-identity-2.handlebars
@@ -0,0 +1,35 @@
+<div class="mpinHeaderRow">
+ {{txt "setup_header2"}}
+</div>
+
+
+<div class="mpinMain mpPaddTop10">
+
+
+ <div class="mpinCenter {{#if data.setDeviceName }} mpCenterTop {{/if}}">
+ <label for="emailInput" class="mpinLabel">{{txt "setup_label1"}}</label>
+
+ <div class="mpinInputGroup">
+ <div class="mpinInputAdd"></div>
+ <input type="text" id="emailInput" class="mpinInput" placeholder="" value="">
+ </div>
+
+ {{#if data.setDeviceName }}
+ <label for="deviceInput" class="mpinLabel">{{txt "setup_label2"}}</label>
+ <div class="mpinInputGroup">
+ <div class="mpinInputAdd mpinScr"></div>
+ <input type="text" id="deviceInput" class="mpinInput" placeholder="" value="">
+ </div>
+ {{/if}}
+ </div>
+
+ <div class="mpinBtnBox">
+ <div class="mpinButton mpinButtonDark mpinBtnClick" id="mpin_setup">
+ {{txt "setup_button_setup"}}™
+ </div>
+ <div id="mpin_accounts_btn" class="mpinButton mpinBtnClick">
+ {{txt "back_identity_btn"}}
+ </div>
+ </div>
+
+</div>
diff --git a/browser/themes/milagro/views/add-identity.handlebars b/browser/themes/milagro/views/add-identity.handlebars
new file mode 100644
index 0000000..d30e3e5
--- /dev/null
+++ b/browser/themes/milagro/views/add-identity.handlebars
@@ -0,0 +1,43 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+
+<div class="mpinHeaderRow">
+ {{txt "setup_header2"}}
+</div>
+
+
+<div class="mpinMain mpPaddTop10">
+
+
+ <div class="mpinCenter {{#if data.setDeviceName }} mpCenterTop {{/if}}">
+ <label for="emailInput" class="mpinLabel">{{txt "setup_label1"}}</label>
+
+ <div class="mpinInputGroup">
+ <div class="mpinInputAdd"></div>
+ <input type="text" id="emailInput" class="mpinInput" placeholder="" value="">
+ </div>
+
+ {{#if data.setDeviceName }}
+ <label for="deviceInput" class="mpinLabel">{{txt "setup_label2"}}</label>
+ <div class="mpinInputGroup">
+ <div class="mpinInputAdd mpinScr"></div>
+ <input type="text" id="deviceInput" class="mpinInput" placeholder="" value="">
+ </div>
+ {{/if}}
+ </div>
+
+ <div class="mpinBtnBox">
+ <div class="mpinButton mpinButtonDark mpinBtnClick" id="mpin_setup">
+ {{txt "setup_button_setup"}}™
+ </div>
+ </div>
+
+</div>
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
diff --git a/browser/themes/milagro/views/an-expire.handlebars b/browser/themes/milagro/views/an-expire.handlebars
new file mode 100644
index 0000000..7b17396
--- /dev/null
+++ b/browser/themes/milagro/views/an-expire.handlebars
@@ -0,0 +1,34 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow mpinHeaderRed">
+ {{txt "an_expire_header"}}
+</div>
+
+<div class="mpinMain mpPaddTop10">
+
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpin_access">
+ {{txt "an_btn_generate"}}
+ </div>
+
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpin_action_setup">
+ {{txt "an_btn_phone"}}
+ </div>
+
+ {{#if data.mobileOnly }}
+ <div class="mpinButton mpinButtonDark mpinBtnClick" id="mpin_desktop">
+ {{txt "mobile_button_signin2"}}
+ </div>
+ {{/if}}
+ </div>
+
+</div>
+
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/blank.handlebars b/browser/themes/milagro/views/blank.handlebars
new file mode 100644
index 0000000..1a8a2c2
--- /dev/null
+++ b/browser/themes/milagro/views/blank.handlebars
@@ -0,0 +1,111 @@
+<div class="mpinHeader">
+ <div class="mpinLogo mpPointer"></div>
+ <div class="mpinHome mpPointer"></div>
+</div>
+
+<div class="mpinMain mpinPinpad mpinAnimateIn" id="mpin_pinpad">
+ <div class="mpinIdentityRow">
+ <div class="mpinIdentity mpLeft20 mpinIdentityGradient" id="mpinUser">
+ <!-- Place the identities inside -->
+ <div class="mpinArrowDown mpPointer" id="mpin_arrow">
+ <div class="mpinArrowImg"></div>
+ </div>
+
+ <div id="mpinCurrentIden">
+ <div class="mpinIdentityLabel">login as:</div>
+ <div class="mpinIdentityTitle">loGgedIden@certivox.com</div>
+ </div>
+
+ <div id="mpin_identities" class="mpinMain mpinAnimateIn mpZero">
+ </div>
+ </div>
+
+ </div>
+
+ <div id="pinpadEls">
+
+ <div class="mpinInput" id="mpin_input_parent">
+ <div class="mpinInputIn mpHide" id="mpin_input_circle">
+ <div class="mpinCircle" id="mpin_circle_1">
+ <div class="mpinCircleOut"></div>
+ </div>
+
+ <div class="mpinCircle" id="mpin_circle_2">
+ <div class="mpinCircleOut"></div>
+ </div>
+ <div class="mpinCircle" id="mpin_circle_3">
+ <div class="mpinCircleOut"></div>
+ </div>
+ <div class="mpinCircle" id="mpin_circle_4">
+ <div class="mpinCircleOut"></div>
+ </div>
+ </div>
+
+ <div class="mpinInputIn mpin70width" id="mpin_input_text">
+ <i id="mpin_help_pinpad"></i>
+ <span class="mpinInputText mpinInputTop" id="mpin_inner_text">
+ Initializing...
+ </span>
+ </div>
+ </div>
+
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="1">
+ 1
+ </button>
+ <button class="mpinPadBtn" data-value="2">
+ 2
+ </button>
+ <button class="mpinPadBtn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="4">
+ 4
+ </button>
+ <button class="mpinPadBtn" data-value="5">
+ 5
+ </button>
+ <button class="mpinPadBtn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="7">
+ 7
+ </button>
+ <button class="mpinPadBtn" data-value="8">
+ 8
+ </button>
+ <button class="mpinPadBtn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row mpin-bottom">
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="clear" id="mpin_clear">
+ clear
+ </button>
+ <button class="mpinPadBtn" data-value="0">
+ 0
+ </button>
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="go" id="mpin_login">
+ login
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/confirm-email.handlebars b/browser/themes/milagro/views/confirm-email.handlebars
new file mode 100644
index 0000000..f0be1f5
--- /dev/null
+++ b/browser/themes/milagro/views/confirm-email.handlebars
@@ -0,0 +1,43 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinIdentityRow">
+ <div class="mpinIdentity mpLeft20 mpBrowserTop" id="mpinUser">
+ <div id="mpinCurrentIden" class="mpinIdentityRowInner">
+ {{txt "activate_header2"}}
+ </div>
+ </div>
+</div>
+
+<div class="mpinMain mpPaddTop10">
+ <div class="mpinCenter mpinCenter5">
+ {{txt "activate_text_new1"}}
+
+ <p class="mpIdentityBrowser mpStripTxt">
+ {{ data.email }}
+ </p>
+
+ <p class="mpinInfoText">
+ {{txt "activate_text_new2"}}
+ </p>
+ </div>
+
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinBtnClick mpinButtonDark" id="mpin_activate">
+ {{txt "activate_btn_new1"}}
+ </div>
+ <div class="mpinButton mpinBtnClick mpinBtnBack" id="mpin_resend">
+ {{txt "activate_btn_new2"}}
+ </div>
+ <div class="mpinButton mpinBtnClick mpinBtnBack" id="mpin_accounts_btn">
+ {{txt "setupNotReady_button_back"}}
+ </div>
+ </div>
+</div>
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/delete-panel.handlebars b/browser/themes/milagro/views/delete-panel.handlebars
new file mode 100644
index 0000000..a332ca5
--- /dev/null
+++ b/browser/themes/milagro/views/delete-panel.handlebars
@@ -0,0 +1,31 @@
+<div class="mpinCurrentIdentity mp10Padd">
+ {{txt "settings_title2"}}
+</div>
+
+<div class="mpinLists mpNoHeight">
+ <ul id="mpin_accounts_list">
+ <li class="mpinRow mpinRowActive">
+ <div class="mpinSettingsRow mpVerCenter" title="{{ data.name }}" alt="{{ data.name }}">
+ {{ data.name }}
+ </div>
+ </li>
+ </ul>
+</div>
+
+<div class="mpinMain">
+ <div class="mpinCenter mpinCenter5">
+ {{txt "account_delete_question"}}
+ </div>
+
+
+ <div class="mpinBtnBox">
+ <div class="mpinButton mpinWarnBtn mpinBtnClick" id="mpin_deluser_btn">
+ {{txt "account_delete_button2"}}
+ </div>
+
+ <div class="mpinButton mpinBtnClick" id="mpin_cancel_btn">
+ {{txt "account_button_cancel2"}}
+ </div>
+ </div>
+</div>
+
diff --git a/browser/themes/milagro/views/desktop.handlebars b/browser/themes/milagro/views/desktop.handlebars
new file mode 100644
index 0000000..210e171
--- /dev/null
+++ b/browser/themes/milagro/views/desktop.handlebars
@@ -0,0 +1,41 @@
+<div id="header">
+ <div id="mpinLogo"></div>
+</div>
+
+<div class="mpinTabMiddle clrBlue mpinBtm10">
+ <div>
+ {{txt "mobile_header_txt1"}}
+ <span class="mpinColorRed">{{txt "mobile_header_do"}}</span>
+ {{txt "mobile_header_txt3"}}
+ </div>
+ <div>
+ <div id="homeIcon">
+ <div id="desktopIcon"></div>
+ </div>
+ </div>
+</div>
+
+<div id="buttonsContainer">
+ <div class="mpinBtn mpinBtm10">
+ <span class="iconArrow"></span>
+ <span class="btnLabel btnLabelArrow">{{txt "signin_btn_desktop1"}}</span>
+ </div>
+
+ <div class="mpinBtn mpinBtm10">
+ <span class="iconArrow"></span>
+ <span class="btnLabel btnLabelArrow">{{txt "signin_btn_desktop2"}}</span>
+ </div>
+
+ <div class="mpinWhiteGrBtn mpinBtm10" id="mpin_mobile">
+ {{txt "mobile_header_txt1"}}
+ <span class="mpinColorRed">{{txt "mobile_header_donot"}}</span>
+ {{txt "mobile_header_txt3"}}
+ </div>
+
+</div>
+
+<div id="mpinFooter">
+ <a href="#" class="mpinHelpHub"></a>
+ <div id="homeBtn">
+ </div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/error.handlebars b/browser/themes/milagro/views/error.handlebars
new file mode 100644
index 0000000..4e47261
--- /dev/null
+++ b/browser/themes/milagro/views/error.handlebars
@@ -0,0 +1,28 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinMain">
+ <div class="mpErrorIcon">
+ </div>
+ <div class="mpinCenter mpinCenter5">
+ <p class="mpinJustifyTxt">
+ {{{data.errorMsg}}}
+ </p>
+
+ <div class="mpErrorNumber">
+ {{txt "error_page_error"}} <b>{{data.errorCode}}</b>
+ </div>
+ </div>
+
+ <div class="mpinBtnBox mpNoPadding">
+ <div class="mpinButton mpinBtnClick mpinBtnBack" id="mpin_cancel">
+ {{txt "error_page_button"}}
+ </div>
+ </div>
+</div>
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/help-tooltip-home.handlebars b/browser/themes/milagro/views/help-tooltip-home.handlebars
new file mode 100644
index 0000000..4b07f12
--- /dev/null
+++ b/browser/themes/milagro/views/help-tooltip-home.handlebars
@@ -0,0 +1,21 @@
+<span id="mpinInfoCloseCorner"></span>
+
+<p class="mpinHelpText" id="mpin_help_text">
+ {{{data.helpText}}}
+</p>
+
+<div id="mpinButtonsContainer" class="mpinBtnContainer">
+ <div class="mpinButton mpinBtnClick mpinButtonDark" id="mpin_help_ok">
+ <span class="btnLabel">{{txt "help_ok_btn"}}</span>
+ </div>
+
+ {{#if data.secondBtn}}
+ <div class="mpinBtn mpinBtm10" id="mpin_help_second">
+ <span class="btnLabel">{{data.secondBtn}}</span>
+ </div>
+ {{/if}}
+
+ <div class="mpinBtm10 mpinButton mpinBtnClick mpinBtnBack" id="mpin_help_more">
+ <span class="btnLabel">{{txt "help_more_btn"}}</span>
+ </div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/help-tooltip.handlebars b/browser/themes/milagro/views/help-tooltip.handlebars
new file mode 100644
index 0000000..30d5387
--- /dev/null
+++ b/browser/themes/milagro/views/help-tooltip.handlebars
@@ -0,0 +1,4 @@
+<help id="mpinHelpTag">
+ <div id="mpinHelpContainer">
+ </div>
+</help>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/home.handlebars b/browser/themes/milagro/views/home.handlebars
new file mode 100644
index 0000000..080120f
--- /dev/null
+++ b/browser/themes/milagro/views/home.handlebars
@@ -0,0 +1,30 @@
+<div class="mpinHeaderBig">
+ <div id="mpinLogo"></div>
+</div>
+
+<div class="mpinHeaderBig mpPaddTop10 mpPaddBot10">
+ {{txt "home_intro_text2"}}
+</div>
+
+<div class="mpinMain mpPaddTop10">
+ <div class="mpinBtnBox">
+
+ {{#if data.mobileOnly }}
+ <div class="mpinButton mpinButtonDark mpinBtnClick mpinBtnBig" id="mpin_desktop">
+ <div class="mpinBtnIcon mpDesktop"></div>
+ {{txt "signin_btn_desktop3"}}
+ </div>
+ {{/if}}
+
+ {{#if data.mobileSupport }}
+ <div class="mpinButton mpinMobileBtn mpinBtnClick mpinBtnBig" id="mpin_mobile">
+ <div class="mpinBtnIcon mpMobile"></div>
+ {{txt "signin_mobile_btn_text2"}}
+ </div>
+ {{/if}}
+
+ </div>
+</div>
+
+<div class="mpinFooter mpinFooterHome">
+</div>
diff --git a/browser/themes/milagro/views/home_mobile.handlebars b/browser/themes/milagro/views/home_mobile.handlebars
new file mode 100644
index 0000000..5a4566f
--- /dev/null
+++ b/browser/themes/milagro/views/home_mobile.handlebars
@@ -0,0 +1,11 @@
+<div id="buttonsContainer">
+ <div class="mpinBtn mpinGreenBtn" id="mpin_mobile">
+ <span class="btnLabel">
+ <span class="mpinBold">{{txt "signin_btn_mobile1"}}</span>
+ {{txt "signin_btn_mobile2"}}
+ </span>
+ </div>
+</div>
+<div class="mpinCenterTxt">
+ {{txt "home_txt_between_btns"}}
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/identity-not-active.handlebars b/browser/themes/milagro/views/identity-not-active.handlebars
new file mode 100644
index 0000000..c4919b0
--- /dev/null
+++ b/browser/themes/milagro/views/identity-not-active.handlebars
@@ -0,0 +1,46 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinIdentityRow">
+ <div class="mpinIdentity mpLeft20 mpBrowserTop" id="mpinUser">
+ <div id="mpinCurrentIden" class="mpinIdentityRowInner">
+ {{txt "activate_header2"}}
+ </div>
+ </div>
+</div>
+
+
+
+<div class="mpinMain mpPaddTop10">
+ <div class="mpinCenter mpinCenter5">
+ {{txt "setupNotReady_text1"}}
+ <!--<p class="mpinIdentityText"> -->
+ <p class="mpIdentityBrowser mpStripTxt">
+ {{ data.email }}
+ </p>
+ {{txt "setupNotReady_text2"}}
+ </div>
+
+ <!-- <div class="mpinFooterRow"> -->
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinBtnClick mpinButtonDark " id="mpin_activate_btn">
+ {{txt "setupNotReady_button_check2"}}
+ </div>
+
+ <div class="mpinButton mpinBtnClick mpinBtnBack" id="mpin_resend_btn">
+ {{txt "setupNotReady_button_resend2"}}
+ </div>
+
+ <div class="mpinButton mpinBtnClick mpinBtnBack" id="mpin_accounts_btn">
+ {{txt "setupNotReady_button_back"}}
+ </div>
+ </div>
+ <!-- </div> -->
+</div>
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/login.handlebars b/browser/themes/milagro/views/login.handlebars
new file mode 100644
index 0000000..f0c104e
--- /dev/null
+++ b/browser/themes/milagro/views/login.handlebars
@@ -0,0 +1,105 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinMain mpinPinpad mpinAnimateIn" id="mpin_pinpad">
+
+ <div class="mpinIdentityRow">
+ <div class="mpinIdentity mpLeft20" id="mpinUser">
+ <!-- Place the identities inside -->
+
+ <div id="mpinCurrentIdenArea" class="mpinCurrentIdentity">
+ <div class="mpinIdentityLabel" id="mpinCurrentIdentityTitle">{{ txt "login_current_label" }}</div>
+ <div class="mpinIdentityTitle mpStripTxt" id="mpinCurrentIden"></div>
+ </div>
+
+ <div class="mpinArrowDown mpPointer mpinADown" id="mpin_arrow">
+ </div>
+
+ <div id="mpin_identities" class="mpinMain mpinAnimateIn mpZero">
+ </div>
+
+ </div>
+
+ </div>
+
+ <div id="pinpadEls">
+
+ <div class="mpinInput" id="mpin_input_parent">
+ <div class="mpinInputIn mpHide" id="mpin_input_circle">
+ {{#loop data.pinSize}}
+ <div class="mpinCircle" id="mpin_circle_{{this}}">
+ <div class="mpinCircleOut"></div>
+ </div>
+ {{/loop}}
+ </div>
+
+ <div class="mpinInputIn mpin80width" id="mpin_input_text">
+ <span class="mpinInputText mpinInputTop" id="mpin_inner_text">
+ Initializing...
+ </span>
+ </div>
+ </div>
+
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="1">
+ 1
+ </button>
+ <button class="mpinPadBtn" data-value="2">
+ 2
+ </button>
+ <button class="mpinPadBtn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="4">
+ 4
+ </button>
+ <button class="mpinPadBtn" data-value="5">
+ 5
+ </button>
+ <button class="mpinPadBtn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="7">
+ 7
+ </button>
+ <button class="mpinPadBtn" data-value="8">
+ 8
+ </button>
+ <button class="mpinPadBtn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row mpin-bottom">
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="clear" id="mpin_clear">
+ {{txt "pinpad_btn_clear"}}
+ </button>
+ <button class="mpinPadBtn" data-value="0">
+ 0
+ </button>
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="go" id="mpin_login">
+ {{txt "pinpad_btn_login"}}
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/mobile-setup-config.handlebars b/browser/themes/milagro/views/mobile-setup-config.handlebars
new file mode 100644
index 0000000..1306a10
--- /dev/null
+++ b/browser/themes/milagro/views/mobile-setup-config.handlebars
@@ -0,0 +1,37 @@
+<div class="mpinHeader mpMobileColor">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow mpMobColor mpHeaderRowThin">
+ {{txt "mobileConfig_header"}}
+</div>
+
+<div class="mpinMain mpNoHeight ">
+ <div class="mpinCenter mpinCenter5">
+
+ <span id="mpin_qrcode">
+ </span>
+
+ <p class="mpinJustifyTxt">
+ {{txt "mobileConfig_text"}}
+ </p>
+ <span class="mpinPurple mpWrapped mpAreaFixed">
+ <a href="#" title='{{txt "mobileConfig_link"}}' id="mpin_mobile_app">{{txt "mobileConfig_link"}}</a>
+ </span>
+ </div>
+
+ <div class="mpinBtnBox mpBtnThin">
+
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpinbtn_mobile">
+ {{txt "mobile_footer_btn2"}}
+ </div>
+ </div>
+
+</div>
+
+
+<div class="mpinFooter mpMobileFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/mobile-setup-html5.handlebars b/browser/themes/milagro/views/mobile-setup-html5.handlebars
new file mode 100644
index 0000000..fcd206e
--- /dev/null
+++ b/browser/themes/milagro/views/mobile-setup-html5.handlebars
@@ -0,0 +1,38 @@
+<div class="mpinHeader mpMobileColor">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow mpMobColor mpHeaderRowThin">
+ {{txt "mobileGet_header2"}}
+</div>
+
+<div class="mpinMain mpNoHeight ">
+ <div class="mpinCenter mpinCenter5">
+
+ <span id="mpin_qrcode">
+ </span>
+
+ <p class="mpinJustifyTxt">
+ <!-- <i class="mpinInfo"></i> -->
+ {{txt "mobileGet_text1"}}
+ </p>
+ <span class="mpinPurple mpWrapped mpAreaFixed">
+ <a href="#" title="{{ data.mobileAppFullURL }}">{{{ substr data.mobileAppFullURL }}}</a>
+ </span>
+ </div>
+
+ <div class="mpinBtnBox mpBtnThin">
+
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpinbtn_mobile">
+ {{data.mobileButtonText}}
+ </div>
+ </div>
+
+</div>
+
+
+<div class="mpinFooter mpMobileFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/mobile-setup.handlebars b/browser/themes/milagro/views/mobile-setup.handlebars
new file mode 100644
index 0000000..866d985
--- /dev/null
+++ b/browser/themes/milagro/views/mobile-setup.handlebars
@@ -0,0 +1,43 @@
+<div class="mpinHeader mpMobileColor">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow mpMobColor mpHeaderRowThin">
+ {{txt "mobileGet_header2"}}
+</div>
+
+<div class="mpinMain mpNoHeight ">
+
+ <div class="mpinCenter mpinCenter30" id="appLinks">
+
+ <div>
+ <a href="https://itunes.apple.com/us/app/certivox-m-pin/id972088129?mt=8"><img src="{{img "ios-appstore.svg"}}" alt=""></a>
+ </div>
+
+ <div>
+ <a href="https://play.google.com/store/apps/details?id=com.certivox.mpinsdk">
+ <img src="{{img "en_generic_rgb_wo_45.png"}}" alt="Get it on Google Play">
+ </a>
+ </div>
+
+ <div>
+ <a href="https://www.microsoft.com/store/apps/9nblggh1mxwd?ocid=badge">
+ <img src="{{img "win-phone.png"}}" alt="Get it from Microsoft" height="40px">
+ </a>
+ </div>
+ </div>
+
+ <div class="mpinBtnBox mpBtnThin mpinBtnDown mpButton10">
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpinbtn_mobile">
+ {{data.mobileButtonText}}
+ </div>
+ </div>
+
+</div>
+
+
+<div class="mpinFooter mpMobileFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
diff --git a/browser/themes/milagro/views/mobile.handlebars b/browser/themes/milagro/views/mobile.handlebars
new file mode 100644
index 0000000..28240a6
--- /dev/null
+++ b/browser/themes/milagro/views/mobile.handlebars
@@ -0,0 +1,44 @@
+<div class="mpinHeader mpMobileColor">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderBig mpPaddTop10 mpPaddBot10 mpMobColor">
+ {{txt "signin_mobile_header"}}
+</div>
+
+<div class="mpinMain mpNoHeight">
+ <div class="mpinBtnBox mpNoPadding">
+
+ <!-- BIG BTN -->
+ <div class="mpinButton mpMobileAccessNumber mpFontNormal">
+ <div class="mpbtnPadding">
+ {{txt "mobile_accessNumber_text"}}
+ <div id="mpinAccessNumber"></div>
+ </div>
+ </div>
+
+ <div class='mpinTimerBox'>
+ <canvas id="mpTimer" width="42" height="42"></canvas>
+ <span class="mpLeftTime" id="mpin_seconds"></span>
+ </div>
+
+
+ <div class="mpinButton mpinMobileBtn mpinBtnClick" id="mpin_action_setup">
+ {{txt "mobile_button_setup"}}
+ </div>
+
+ {{#if data.mobileOnly }}
+ <div class="mpinButton mpinButtonDark mpinBtnClick" id="mpin_desktop">
+ {{txt "mobile_button_signin2"}}
+ </div>
+ {{/if}}
+
+ </div>
+</div>
+
+
+<div class="mpinFooter mpMobileFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/mpin.handlebars b/browser/themes/milagro/views/mpin.handlebars
new file mode 100644
index 0000000..7ed4379
--- /dev/null
+++ b/browser/themes/milagro/views/mpin.handlebars
@@ -0,0 +1,7 @@
+ <div class="mpinContainer">
+ <div id="mpinHolder">
+ <div id="mpinMiracle" class="mpinMaster">
+
+ </div>
+ </div>
+ </div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/otp-expire.handlebars b/browser/themes/milagro/views/otp-expire.handlebars
new file mode 100644
index 0000000..3e42216
--- /dev/null
+++ b/browser/themes/milagro/views/otp-expire.handlebars
@@ -0,0 +1,24 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow">
+ {{txt "otp_expire_header"}}
+</div>
+
+<div class="mpinMain mpPaddTop10">
+
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinBtnClick mpinButtonDark" id="mpin_login_now">
+ {{txt "otp_expire_btn"}}
+ </div>
+ </div>
+
+</div>
+
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/otp.handlebars b/browser/themes/milagro/views/otp.handlebars
new file mode 100644
index 0000000..dc9221f
--- /dev/null
+++ b/browser/themes/milagro/views/otp.handlebars
@@ -0,0 +1,38 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow">
+ {{txt "otp_signin_header"}}
+</div>
+
+<div class="mpinMain mpNoHeight">
+ <div class="mpinBtnBox mpNoPadding">
+
+ <div class="mpinButton mpMobileAccessNumber mpFontNormal">
+ <div class="mpbtnPadding">
+ {{txt "otp_header_btn_text"}}
+ <div id="mpinOTPNumber"></div>
+ </div>
+ </div>
+
+ <div class='mpinTimerBox'>
+ <canvas id="mpTimer" width="42" height="42"></canvas>
+ <span class="mpLeftTime" id="mpin_seconds"></span>
+ </div>
+
+ </div>
+
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinBtnClick mpinButtonDark" id="mpin_cancel">
+ {{txt "button_back_text"}}
+ </div>
+ </div>
+
+</div>
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/reactivate-panel.handlebars b/browser/themes/milagro/views/reactivate-panel.handlebars
new file mode 100644
index 0000000..362b3ac
--- /dev/null
+++ b/browser/themes/milagro/views/reactivate-panel.handlebars
@@ -0,0 +1,30 @@
+<div class="mpinCurrentIdentity mp10Padd">
+ {{txt "settings_title2"}}
+</div>
+
+<div class="mpinLists mpNoHeight">
+ <ul id="mpin_accounts_list">
+ <li class="mpinRow mpinRowActive">
+ <div class="mpinSettingsRow mpVerCenter" title="{{ data.name }}" alt="{{ data.name }}">
+ {{ data.name }}
+ </div>
+ </li>
+ </ul>
+</div>
+
+<div class="mpinMain">
+ <div class="mpinCenter mpinCenter5">
+ {{txt "account_reactivate_question"}}
+ </div>
+
+
+ <div class="mpinBtnBox">
+ <div class="mpinButton mpinBtnClick" id="mpin_reactivate_btn">
+ {{txt "account_reactivate_button2"}}
+ </div>
+ <div class="mpinButton mpinBtnClick" id="mpin_cancel_btn">
+ {{txt "account_button_cancel2"}}
+ </div>
+ </div>
+
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/revoke-identity.handlebars b/browser/themes/milagro/views/revoke-identity.handlebars
new file mode 100644
index 0000000..befd8ac
--- /dev/null
+++ b/browser/themes/milagro/views/revoke-identity.handlebars
@@ -0,0 +1,40 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinIdentityRow">
+ <div class="mpinIdentity mpLeft20 mpBrowserTop" id="mpinUser">
+ <div id="mpinCurrentIden" class="mpinIdentityRowInner">
+ {{txt "revoke_header_text"}}
+ </div>
+ </div>
+</div>
+
+<div class="mpinMain mpPaddTop10">
+ <div class="mpinCenter mpinCenter5">
+ {{txt "revoke_text1"}}
+ <br><br>
+ {{txt "revoke_text2"}}
+ <p class="mpIdentityBrowser mpStripTxt">
+ {{ data.userId }}
+ </p>
+ <p class="mpinInfoText">
+ {{txt "revoke_text3"}}
+ </p>
+ </div>
+
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinButtonDark mpinBtnClick" id="mp_action_go">
+ {{txt "deactivated_button_register2"}}
+ </div>
+ <div class="mpinButton mpinBtnClick mpinBtnBack" id="mpin_accounts_btn">
+ {{txt "deactivated_button_back"}}
+ </div>
+ </div>
+</div>
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/setup - Copy.handlebars b/browser/themes/milagro/views/setup - Copy.handlebars
new file mode 100644
index 0000000..c70b7fe
--- /dev/null
+++ b/browser/themes/milagro/views/setup - Copy.handlebars
@@ -0,0 +1,90 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinIdentityRow">
+ <div class="mpinArrowDown mpPointer mpHide" id="show_identity"></div>
+ <div class="mpinIdentity mpLeft20">{{ data.email }}</div>
+</div>
+
+
+<div class="mpinMain mpinPinpad">
+ <div class="mpinInput" id="mpin_input_parent">
+
+ <div class="mpinInputIn mpHide" id="mpin_input_circle">
+ {{#loop data.pinSize}}
+ <div class="mpinCircle" id="mpin_circle_{{this}}">
+ <div class="mpinCircleOut"></div>
+ </div>
+ {{/loop}}
+ </div>
+
+ <div class="mpinInputIn mpin80width" id="mpin_input_text">
+ <span class="mpinInputText" id="mpin_inner_text">
+ Initializing...
+ </span>
+ </div>
+ </div>
+
+
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="1">
+ 1
+ </button>
+ <button class="mpinPadBtn" data-value="2">
+ 2
+ </button>
+ <button class="mpinPadBtn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="4">
+ 4
+ </button>
+ <button class="mpinPadBtn" data-value="5">
+ 5
+ </button>
+ <button class="mpinPadBtn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="7">
+ 7
+ </button>
+ <button class="mpinPadBtn" data-value="8">
+ 8
+ </button>
+ <button class="mpinPadBtn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row mpin-bottom">
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="clear" id="mpin_clear">
+ {{txt "pinpad_btn_clear"}}
+ </button>
+ <button class="mpinPadBtn" data-value="0">
+ 0
+ </button>
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="go" id="mpin_login">
+ {{txt "pinpad_btn_setup"}}
+ </button>
+ </div>
+ </div>
+</div>
+
+
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/setup-done.handlebars b/browser/themes/milagro/views/setup-done.handlebars
new file mode 100644
index 0000000..b5aaf1e
--- /dev/null
+++ b/browser/themes/milagro/views/setup-done.handlebars
@@ -0,0 +1,36 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinHeaderRow">
+ {{txt "setupDone_header"}}
+</div>
+
+<div class="mpinMain mpPaddTop10">
+
+ <div class="mpinCenter mpinCenter5">
+ {{txt "setupDone_text1"}}
+
+ <p class="mpinIdentityTextSm mpStripTxt">
+ {{ data.userId }}
+ </p>
+
+ {{txt "setupDone_text2"}}
+ <p>
+ {{txt "setupDone_text3"}}
+ </p>
+ </div>
+
+ <div class="mpinBtnBox mpinBtnDown">
+ <div class="mpinButton mpinButtonDark mpinBtnClick" id="mpin_login_now">
+ {{txt "setupDone_button_go2"}}
+ </div>
+ </div>
+
+</div>
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/setup.handlebars b/browser/themes/milagro/views/setup.handlebars
new file mode 100644
index 0000000..f7fa001
--- /dev/null
+++ b/browser/themes/milagro/views/setup.handlebars
@@ -0,0 +1,95 @@
+<div class="mpinHeader">
+ <div class="mpinLogo"></div>
+ <div class="mpinHome mpPointer" id="mpin_home"></div>
+</div>
+
+<div class="mpinMain mpinPinpad mpinAnimateIn" id="mpin_pinpad">
+
+ <div class="mpinIdentityRow">
+ <div class="mpinIdentity mpLeft20" id="mpinUser">
+ <!-- Place the identities inside -->
+
+ <p id="mpinCurrentIdenSetup" class="mpWrappedIdentity">{{txt "setup_screen_header"}}{{ data.email }}</p>
+
+ </div>
+
+ </div>
+
+ <div id="pinpadEls">
+ <div class="mpinInput" id="mpin_input_parent">
+ <div class="mpinInputIn mpHide" id="mpin_input_circle">
+ {{#loop data.pinSize}}
+ <div class="mpinCircle" id="mpin_circle_{{this}}">
+ <div class="mpinCircleOut"></div>
+ </div>
+ {{/loop}}
+ </div>
+
+ <div class="mpinInputIn mpin80width" id="mpin_input_text">
+ <span class="mpinInputText mpinInputTop" id="mpin_inner_text">
+ Initializing...
+ </span>
+ </div>
+ </div>
+
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="1">
+ 1
+ </button>
+ <button class="mpinPadBtn" data-value="2">
+ 2
+ </button>
+ <button class="mpinPadBtn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="4">
+ 4
+ </button>
+ <button class="mpinPadBtn" data-value="5">
+ 5
+ </button>
+ <button class="mpinPadBtn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row">
+ <button class="mpinPadBtn" data-value="7">
+ 7
+ </button>
+ <button class="mpinPadBtn" data-value="8">
+ 8
+ </button>
+ <button class="mpinPadBtn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="mpin-pre-row">
+ <div class="mpin-row mpin-bottom">
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="clear" id="mpin_clear">
+ {{txt "pinpad_btn_clear"}}
+ </button>
+ <button class="mpinPadBtn" data-value="0">
+ 0
+ </button>
+ <button class="mpinPadBtn2 mpinBtnDisabled" data-value="go" id="mpin_login">
+ {{txt "pinpad_btn_setup"}}
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+<div class="mpinFooter">
+ <div class="mpinPowered"></div>
+ <div class="mpinHelpHub"></div>
+</div>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/user-row.handlebars b/browser/themes/milagro/views/user-row.handlebars
new file mode 100644
index 0000000..f19faf4
--- /dev/null
+++ b/browser/themes/milagro/views/user-row.handlebars
@@ -0,0 +1,4 @@
+<div class="mpinSettings" id=""></div>
+<a href="" class="mpinSettingsRow" title="">
+ {{ data.name }}
+</a>
\ No newline at end of file
diff --git a/browser/themes/milagro/views/user-settings.handlebars b/browser/themes/milagro/views/user-settings.handlebars
new file mode 100644
index 0000000..ea00b13
--- /dev/null
+++ b/browser/themes/milagro/views/user-settings.handlebars
@@ -0,0 +1,29 @@
+<div class="mpinCurrentIdentity mp10Padd">
+ {{txt "settings_title2"}}
+</div>
+
+<div class="mpinLists mpNoHeight">
+ <ul id="mpin_accounts_list">
+ <li class="mpinRow mpinRowActive">
+ <div class="mpinSettingsRow mpVerCenter" title="{{ data.name }}" alt="{{ data.name }}">
+ {{ data.name }}
+ </div>
+ </li>
+ </ul>
+</div>
+
+<div class="mpinMain">
+ <div class="mpinBtnBox">
+ <div class="mpinButton mpinBtnClick" id="mpin_cancel_btn">
+ {{txt "account_button_backToList2"}}
+ </div>
+
+ <div class="mpinButton mpinBtnClick" id="mpin_reactivate_btn">
+ {{txt "account_button_reactivate2"}}
+ </div>
+
+ <div class="mpinButton mpinWarnBtn mpinBtnClick" id="mpin_deluser_btn">
+ {{txt "account_button_delete2"}}
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/libs/topLevelCode.js b/libs/topLevelCode.js
new file mode 100644
index 0000000..102bcde
--- /dev/null
+++ b/libs/topLevelCode.js
@@ -0,0 +1,637 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+function createXMLHttp()
+{
+ if (typeof XMLHttpRequest != "undefined") {
+ return new XMLHttpRequest();
+ }
+ else if (window.ActiveXObject)
+ {
+
+ var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
+
+ for (var i = 0; i < aVersions.length; i++)
+ {
+ try
+ {
+ var oXmlHttp = new ActiveXObject(aVersions[i]);
+ return oXmlHttp;
+ }
+ catch(oError)
+ {
+ throw new Error("XMLHttp object could be created.");
+ }
+ }
+ }
+ throw new Error("XMLHttp object could be created.");
+}
+
+
+// Extract PIN from User's secret
+function extractPIN(aPin, clientSecretHex, identity, onSuccess)
+{
+ //mpin.token_hex = MPINAuth.calculateMPinToken(mpin.mpin_id_hex, PIN1, mpin.client_secret_hex);
+ var tokenHex = MPINAuth.calculateMPinToken(identity, aPin, clientSecretHex);
+
+ onSuccess(tokenHex)
+};
+
+
+// Request authToken for authServer and send to Customer web app.
+function getAuthToken(wsURL, IDcustomer, identity, timePermitHex, tokenHex, currentDate, requestOTP, accessNumber, aPin, verifyTokenURL, authTokenFormatter, customHeaders, handleToken, onVerifySuccess)
+{
+ var IDcHex = identity;
+
+ // Open web socket to Auth Server.
+ var wsOK = false;
+ var useAJAX = false;
+
+ setTimeout(function(){
+ if (!wsOK) {
+ if (!useAJAX) {
+ useAJAX = true;
+ handleToken(false, "WEBSOCKETERROR", "WEB SOCKET ERROR");
+ }
+ }
+ }, 5000)
+
+
+ var authServerSocket = new WebSocket(wsURL);
+
+ authServerSocket.onerror = function(event){
+ authServerSocket.close();
+ useAJAX = true;
+ handleToken(false, "WEBSOCKETERROR", "WEB SOCKET ERROR");
+
+ return;
+ };
+
+ authServerSocket.onopen = function () {
+ var epoch_days = currentDate || util.today();
+ var request = MPINAuth.pass1Request(IDcHex, tokenHex, timePermitHex, aPin, currentDate, null);
+ // PASS1 REQUEST
+ authServerSocket.send(JSON.stringify(request));
+ }
+
+ authServerSocket.onclose = function () {
+ console.log("websocket connection closed");
+ }
+
+ authServerSocket.onmessage = function(event) {
+ var response = JSON.parse(event.data);
+ if (response.pass == 1)
+ {
+ wsOK = true;
+ console.dir("PASS: "+response.pass+" message: "+event.data);
+
+ if (useAJAX)
+ return;
+
+ // Compute PASS2 request
+ var request = MPINAuth.pass2Request(x, response.y, IDcHex, timePermitHex, tokenHex, requestOTP, accessNumber, aPin);
+ console.dir(request);
+
+ // PASS2 REQUEST
+ authServerSocket.send(JSON.stringify(request));
+ }
+ else if (response.pass == 2)
+ {
+ var response = JSON.parse(event.data);
+ console.dir("PASS: "+response.pass+" message: "+event.data);
+ // Send the response from the MPin server to the RP
+ authServerSocket.close();
+ sendAuthToken(verifyTokenURL,response, handleToken, authTokenFormatter, customHeaders, onVerifySuccess);
+ }
+ else
+ {
+ authServerSocket.close();
+ handleToken(false, "SERVERERROR", "SERVER ERROR")
+ }
+ }
+};
+
+// Request authToken for authServer and send to Customer web app using websocketProxy.
+function getAuthTokenAjax(restURL, IDcustomer, identity, timePermitHex, tokenHex, currentDate, requestOTP, accessNumber, aPin, verifyTokenURL, authTokenFormatter, customHeaders, handleToken, onVerifySuccess)
+{
+ var rURL = (restURL.mpin_endsWith("/")) ? restURL.slice(0, restURL.length-1) : restURL;
+ rURL = restURL.split("/authenticationToken").join("")
+
+ var urlSplit = rURL.split("://")
+ if (urlSplit[0] == "wss")
+ urlSplit[0] = "https";
+ else if (urlSplit[0] == "ws")
+ urlSplit[0] = "http";
+
+ rURL = urlSplit.join("://")
+ var restURLPass1 = rURL + "/pass1";
+ var restURLPass2 = rURL + "/pass2";
+
+ var xhrPass1 = createXMLHttp();
+// Generate random x value
+ //var x = MPINAuth.randomX();
+ var IDcHex = identity;
+
+ // Form request body
+ var epoch_days = currentDate || util.today();
+ var request1 = MPINAuth.pass1Request(IDcHex, tokenHex, timePermitHex, aPin, currentDate, null);
+ var postData1 = JSON.stringify(request1);
+ var requestDataType = 'application/json';
+
+ xhrPass1.onreadystatechange=function(evtXHR){
+ if (xhrPass1.readyState == 4) {
+ if (xhrPass1.status == 200) {
+ var jsonText1 = xhrPass1.responseText;
+ var response1 = JSON.parse(jsonText1);
+
+ // Compute PASS2 request
+ var request2 = MPINAuth.pass2Request(response1.y, requestOTP, accessNumber);
+ request2.mpin_id = IDcHex;
+ var postData2 = JSON.stringify(request2);
+
+ // PASS2 REQUEST
+ var xhrPass2 = createXMLHttp();
+
+ xhrPass2.onreadystatechange=function(evtXHR){
+ if (xhrPass2.readyState == 4) {
+ if (xhrPass2.status == 200) {
+ var jsonText2 = xhrPass2.responseText;
+ var response2 = JSON.parse(jsonText2);
+
+ sendAuthToken(verifyTokenURL, response2, handleToken, authTokenFormatter, customHeaders, onVerifySuccess);
+
+ }
+ else {
+ // ERROR PASS 2
+ handleToken(false, "SERVERERROR", "SERVER ERROR")
+
+ }
+ } //readystate
+ } //onreadystate
+
+ xhrPass2.open("POST", restURLPass2, true);
+ xhrPass2.setRequestHeader("Content-Type",requestDataType);
+
+ for (var headerKey in customHeaders) {
+ console.log("Adding custom header " + headerKey + " with value: " + customHeaders[headerKey]);
+ xhrPass2.setRequestHeader(headerKey, customHeaders[headerKey]);
+ }
+ xhrPass2.send(postData2);
+
+ } else {
+ // ERROR PASS 1
+ handleToken(false, "SERVERERROR", "SERVER ERROR")
+
+ }
+ }
+ }
+
+ xhrPass1.open("POST", restURLPass1, true);
+ xhrPass1.setRequestHeader("Content-Type",requestDataType);
+ for (var headerKey in customHeaders) {
+ console.log("Adding custom header " + headerKey + " with value: " + customHeaders[headerKey]);
+ xhrPass1.setRequestHeader(headerKey, customHeaders[headerKey]);
+ }
+ xhrPass1.send(postData1);
+};
+
+// Send Authentication token to RP server
+function sendAuthToken(restURL, mpinResponse, handleToken, authTokenFormatter, customHeaders, onVerifySuccess)
+{
+ var requestDataType = 'application/json';
+ var xmlhttpAuthToken;
+
+ // Get the OTP and delete it from the mpinResponse so it will not be transferred in plain text.
+ var OTP = mpinResponse["OTP"]
+ delete mpinResponse["OTP"]
+
+ // Declare data
+ var jsonObj = {"mpinResponse": mpinResponse};
+
+ if (authTokenFormatter)
+ jsonObj = authTokenFormatter(jsonObj)
+
+
+ // Sting
+ var postData = JSON.stringify(jsonObj);
+
+ var xmlhttpAuthToken = createXMLHttp()
+
+ xmlhttpAuthToken.onreadystatechange=function(evtXHR)
+ {
+ if (xmlhttpAuthToken.readyState == 4)
+ {
+ if (xmlhttpAuthToken.status == 200)
+ {
+ var jsonText = xmlhttpAuthToken.responseText;
+ var response;
+ if (jsonText) {
+ try {
+ response = JSON.parse(jsonText);
+ } catch (e) {
+ response = {};
+ }
+ } else {
+ response = {}
+ }
+
+ // add the OTP to the handled response
+ response._mpinOTP = OTP;
+
+ if (onVerifySuccess)
+ onVerifySuccess(response)
+
+ handleToken(true, "OK", "Authenticated", response);
+ }
+ else if (xmlhttpAuthToken.status == 401)
+ {
+ handleToken(false, "INVALID", "INVALID PIN");
+ }
+ else if (xmlhttpAuthToken.status == 403)
+ {
+ handleToken(false, "NOTAUTHORIZED", "You are not authorized!");
+ }
+ else if (xmlhttpAuthToken.status == 408)
+ {
+ handleToken(false, "EXPIRED", "The request took too much time!");
+ }
+ else if (xmlhttpAuthToken.status == 410)
+ {
+ handleToken(false, "MAXATTEMPTS", "Max Attempts Reached");
+ }
+ else if (xmlhttpAuthToken.status == 412)
+ {
+ handleToken(false, "INVALIDACCESSNUMBER", "Invalid Access Number");
+ }
+ else
+ {
+ handleToken(false, "INVOCATION", "Invocation Errors Occured " + xmlhttpAuthToken.readyState + " and the status is " + xmlhttpAuthToken.status);
+ }
+ }
+ };
+ xmlhttpAuthToken.open("POST",restURL,true);
+ xmlhttpAuthToken.setRequestHeader("Content-Type",requestDataType);
+ for (var headerKey in customHeaders) {
+ console.log("VERIFY Adding custom header " + headerKey + " with value: " + customHeaders[headerKey]);
+ xmlhttpAuthToken.setRequestHeader(headerKey, customHeaders[headerKey]);
+ }
+ xmlhttpAuthToken.send(postData);
+};
+
+
+
+function requestSignature(userID, mobile, signatureURL, customHeaders, onSuccess, onFail)
+{
+ var requestDataType = 'application/json';
+ var restURL = signatureURL + "?userid=" + encodeURIComponent(userID)+"&mobile="+mobile;
+
+ var xmlhttpSecret = createXMLHttp();
+
+
+
+ xmlhttpSecret.onreadystatechange=function(evtXHR)
+ {
+ if (xmlhttpSecret.readyState == 4)
+ {
+ if (xmlhttpSecret.status == 200)
+ {
+ var jsonText = xmlhttpSecret.responseText;
+ var response = JSON.parse(jsonText);
+ onSuccess(response)
+ }
+ else if (xmlhttpSecret.status == 401)
+ {
+ // var jsonText = xmlhttpSecret.responseText;
+ // var response = JSON.parse(jsonText);
+
+ onFail("Error getting the mpin signature", xmlhttpSecret.status)
+ }
+ else if (xmlhttpSecret.status == 403)
+ {
+ // User is not authorised
+
+ onFail("User not authorized", xmlhttpSecret.status)
+ }
+ else
+ {
+ onFail("Error getting the mpin signature", xmlhttpSecret.status)
+ }
+ }
+ }
+ xmlhttpSecret.open("GET", restURL, true);
+ xmlhttpSecret.setRequestHeader("Content-Type",requestDataType);
+ for (var headerKey in customHeaders) {
+ console.log("VERIFY Adding custom header " + headerKey + " with value: " + customHeaders[headerKey]);
+ xmlhttpSecret.setRequestHeader(headerKey, customHeaders[headerKey]);
+ }
+ xmlhttpSecret.send();
+};
+
+
+
+
+function requestRegister(registerURL, userid, customHeaders, postDataFormatter, onSuccess, onFail)
+{
+ if (! postDataFormatter) {
+ postDataFormatter = function(data){ return data}
+ }
+
+ var postData = JSON.stringify(postDataFormatter({identity: mpinid}))
+
+ var xmlhttpRegister = createXMLHttp()
+ xmlhttpRegister.onreadystatechange=function(evtXHR) {
+ if (xmlhttpRegister.readyState == 4)
+ {
+ if (xmlhttpRegister.status == 200)
+ {
+ var jsonText = xmlhttpSecret.responseText;
+ var response = JSON.parse(jsonText);
+ onSuccess(response)
+ }
+ else
+ {
+ onFail(xmlhttpRegister.responseText, xmlhttpRegister.status)
+ }
+ }
+ };
+ xmlhttpRegister.open("POST", registerURL, true);
+ xmlhttpRegister.setRequestHeader("Content-Type", "application/json");
+ for (var headerKey in customHeaders) {
+ xmlhttpRegister.setRequestHeader(headerKey, customHeaders[headerKey]);
+ }
+
+ xmlhttpRegister.send(postData);
+};
+
+
+
+//same as RequestRPSJSON
+// usage like function just call
+function requestRPS (params, cb) {
+ var _request = new XMLHttpRequest(), _method, _postData;
+ _method = params.method || "GET";
+
+ params.postDataFormatter || (params.postDataFormatter = function (data) {return data;});
+ //
+ _postData = JSON.stringify(params.postDataFormatter(params.data));
+
+ _request.onreadystatechange = function () {
+ if (_request.readyState === 4) {
+ if (_request.status === 200) {
+ cb(_request.responseText ? JSON.parse(_request.responseText): {});
+ } else {
+ var _errorData = {};
+ _errorData.error = _request.responseText;
+ _errorData.errorStatus = _request.status;
+ cb(_errorData);
+ }
+ }
+ };
+
+ _request.open(_method, params.URL, true);
+ _request.setRequestHeader("Content-Type", "application/json");
+ if (params.customHeaders) {
+ for (var headerKey in params.customHeaders) {
+ _request.setRequestHeader(headerKey, params.customHeaders[headerKey]);
+ }
+ }
+ _request.send(_postData);
+};
+
+
+function RequestRPSJSON(params)
+{
+ // Params: URL, method, data, customHeaders, postDataFormatter, timeout, onSuccess, onFail, onTimeout
+
+ var postData;
+ var method = params.method || "GET"
+
+ if (method == "GET")
+ postData = null
+ else {
+ if (! params.postDataFormatter) {
+ params.postDataFormatter = function(data){ return data}
+ }
+
+ postData = JSON.stringify(params.postDataFormatter(params.data))
+ }
+
+ var xhr = createXMLHttp()
+
+ xhr.onreadystatechange=function(evtXHR) {
+ if (xhr.readyState == 4)
+ {
+ if (xhr.status == 200)
+ {
+ if (params.onSuccess) {
+ var response = xhr.responseText ? JSON.parse(xhr.responseText) : {};
+ params.onSuccess(response)
+ }
+ }
+ else
+ {
+ if (params.onFail) {
+ params.onFail(xhr.status, xhr.responseText)
+ }
+ }
+ }
+ };
+
+ if (params.onTimeout) {
+ xhr.ontimeout = function(){ params.onTimeout() }
+ }
+
+ xhr.open(method, params.URL, true);
+
+ if (params.timeout) {
+ xhr.timeout = params.timeout;
+ }
+
+
+ xhr.myURL = params.URL;
+ xhr.setRequestHeader("Content-Type", "application/json");
+ if (params.customHeaders) {
+ for (var headerKey in params.customHeaders) {
+ xhr.setRequestHeader(headerKey, params.customHeaders[headerKey]);
+ }
+ }
+ xhr.send(postData);
+
+ this.abortRequest = function(){
+ params.onFail = null;
+ xhr.abort();
+ }
+
+ return this
+};
+
+
+
+// Request Client Secret from a TA.
+function requestClientSecretShare(restURL, onSuccess, onFail) {
+ var xmlhttpClientSecret, requestDataType = 'application/json';
+ var xmlhttpClientSecret = createXMLHttp();
+ xmlhttpClientSecret.onreadystatechange=function(evtXHR) {
+ if (xmlhttpClientSecret.readyState == 4) {
+ if (xmlhttpClientSecret.status == 200) {
+ var jsonText = xmlhttpClientSecret.responseText;
+ var response = JSON.parse(jsonText);
+ onSuccess(response.clientSecret)
+ } else if (xmlhttpClientSecret.status == 401 || xmlhttpClientSecret.status == 403) {
+ var jsonText = xmlhttpClientSecret.responseText;
+ var response = JSON.parse(jsonText);
+ onFail("Error getting the client secret: " + xmlhttpClientSecret.status, xmlhttpClientSecret.status)
+ } else {
+ onFail("Error getting the client secret: " + xmlhttpClientSecret.status, xmlhttpClientSecret.status)
+ }
+ }
+ }
+ xmlhttpClientSecret.open("GET", restURL, true);
+ xmlhttpClientSecret.setRequestHeader("Content-Type",requestDataType);
+ xmlhttpClientSecret.send();
+};
+
+// Request the Client Secret Share and add them to form ClientSecret
+function requestClientSecret(certivoxURL, clientSecretShare, onSuccess, onFail)
+{
+ // Get Client Secret Share from Certivox TA
+ // n.b. Not a mobile request
+// var certivoxURL = certivoxURL+"&mobile=0";
+
+ requestClientSecretShare(certivoxURL, function(certivoxShare) {
+ // Add secret shares to form Client Secret
+ var clientSecretHex = MPINAuth.addShares(certivoxShare, clientSecretShare);
+
+ // Callback
+ onSuccess(clientSecretHex);
+ }, onFail);
+};
+
+
+
+MPIN_LOADED = true;
+
+
+
+// Request Time Permit Share from a TA.
+// TODO WHAT HAPPENS FOR 401, 403 or 500 errors
+function requestTimePermitShare(restURL, customHeaders, onSuccess, onFail)
+{
+ var xmlhttpTimePermit;
+ var requestDataType = 'application/json';
+
+ var xmlhttpTimePermit = createXMLHttp()
+ xmlhttpTimePermit.onreadystatechange=function(evtXHR)
+ {
+ if (xmlhttpTimePermit.readyState == 4)
+ {
+ if (xmlhttpTimePermit.status == 200)
+ {
+ var jsonText = xmlhttpTimePermit.responseText;
+ var response = JSON.parse(jsonText);
+
+ onSuccess(response.timePermit, response)
+ } else
+ {
+ var jsonText = xmlhttpTimePermit.responseText;
+ var response = "";
+ if (jsonText) {
+ var response = JSON.parse(jsonText);
+ }
+ onFail(response, xmlhttpTimePermit.status)
+ }
+ }
+ }
+ xmlhttpTimePermit.open("GET", restURL, true);
+ xmlhttpTimePermit.setRequestHeader("Content-Type",requestDataType);
+ for (var headerKey in customHeaders) {
+ xmlhttpTimePermit.setRequestHeader(headerKey, customHeaders[headerKey]);
+ }
+
+ xmlhttpTimePermit.send();
+};
+
+function requestTimePermitStorageShare(restURL, onSuccess, onFail)
+{
+ if (!restURL) {
+ onFail()
+
+ } else {
+
+ var xmlhttpTimePermit;
+
+ var xmlhttpTimePermit = createXMLHttp()
+ xmlhttpTimePermit.onreadystatechange=function(evtXHR)
+ {
+ if (xmlhttpTimePermit.readyState == 4)
+ {
+ if (xmlhttpTimePermit.status == 200)
+ {
+ var timePermitShare = xmlhttpTimePermit.responseText;
+ onSuccess(timePermitShare);
+ } else
+ {
+ onFail();
+ }
+ }
+ }
+ xmlhttpTimePermit.open("GET", restURL, true);
+ xmlhttpTimePermit.send();
+ }
+};
+
+
+// Request the Time Permit Shares and add them to form TimePermit
+function requestTimePermit(certivoxURL, MPinDTAServerURL, customHeaders, timePermitCache, makePermitsStorageURLFunc, onSuccess, onFail) {
+ var combineShares = function(appShare, certivoxShare, currentDate, onSuccess) {
+ var timePermitHex = MPINAuth.addShares(appShare, certivoxShare);
+ // Callback
+ var cache = {"date": currentDate, "timePermit": certivoxShare}
+ onSuccess(timePermitHex, cache, currentDate);
+ }
+
+ requestTimePermitShare(MPinDTAServerURL, customHeaders, function(appShare, response){
+ var currentDate = response["date"];
+ var storageId = response["storageId"];
+ var signature = response["signature"];
+ var signedCertivoxURL = certivoxURL + "&signature=" + signature;
+ if ((currentDate) && (currentDate == timePermitCache["date"])) {
+ var certivoxShare = timePermitCache.timePermit;
+ combineShares(appShare, certivoxShare, currentDate, onSuccess);
+
+ } else {
+ var storageURL = makePermitsStorageURLFunc(currentDate, storageId);
+ requestTimePermitStorageShare(storageURL,
+ function(certivoxShare){
+ combineShares(appShare, certivoxShare, currentDate, onSuccess);
+ },
+ function() {
+ requestTimePermitShare(signedCertivoxURL, {}, function(certivoxShare){
+ // Get Time Permit Share from Application TA
+ // Add shares to form Time Permit
+
+ combineShares(appShare, certivoxShare, currentDate, onSuccess);
+ }, onFail);
+ }
+ );
+ }
+
+ }, onFail);
+};
+
diff --git a/mobile/Gruntfile.js b/mobile/Gruntfile.js
new file mode 100644
index 0000000..221fa80
--- /dev/null
+++ b/mobile/Gruntfile.js
@@ -0,0 +1,135 @@
+module.exports = function (grunt) {
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ settings: grunt.file.readJSON('settings.json'),
+ sass: {
+ dist: {
+ files: {
+ '../build/out/mobile/css/main.css': '../build/tmp/mobile/sass/main.scss'
+ }
+ }
+ },
+ concat: {
+ options: {
+ separator: ';',
+ },
+ mergeJs: {
+ src: ['bower_components/milagro-crypto/js/DBIG.js', 'bower_components/milagro-crypto/js/BIG.js', 'bower_components/milagro-crypto/js/FP.js', 'bower_components/milagro-crypto/js/ROM.js', 'bower_components/milagro-crypto/js/HASH.js', 'bower_components/milagro-crypto/js/RAND.js', 'bower_components/milagro-crypto/js/AES.js', 'bower_components/milagro-crypto/js/GPM.js', 'bower_components/milagro-crypto/js/ECP.js', 'bower_components/milagro-crypto/js/FP2.js', 'bower_components/milagro-crypto/js/ECP2.js', 'bower_components/milagro-crypto/js/FP4.js', 'bower_components/milagro-crypto/js/FP12.js', 'bower_components/milagro-crypto/js/PAIR.js', 'bower_components/milagro-crypto/js/MPIN.js', 'bower_components/milagro-crypto/js/MPINAuth.js', '../libs/topLevelCode.js', 'bower_components/handlebars/handlebars.runtime.min.js', 'bower_components/qrcode/lib/qrcode.min.js'],
+ dest: '../build/out/tmp/mobile/mpin-all.min.js'
+ }
+ },
+ bgShell: {
+ createDir: {
+ cmd: 'mkdir -p ../build/out/mobile/js/ && mkdir -p ../build/out/',
+ options: {
+ stdout: true,
+ }
+ },
+ createTemplate: {
+ cmd: 'handlebars -n "mpin.templates" ./themes/<%= settings.templateName %>/views/*.handlebars -f ../build/out/mobile/js/templates.js',
+ options: {
+ stdout: true,
+ }
+ },
+ bowerInstall: {
+ cmd: 'bower install --allow-root',
+ options: {
+ stdout: true
+ }
+ },
+ copyResources: {
+ cmd: 'cp -Rv ./themes/<%= settings.templateName %>/images ../build/out/mobile/',
+ options: {
+ stdout: true,
+ }
+ },
+ copyHandlebarsRuntime: {
+ cmd: 'cp -Rv bower_components/handlebars/handlebars.runtime.min.js ../build/out/mobile/js/',
+ options: {
+ stdout: true,
+ }
+ },
+ copySASS: {
+ cmd: 'mkdir -p ../build/tmp/mobile/sass/templates/ && cp -Rv sass/* ../build/tmp/mobile/sass/ && cp themes/<%= settings.templateName %>/sass/_template.scss ../build/tmp/mobile/sass/templates/',
+ options: {
+ stdout: true,
+ },
+ done: function () {
+ grunt.task.run('replace');
+ }
+ },
+ copyJs: {
+ cmd: 'cp -r ../build/out/tmp/mobile/mpin-all.min.js ../build/out/mobile/js/mpin-all.min.js',
+ options: {
+ stdout: true,
+ }
+ }
+ },
+ watch: {
+ resourceFiles: {
+ files: ['src/sass/*.scss', 'src/views/**/*.handlebars', 'js/*.js', 'settings.json', 'index.html'],
+ tasks: ['bgShell', 'sass']
+ }
+ },
+ replace: {
+ dist: {
+ options: {
+ patterns: [
+ {
+ match: 'clientsetting',
+ replacement: '<%= settings.clientSettingsURL %>'
+ },
+ {
+ match: 'templatename',
+ replacement: '<%= settings.templateName %>'
+ },
+ {
+ match: 'emailregex',
+ replacement: '<%= settings.emailRegex %>'
+ },
+ {
+ match: 'timestamp',
+ replacement: '<%= grunt.template.today() %>'
+ }
+ ]
+ },
+ files: [
+ {expand: true, flatten: true, src: ['index.html'], dest: '../build/out/mobile/'},
+ {expand: true, flatten: true, src: ['mpin.appcache'], dest: '../build/out/mobile/'},
+ {expand: true, flatten: true, src: ['sass/main.scss'], dest: '../build/tmp/mobile/sass/'},
+ {expand: true, flatten: true, src: ['themes/<%= settings.templateName %>/sass/_template.scss'], dest: '../build/tmp/mobile/sass/templates/'},
+ {expand: true, flatten: true, src: ['js/main.js'], dest: '../build/out/mobile/js/'},
+ ]
+ }
+ },
+ uglify: {
+ my_target: {
+ files: {
+ '../build/out/mobile/js/main.js': ['../build/out/mobile/js/main.js'],
+ '../build/out/mobile/js/mpin-all.min.js': ['../build/out/tmp/mobile/mpin-all.min.js'],
+ '../build/out/mobile/js/templates.js': ['../build/out/mobile/js/templates.js']
+ }
+ }
+ },
+ cssmin: {
+ target: {
+ files: {
+ '../build/out/mobile/css/main.css': ['../build/out/mobile/css/main.css']
+ }
+ }
+ },
+ });
+ grunt.loadNpmTasks('grunt-contrib-sass');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+ grunt.loadNpmTasks('grunt-bg-shell');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-concat');
+ grunt.loadNpmTasks('grunt-replace');
+ grunt.loadNpmTasks('grunt-contrib-cssmin');
+ grunt.loadNpmTasks('grunt-sass');
+
+
+ grunt.registerTask('default', ['watch']);
+ grunt.registerTask('build', ['bgShell', 'sass', 'concat', 'bgShell:copyJs']);
+ grunt.registerTask('build-prod', ['bgShell', 'sass', 'concat', 'uglify', 'cssmin']);
+}
diff --git a/mobile/bower.json b/mobile/bower.json
new file mode 100644
index 0000000..bd75713
--- /dev/null
+++ b/mobile/bower.json
@@ -0,0 +1,15 @@
+{
+ "name": "pinpad",
+ "version": "1.0.0",
+ "description": "M-Pin JavaScript Client",
+ "authors": [
+ "MILAGRO"
+ ],
+ "dependencies": {
+ "milagro-crypto": "https://github.com/miracl/milagro-crypto.git#1.0.0",
+ "qrcode": "0.1.0",
+ "handlebars": "~3.0.3"
+ },
+ "moduleType": "globals",
+ "main": "js/mpin.js",
+}
diff --git a/mobile/index.html b/mobile/index.html
new file mode 100644
index 0000000..043b19f
--- /dev/null
+++ b/mobile/index.html
@@ -0,0 +1,94 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<!doctype html>
+<!-- <html lang="en" manifest="mpin.appcache"> -->
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>MPIN</title>
+ <meta name="description" content="">
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+ <meta name="apple-touch-fullscreen" content="yes">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
+ <link rel="apple-touch-icon" href="images/icons/Icon@2x.png" />
+ <meta http-equiv="cleartype" content="on">
+ <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+ <div id="rotateLock">
+ <img src="images/img/rotate.svg" alt="">
+ <h1>Rotate Device to Portrait</h1>
+ </div>
+ <div id="mpinContainer">
+
+ <div id="mpinHolder">
+
+ <!-- Master container to inherit the flexibility position -->
+ <div id="mpinMaster" ontouchstart="">
+
+ <!-- Append here -->
+
+ </div>
+
+
+ <help>
+
+ <div id="helpContainer">
+
+
+ </div>
+
+ </help>
+
+ <!-- Helphub -->
+
+ <helpHub></helpHub>
+
+ </div>
+ </div>
+
+ <!-- Load JS files -->
+
+ <script src="js/main.js"></script>
+ <!-- Initialize MPIN -->
+
+ <script>
+ (function() {
+ new mpin("mpinMaster", {
+ clientSettingsURL: "@@clientsetting",
+ // useWebSocket: true,
+ emailCheckRegex: @@emailregex,
+ onSuccessLogin: function() {
+ alert(" :: on SUCCESS LOGIN ::");
+ },
+ setDeviceName: true,
+ // requestOTP: "1"
+ });
+ })();
+
+ </script>
+
+
+</body>
+</html>
diff --git a/mobile/js/main.js b/mobile/js/main.js
new file mode 100644
index 0000000..488ec78
--- /dev/null
+++ b/mobile/js/main.js
@@ -0,0 +1,2624 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+var mpin = mpin || {};
+
+(function() {
+ var lang = {}, hlp = {};
+ var loader;
+ var IMAGES_PATH = "resources/templates/@@templatename/img/";
+
+ //CONSTRUCTOR
+ mpin = function(domID, options) {
+ var self = this;
+
+ loader("js/handlebars.runtime.min.js", function() {
+ loader("js/mpin-all.min.js", function() {
+ loader("js/templates.js", function() {
+ var _options = {};
+ if (!options.clientSettingsURL) {
+ return console.error("set client Settings");
+ }
+
+ //remove _ from global SCOPE
+ _options.client = options;
+
+ self.ajax(options.clientSettingsURL, function(serverOptions) {
+ if(serverOptions.error === 500) {
+
+ _options.server = '';
+ document.getElementById(domID).innerHTML = mpin._.template(mpin.template['offline'], {});
+ return;
+ }
+ _options.server = serverOptions;
+ self.initialize.call(self, domID, _options);
+ });
+ });
+ });
+ });
+
+ };
+
+ //CONFIGS
+ mpin.cfg = {
+// apiVersion: "v0.3",
+// apiUrl: "https://m-pinapi.certivox.net/",
+// apiUrl: "http://dtatest.certivox.me/",
+ language: "en",
+ pinSize: 4,
+ requiredOptions: "appID; signatureURL; mpinAuthServerURL; timePermitsURL; seedValue",
+ defaultOptions: {
+ identityCheckRegex: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+ setDeviceName: false,
+ accessNumberUseCheckSum: true
+ },
+ expireOtpSeconds: 99,
+ touchevents: true
+ };
+
+ /**
+ * Mpin Constructor
+ *
+ * @param {type} domID PinPad element ID
+ * @param {type} options
+ *
+ * @returns {Boolean}
+ */
+ mpin.prototype.initialize = function(domID, options) {
+ this.el = document.getElementById(domID);
+ this.elHelp = document.getElementById('helpContainer');
+ this.elHelpOverlay = document.getElementsByTagName("help")[0];
+ this.elHelpHub = document.getElementsByTagName("helpHub")[0];
+ this.accessNumber = "";
+ this.currentDate = null;
+
+ // Register handlebars helper
+
+ Handlebars.registerHelper("hlp", function(optionalValue) {
+ return hlp.text(optionalValue);
+ });
+
+ Handlebars.registerHelper("img", function(imgSrc) {
+ return hlp.img(imgSrc);
+ });
+
+ Handlebars.registerHelper("loop", function (n, block) {
+ var accum = '';
+ for (var i = 0; i < n; ++i)
+ accum += block.fn(i);
+ return accum;
+ });
+
+ //options CHECK
+ if (!options || !this.checkOptions(options.server)) {
+ return console.error("Some options are required: " + mpin.cfg.requiredOptions);
+ }
+
+ //Extend string with extra methods
+ setStringOptions();
+
+ //data Source
+ this.ds = this.dataSource();
+
+ //set Options
+ this.setDefaults().setOptions(options.server).setOptions(options.client);
+
+
+ if (!this.opts.certivoxURL.mpin_endsWith("/")) {
+ this.opts.certivoxURL += "/";
+ }
+
+ //if set & exist
+ if (this.opts.language && lang[this.opts.language]) {
+ this.language = this.opts.language;
+ } else {
+ this.language = mpin.cfg.language;
+ }
+ this.setLanguageText();
+
+ // Prevent user from scrolling on touch
+
+ document.ontouchmove = function(e){ e.preventDefault(); }
+
+ this.renderHomeMobile();
+
+ // Simulate OTP
+ // var authData = {};
+ // authData._mpinOTP = 99;
+ // authData.expireTime = 1414593174295000;
+ // authData.nowTime = 1414593174195000;
+
+ // this.renderOtp(authData);
+
+ };
+
+
+ // check minimal required Options
+ // which should be set up
+ mpin.prototype.checkOptions = function(options) {
+ var _opts;
+ _opts = mpin.cfg.requiredOptions.split("; ");
+ for (var k = 0, l = _opts.length; k < l; k++) {
+ if (typeof options[_opts[k]] === "undefined") {
+ return false;
+ }
+ }
+ return true;
+ };
+
+ //set defaults OPTIONS
+ mpin.prototype.setDefaults = function() {
+ this.opts || (this.opts = {});
+ for (var i in mpin.cfg.defaultOptions) {
+ this.opts[i] = mpin.cfg.defaultOptions[i];
+ }
+
+ this.opts.useWebSocket = ('WebSocket' in window && window.WebSocket.CLOSING === 2);
+
+ return this;
+ };
+
+ mpin.prototype.setOptions = function(options) {
+ var _i, _opts, _optionName, _options = "stage; allowAddUser; requestOTP; successSetupURL; onSuccessSetup; successLoginURL; onSuccessLogin; onLoaded; onGetPermit; ";
+ _options += "onReactivate; onAccountDisabled; onUnsupportedBrowser; prerollid; onError; onGetSecret; mpinDTAServerURL; signatureURL; verifyTokenURL; certivoxURL; ";
+ _options += "mpinAuthServerURL; registerURL; accessNumberURL; mobileAppFullURL; authenticateHeaders; authTokenFormatter; accessNumberRequestFormatter; ";
+ _options += "registerRequestFormatter; onVerifySuccess; mobileSupport; emailCheckRegex; seedValue; appID; useWebSocket; setupDoneURL; timePermitsURL; timePermitsStorageURL; authenticateURL; ";
+ _options += "language; customLanguageTexts; accessNumberDigits; mobileAuthenticateURL; setDeviceName; getAccessNumberURL; cSum; accessNumberUseCheckSum";
+
+ _opts = _options.split("; ");
+ this.opts || (this.opts = {});
+
+ for (var _i = 0, _l = _opts.length; _i < _l; _i++) {
+ _optionName = _opts[_i];
+ if (typeof options[_optionName] !== "undefined")
+ this.opts[_optionName] = options[_optionName];
+ }
+
+ MPINAuth.hash_val = this.opts.seedValue;
+
+ if (this.opts.mpinAuthServerURL.mpin_startsWith("http")) {
+ this.opts.useWebSocket = false;
+ }
+
+ if (this.opts.mpinAuthServerURL.mpin_startsWith("/")) {
+ var loc = window.location;
+ var newAuthServerURL;
+ if (this.opts.useWebSocket) {
+ newAuthServerURL = (loc.protocol === "https:") ? "wss:" : "ws:";
+ } else {
+ newAuthServerURL = loc.protocol;
+ }
+
+ newAuthServerURL += "//" + loc.host + this.opts.mpinAuthServerURL;
+ this.opts.mpinAuthServerURL = newAuthServerURL;
+ }
+
+ this.opts.mpinAuthServerURL = (this.opts.mpinAuthServerURL.mpin_endsWith("/")) ? this.opts.mpinAuthServerURL.slice(0, this.opts.mpinAuthServerURL.length-1) : this.opts.mpinAuthServerURL;
+
+ return this;
+ };
+
+ //return readyHtml
+ mpin.prototype.readyHtml = function(tmplName, tmplData) {
+ var data = tmplData, html;
+ html = mpin.templates[tmplName]({data:data, cfg: mpin.cfg});
+ return html;
+ };
+
+
+ mpin.prototype.readyHelpHub= function(tmplName, tmplData) {
+ var data = tmplData, html;
+ html = mpin.templates[tmplName]({data:data, cfg: mpin.cfg});
+ return html;
+ };
+
+
+ mpin.prototype.render = function(tmplName, callbacks, tmplData) {
+ var data = tmplData || {}, k;
+ this.el.innerHTML = this.readyHtml(tmplName, data);
+
+ for (k in callbacks) {
+
+ if (document.getElementById(k) && k !== 'menuBtn') {
+
+ if (window.navigator.msPointerEnabled) {
+ document.getElementById(k).addEventListener("MSPointerDown", callbacks[k], false);
+ }
+ else {
+
+ if(mpin.cfg.touchevents) {
+ document.getElementById(k).addEventListener('touchstart', callbacks[k], false);
+ } else {
+ document.getElementById(k).addEventListener('click', callbacks[k], false);
+ }
+ }
+
+ } else if(document.getElementById(k) && k === 'menuBtn') {
+ document.getElementById('menuBtn').addEventListener('click', callbacks[k], false);
+ }
+ }
+
+ };
+
+ mpin.prototype.renderHelpHub = function(tmplName, tmplData) {
+ var data = tmplData || {}, k, self = this, helphubBtns = {};
+
+ // // Dissmiss any open help menus
+
+ self.dismissHelp();
+
+ this.elHelpHub.style.display = 'flex';
+ this.elHelpHub.style.opacity = "1";
+ this.elHelpHub.innerHTML = this.readyHelpHub(tmplName, data);
+
+ helphubBtns.first = function(evt) {
+ // Modify the sequence for the templates
+ // self.renderHelp("help-helphub", callbacks);
+ };
+
+ helphubBtns.second = function(evt) {
+ // Modify the sequence for the templates
+ // self.renderHelp("help-helphub", callbacks);
+ };
+
+ helphubBtns.details = function(evt) {
+ // Modify the sequence for the templates
+ self.renderHelpHub("helphub-details");
+ };
+
+ helphubBtns.forth = function(evt) {
+ // Modify the sequence for the templates
+ // self.renderHelp("help-helphub", callbacks);
+ };
+
+ helphubBtns.enter = function(evt) {
+ self.renderHelpHub("helphub-index");
+ }
+
+ helphubBtns.exit = function(evt) {
+ self.dismissHelpHub();
+ };
+
+ for (k in helphubBtns) {
+ if (document.getElementById(k)) {
+
+ if (window.navigator.msPointerEnabled) {
+ document.getElementById(k).addEventListener("MSPointerDown", helphubBtns[k], false);
+ }
+ else {
+
+ if(mpin.cfg.touchevents) {
+ document.getElementById(k).addEventListener('touchstart', helphubBtns[k], false);
+ } else {
+
+ document.getElementById(k).addEventListener('click', helphubBtns[k], false);
+ }
+
+ }
+
+ }
+ }
+
+ };
+
+ mpin.prototype.dismissHelp = function() {
+ this.elHelpOverlay.style.display = 'none';
+ this.elHelpOverlay.style.opacity = '0';
+ this.elHelp.style.display = 'none';
+ }
+
+ mpin.prototype.dismissHelpHub = function() {
+ this.elHelpHub.style.display = 'none';
+ this.elHelpHub.style.opacity = '0';
+ }
+
+ mpin.prototype.setLanguageText = function() {
+ hlp.language = this.language;
+ // setLanguageText
+ if (this.opts.customLanguageTexts && this.opts.customLanguageTexts[this.language]) {
+ for (var k in this.opts.customLanguageTexts[this.language]) {
+ console.log("this.opts.customLanguageTexts[this.language]", this.opts.customLanguageTexts[this.language][k]);
+ if (lang[this.language][k]) {
+ lang[this.language][k] = this.opts.customLanguageTexts[this.language][k];
+ }
+ }
+ }
+
+ };
+
+ mpin.prototype.renderHomeMobile = function() {
+
+ var callbacks = {}, self = this, identity, standalone, safari, userAgent, ios;
+
+ callbacks.mpin_authenticate = function(evt) {
+ // Modify the sequence for the templates
+ self.renderSetupHome.call(self);
+ };
+
+ callbacks.ok_dismiss = function(evt) {
+ // Modify the sequence for the templates
+ self.dismissHelp.call(self);
+ };
+
+ callbacks.show_more = function(evt) {
+ // Modify the sequence for the templates
+ self.renderHelp("help-helphub", callbacks);
+ };
+
+ callbacks.info = function(evt) {
+ // Show the help item
+ self.renderHelp("help-setup-home", callbacks);
+ };
+
+ callbacks.mp_action_setup = function(evt) {
+ self.actionSetupHome.call(self);
+ };
+
+ identity = this.ds.getDefaultIdentity();
+ standalone = window.navigator.standalone;
+ userAgent = window.navigator.userAgent.toLowerCase(),
+ safari = /safari\//.test( userAgent );
+ ios = /iphone|ipod|ipad/.test( userAgent );
+
+ // Check browsers
+
+ function isIos7() {
+ var deviceAgent = userAgent;
+ return /(iphone|ipod|ipad).* os 7_/.test(deviceAgent);
+ }
+
+ function isIos8() {
+ var deviceAgent = userAgent;
+ return /(iphone|ipod|ipad).* os 8_/.test(deviceAgent);
+ }
+
+ function isIos6() {
+ var deviceAgent = userAgent;
+ return /(iphone|ipod|ipad).* os 6_/.test(deviceAgent);
+ }
+
+ function goToIdentity() {
+ // Check if online
+
+ if(!navigator.onLine) {
+ self.render('offline', callbacks);
+ }
+
+ // Check if there's identity, redirect to login where 'Add to identity will appear'
+ else if (identity) {
+
+ totalAccounts = self.ds.getAccounts();
+ totalAccounts = Object.keys(totalAccounts).length;
+
+ if (totalAccounts === 0) {
+ self.renderSetupHome();
+ } else if (totalAccounts === 1 || totalAccounts > 1) {
+ self.renderAccessNumber();
+ // self.renderLogin();
+ }
+
+ } else {
+ // Render renderSetupHome, if no identity exists
+ self.renderSetupHome();
+ }
+ }
+
+ // Check if Safari and if it's open as standalone app
+ if(ios) {
+
+ if ( !standalone && safari ) {
+
+ // Check if chrome and exit
+
+ if(userAgent.match('crios')) {
+ goToIdentity();
+ return;
+ }
+
+ // Render IOS7 view
+ if(isIos7() || isIos8()) {
+ this.render('ios7-startup', callbacks);
+
+ } else if(isIos6()) {
+ // Render the IOS6 view - the difference is in the icons
+ this.render('ios6-startup', callbacks);
+ } else {
+ goToIdentity();
+ }
+
+ } else if ( standalone && !safari ) {
+
+ goToIdentity();
+
+ } else if ( !standalone && !safari ) {
+
+ // In app view
+ this.render('ui-webview', callbacks);
+ };
+
+ } else {
+
+ goToIdentity();
+ }
+
+ };
+
+ mpin.prototype.renderSetupHome = function(email, errorID) {
+
+ var callbacks = {}, self = this, userId, descHtml, deviceName = "", deviceNameHolder = "";
+
+
+ var totalAccounts = this.ds.getAccounts();
+ totalAccounts = Object.keys(totalAccounts).length;
+
+ callbacks.mp_action_home = function(evt) {
+ if (totalAccounts === 0) {
+ self.renderSetupHome();
+ } else if (totalAccounts === 1) {
+ self.renderAccessNumber();
+ } else if (totalAccounts > 1) {
+ self.renderAccessNumber(true);
+ }
+ };
+ callbacks.mp_action_setup = function(evt) {
+ self.actionSetupHome.call(self);
+ };
+
+ userId = (email) ? email : "";
+
+ if (this.opts.setDeviceName) {
+
+ //get from localStorage - already set
+ if (this.ds.getDeviceName()) {
+ deviceName = this.ds.getDeviceName();
+ deviceNameHolder = deviceName;
+ } else {
+ //set only placeholder value
+ deviceNameHolder = this.suggestDeviceName();
+ deviceName = "";
+ }
+ }
+
+ this.render("setup-home", callbacks, {userId: userId, setDeviceName: this.opts.setDeviceName});
+
+ // Put placeholder attribute
+
+ var inputDeviceName = document.getElementById('deviceInput')
+ , inputEmail = document.getElementById('emailInput');
+
+ inputDeviceName.placeholder = deviceNameHolder;
+ inputDeviceName.value = deviceName;
+ inputEmail.placeholder = hlp.text("setup_text3");
+
+ };
+
+ mpin.prototype.renderOtp = function (authData) {
+ var callbacks = {}, self = this, leftSeconds, timerEl, timer2d, drawTimer, totalSec;
+
+ //draw canvas Clock
+ drawTimer = function (expireOn) {
+ var start, diff;
+ diff = totalSec - expireOn;
+ start = -0.5 + ((diff / totalSec) * 2);
+ start = Math.round(start * 100) / 100;
+ timer2d.clearRect(0, 0, timerEl.width, timerEl.height);
+
+ timer2d.beginPath();
+ timer2d.strokeStyle = "#8588ac";
+ timer2d.arc(20, 20, 18, start * Math.PI, 1.5 * Math.PI);
+ timer2d.lineWidth = 5;
+ timer2d.stroke();
+ };
+
+ function expire (expiresOn) {
+ leftSeconds = (leftSeconds) ? leftSeconds - 1 : Math.floor((expiresOn - (new Date())) / 1000);
+ if (leftSeconds > 0) {
+ document.getElementById("mpin_seconds").innerHTML = leftSeconds;
+
+ if (document.getElementById("mpTimer")) {
+ drawTimer(leftSeconds);
+ }
+
+ } else {
+ clearInterval(self.intervalExpire);
+ self.renderOtpExpire();
+ }
+ }
+
+ callbacks.mp_action_home = function () {
+ clearInterval(self.intervalExpire);
+ self.renderHomeMobile.call(self);
+ };
+
+ callbacks.mpin_help = function () {
+ clearInterval(self.intervalExpire);
+ self.lastView = "renderOtp";
+ self.renderHelpHub.call(self);
+ };
+
+ callbacks.mpin_cancel = function () {
+ clearInterval(self.intervalExpire);
+ self.renderLogin.call(self);
+ };
+
+ this.render("otp", callbacks);
+
+ document.getElementById("mpinOTPNumber").innerHTML = authData._mpinOTP;
+
+ var timeOffset = new Date() - new Date(authData.nowTime);
+ var expireMSec = new Date(authData.expireTime + timeOffset);
+
+ totalSec = Math.floor((expireMSec - (new Date())) / 1000);
+
+ if (document.getElementById("mpTimer")) {
+ timerEl = document.getElementById("mpTimer");
+ timer2d = timerEl.getContext("2d");
+ }
+
+ expire(expireMSec);
+
+ this.intervalExpire = setInterval(function () {
+ expire();
+ }, 1000);
+ };
+
+
+ mpin.prototype.renderOtpExpire = function () {
+ var callbacks = {}, self = this;
+
+ callbacks.mpin_login_now = function () {
+ self.renderLogin.call(self);
+ };
+
+ this.render("otp-expire", callbacks);
+ };
+
+
+ mpin.prototype.suggestDeviceName = function() {
+ var suggestName, platform, browser;
+ platform = navigator.platform.toLowerCase();
+ browser = navigator.userAgent;
+
+ if (platform.indexOf("mac") !== -1) {
+ platform = "mac";
+ } else if (platform.indexOf("linux") !== -1) {
+ platform = "lin";
+ } else if (platform.indexOf("win") !== -1) {
+ platform = "win";
+ } else if (platform.indexOf("sun") !== -1) {
+ platform = "sun";
+ } else if (platform.indexOf("iphone") !== -1) {
+ platform = "iOS";
+ } else {
+ platform = "__";
+ }
+
+ if (browser.indexOf("Chrome") !== -1) {
+ browser = "Chrome";
+ } else if (browser.indexOf("MSIE") !== -1 || browser.indexOf("Trident") !== -1) {
+ browser = "Explorer";
+ } else if (browser.indexOf("Firefox") !== -1) {
+ browser = "Firefox";
+ } else if (browser.indexOf("Safari") !== -1) {
+ browser = "Safari";
+ } else if (browser.indexOf("iPhone") !== -1) {
+ browser = "iPhone";
+ } else {
+ browser = "_";
+ }
+
+ suggestName = platform + browser;
+
+ return suggestName;
+ };
+
+
+ mpin.prototype.renderSetup = function(email, clientSecretShare, clientSecretParams) {
+
+ var callbacks = {}
+ , self = this;
+
+ var totalAccounts = this.ds.getAccounts();
+ totalAccounts = Object.keys(totalAccounts).length;
+
+ callbacks.mp_action_home = function(evt) {
+ if (totalAccounts === 0) {
+ self.renderSetupHome();
+ } else if (totalAccounts === 1) {
+ self.renderAccessNumber();
+ } else if (totalAccounts > 1) {
+ self.renderAccessNumber(true);
+ }
+ };
+ callbacks.mpinClear = function() {
+ self.addToPin.call(self, "clear");
+ };
+ callbacks.mpinLogin = function() {
+
+ if(self.pinpadInput.length < mpin.cfg.pinSize ) {
+
+ return;
+ }
+
+ self.actionSetup.call(self);
+ };
+ callbacks.menuBtn = function() {
+ self.toggleButton.call(self);
+ };
+
+ callbacks.show_more = function(evt) {
+ // Modify the sequence for the templates
+ self.renderHelpHub("helphub-index", callbacks);
+ };
+
+ callbacks.info = function(evt) {
+ // Show the help item
+ self.renderHelp("help-setup-home", callbacks);
+ };
+
+ this.render("setup-pin", callbacks, {email: email, pinSize: mpin.cfg.pinSize});
+
+ this.enableNumberButtons(false);
+ this.bindNumberButtons();
+ this.addToPin.call(self, "clear");
+
+ //requestSignature
+ this.requestSignature(email, clientSecretShare, clientSecretParams);
+ };
+
+ mpin.prototype.renderAccessNumber = function(listAccounts) {
+
+ var callbacks = {}
+ , self = this
+ , identity = this.ds.getDefaultIdentity()
+ , email = this.getDisplayName(identity)
+ , totalAccounts = this.ds.getAccounts();
+
+ totalAccounts = Object.keys(totalAccounts).length;
+
+ if (!identity) {
+ this.renderSetupHome();
+ }
+
+ if (!this.identity) {
+ self.setIdentity(self.ds.getDefaultIdentity(), true);
+
+ }
+ if(self.opts.requestOTP === "1") {
+ self.renderLogin();
+ return;
+ }
+
+
+
+ callbacks.mp_action_home = function(evt) {
+ if (document.getElementById("menuBtn").classList.contains("close")) {
+ document.getElementById("menuBtn").onclick();
+// self.toggleButton.call(self);
+ }
+ return ;
+ if (totalAccounts === 0) {
+ self.renderSetupHome();
+ } else if (totalAccounts === 1) {
+ self.renderAccessNumber();
+ } else if (totalAccounts > 1) {
+ self.renderAccessNumber(true);
+ }
+ };
+
+ callbacks.mpinClear = function() {
+ self.addToAcc.call(self, "clear", false);
+ };
+
+ callbacks.menuBtn = function() {
+ self.toggleButton.call(self);
+ };
+
+ callbacks.mpinLogin = function() {
+
+ // Validate the number of digits entered
+ if(self.accessNumber.length < self.opts.accessNumberDigits ) {
+ return;
+ }
+
+ if (!self.opts.accessNumberUseCheckSum) {
+ self.renderLogin.call(self);
+ return;
+ }
+
+ if(self.opts.cSum === 1 && !self.checkAccessNumberValidity2(self.accessNumber, 6)) {
+ self.renderAccessNumber.call(self);
+ self.addToAcc.call(self, "clear", false);
+ self.display(hlp.text("authPin_errorInvalidAccessNumber"), true);
+ return;
+ }
+
+ if(!self.checkAccessNumberValidity(self.accessNumber, 1) && self.opts.cSum !== 1) {
+ self.renderAccessNumber.call(self);
+ self.addToAcc.call(self, "clear", false);
+ self.display(hlp.text("authPin_errorInvalidAccessNumber"), true);
+ return;
+ }
+ // Go to renderLogin
+
+ self.renderLogin();
+ };
+
+ this.render("setup-access", callbacks, {email: email, menu: true});
+
+ self.enableNumberButtons(true);
+ self.enableButton(false, "go");
+ self.enableButton(false, "clear");
+ self.bindNumberButtons(true);
+
+ // Clear all numbers if you logged in successfuly
+
+ self.addToAcc.call(self, "clear", false);
+
+ if (listAccounts) {
+ this.toggleButton();
+ } else {
+ this.setIdentity(this.ds.getDefaultIdentity(), true, function() {
+ self.display(hlp.text("pinpad_placeholder_text"));
+ }, function() {
+ return false;
+ });
+ }
+
+ }
+
+ mpin.prototype.renderLogin = function(listAccounts) {
+
+ var callbacks = {}
+ , self = this
+ , identity = this.ds.getDefaultIdentity()
+ , email = this.getDisplayName(identity)
+ , totalAccounts = this.ds.getAccounts()
+ , pinpadDisplay = document.getElementById("pinpad-input")
+
+ callbacks.mp_action_home = function(evt) {
+ if (totalAccounts === 0) {
+ self.renderSetupHome();
+ } else if (totalAccounts === 1) {
+ self.renderAccessNumber();
+ } else if (totalAccounts > 1) {
+ self.renderAccessNumber(true);
+ }
+ };
+
+ callbacks.mpinClear = function() {
+ self.addToPin.call(self, "clear");
+ };
+
+ callbacks.menuBtn = function() {
+ self.toggleButton.call(self);
+ };
+
+ callbacks.mpinLogin = function() {
+
+ if(self.pinpadInput.length < mpin.cfg.pinSize ) {
+
+ return;
+ }
+
+ self.actionLogin.call(self);
+ };
+
+ this.pinpadInput = '';
+ this.render("setup", callbacks, {email: email, menu: true, pinSize: mpin.cfg.pinSize});
+ this.enableNumberButtons(false);
+ this.bindNumberButtons();
+
+ // TODO
+
+ // Help hub callbacks
+
+ callbacks.ok_dismiss = function(evt) {
+ // Modify the sequence for the templates
+ self.dismissHelp.call(self);
+ };
+
+ callbacks.show_more = function(evt) {
+ // Modify the sequence for the templates
+ self.renderHelpHub("helphub-index");
+ };
+
+ // Helphub calbacks
+
+ document.getElementById('openHelpHub').onclick = function(evt) {
+ self.renderHelpHub("helphub-index");
+ };
+
+ if (listAccounts) {
+ this.toggleButton();
+ } else {
+ this.setIdentity(this.ds.getDefaultIdentity(), true, function() {
+ self.display(hlp.text("pinpad_placeholder_text"));
+ }, function() {
+ return false;
+ });
+ }
+ };
+
+ mpin.prototype.getAccessNumber = function() {
+ var _request = new XMLHttpRequest(), self = this, expire, drawTimer, timerEl, timer2d, totalSec;
+
+ this.intervalID || (this.intervalID = {});
+
+ //// TIMER CODE
+ if (document.getElementById("mpTimer")) {
+ timerEl = document.getElementById("mpTimer");
+ timer2d = timerEl.getContext("2d");
+ }
+ //draw canvas Clock
+ drawTimer = function (expireOn) {
+
+ var start, diff;
+ diff = totalSec - expireOn;
+ start = -0.5 + ((diff / totalSec) * 2);
+ start = Math.round(start * 100) / 100;
+
+ timer2d.clearRect(0, 0, timerEl.width, timerEl.height);
+
+ timer2d.beginPath();
+ timer2d.strokeStyle = "#8588ac";
+ timer2d.arc(20, 20, 18, start * Math.PI, 1.5 * Math.PI);
+ timer2d.lineWidth = 5;
+ timer2d.stroke();
+ };
+
+ expire = function (expiresOn) {
+ var expireAfter = Math.floor((expiresOn - (new Date())) / 1000);
+ if (expireAfter <= 0) {
+ if (self.intervalID) {
+ clearInterval(self.intervalID);
+ }
+ self.getAccessNumber();
+ } else {
+ document.getElementById("mpin_seconds").innerHTML = expireAfter;
+ //////////////////////////////////////////Clockwise
+ ///// Check if Timer Element exist some template did not have timer
+ if (document.getElementById("mpTimer")) {
+ drawTimer(expireAfter);
+ }
+ }
+ };
+
+ _request.onreadystatechange = function() {
+ var jsonResponse, expiresOn;
+ if (_request.readyState === 4 && _request.status === 200) {
+ jsonResponse = JSON.parse(_request.responseText);
+ document.getElementById("mp_accessNumber").innerHTML = jsonResponse.accessNumber;
+ if (jsonResponse.webOTP) {
+ self.webOTP = jsonResponse.webOTP;
+ }
+ expiresOn = new Date();
+ totalSec = 99;
+ expiresOn.setSeconds(expiresOn.getSeconds() + jsonResponse.ttlSeconds);
+ expire(expiresOn);
+ self.intervalID = setInterval(function() {
+ expire(expiresOn);
+ }, 1000);
+ }
+ };
+ _request.open("POST", this.opts.getAccessNumberURL);
+// _request.setRequestHeader('Content-Type', 'application/json');
+ _request.send();
+ };
+
+ //post REQUEST
+ mpin.prototype.getAccess = function() {
+ var _request = new XMLHttpRequest(), self = this;
+
+ _request.onreadystatechange = function() {
+ var _jsonRes;
+ if (_request.readyState === 4) {
+ if (_request.status === 200) {
+ _jsonRes = JSON.parse(_request.responseText);
+ if (self.opts.onVerifySuccess) {
+ self.opts.onVerifySuccess(_jsonRes);
+ } else {
+ self.successLogin(_jsonRes);
+ }
+ } else {
+ console.log("NOT success !!!");
+ }
+ }
+ };
+
+ _request.open("POST", this.opts.accessNumberURL, true);
+ _request.timeout = 30000;
+ _request.ontimeout = function() {
+ self.getAccess();
+ };
+ var _sendParams = {};
+ if (this.webOTP) {
+ sendParams.webOTP = this.webOTP;
+ _request.send(JSON.stringify(_sendParams));
+ } else {
+ _request.send();
+ }
+ return _request;
+ };
+
+ mpin.prototype.renderActivateIdentity = function() {
+ var callbacks = {}, self = this, email;
+ email = this.getDisplayName(this.identity);
+
+ callbacks.mp_action_home = function(evt) {
+ self.renderHomeMobile.call(self);
+ };
+ callbacks.mpin_action_setup = function(evt) {
+ if (self.checkBtn(this))
+ self.beforeRenderSetup.call(self, this);
+ };
+ callbacks.mpin_action_resend = function(evt) {
+ if (self.checkBtn(this))
+ self.actionResend.call(self, this);
+ };
+ //identities list
+ callbacks.mpin_accounts = function() {
+ self.renderAccountsBeforeSetup();
+ };
+
+ this.render("activate-identity", callbacks, {email: email});
+ };
+
+ //prevent mpin button multi clicks
+ mpin.prototype.checkBtn = function(btnElem) {
+ var btnClass = btnElem.className;
+ return (btnClass.indexOf("mpinBtnBusy") === -1 && btnClass.indexOf("mpinBtnError") === -1 && btnClass.indexOf("mpinBtnOk") === -1);
+ };
+
+ mpin.prototype.mpinButton = function(btnElem, busyText) {
+
+ var oldHtml = btnElem.innerHTML;
+ addClass(btnElem, "mpinBtnBusy");
+
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(busyText) + "</span>";
+ return {
+ error: function(errorText) {
+ removeClass(btnElem, "mpinBtnBusy");
+ addClass(btnElem, "mpinBtnError");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(errorText) + "</span>";
+ setTimeout(function() {
+ removeClass(btnElem, "mpinBtnError");
+ btnElem.innerHTML = oldHtml;
+ }, 1500);
+
+ }, ok: function(okText) {
+ removeClass(btnElem, "mpinBtnBusy");
+ addClass(btnElem, "mpinBtnOk");
+ btnElem.innerHTML = "<span class='btnLabel'>" + hlp.text(okText) + "</span>";
+ setTimeout(function() {
+ removeClass(btnElem, "mpinBtnOk");
+ btnElem.innerHTML = oldHtml;
+ }, 1500);
+ }};
+ };
+
+
+ mpin.prototype.beforeRenderSetup = function(btnElem) {
+
+ var _reqData = {}, regOTT, url, self = this;
+ regOTT = this.ds.getIdentityData(this.identity, "regOTT");
+ url = this.opts.signatureURL + "/" + this.identity + "?regOTT=" + regOTT;
+
+ if (btnElem) {
+ var btn = this.mpinButton(btnElem, "setupNotReady_check_info1");
+ }
+
+ _reqData.URL = url;
+ _reqData.method = "GET";
+ //get signature
+ requestRPS(_reqData, function(rpsData) {
+ if (rpsData.errorStatus) {
+ btn.error("setupNotReady_check_info2");
+ self.error("Activate identity");
+ return;
+ }
+ var userId = self.getDisplayName(self.identity);
+ self.renderSetup(userId, rpsData.clientSecretShare, rpsData.params);
+ });
+
+
+ };
+
+//custom render
+ mpin.prototype.renderAccountsPanel = function(back) {
+
+ var self = this,
+ callbacks = {},
+ renderElem,
+ addEmptyItem,
+ c = 0,
+ mpBack = document.getElementById('mp_back'),
+ menuBtn = document.getElementById('menuBtn'),
+ defaultIdentity;
+
+ if(!mpBack) {
+ mpBack = document.getElementById("mp_back_not_active");
+ }
+
+ if (window.navigator.msPointerEnabled) {
+ menuBtn.style.bottom = '0';
+ }
+
+ if(menuBtn) {
+
+ menuBtn.onclick = function(evt) {
+ document.getElementById('accountTopBar').style.height = "";
+ menuBtn.className = 'up';
+ // self.renderAccessNumber();
+ };
+
+ }
+
+ addEmptyItem = function(cnt) {
+ var p = document.createElement("div");
+ p.className = "mp_contentEmptyItem";
+ cnt.appendChild(p);
+ };
+
+ addMpinBack = function () {
+
+ if(document.getElementById('accountTopBar')) {
+ renderElem = document.getElementById('accountTopBar').appendChild(document.createElement("div"));
+ renderElem.id = "mp_back";
+ mpBack = document.getElementById("mp_back");
+
+ if(!document.getElementById("mp_back")) {
+ mpBack = document.getElementById("mp_back_not_active");
+ }
+
+ mpBack.innerHTML = self.readyHtml("accounts-panel", {});
+ }
+ }
+
+
+ // Fix for IE compatibillity
+ if(document.body.contains(mpBack) === false || document.body.contains(mpBack) === false) {
+
+ addMpinBack();
+ mpBack.style.display = 'block';
+
+ document.getElementById("mp_acclist_adduser").onclick = function(evt) {
+ self.renderSetupHome.call(self);
+ };
+
+ // Appending happens here
+
+ var cnt = document.getElementById("mp_accountContent");
+ this.addUserToList(cnt, this.ds.getDefaultIdentity(), true, 0);
+
+ for (var i in this.ds.getAccounts()) {
+ c += 1;
+ if (i != this.ds.getDefaultIdentity())
+ this.addUserToList(cnt, i, false, c);
+ }
+
+ addEmptyItem(cnt);
+
+ }
+
+ //default IDENTITY
+
+ };
+
+ mpin.prototype.renderAccountsBeforeSetupPanel = function(back) {
+
+ var self = this,
+ callbacks = {},
+ renderElem,
+ addEmptyItem,
+ c = 0,
+ mpBack = document.getElementById('mp_back_not_active'),
+ menuBtn = document.getElementById('menuBtn'),
+ defaultIdentity;
+
+ if (window.navigator.msPointerEnabled) {
+ menuBtn.style.bottom = '0';
+ }
+
+ addEmptyItem = function(cnt) {
+ var p = document.createElement("div");
+ p.className = "mp_contentEmptyItem";
+ cnt.appendChild(p);
+ };
+
+ addMpinBack = function () {
+ renderElem = document.getElementById('identityContainer').appendChild(document.createElement("div"));
+ renderElem.id = "mp_back_not_active";
+ mpBack = document.getElementById("mp_back_not_active");
+ mpBack.innerHTML = self.readyHtml("accounts-panel-not-active", {});
+ }
+
+
+ // Fix for IE compatibillity
+ if(document.body.contains(mpBack) === false) {
+
+ addMpinBack();
+ mpBack.style.display = 'block';
+
+ document.getElementById("mp_go_back").onclick = function(evt) {
+ self.renderIdentityNotActive.call(self);
+ };
+
+ // Appending happens here
+
+ var cnt = document.getElementById("mp_accountContent");
+ this.addUserToList(cnt, this.ds.getDefaultIdentity(), true, 0);
+
+ for (var i in this.ds.getAccounts()) {
+ c += 1;
+ if (i != this.ds.getDefaultIdentity())
+ this.addUserToList(cnt, i, false, c);
+ }
+
+ addEmptyItem(cnt);
+
+ }
+
+ //default IDENTITY
+
+ };
+
+ mpin.prototype.renderUserSettingsPanel = function(iD) {
+
+ var renderElem, name, self = this, name = this.getDisplayName(iD), renderElemVal;
+
+ if(document.getElementById("mp_back")) {
+ renderElem = document.getElementById("mp_back");
+ renderElemVal = 'mp_back';
+ } else {
+ renderElem = document.getElementById("mp_back_not_active");
+ renderElemVal = 'mp_back_not_active';
+ }
+
+ renderElem.innerHTML = this.readyHtml("user-settings", {name: name});
+
+ document.getElementById("mp_deluser").onclick = function(evt) {
+ self.renderDeletePanel.call(self, iD);
+ };
+ document.getElementById("mp_reactivate").onclick = function(evt) {
+ self.renderReactivatePanel.call(self, iD);
+ };
+ document.getElementById("mp_acclist_cancel").onclick = function(evt) {
+ renderElem.parentNode.removeChild(renderElem);
+
+ if(renderElemVal === "mp_back") {
+ self.renderAccountsPanel();
+ } else {
+ self.renderAccountsBeforeSetupPanel();
+ }
+ };
+ };
+
+ mpin.prototype.renderReactivatePanel = function(iD) {
+ var renderElem, name, self = this;
+ name = this.getDisplayName(iD);
+
+ if(document.getElementById("mp_back")) {
+ renderElem = document.getElementById("mp_back");
+ } else {
+ renderElem = document.getElementById("mp_back_not_active");
+ }
+
+ renderElem.innerHTML = this.readyHtml("reactivate-panel", {name: name});
+
+ document.getElementById("mp_acclist_reactivateuser").onclick = function() {
+ self.actionSetupHome.call(self, self.getDisplayName(iD));
+ };
+ document.getElementById("mp_acclist_cancel").onclick = function() {
+ self.renderUserSettingsPanel(iD);
+ };
+ };
+
+ mpin.prototype.renderDeletePanel = function(iD) {
+ var renderElem, name, self = this;
+ name = this.getDisplayName(iD);
+
+ if(document.getElementById("mp_back")) {
+ renderElem = document.getElementById("mp_back");
+ } else {
+ renderElem = document.getElementById("mp_back_not_active");
+ }
+
+ renderElem.innerHTML = this.readyHtml("delete-panel", {name: name});
+
+ document.getElementById("mp_acclist_deluser").onclick = function(evt) {
+ self.deleteIdentity(iD);
+
+ self.renderHomeMobile.call(self, evt);
+ // Render the identity list too
+
+ };
+ document.getElementById("mp_acclist_cancel").onclick = function(evt) {
+ self.renderUserSettingsPanel(iD);
+ };
+ };
+
+ mpin.prototype.renderSetupDone = function() {
+ var callbacks = {}, self = this, userId;
+
+ userId = this.getDisplayName(this.identity);
+
+ callbacks.mp_action_home = function() {
+ self.renderHomeMobile.call(self);
+ };
+ callbacks.mp_action_go = function() {
+ self.renderAccessNumber.call(self);
+ };
+
+ this.render("setup-done", callbacks, {userId: userId});
+ };
+
+ mpin.prototype.addUserToList = function(cnt, uId, isDefault, iNumber) {
+ var starClass, divClass, self = this, starButton;
+
+ if (isDefault) {
+ starClass = "mp_starButtonSelectedState";
+ divClass = "mp_contentItem one-edge-shadow default";
+ } else {
+ starClass = "mp_starButtonDefaultState";
+ divClass = "mp_contentItem one-edge-shadow";
+ }
+
+ starButton = document.createElement("div");
+ var name = this.getDisplayName(uId);
+ starButton.setAttribute("tabindex", "-1");
+ starButton.className = starClass;
+ starButton.id = "mp_accountItem_" + iNumber;
+
+ var rowElem = document.createElement("div");
+ rowElem.className = divClass;
+ rowElem.setAttribute("data-identity", uId);
+ rowElem.appendChild(starButton);
+
+ var tmplData = {name: name};
+ rowElem.innerHTML = mpin.templates['user-row']({data:tmplData, cfg: mpin.cfg});
+
+ cnt.appendChild(rowElem);
+ rowElem.addEventListener('click', mEventsHandler, false);
+
+ // document.getElementById('mp_back').remove();
+
+ function mEventsHandler(e) {
+
+ e.stopPropagation();
+ e.preventDefault();
+
+ if(document.getElementById("mp_back")) {
+ var elem = document.getElementById("mp_back");
+ } else {
+ var elem = document.getElementById("mp_back_not_active");
+ }
+
+ elem.parentNode.removeChild(elem);
+
+ removeClass(document.getElementsByClassName("mp_itemSelected")[0], "mp_itemSelected");
+ // addClass(rowElem, "mp_itemSelected");
+ self.ds.setDefaultIdentity(uId);
+ self.setIdentity(uId, true);
+ self.renderAccessNumber();
+
+ // Enable pin
+ self.addToAcc.call(self, "clear", false);
+
+ // Hide the identity list
+
+ menuBtn = document.getElementById('menuBtn');
+
+ document.getElementById('accountTopBar').style.height = "";
+ menuBtn.className = 'up';
+
+ }
+
+ // Append iNumber, don't use handlebars
+ var innerRowElemName = "mp_btIdSettings_"
+ , innerRowElem = document.getElementById(innerRowElemName)
+ , imgRowElem = hlp.img("settings.svg");
+
+ innerRowElem.setAttribute("id",innerRowElemName + iNumber);
+
+ document.getElementById(innerRowElemName + iNumber).onclick = function(ev) {
+ console.log(uId);
+ self.renderUserSettingsPanel(uId);
+ ev.stopPropagation();
+ return false;
+ };
+ };
+
+ mpin.prototype.renderIdentityNotActive = function(email) {
+ var callbacks = {}, self = this;
+ var email = email? email: self.getDisplayName(this.identity);
+
+ callbacks.mp_action_home = function(evt) {
+ self.renderHomeMobile();
+// self.renderAccountsBeforeSetup();
+ };
+
+ //Check again
+ callbacks.mpin_action_setup = function() {
+ if (self.checkBtn(this))
+ self.beforeRenderSetup.call(self, this);
+ };
+ //email
+ callbacks.mpin_action_resend = function() {
+ if (self.checkBtn(this))
+ self.actionResend.call(self, this);
+ };
+ //identities list
+ callbacks.mpin_accounts = function() {
+
+ self.renderAccountsBeforeSetup();
+
+ };
+
+ this.render("identity-not-active", callbacks, {email: email});
+ };
+
+ mpin.prototype.bindNumberButtons = function(isAcc) {
+ var self = this, btEls;
+ btEls = document.getElementsByClassName("btn");
+
+ function mEventsHandler(e) {
+
+ e.stopPropagation();
+ e.preventDefault();
+
+ var parent = document.getElementById("inputContainer");
+ var child = document.getElementById("codes");
+
+ if(e.target.hasAttribute("disabled")) {
+ return;
+ }
+
+ isAcc ? self.addToAcc(e.target.getAttribute("data-value"),"") : self.addToPin(e.target.getAttribute("data-value"),"");
+ }
+
+ for (var i = 0; i < btEls.length; i++) {
+
+ // Mobile touch events
+
+ if (window.navigator.msPointerEnabled) {
+
+ btEls[i].addEventListener('MSPointerDown', mEventsHandler, false);
+
+ }
+ else {
+
+ if(mpin.cfg.touchevents) {
+ btEls[i].addEventListener('touchstart', mEventsHandler, false);
+ } else {
+
+ btEls[i].addEventListener('click', mEventsHandler, false);
+ }
+
+ }
+
+ }
+ };
+ mpin.prototype.enableNumberButtons = function(enable) {
+
+ var els = document.getElementsByClassName("btn");
+ for (var i = 0; i < els.length; i++) {
+ var element = els[i];
+ if (enable) {
+ element.className = "btn";
+ element.disabled = false;
+ } else {
+ element.className = "btn disabled";
+ element.disabled = true;
+ }
+ }
+ };
+ //
+ mpin.prototype.addToPin = function(digit, iserror) {
+
+ var digitLen
+ , elemForErrcode = document.getElementById('codes')
+ , self = this;
+
+ this.pinpadInput || (this.pinpadInput = "");
+ this.pinpadInput += digit;
+ digitLen = this.pinpadInput.length;
+
+ if (digit === 'login') {
+
+ elemForErrcode.style.display = "block";
+ elemForErrcode.innerHTML = hlp.text("pinpad_placeholder_text");
+ this.enableNumberButtons(true);
+
+ return;
+ }
+
+ if (digit === 'pin') {
+
+ elemForErrcode.style.display = "block";
+ elemForErrcode.innerHTML = hlp.text("pinpad_placeholder_text");
+
+ this.enableNumberButtons(true);
+
+ return;
+ }
+
+ if (digitLen === 1) {
+
+ // Reset the error codes to original text
+ this.resetDisplay(hlp.text("pinpad_placeholder_text"));
+ this.enableButton(true, "clear");
+ }
+
+ // Append circles
+
+ if (digitLen <= mpin.cfg.pinSize) {
+ this.bindCircles();
+ }
+
+ if (digitLen === mpin.cfg.pinSize) {
+
+ this.enableNumberButtons(false);
+ this.enableButton(true, "go");
+ this.enableButton(true, "clear");
+ }
+
+ if (digit === 'clear') {
+
+ this.enableNumberButtons(true);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ this.pinpadInput = "";
+ this.clearCircles();
+
+ }
+
+ };
+
+ // Add to pin ac number
+
+ mpin.prototype.addToAcc = function(digit, iserror) {
+
+ var accNumLen
+ , elemForErrcode = document.getElementById('codes')
+ , accNumHolder = document.getElementById('accNumHolder')
+ , self = this;
+
+ this.accessNumber += digit;
+ accNumLen = this.accessNumber.length;
+ accNumHolder.style.display = 'block';
+ accNumHolder.innerHTML += digit;
+
+ // On first click
+
+ if (accNumLen === 1) {
+
+ // Reset the error codes
+ this.resetDisplay(hlp.text("pinpad_placeholder_text"));
+ this.enableButton(true, "clear");
+ }
+
+ if (accNumLen === this.opts.accessNumberDigits) {
+
+ // Append the number of circles
+ this.enableNumberButtons(false);
+ this.enableButton(true, "go");
+ this.enableButton(true, "clear");
+ }
+
+ if (digit === 'clear') {
+
+ // Enter ac numbeer
+
+ self.display(hlp.text("pinpad_placeholder_text2"));
+
+ //
+ elemForErrcode.style.display = "block";
+ elemForErrcode.className = "";
+
+ this.enableNumberButtons(true);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ this.accessNumber = "";
+
+
+ // Clear the ac num
+
+ if (iserror) {
+ accNumHolder.innerHTML = "";
+ this.enableNumberButtons(true);
+
+ } else {
+ this.accessNumber = "";
+ accNumHolder.innerHTML = "";
+ this.enableNumberButtons(true);
+ }
+
+ }
+
+ };
+
+ /**
+ * wrap all buttons function inside ...
+ *
+ * @param {type} enable
+ * @param {type} buttonName
+ * @returns {undefined}
+ */
+ mpin.prototype.enableButton = function(enable, buttonName) {
+
+ var buttonValue = {}, _element;
+ buttonValue.go = {id: "mpinLogin", trueClass: "btnLogin", falseClass: "btnLogin disabled"};
+ buttonValue.clear = {id: "mpinClear", trueClass: "btnClear", falseClass: "btnClear disabled"};
+ buttonValue.toggle = {id: "mp_toggleButton", trueClass: "mp_DisabledState", falseClass: ""};
+ _element = document.getElementById(buttonValue[buttonName].id);
+ if (!buttonValue[buttonName] || !_element) {
+ return;
+ }
+
+ _element.disabled = !enable;
+ _element.className = buttonValue[buttonName][enable + "Class"];
+ };
+ //showInPinPadDisplay
+ mpin.prototype.display = function(message, clear) {
+
+ var elemForErrcode = document.getElementById('codes');
+ elemForErrcode.style.display = "block";
+ elemForErrcode.className = "error";
+ elemForErrcode.innerHTML = message;
+
+ };
+
+ mpin.prototype.resetDisplay = function(message) {
+
+ var elemForErrcode = document.getElementById('codes');
+ elemForErrcode.style.display = "none";
+ elemForErrcode.innerHTML = message;
+
+ };
+
+ mpin.prototype.bindCircles = function() {
+
+ var pinElement = document.getElementById('pinpad-input');
+ var newCircle = document.createElement('div');
+ newCircle.className = "inner-circle";
+ var circleID = "mpin_circle_" + (this.pinpadInput.length - 1);
+ document.getElementById(circleID).appendChild(newCircle);
+ }
+
+ mpin.prototype.clearCircles = function() {
+
+ var pinSize = mpin.cfg.pinSize, circles = [];
+ for (var i = 0; i <= pinSize; i++) {
+ circles[i] = document.getElementById("mpin_circle_" + i);
+ if (circles[i] && circles[i].childNodes[3]) {
+ circles[i].removeChild(circles[i].childNodes[3]);
+ }
+ }
+ }
+
+ mpin.prototype.getDisplayName = function(uId) {
+ if (!uId)
+ uId = this.identity;
+ try {
+ return JSON.parse(mp_fromHex(uId)).userID;
+ } catch (err) {
+ return uId;
+ }
+ };
+
+ mpin.prototype.toggleButton = function() {
+ var self = this;
+ var accountTopBar = document.getElementById('accountTopBar')
+ var menuBtn = document.getElementById("menuBtn");
+
+ if (menuBtn && !menuBtn.classList.contains("close")) {
+
+ // this.setIdentity(this.identity, true, function() {
+ // }, function() {
+ // return false;
+ // });
+
+ accountTopBar.style.height = "100%"
+ menuBtn.className = 'close';
+
+ removeClass("mp_toggleButton", "mp_SelectedState");
+ removeClass("mp_panel", "mp_flip");
+
+ this.renderAccountsPanel();
+
+
+ } else {
+
+ if (this.ds.getIdentityToken(this.identity) == "") {
+ identity = this.getDisplayName(this.identity);
+ this.renderIdentityNotActive(identity);
+ return;
+ }
+
+ }
+
+ return false;
+ };
+
+
+ mpin.prototype.renderAccountsBeforeSetup = function() {
+ var self = this;
+ var accountTopBar = document.getElementById('identityContainer')
+
+
+ this.setIdentity(this.identity, true, function() {
+ }, function() {
+ return false;
+ });
+
+ accountTopBar.style.height = "100%"
+
+ removeClass("mp_toggleButton", "mp_SelectedState");
+ removeClass("mp_panel", "mp_flip");
+
+ this.renderAccountsBeforeSetupPanel();
+
+ return false;
+ };
+
+ mpin.prototype.actionSetupHome = function(uId) {
+
+ var _email, _deviceName, _deviceNameInput, _reqData = {}, self = this, elems = [], removeError;
+
+ _email = (uId) ? uId : document.getElementById("emailInput").value;
+
+ if (_email.length === 0 || !this.opts.emailCheckRegex.test(_email)) {
+ document.getElementById("emailInput").focus();
+
+ elems[0] = document.getElementsByClassName("inputLabel")[0];
+ elems[1] = document.getElementsByClassName("userLabel")[0];
+ elems[2] = document.getElementById("emailInput");
+
+ removeError = function (event) {
+ elems[0].className = "inputLabel";
+ elems[1].className = "userLabel";
+ elems[2].className = "";
+
+ elems[2].removeEventListener("touchstart", function () {});
+ };
+
+
+ elems[0].className += " inputLabelErr";
+ elems[1].className += " userLabelErr";
+ elems[2].className = "emailInputErr";
+
+ elems[2].removeEventListener("touchstart", function () {});
+ elems[2].addEventListener("touchstart", removeError);
+
+ return;
+ }
+
+ _reqData.URL = this.opts.registerURL;
+ _reqData.method = "PUT";
+ _reqData.data = {
+ userId: _email,
+ mobile: 1
+ };
+
+ _deviceNameInput = (document.getElementById("deviceInput")) ? document.getElementById("deviceInput").value.trim() : "";
+ //DEVICE NAME
+ if (!this.ds.getDeviceName() && _deviceNameInput === "") {
+ _deviceName = this.suggestDeviceName();
+ } else if (!this.ds.getDeviceName() && _deviceNameInput !== "") {
+ _deviceName = _deviceNameInput;
+ } else if (_deviceNameInput !== this.ds.getDeviceName()) {
+ _deviceName = _deviceNameInput;
+ } else {
+ _deviceName = false;
+ }
+
+ if (_deviceName) {
+ this.ds.setDeviceName(_deviceName);
+ }
+ if (this.opts.setDeviceName) {
+ _reqData.data.deviceName = (_deviceNameInput === "") ? this.suggestDeviceName() : _deviceNameInput;
+ }
+
+ //register identity
+ requestRPS(_reqData, function(rpsData) {
+ if (rpsData.error) {
+ self.error("Activate First");
+ return;
+ }
+ self.ds.addIdentity(rpsData.mpinId, "");
+ self.ds.setIdentityData(rpsData.mpinId, {regOTT: rpsData.regOTT});
+
+ self.ds.setDefaultIdentity(rpsData.mpinId);
+ self.identity = rpsData.mpinId;
+
+ // Check for existing userid and delete the old one
+ self.ds.deleteOldIdentity(rpsData.mpinId);
+
+ //active = true pass activate IDNETITY Screen
+ if (rpsData.active) {
+ self.beforeRenderSetup();
+ } else {
+ self.renderActivateIdentity();
+ }
+ });
+ };
+
+ mpin.prototype.requestSignature = function(email, clientSecretShare, clientSecretParams) {
+ var self = this;
+
+ requestClientSecret(self.certivoxClientSecretURL(clientSecretParams), clientSecretShare, function(clientSecret) {
+
+ self.enableNumberButtons(true);
+ self.clientSecret = clientSecret;
+
+ if (self.opts.onGetSecret) {
+ self.opts.onGetSecret();
+ }
+ }, function(message, code) {
+ self.error(message, code);
+ });
+
+ };
+
+ mpin.prototype.error = function(msg) {
+ if (this.opts.onError) {
+ this.opts.onError(msg);
+ } else {
+ console.error("Error : " + msg);
+ }
+ };
+
+ mpin.prototype.actionResend = function(btnElem) {
+ var self = this, _reqData = {}, regOTT, _email, btn;
+
+ regOTT = this.ds.getIdentityData(this.identity, "regOTT");
+ _email = this.getDisplayName(this.identity);
+
+ btn = this.mpinButton(btnElem, "setupNotReady_resend_info1");
+
+ _reqData.URL = this.opts.registerURL;
+ _reqData.URL += "/" + this.identity;
+ _reqData.method = "PUT";
+ _reqData.data = {
+ userId: _email,
+ mobile: 1,
+ regOTT: regOTT
+ };
+
+ if (this.opts.registerRequestFormatter) {
+ _reqData.postDataFormatter = this.opts.registerRequestFormatter;
+ }
+ if (this.opts.customHeaders) {
+ _reqData.customHeaders = this.opts.customHeaders;
+ }
+
+ // add identity into URL + regOTT
+ requestRPS(_reqData, function(rpsData) {
+ if (rpsData.error || rpsData.errorStatus) {
+ self.error("Resend problem");
+ return;
+ }
+
+ if (self.identity !== rpsData.mpinId) {
+ //delete OLD mpinID
+ self.ds.deleteIdentity(self.identity);
+
+ //asign new one, create & set as default
+ self.identity = rpsData.mpinId;
+ self.ds.addIdentity(self.identity, "");
+ self.ds.setDefaultIdentity(self.identity);
+ }
+
+ //should be already exist only update regOTT
+ self.ds.setIdentityData(self.identity, {regOTT: rpsData.regOTT});
+
+ // Check for existing userid and delete the old one
+ self.ds.deleteOldIdentity(rpsData.mpinId);
+
+
+
+ btn.ok("setupNotReady_resend_info2");
+ });
+ };
+
+ mpin.prototype.actionSetup = function() {
+
+ var self = this, _pin;
+ _pin = this.pinpadInput;
+ this.ds.addIdentity(this.identity, "");
+ this.display(hlp.text("verify_pin"));
+
+ extractPIN(_pin, this.clientSecret, this.identity, function(tokenHex) {
+
+ self.ds.setIdentityToken(self.identity, tokenHex);
+ self.clientSecret = "";
+ self.enableNumberButtons(false);
+ self.enableButton(false, "go");
+ self.ds.setDefaultIdentity(self.identity);
+ self.ds.deleteOldIdentity(self.identity);
+ self.display(hlp.text("setupPin_pleasewait"), false);
+
+ if (self.opts.setupDoneURL) {
+ var _reqData = {}, url = self.opts.setupDoneURL + "/" + self.identity;
+
+ _reqData.URL = url;
+ _reqData.method = "POST";
+ _reqData.data = {};
+
+
+ //get signature
+ requestRPS(_reqData, function(rpsData) {
+
+ if (rpsData.errorStatus) {
+ self.error("ooops");
+ return;
+ }
+ self.successSetup();
+ });
+ } else {
+ self.successSetup();
+ }
+ });
+ };
+ /**
+ *
+ * @returns {undefined}
+ */
+ mpin.prototype.actionLogin = function() {
+
+ var callbacks = {}
+ ,authServer, getAuth
+ , self = this
+ , pinValue = this.pinpadInput
+ , accessNumber;
+
+ //AlertMessage.clearDisplayWrap();
+ this.enableNumberButtons(false);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ this.enableButton(true, "toggle");
+
+ this.display(hlp.text("authPin_pleasewait"));
+
+ //getAuth = this.opts.useWebSocket ? getAuthToken : getAuthTokenAjax;
+ //authServer = this.opts.mpinAuthServerURL;
+
+ if (this.opts.useWebSocket) {
+ getAuth = getAuthToken;
+ authServer = this.opts.mpinAuthServerURL + "/authenticationToken";
+ } else {
+ getAuth = getAuthTokenAjax;
+ authServer = this.opts.mpinAuthServerURL;
+ }
+
+ accessNumber = this.accessNumber;
+
+ //authServer = this.opts.authenticateURL;
+ getAuth(authServer, this.opts.appID, this.identity, this.ds.getIdentityPermit(this.identity), this.ds.getIdentityToken(this.identity), this.currentDate,
+ this.opts.requestOTP, accessNumber ? accessNumber : "0", pinValue, this.opts.requestOTP ? this.opts.authenticateURL : this.opts.mobileAuthenticateURL, this.opts.authenticateRequestFormatter, this.opts.customHeaders, function(success, errorCode, errorMessage, authData) {
+
+ if (success) {
+
+ var iD = self.identity;
+ if (self.opts.requestOTP) {
+ self.renderOtp(authData);
+ return;
+ }
+
+ self.successLogin(authData, iD);
+
+ } else if (errorCode === "INVALID") {
+
+ self.addToPin.call(self, "clear");
+ self.display(hlp.text("authPin_errorInvalidPin"), true);
+
+ self.enableNumberButtons(true);
+
+ self.enableButton(false, "go");
+ self.enableButton(false, "clear");
+ self.enableButton(true, "toggle");
+
+ } else if (errorCode === "MAXATTEMPTS") {
+
+ var iD = self.identity;
+ self.deleteIdentity(iD);
+ if (self.opts.onAccountDisabled) {
+ self.opts.onAccountDisabled(iD);
+ }
+
+ callbacks.mp_action_register = function(evt) {
+ var email = self.getDisplayName(iD);
+ self.renderSetupHome.call(self, email);
+ };
+
+ callbacks.mp_action_home = function(evt) {
+ self.renderHomeMobile.call(self);
+ };
+
+ // TODO: Register again or select new identity
+
+ self.render('access-denied', callbacks, {email: self.getDisplayName(iD)});
+
+ } else if (errorCode === "INVALIDACCESSNUMBER") {
+
+ // Render the access number again
+ self.renderAccessNumber.call(self);
+ self.addToAcc.call(self, "clear", false);
+ self.display(hlp.text("authPin_errorInvalidAccessNumber"), true);
+
+ } else if (errorCode === "NOTAUTHORIZED") {
+
+ self.display(hlp.text("authPin_errorNotAuthorized"), true);
+
+ } else if (errorCode === "EXPIRED") {
+
+ self.display(hlp.text("authPin_errorExpired"), true);
+
+ } else if (errorCode === "WEBSOCKETERROR") {
+
+ console.error("WebSocket connection fail! Falling to AJAX");
+ self.opts.useWebSocket = false;
+ self.actionLogin.call(self);
+
+ } else {
+
+ console.error("Authentication error: ", errorCode, errorMessage)
+ self.display(hlp.text("authPin_errorServer"), true);
+ }
+
+ }, function() {
+ console.log(" Before HandleToken ::::");
+ });
+
+ };
+
+ mpin.prototype.setIdentity = function(newIdentity, requestPermit, onSuccess, onFail) {
+ var displayName, accId, self = this;
+
+ if ((typeof(newIdentity) === "undefined") || (!newIdentity))
+ displayName = "";
+ else {
+ this.identity = newIdentity;
+ displayName = this.getDisplayName(this.identity);
+ }
+
+ accId = document.getElementById('mpinUser');
+
+ if(accId) {
+ accId.children[0].innerText = displayName;
+ accId.setAttribute("title", displayName);
+ }
+
+ // no Identity go to setup HOME
+ if (!this.identity) {
+ this.renderSetupHome();
+ return;
+ }
+
+ if (requestPermit) {
+
+ if (this.ds.getIdentityToken(this.identity) == "") {
+ this.renderIdentityNotActive(displayName);
+ return;
+ }
+
+ this.enableNumberButtons(false);
+ this.enableButton(false, "go");
+ this.enableButton(false, "clear");
+ this.enableButton(true, "toggle");
+ this.requestPermit(newIdentity, function(timePermitHex) {
+ self.enableNumberButtons(true);
+ }, function(message, statusCode) {
+ if (statusCode === 404) {
+ self.renderIdentityNotActive(displayName);
+ onFail();
+ } else {
+ // Fatal server error!
+ self.display(hlp.text("pinpad_errorTimePermit") + " " + statusCode, true);
+ self.error("Error getting the time permit.", statusCode);
+ onFail();
+ }
+ });
+ }
+ };
+
+ mpin.prototype.successSetup = function(authData) {
+ var self = this;
+ if (this.opts.successSetupURL) {
+ window.location = this.opts.successSetupURL;
+ } else if (this.opts.onSuccessSetup) {
+ this.opts.onSuccessSetup(authData, function() {
+ self.renderSetupDone.call(self);
+ });
+ } else {
+ this.renderSetupDone();
+ }
+ };
+
+ //Get request
+ mpin.prototype.ajax = function(url, cb) {
+ var _request = new XMLHttpRequest();
+ _request.open("GET", url, true);
+ _request.send();
+
+ _request.onreadystatechange = function() {
+ if (_request.readyState === 4 && _request.status === 200)
+ {
+ cb(JSON.parse(_request.responseText));
+ } else if (_request.readyState === 4 && !navigator.onLine) {
+ cb({error: 500});
+ }
+ };
+
+ };
+
+ //Post request
+ mpin.prototype.ajaxPost = function(url, data, cb) {
+ var _request = new XMLHttpRequest();
+ _request.onreadystatechange = function() {
+ if (_request.readyState === 4 && _request.status === 200)
+ {
+ // Tempory fix
+ if (_request.responseText == '') {
+ cb(true);
+ }
+ } else if (_request.readyState === 4) {
+ cb(false);
+ }
+ };
+ _request.open("Post", url, true);
+ _request.send(JSON.stringify(data));
+ };
+
+ //new Function
+ mpin.prototype.requestPermit = function(identity, onSuccess, onFail) {
+ var self = this;
+ requestTimePermit(self.certivoxPermitsURL(), self.dtaPermitsURL(), self.opts.authenticateHeaders,
+ self.ds.getIdentityPermitCache(this.identity), this.certivoxPermitsStorageURL(),
+ function(timePermitHex, timePermitCache, currentDate) {
+ self.ds.setIdentityPermit(self.identity, timePermitHex);
+ self.ds.setIdentityPermitCache(mpin.identity, timePermitCache);
+ self.currentDate = currentDate || util.today();
+ self.ds.save();
+ self.gotPermit(timePermitHex);
+ onSuccess(timePermitHex);
+ },
+ function(message, statusCode) {
+ onFail(message, statusCode)
+ });
+
+ };
+
+ mpin.prototype.deleteIdentity = function(iID) {
+ var newDefaultAccount = "", self = this;
+
+ this.ds.deleteIdentity(iID);
+ for (var i in this.ds.getAccounts()) {
+ newDefaultAccount = i;
+ break;
+ }
+
+ if (newDefaultAccount) {
+ this.setIdentity(newDefaultAccount, true, function() {
+ }, function() {
+ return false;
+ });
+
+ this.ds.setDefaultIdentity(newDefaultAccount);
+ // Render the identity list panel
+ this.renderAccountsPanel();
+ } else {
+ this.setIdentity(newDefaultAccount, false);
+ this.ds.setDefaultIdentity("");
+ this.identity = "";
+ this.renderSetupHome();
+ }
+ return false;
+ };
+
+ //data Source with static referance
+ mpin.prototype.dataSource = function() {
+ var mpinDs = {}, self = this;
+ this.ds || (this.ds = {});
+ if (typeof(localStorage['mpin']) === "undefined") {
+ localStorage.setItem("mpin", JSON.stringify({
+ defaultIdentity: "",
+ version: "0.3",
+ accounts: {}
+ }));
+ }
+ mpinDs.mpin = JSON.parse(localStorage.getItem("mpin"));
+
+ mpinDs.addIdentity = function(uId, token, permit) {
+ if (!mpinDs.mpin.accounts[uId]) {
+ mpinDs.mpin.accounts[uId] = {"MPinPermit": "", "token": ""};
+ }
+ //this.mpin.defaultIdentity = uId;
+ mpinDs.setIdentityToken(uId, token);
+ if (permit)
+ mpinDs.setIdentityPermit(uId, permit);
+ };
+ mpinDs.setIdentityToken = function(uId, value) {
+ mpinDs.mpin.accounts[uId]["token"] = value;
+ mpinDs.save();
+ };
+ mpinDs.setIdentityPermit = function(uId, value) {
+ mpinDs.mpin.accounts[uId]["MPinPermit"] = value;
+ mpinDs.save();
+ };
+ mpinDs.getIdentityPermit = function(uId) {
+ if (!uId)
+ uId = mpinDs.getDefaultIdentity();
+ return mpinDs.mpin.accounts[uId]["MPinPermit"];
+ };
+ mpinDs.setIdentityPermitCache = function(uId, cache) {
+ if (!uId) {
+ uId = mpinDs.getDefaultIdentity();
+ }
+ mpinDs.mpin.accounts[uId]["timePermitCache"] = cache;
+ mpinDs.save();
+ };
+ mpinDs.getIdentityPermitCache = function(uId) {
+ if (!uId) {
+ uId = mpinDs.getDefaultIdentity();
+ }
+ return mpinDs.mpin.accounts[uId]["timePermitCache"] || {};
+ };
+ mpinDs.getIdentityToken = function(uId) {
+ if (!uId)
+ uId = mpinDs.getDefaultIdentity();
+ return mpinDs.mpin.accounts[uId]["token"];
+ };
+ mpinDs.getDefaultIdentity = function(uId) {
+ return mpinDs.mpin.defaultIdentity;
+ };
+ mpinDs.setDefaultIdentity = function(uId) {
+ mpinDs.mpin.defaultIdentity = uId;
+ mpinDs.save();
+ };
+ mpinDs.deleteOldIdentity = function(uId) {
+ var name = self.getDisplayName(uId);
+
+ for (var i in this.getAccounts()) {
+ if (i !== uId) {
+ var oName = self.getDisplayName(i);
+ if (oName === name) {
+ mpinDs.deleteIdentity(i);
+ }
+ }
+ }
+ };
+ mpinDs.deleteIdentity = function(uId) {
+ delete mpinDs.mpin.accounts[uId];
+ mpinDs.save();
+ };
+ mpinDs.save = function() {
+ localStorage.setItem("mpin", JSON.stringify(mpinDs.mpin));
+ };
+ mpinDs.getAccounts = function() {
+ return mpinDs.mpin.accounts;
+ };
+
+ mpinDs.setIdentityData = function(uId, values) {
+ for (var v in values) {
+ mpinDs.mpin.accounts[uId][v] = values[v];
+
+ }
+ mpinDs.save();
+ };
+
+ mpinDs.setDeviceName = function(devId) {
+ mpinDs.mpin.deviceName = devId;
+ mpinDs.save();
+ };
+
+ mpinDs.getDeviceName = function() {
+ var deviceID;
+ deviceID = mpinDs.mpin.deviceName;
+ if (!deviceID) {
+ return false;
+ }
+
+ return deviceID;
+ };
+
+ mpinDs.getIdentityData = function(uId, key) {
+ return mpinDs.mpin.accounts[uId][key];
+ };
+
+ return mpinDs;
+ };
+
+ mpin.prototype.successLogin = function(authData, iD) {
+ var callbacks = {},
+ self = this,
+ totalAccounts;
+
+ totalAccounts = self.ds.getAccounts();
+ totalAccounts = Object.keys(totalAccounts).length;
+
+ callbacks.mp_action_home = function(evt) {
+ if (totalAccounts === 0) {
+ self.renderSetupHome();
+ } else if (totalAccounts === 1) {
+ self.renderAccessNumber();
+ } else if (totalAccounts > 1) {
+ self.renderAccessNumber(true);
+ }
+ };
+
+ callbacks.mp_action_logout = function(evt) {
+ var that = this;
+ if(authData.logoutURL) {
+ self.ajaxPost( authData.logoutURL, authData.logoutData, function(res) {
+ if (res) {
+ // self.renderAccessNumber();
+ self.renderAccessNumber.call(self);
+ } else {
+ that.innerHTML = '<span class="btnLabel" id="btnLabelText" style="color: red;">Sign out was unsuccessful !</span>';
+ setTimeout(function () {
+ self.renderAccessNumber.call(self);
+ }, 2000);
+ }
+
+ });
+ } else {
+
+ // self.renderAccessNumber();
+ self.renderAccessNumber.call(self);
+ }
+
+ };
+
+ this.render("success-login", callbacks, {email: self.getDisplayName(iD)});
+
+ if(authData.logoutURL === '') {
+ var _logoutBtnText = document.getElementById('btnLabelText');
+ _logoutBtnText.innerText = hlp.text("start_over");
+ }
+ };
+
+ mpin.prototype.certivoxClientSecretURL = function(params) {
+ return this.opts.certivoxURL + "clientSecret?" + params;
+ };
+
+ mpin.prototype.certivoxPermitsURL = function() {
+ var mpin_id_bytes, hash_mpin_id_bytes = [], hash_mpin_id_hex,
+ permitsUrl, mpData = mp_fromHex(this.identity);
+
+ mpin_id_bytes = MPIN.stringtobytes(mpData);
+ hash_mpin_id_bytes = MPIN.HASH_ID(mpin_id_bytes);
+ hash_mpin_id_hex = MPIN.bytestostring(hash_mpin_id_bytes);
+
+ permitsUrl = this.opts.certivoxURL + "timePermit";
+ permitsUrl += "?app_id=" + this.opts.appID;
+ permitsUrl += "&mobile=0";
+ permitsUrl += "&hash_mpin_id=" + hash_mpin_id_hex;
+ return permitsUrl;
+ };
+
+ mpin.prototype.dtaPermitsURL = function() {
+ var mpin_idHex = this.identity;
+ return this.opts.timePermitsURL + "/" + mpin_idHex;
+ };
+
+ mpin.prototype.certivoxPermitsStorageURL = function() {
+ var that = this;
+
+ return function(date, storageId) {
+ console.log("timePermitsStorageURL Base: " + that.opts.timePermitsStorageURL)
+ if ((date) && (that.opts.timePermitsStorageURL) && (storageId)) {
+ return that.opts.timePermitsStorageURL + "/" + that.opts.appID + "/" + date + "/" + storageId;
+ } else {
+ return null;
+ }
+ }
+ };
+
+
+ mpin.prototype.gotPermit = function(timePermit) {
+ if (this.opts.onGetPermit)
+ this.opts.onGetPermit(timePermit);
+ };
+
+ mpin.prototype.checkAccessNumberValidity = function(sNum, csDigits){
+ if (!csDigits) {
+ csDigits = 1;
+ }
+
+ var n = parseInt(sNum.slice(0, sNum.length-csDigits), 10);
+ var cSum = parseInt(sNum.slice(sNum.length-csDigits, sNum.length), 10);
+
+ var p = 99991;
+ var g = 11;
+ var checkSum = ((n * g) % p) % Math.pow(10, csDigits);
+
+ return (checkSum == cSum)
+ };
+
+ // Better checksum approach
+ // checkAccessNumberValidity2 (accessNumber, Length)
+ mpin.prototype.checkAccessNumberValidity2 = function (number, len) {
+ var cSum, checksum, x, w, wid, wid_len, g = 11, sum_d = 0;
+ wid = number.toString();
+ wid = wid.substring(0, number.toString().length-1);
+ w = len + 1;
+ sum_d = 0;
+ wid_len = wid.length;
+
+ for (var i = 0 ; i < wid_len; i ++) {
+ x = parseInt(wid[i]);
+ sum_d += (x*w);
+ w -= 1;
+ }
+ checksum = (g - (sum_d%g)) % g;
+ checksum = (checksum === 10) ? 0 : checksum;
+
+ //get last one digit and compare with checksum result
+ cSum = number.substr(-1);
+ cSum = parseInt(cSum);
+ return (cSum === checksum);
+ }
+
+ function mp_fromHex(s) {
+ if (!s || s.length % 2 != 0)
+ return '';
+
+ s = s.toLowerCase();
+ var digits = '0123456789abcdef';
+ var result = '';
+ for (var i = 0; i < s.length; ) {
+ var a = digits.indexOf(s.charAt(i++));
+ var b = digits.indexOf(s.charAt(i++));
+ if (a < 0 || b < 0)
+ return '';
+ result += String.fromCharCode(a * 16 + b);
+ }
+ return result;
+ }
+ ;
+
+ // HELPERS and Language Dictionary
+
+ loader = function(url, callback) {
+ var script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = url;
+ //IE feature detect
+ if (script.readyState) {
+ script.onreadystatechange = callback;
+ } else {
+ script.onload = callback;
+ }
+ document.getElementsByTagName('head')[0].appendChild(script);
+ };
+
+ function addClass(elId, className) {
+ var el;
+ if (typeof(elId) === "string") {
+ el = document.getElementById(elId);
+ } else {
+ el = elId;
+ }
+
+ if (el.className) {
+ var cNames = el.className.split(/\s+/g);
+ if (cNames.indexOf(className) < 0)
+ el.className += " " + className;
+ } else {
+ el.className = className;
+ }
+ }
+ ;
+
+ function hasClass(elId, className) {
+ var el;
+ if (typeof(elId) == "string")
+ el = document.getElementById(elId);
+ else
+ el = elId;
+
+ var cNames = el.className.split(/\s+/g);
+ return (cNames.indexOf(className) >= 0)
+ }
+ ;
+
+ function removeClass(elId, className) {
+ var el;
+ if (typeof(elId) == "string")
+ el = document.getElementById(elId);
+ else
+ el = elId;
+
+ if ((el) && (el.className)) {
+ var cNames = el.className.split(/\s+/g);
+ cNames.splice(cNames.indexOf(className), 1);
+ el.className = cNames.join(" ");
+ }
+ }
+ ;
+
+ //private variable
+ //en
+ mpin.lang = {};
+ mpin.lang.en = {
+ "pinpad_initializing": "Initializing...",
+ "pinpad_errorTimePermit": "ERROR GETTING PERMIT:",
+ "home_alt_mobileOptions": "Mobile Options",
+ "home_button_authenticateMobile_noTrust": "Sign in with Smartphone <br> (This is a PUBLIC device which I DO NOT trust)",
+ "home_button_authenticateMobile_trust": "Sign in with Browser <br> (This is a PERSONAL device which I DO trust)",
+ "home_button_authenticateMobile_intro": "First let's establish trust to choose the best way for you to access this service:",
+ "home_button_authenticateMobile_description": "Get your Mobile Access Number to use with your M-Pin Mobile App to securely authenticate yourself to this service.",
+ "home_button_getMobile": "Get <br/>M-Pin Mobile App",
+ "home_button_getMobile_description": "Install the free M-Pin Mobile App on your Smartphone now! This will enable you to securely authenticate yourself to this service.",
+ "home_button_authenticateBrowser": "Authenticate <br/>with this Browser",
+ "home_button_authenticateBrowser_description": "Enter your M-PIN to securely authenticate yourself to this service.",
+ "home_button_setupBrowser": "Add an <br/>Identity to this Browser",
+ "home_button_setupBrowser_description": "Add your Identity to this web browser to securely authenticate yourself to this service using this machine.",
+ "mobileGet_header": "GET M-PIN MOBILE APP",
+ "mobileGet_text1": "Scan this QR code",
+ "mobileGet_text2": "or open this URL on your mobile:",
+ "mobileGet_button_back": "Back",
+ "mobileAuth_header": "AUTHENTICATE WITH YOUR M-PIN",
+ "mobileAuth_seconds": "seconds",
+ "mobileAuth_text1": "Your Access Number is:",
+ "mobileAuth_text2": "Note: Use this number in the next",
+ "mobileAuth_text3": "with your M-Pin Mobile App.",
+ "mobileAuth_text4": "Warning: Navigating away from this page will interrupt the authentication process and you will need to start again to authenticate successfully.",
+ "otp_signin_header": "Sign in with One-Time Password",
+ "otp_text1": "Your One-Time Password is:",
+ "otp_text2": "Note: The password is only valid for " + mpin.cfg.expireOtpSeconds + " seconds before it expires.", // {0} will be replaced with the max. seconds
+ "otp_seconds": "Remaining:", // {0} will be replaced with the remaining seconds
+ "otp_expired_header": "Your One-Time Password has expired.",
+ "otp_expired_button_home": "Login again to get a new OTP",
+ "setup_header": "Add an identity",
+ "setup_text1": "Email address:",
+ "setup_text2": "Your email address will be used as your identity when M-Pin authenticates you to this service.",
+ "setup_text3": "Enter your email",
+ "setup_error_unathorized": "{0} has not been registered in the system.", // {0} will be replaced with the userID
+ "setup_error_server": "Cannot process the request. Please try again later.",
+ "setup_error_signupexpired": "Your signup request has been expired. Please try again.",
+ "setup_button_setup": "Setup M-Pin",
+ "setupPin_header": "Create your M-Pin with {0} digits", // {0} will be replaced with the pin length
+ "setupPin_initializing": "Initializing...",
+ "setupPin_pleasewait": "Please wait...",
+ "setupPin_button_clear": "Clear",
+ "setupPin_button_done": "Setup Pin",
+ "setupPin_errorSetupPin": "ERROR SETTING PIN: {0}", // {0} is the request status code
+ "setupDone_header": "Congratulations!",
+ "edit_identity": "Edit Identity:",
+ "setupDone_text1": "Your M-Pin Identity:",
+ "setupDone_text2": "is set up successfully.",
+ "setupDone_text3": "",
+ "setupDone_button_go": "Sign in with this M-Pin",
+ "setupReady_header": "VERIFY YOUR IDENTITY",
+ "setupReady_text1": "We have sent you an email to",
+ "setupReady_text2": "Click the link in the email to confirm your identity and proceed",
+ "setupReady_text3": "We have just sent you an email, simply click the link to verify your identity.",
+ "setupReady_button_go": "I confirmed my email",
+ "setupReady_button_go_cont": "Setup your M-Pin now",
+ "setupReady_button_resend": "Resend confirmation email",
+ "setupReady_button_resend_cont": "Send it again",
+ "setupNotReady_header": "YOU MUST VERIFY <br/>YOUR IDENTITY",
+ "setupNotReady_text1": "Your identity",
+ "setupNotReady_text2": "has not been verified.",
+ "setupNotReady_text3": "You need to click the link in the email we sent you, and then choose <br/> 'Setup M-Pin'.",
+ "setupNotReady_check_info1": "Checking",
+ "setupNotReady_check_info2": "Identity not verified!",
+ "setupNotReady_resend_info1": "Sending email",
+ "setupNotReady_resend_info2": "Email sent!",
+ "setupNotReady_button_check": "Setup M-Pin",
+ "setupNotReady_button_resend": "Send the email again",
+ "setupNotReady_button_back": "Go to the identities list",
+ "authPin_header": "Enter your M-Pin",
+ "authPin_button_clear": "Clear",
+ "authPin_button_login": "Login",
+ "authPin_button_next": "Next",
+ "authPin_pleasewait": "Authenticating...",
+ "authPin_success": "Success!",
+ "authPin_errorInvalidPin": "Incorrect Pin!",
+ "authPin_errorInvalidAccessNumber": "Invalid access number!",
+ "authPin_errorNotAuthorized": "You are not authorized!",
+ "authPin_errorExpired": "The auth request expired!",
+ "authPin_errorServer": "Server error!",
+ "deactivated_header": "SECURITY ALERT",
+ "deactivated_text1": "has been de-activated and your M-Pin token has been revoked.",
+ "deactivated_text2": "To re-activate your identity, click on the blue button below to register again.",
+ "deactivated_button_register": "Register again",
+ "account_button_addnew": "Add a new identity to this list",
+ "account_button_delete": "Remove Identity",
+ "account_button_reactivate": "Reset PIN",
+ "account_button_backToList": "Back to identity list",
+ "account_button_cancel": "Cancel and go back",
+ "account_delete_question": "Are you sure you wish to remove this M-Pin Identity from this browser?",
+ "account_delete_button": "Yes, remove it",
+ "account_reactivate_question": "Are you sure you wish to reactivate this M-Pin Identity?",
+ "account_reactivate_button": "Yes, re-activate",
+ "noaccount_header": "No identities have been added to this browser!",
+ "noaccount_button_add": "Add a new identity",
+ "pinpad_placeholder_text": "Enter your PIN",
+ "pinpad_placeholder_setup": "Setup your PIN",
+ "pinpad_placeholder_text2": "Enter access number",
+ "logout_text1": "YOU ARE NOW LOGGED IN",
+ "logout_button": "Logout",
+ "home_button_setupMobile": "Add an identity to this browser",
+ "mobile_splash_text": "INSTALL THE M-PIN MOBILE APP",
+ "mobile_add_home_ios": "Tap the icon to 'Add to homescreen'",
+ "help_text_1": "Simply choose a memorable <b>[4 digit]</b> PIN to assign to this identity by pressing the numbers in sequence followed by the 'Setup' button to setup your PIN for this identity",
+ "help_ok_btn": "Ok, Got it",
+ "help_more_btn": "I'm not sure, tell me more",
+ "logout_btn": "Sign out",
+ "success_header": "Success",
+ "success_text": "You are now signed in as:",
+ "accessdenied_header": "Access Denied",
+ "accessdenied_text": "Your M-Pin identity",
+ "accessdenied_text_cont": "has been removed from this device.",
+ "accessdenied_btn": "Register again",
+ "setup_btn_text": "Setup",
+ "setup_device_label": "Device name:",
+ "verify_pin": "Verifying PIN...",
+ "sign_in": "Sign In",
+ "clear": "Clear",
+ "setup": "Setup",
+ "start_over": "Start Over",
+ "embedded_header": "To function properly, M-Pin should be opened in Safari. To open it in Safari, do one of the following:",
+ "embedded_p1": "1. If your QR Code Reader provides the capability to open the page in Safari, please use this option to do so.",
+ "embedded_p2": "2. Copy the URL from the address bar, open Safari, Paste the URL in its address bar and proceed according the on-screen instructions.",
+ };
+ // image should have config properties
+ hlp.img = function(imgSrc) {
+ return IMAGES_PATH + imgSrc;
+ };
+ // translate
+ hlp.text = function(langKey) {
+ return mpin.lang[hlp.language][langKey];
+ };
+
+ var setStringOptions = function() {
+ if (typeof(String.prototype.trim) === "undefined")
+ {
+ String.prototype.mpin_trim = function() {
+ return String(this).replace(/^\s+|\s+$/g, '');
+ };
+ } else {
+ String.prototype.mpin_trim = String.prototype.trim;
+ }
+
+ String.prototype.mpin_endsWith = function(substr) {
+ return this.length >= substr.length && this.substr(this.length - substr.length) == substr;
+ }
+
+ String.prototype.mpin_startsWith = function (substr) {
+ return this.indexOf(substr) == 0;
+ }
+
+ if (!String.prototype.mpin_format) {
+ String.prototype.mpin_format = function() {
+ var args = arguments;
+ return this.replace(/{(\d+)}/g, function(match, number) {
+ return typeof args[number] != 'undefined'
+ ? args[number]
+ : match
+ ;
+ });
+ };
+ }
+ };
+})();
diff --git a/mobile/mpin.appcache b/mobile/mpin.appcache
new file mode 100644
index 0000000..e5a46ad
--- /dev/null
+++ b/mobile/mpin.appcache
@@ -0,0 +1,20 @@
+CACHE MANIFEST
+# v0.1 Jordan - Apr 11 2014
+# Timestamp @@timestamp
+# Explicitly cached 'master entries'.
+
+CACHE:
+css/main.css
+
+js/handlebars.runtime.min.js
+js/mpin-all.min.js
+js/main.js
+
+#Cache images
+
+images/img/m-pin-header-logo.svg
+images/img/home.svg
+images/img/phone.svg
+
+NETWORK:
+*
\ No newline at end of file
diff --git a/mobile/package.json b/mobile/package.json
new file mode 100644
index 0000000..27675a8
--- /dev/null
+++ b/mobile/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "mpinmobile",
+ "type": "mobile",
+ "version": "0.0.1",
+ "description": "M-PIN Mobile app in pure JavaScript",
+ "main": "Gruntfile.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/miracl/milagro-mfa-js-client.git"
+ },
+ "license": "Apache License",
+ "devDependencies": {
+ "grunt": "~0.4.1",
+ "grunt-bg-shell": "~2.3.1",
+ "grunt-contrib-concat": "*",
+ "grunt-contrib-cssmin": "^0.12.3",
+ "grunt-contrib-sass": "^0.8.1",
+ "grunt-contrib-uglify": "*",
+ "grunt-contrib-watch": "~0.4.4",
+ "grunt-replace": "~0.7.7",
+ "grunt-sass": "^1.0.0",
+ "handlebars": "3.0.1",
+ "node-sass": "^3.2.0"
+ }
+}
diff --git a/mobile/sass/_reset.scss b/mobile/sass/_reset.scss
new file mode 100644
index 0000000..7eb3f3a
--- /dev/null
+++ b/mobile/sass/_reset.scss
@@ -0,0 +1,35 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
+
+// Put everything in border-box
+*, *:after, *:before {
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+box-sizing: border-box;
+-webkit-tap-highlight-color: rgba(0,0,0,0);
+-webkit-touch-callout: none;
+-webkit-user-drag: none;
+-webkit-user-select: none;
+-ms-user-select: none;
+-ms-touch-action: none;
+-moz-user-select: -moz-none;
+}
diff --git a/mobile/sass/help.scss b/mobile/sass/help.scss
new file mode 100644
index 0000000..643a346
--- /dev/null
+++ b/mobile/sass/help.scss
@@ -0,0 +1,198 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+help {
+ display: none;
+ opacity: 0;
+ color: black;
+ -webkit-transition: all 1s ease-out;
+ position: absolute;
+ background-color: rgba(255,255,255,0.8);
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 100001;
+
+ #helpContainer {
+ display: none;
+ background-color: white;
+ width: 70%;
+ height: 70%;
+ position: relative;
+ text-align: center;
+ border: 3px solid darkgrey;
+ margin: 0 auto;
+ top: 60px;
+ @include border-radius(5px);
+ padding-top: 10px;
+ padding: 20px;
+
+ &:before {
+ content: '';
+ background-image: url('../resources/templates/gradient/img/info.svg');
+ width: 32px;
+ height: 31px;
+ display: block;
+ position: absolute;
+ top: -11px;
+ left: -11px;
+ background-color: white;
+
+ background-repeat: no-repeat;
+ background-position: left;
+ background-size: auto 100%;
+ }
+ }
+
+ // Option choose styling
+
+}
+
+info {
+
+ display: block;
+ color: black;
+ cursor: pointer;
+ text-align: center;
+ position: absolute;
+ bottom: 30px;
+ left: 20px;
+
+ i {
+ background-image: url('../resources/templates/gradient/img/info.svg');
+ display: block;
+ width: 21px;
+ height: 20px;
+ display: inline-block;
+ }
+
+}
+
+info-inline {
+
+ display: inline-block;
+ color: black;
+ cursor: pointer;
+ text-align: center;
+ bottom: 30px;
+ left: 20px;
+ position: relative;
+ top: 4px;
+
+ i {
+ background-image: url('../resources/templates/gradient/img/info.svg');
+ display: block;
+ width: 21px;
+ height: 20px;
+ display: inline-block;
+ }
+
+}
+
+// Helphub
+
+helpHub {
+
+ display: none;
+ color: black;
+ position: absolute;
+ background-color: white;
+ top: 0px;
+ right: 0;
+ left: 0;
+ bottom: 0px;
+ width: auto;
+ height: auto;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ min-height: 0;
+ min-width: 0;
+ z-index: 100001;
+ text-align: center;
+
+ // Option choose styling
+
+ #list {
+
+ height: 100%;
+ width: 100%;
+
+ h1 {
+ color: black;
+ font-weight: bold;
+ }
+
+ ul {
+
+ li {
+ border: 1px solid #E9E9E9;
+ padding: 20px;
+ display: block;
+
+ a {
+ text-decoration: none;
+ color: black;
+ }
+ }
+ }
+
+ button {
+ border: 1px solid transparent !important;
+ border-radius: 0.3em 0.3em 0.3em 0.3em;
+ background: #3A7CC2;
+ cursor: pointer;
+ color: #FFFFFF;
+ font-family: 'Helvetica', serif;
+ font-weight: bold;
+ height: auto;
+ min-height: 1.8em;
+ margin-top: 10px;
+ padding: 13px 10px 10px;
+ display: block;
+ align-items: center;
+ font-size: 17px;
+ width: auto;
+ height: auto;
+ margin: 0 auto;
+ margin-top: 20px;
+ }
+
+ }
+
+ // Helper classes
+
+ red {
+ color: red;
+ }
+
+}
diff --git a/mobile/sass/home.scss b/mobile/sass/home.scss
new file mode 100644
index 0000000..1830b09
--- /dev/null
+++ b/mobile/sass/home.scss
@@ -0,0 +1,148 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+#header {
+ @include top-bar();
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #mpinLogo {
+ @include logo();
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+ }
+
+ #menuIcon {
+ @include menu-icon();
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ float: right;
+ margin: 10px 10px 0 10px;
+ }
+}
+
+#homeIcon {
+
+ margin-top: 10px;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: white;
+ padding: 10% 0px 20px;
+
+ #mobileIcon {
+
+ @include mobile-icon();
+ }
+
+}
+
+#buttonsContainer {
+
+ margin-top: 3vh;
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+
+
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical !important;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ -webkit-box-align: center;
+ -moz-box-align:center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ width: 100%;
+
+ .mpinBtn {
+ width: 90%;
+ }
+
+ .mpinBtn-green {
+ width: 90%;
+ }
+
+}
diff --git a/mobile/sass/main.scss b/mobile/sass/main.scss
new file mode 100644
index 0000000..e6d7b66
--- /dev/null
+++ b/mobile/sass/main.scss
@@ -0,0 +1,896 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+// Import CSS3 reset
+
+@import 'reset';
+
+// Import template
+
+@import 'templates/_template';
+
+// General mixins
+
+@mixin display-box-flex() {
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -webkit-flexbox;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+@mixin flexbox() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+@mixin border-radius($value) {
+ border-radius: $value;
+ -webkit-border-radius: $value;
+ -moz-border-radius: $value;
+ -o-border-radius: $value;
+ -ms-border-radius: $value;
+}
+
+@mixin box-flex-value($value) {
+ -moz-box-flex:$value; /* Firefox */
+ -webkit-box-flex:$value; /* Safari and Chrome */
+ -ms-flex:$value; /* Internet Explorer 10 */
+ box-flex:$value;
+}
+
+html, body {
+ height: 100%;
+ width: 100%;
+ @include bg-color();
+ // background-color:
+ whitesmoke: !important;
+ margin: 0;
+}
+
+:focus {
+ outline: 0;
+}
+
+body {
+
+
+ // Set main font
+
+ font-size: 104%;
+
+ @include font-family();
+
+ // Hide the overflow
+
+ overflow: hidden;
+
+ // Set default text size of the H1 tag
+
+ h1 {
+ font-size: 20px;
+ color: darkgrey;
+ }
+
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -ms-text-size-adjust: 100%; /* 2 */
+
+ position: relative;
+
+}
+
+h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
+
+#mpinContainer {
+
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ // Import the pinpad styles
+
+
+ #mpinHolder {
+
+ // -webkit-box-align: stretch;
+ // -ms-flex-align: stretch;
+ // align-items: stretch;
+
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ width: 100;
+ z-index: 0;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ #mpinMaster {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+
+ -moz-box-pack:stretch;
+ -moz-box-align:stretch;
+
+ -webkit-box-orient: vertical !important;
+ -ms-flex-direction: column !important;
+ -moz-box-orient: vertical !important;
+ flex-direction: column !important;
+
+ display: -moz-box; /* Firefox */
+ display: -webkit-box; /* Safari and Chrome */
+ display: -ms-flexbox; /* Internet Explorer 10 */
+
+ display: flex;
+ // // display: -webkit-box;
+ // // display: -ms-flexbox;
+
+ // padding: 10px 10px 0 10px;
+
+ // Import the pinpad SASS
+ @import 'pinpad';
+
+ // Import the home view
+
+ @import 'home';
+
+ }
+ }
+
+ #topNav {
+
+ padding: 0px 10px 0px 10px !important;
+
+ @include header-bar();
+
+ -webkit-box-orient: horizontal !important;
+ -moz-box-orient: horizontal !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -moz-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #mp_action_home {
+ display: -moz-box; /* Firefox */
+ display: -webkit-box; /* Safari and Chrome */
+ display: -ms-flexbox; /* Internet Explorer 10 */
+ @include home-icon();
+ position: relative;
+ }
+
+ #logo {
+ @include custom-logo();
+ display: -moz-box; /* Firefox */
+ display: -webkit-box; /* Safari and Chrome */
+ display: -ms-flexbox; /* Internet Explorer 10 */
+ position: relative;
+ }
+
+ }
+
+ #accountTopBar {
+
+ @include account-top-bar();
+
+ overflow: hidden;
+
+ position: relative;
+ width: 100%;
+ z-index: 10000;
+ height: 39px;
+ position: absolute;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #mpinUser {
+
+ @include box-flex-value(1.0);
+ @include mpin-user();
+
+ position: absolute;
+ top: 10px;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ overflow: hidden;
+
+ p {
+ text-align: center;
+ }
+ }
+
+ #menuBtn {
+
+ z-index: 10000;
+ position: absolute;
+ right: 0;
+ display: inline-block;
+ overflow: hidden;
+ border: none;
+ border-radius: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ -o-border-radius: 0;
+ -ms-border-radius: 0;
+ min-height: 1.8em;
+ padding: .3em .6em;
+ top: 10px;
+
+ @include mpin-menu();
+
+ &.close {
+ bottom: 0;
+ @include mpin-menu-close();
+
+ }
+
+ &.up {
+ bottom: 0;
+ }
+ }
+
+ .mp_customScrollBox {
+ max-height: 288px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ }
+
+ }
+
+ #addIdentity {
+
+ @include top-heading();
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ text-align: center;
+
+ display: flex !important;
+ display: -webkit-box !important;
+ display: -ms-flexbox !important;
+
+ .identityHeader {
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -ms-flex-pack: center;
+
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ min-height: 0px;
+
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ #identityContainer {
+
+ @include identity-container();
+
+
+ -webkit-box-flex: 10;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -moz-box;
+ display: flex;
+
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical !important;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+
+ min-height: 0px;
+
+ width: 100%;
+
+ position: relative;
+
+ .headerText {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .inputContainer {
+
+ min-height: 0 !important;
+
+ position: relative;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ // Align items center
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ background-color: transparent;
+ width: 100%;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ .identityElHolder {
+
+ background-color: transparent;
+ margin-bottom: 2vh;
+ width: 90%;
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+
+ .identityText {
+
+ @include input-heading();
+
+ }
+
+ .identityInput {
+
+ .inputLabel {
+ color: #444;
+ font-size: 14pt;
+ margin-bottom: 14px;
+ display: block;
+ margin-top: 14px;
+ }
+
+ .inputLabelErr {
+ color: red;
+ }
+
+ .inputGroup {
+
+ width: 100%;
+ position: relative;
+ min-width: 3.7em;
+
+ width: 100%;
+ display: inline-table;
+ vertical-align: middle;
+ position: relative;
+ border-collapse: separate;
+ display: table;
+ box-sizing: border-box;
+
+ .userLabel, .deviceLabel {
+ width: auto;
+
+ white-space: nowrap;
+ vertical-align: middle;
+
+ display: table-cell;
+
+ background-color: rgba(54, 66, 74, 0.1);
+ border: 1px solid #36424a;
+ border-radius: 4px;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right: 0;
+ }
+
+ .userLabelErr {
+ border-top-color: red;
+ border-left-color: red;
+ border-bottom-color: red;
+ }
+
+ .userLabel {
+ @include user-label();
+ }
+
+ .deviceLabel {
+ @include device-label();
+ }
+
+ #emailInput {
+
+ @include email-input();
+
+ -webkit-user-select: text;
+ -webkit-appearance: none;
+ -webkit-appearance: none;
+ text-align: left;
+
+ &:focus, &:hover {
+
+ }
+
+ }
+
+ .emailInputErr {
+ border-top-color: red !important;
+ border-right-color: red !important;
+ border-bottom-color: red !important;
+ }
+
+ #deviceInput {
+
+ @include device-input();
+
+ -webkit-user-select: text;
+ -webkit-appearance: none;
+ -webkit-appearance: none;
+ text-align: left;
+
+ }
+
+ }
+ }
+
+ }
+
+ }
+
+ .identityMainText {
+
+ margin-top: 20px;
+
+ @include central-text();
+
+ display: block;
+
+ .congrats {
+ font-size: 5vh;
+ color: black;
+ padding: 0px 1vh;
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+
+ .infoSmall {
+ font-size: 4vh;
+ color: black;
+ padding: 0px 0vh;
+ padding-left: 2vh;
+ padding-right: 2vh;
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ text-align: center;
+
+ > P {
+
+ padding-bottom: 3vh;
+
+ &:first-child {
+ padding-top: 3vh;
+ }
+
+ font-size: 3vh;
+ }
+ }
+
+ .identityBodyText {
+
+ @include body-text();
+ display: block;
+ }
+
+ .email {
+ color: #3c9dcb;
+ padding: 10px 5px 20px 5px;
+ display: block;
+ }
+ }
+ }
+
+ #bottomBtnHolder {
+
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+
+ // Align items center
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+
+ @include bottom-holder();
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ /* -webkit-box-flex: 1; */
+ -ms-flex: 1 0 auto;
+ /* flex: 1 0 auto; */
+ /* -webkit-box-orient: vertical; */
+ -ms-flex-direction: column;
+ /* flex-direction: column; */
+ /* min-height: 0px; */
+
+ width: 100%;
+
+ .mpinBtn {
+ width: 90%;
+ }
+ }
+
+ #mpinFooter {
+
+ padding: 0px 10px 0px 10px !important;
+
+ @include footer();
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ flex-direction: row !important;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ #poweredBy {
+ display: block;
+ @include powered-by();
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ width: 100%;
+ }
+
+ #mpinLogo {
+ @include mpin-logo();
+ display: block;
+ width: 100%;
+
+ #openHelpHub {
+ display: block;
+ height: 100%;
+ width: 100%;
+ text-decoration: none;
+ }
+ }
+ }
+
+ // General button styling
+
+ .mpinBtn {
+ @include mpin-button();
+
+ // Set as display flex
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ font-size: 17px;
+ margin-bottom: 3%;
+
+ width: 100%;
+ height: auto;
+
+ .iconArrow {
+ @include arrow-icon();
+ display: block;
+
+ position: relative;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .btnLabel {
+ @include btn-text-label();
+
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ white-space: nowrap;
+ text-align: center;
+ display: block;
+ overflow: hidden;
+ }
+ }
+
+}
+
+// Activate Identity Screen
+
+#mp_accountListView {
+
+ @include account-list();
+
+ &.notActive {
+ background: #eeeeee;
+ margin-top: 20px;
+ }
+
+ .default {
+
+ @include settings-item();
+
+ .editImg {
+ @include settings-img-active();
+ }
+ }
+
+ .mp_titleItem {
+ position: relative;
+ top: 17px;
+ text-align: left;
+ width: 90%;
+ padding-left: 10px;
+ font-size: 14px;
+ line-height: 6px;
+ }
+
+ .mp_buttonItem {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ z-index: 9999;
+ cursor: pointer;
+ width: 24px;
+ height: 100%;
+ right: 0;
+
+ .editImg {
+ @include settings-img();
+ }
+
+
+ img {
+ background-color: white;
+ border-radius: 4px;
+ width: 40px;
+ }
+ }
+}
+
+.mp_contentItem {
+ position: relative;
+ min-height: 40px;
+ border-bottom: 1px solid #eeeeee;
+}
+
+#mp_back {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ top: 50px;
+ left: 0;
+ right: 0;
+ z-index: 999;
+
+ -webkit-transition: all .05 ease-in-out;
+ -moz-transition: all .05 ease-in-out;
+ -o-transition: all .05 ease-in-out;
+ transition: all .05 ease-in-out;
+}
+
+#mp_back_not_active {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ background-color: #eee;
+
+ -webkit-transition: all .05 ease-in-out;
+ -moz-transition: all .05 ease-in-out;
+ -o-transition: all .05 ease-in-out;
+ transition: all .05 ease-in-out;
+}
+
+.circle {
+ display: inline-block;
+
+ @include circle-main();
+
+ .outer-circle {
+ @include outer-circle();
+ }
+
+ .inner-circle {
+ @include inner-circle();
+ }
+
+ .inner-circle-ac {
+ margin: 7px;
+ width: 18px;
+ height: 18px;
+ font-size: 19px;
+ color: black;
+ text-align: center;
+ font-family: Arial;
+
+ position: absolute;
+ z-index: 1000;
+
+ }
+}
+
+#rotateLock {
+ display: none;
+}
+
+.noteText {
+ text-align: center;
+ margin-top: 40px;
+}
+
+#otpContainer {
+
+ font-size: 0.87em;
+ padding: 14px 0;
+ border-radius: 0.3em;
+ border: 1px solid #5d6078;
+ text-align: center;
+ width: 80%;
+ margin: 0 auto;
+ position: relative;
+
+ h2 {
+ color: #444;
+ font-size: 18px;
+ line-height: 32px;
+ }
+
+ #mpinOTPNumber {
+ font-size: 24px;
+ letter-spacing: .4em;
+ font-weight: bold;
+ line-height: 32px;
+ margin-bottom: 10px;
+ color: #5d6078;
+ }
+
+ #mpin_seconds {
+ color: #f00;
+ line-height: 32px;
+ }
+
+ .mp_alertTitle {
+
+ }
+
+ .mp_accountField {
+
+ }
+
+}
+
+.mpinTimerBox {
+ text-align: center;
+ margin: 0 auto;
+ position: relative;
+ margin-top: 15px;
+
+ #mpin_seconds {
+ position: absolute;
+ top: 11px;
+ left: 11px;
+ }
+}
+
+// Import mediaqueries
+@import 'mediaqueries';
+@import 'help';
diff --git a/mobile/sass/mediaqueries.scss b/mobile/sass/mediaqueries.scss
new file mode 100644
index 0000000..1a173c1
--- /dev/null
+++ b/mobile/sass/mediaqueries.scss
@@ -0,0 +1,54 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+@media only screen and (max-width: 480px) and (min-width: 320px)
+{
+ body {
+ min-height: 400px;
+ }
+
+}
+
+/*@media screen and (min-aspect-ratio: 13/9) {*/
+@media screen and (min-aspect-ratio: 14/9) {
+
+ #rotateLock {
+ display: table;
+ vertical-align: middle;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top:0;
+ left: 0;
+ background: black;
+ z-index: 9999;
+
+ h1 {
+ color: white;
+ }
+
+ img {
+ width: 200px;
+ margin: 0 auto;
+ text-align: center;
+ }
+ }
+
+}
diff --git a/mobile/sass/pinpad.scss b/mobile/sass/pinpad.scss
new file mode 100644
index 0000000..300bc6b
--- /dev/null
+++ b/mobile/sass/pinpad.scss
@@ -0,0 +1,252 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+// Input field
+
+#inputContainer {
+
+ display: flex;
+ display: -webkit-box;
+ display: -ms-flexbox;
+
+ margin: 0 auto;
+ margin-top: 36px;
+
+ width:100%;
+ height: 50px;
+
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+
+ text-align: center;
+
+ position: relative;
+
+ @include display-box-flex();
+
+ #pinpad-input {
+ @include pin-screen();
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ text-align: center;
+ background-clip: padding-box;
+ }
+
+ .blue-bg {
+ background: #006b9e !important;
+ }
+
+ #codes {
+
+ text-align: center;
+ color: rgba(54,66,74,0.6);
+ font-size: 26px;
+ width: 100%;
+ height: 100%;
+
+ background-color: white;
+ z-index: 9999;
+
+ position: absolute;
+ top: 0;
+ height: inherit;
+ padding: 0;
+ padding-top: 14px;
+
+ &.error {
+ color: #e64a19;
+ }
+ }
+}
+
+#circlesHolder {
+ display: block;
+
+ @include circles-holder();
+
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ -moz-box-align: stretch;
+ align-items: stretch;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ -moz-box-orient: horizontal !important;
+ flex-direction: row !important;
+}
+
+#accNumHolder {
+
+ @include access-number();
+}
+
+#pinsHolder {
+
+ width: auto;
+ height: auto;
+ position: relative;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-orient: vertical !important;
+ -ms-flex-direction: column !important;
+ flex-direction: column !important;
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
+ min-height: 0;
+ min-width: 0;
+
+ @include pinpad();
+
+ &.access-number {
+ @include pinpad-accessnumber();
+
+ button {
+ color: white !important;
+ }
+
+ }
+
+ // Pinbat buttons
+
+ .pre-row {
+ position: relative;
+
+ @include box-flex-value(1.0);
+ @include display-box-flex();
+
+ height: 25%;
+
+ .row {
+
+ width: 100%;
+ height: 100%;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ -moz-box-pack: start;
+
+ justify-content: flex-start;
+
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ -moz-box-align: stretch;
+ align-items: stretch;
+
+ -webkit-box-orient: horizontal !important;
+ -ms-flex-direction: row !important;
+ -moz-box-orient: horizontal !important;
+ flex-direction: row !important;
+
+ @include display-box-flex();
+
+ #mpinClear, #mpinLogin {
+ font-size: 16px !important;
+ padding-left: 0% !important;
+ }
+
+
+ .btn, .btnClear, .btnLogin{
+
+ // width: 0 !important;
+ // min-width: 0 !important;
+
+ width: 100%;
+ height: 100%;
+
+ -webkit-box-flex: 1;
+
+ // Include button styles
+
+ @include pin-btn-style();
+
+ // Set general styling
+
+ cursor: pointer;
+
+ @include display-box-flex();
+
+ flex: 1 100%;
+
+ @include box-flex-value(1.0);
+
+ right: 0;
+ bottom: 0;
+ left: 0;
+ top:0;
+
+ position: relative;
+
+ line-height: 100%;
+ height: 100% !important;
+ line-height: 100%;
+ min-height: 1.8em;
+
+ text-transform: uppercase;
+ text-align: center;
+
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ -moz-box-align: center;
+ align-items: center;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
+ display: block;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+
+ -webkit-tap-highlight-color: whitesmoke;
+
+ &.disabled {
+ opacity: 0.3;
+ }
+
+ }
+
+ }
+
+ }
+
+}
diff --git a/mobile/settings.json_build b/mobile/settings.json_build
new file mode 100644
index 0000000..17d930e
--- /dev/null
+++ b/mobile/settings.json_build
@@ -0,0 +1,6 @@
+{
+ "clientSettingsURL": "/rps/clientSettings",
+ "templateName": "milagro",
+ "emailRegex": "/^(([^<>()[\\]\\.,;:\\s@\"]+(\\.[^<>()[\\]\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/"
+}
+
diff --git a/mobile/themes/milagro/images/icons/Icon-60@3x.png b/mobile/themes/milagro/images/icons/Icon-60@3x.png
new file mode 100644
index 0000000..a185cde
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon-60@3x.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon-76.png b/mobile/themes/milagro/images/icons/Icon-76.png
new file mode 100644
index 0000000..4132aff
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon-76.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon-76@2x.png b/mobile/themes/milagro/images/icons/Icon-76@2x.png
new file mode 100644
index 0000000..fe2f23f
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon-76@2x.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon-Small.png b/mobile/themes/milagro/images/icons/Icon-Small.png
new file mode 100644
index 0000000..e8ab062
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon-Small.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon-Small@2x.png b/mobile/themes/milagro/images/icons/Icon-Small@2x.png
new file mode 100644
index 0000000..705a499
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon-Small@2x.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon-Small@3x.png b/mobile/themes/milagro/images/icons/Icon-Small@3x.png
new file mode 100644
index 0000000..abca29e
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon-Small@3x.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon.png b/mobile/themes/milagro/images/icons/Icon.png
new file mode 100644
index 0000000..faa85fb
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon@2x.png b/mobile/themes/milagro/images/icons/Icon@2x.png
new file mode 100644
index 0000000..433a36a
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon@2x.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon~ipad.png b/mobile/themes/milagro/images/icons/Icon~ipad.png
new file mode 100644
index 0000000..e1ef8f2
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon~ipad.png
Binary files differ
diff --git a/mobile/themes/milagro/images/icons/Icon~ipad@2x.png b/mobile/themes/milagro/images/icons/Icon~ipad@2x.png
new file mode 100644
index 0000000..c8012b5
--- /dev/null
+++ b/mobile/themes/milagro/images/icons/Icon~ipad@2x.png
Binary files differ
diff --git a/mobile/themes/milagro/images/img/PinPad_button_active.png b/mobile/themes/milagro/images/img/PinPad_button_active.png
new file mode 100644
index 0000000..afc3388
--- /dev/null
+++ b/mobile/themes/milagro/images/img/PinPad_button_active.png
Binary files differ
diff --git a/mobile/themes/milagro/images/img/PinPad_button_active.svg b/mobile/themes/milagro/images/img/PinPad_button_active.svg
new file mode 100644
index 0000000..da0f9d5
--- /dev/null
+++ b/mobile/themes/milagro/images/img/PinPad_button_active.svg
@@ -0,0 +1,241 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="28.01px"
+ height="28.01px" viewBox="0 0 28.01 28.01" enable-background="new 0 0 28.01 28.01" xml:space="preserve">
+<g id="Layer_1">
+</g>
+<g id="Layer_2">
+ <g>
+ <g>
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.0737" y1="-0.0337" x2="14.0737" y2="28.1147">
+ <stop offset="0" style="stop-color:#B0B0B0"/>
+ <stop offset="1" style="stop-color:#171717"/>
+ </linearGradient>
+ <path fill="url(#SVGID_1_)" d="M28.148,26.453c0,0.918-0.744,1.661-1.662,1.661H1.663C0.744,28.114,0,27.371,0,26.453V1.628
+ C0,0.71,0.744-0.034,1.663-0.034h24.823c0.918,0,1.662,0.744,1.662,1.662V26.453z"/>
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="14.0737" y1="-0.0337" x2="14.0737" y2="28.1147">
+ <stop offset="0" style="stop-color:#FFFFFF"/>
+ <stop offset="1" style="stop-color:#D1D3D4"/>
+ </linearGradient>
+ <path fill="url(#SVGID_2_)" d="M25.937,2.178v23.725H2.211V2.178H25.937 M26.486-0.034H1.663C0.744-0.034,0,0.71,0,1.628v24.825
+ c0,0.918,0.744,1.661,1.663,1.661h24.823c0.918,0,1.662-0.743,1.662-1.661V1.628C28.148,0.71,27.404-0.034,26.486-0.034
+ L26.486-0.034z"/>
+ </g>
+ <g>
+ <defs>
+ <path id="SVGID_3_" d="M25.456,23.92c0,0.83-0.673,1.502-1.503,1.502H1.504C0.673,25.422,0,24.75,0,23.92V1.469
+ c0-0.83,0.673-1.503,1.504-1.503h22.449c0.83,0,1.503,0.673,1.503,1.503V23.92z"/>
+ </defs>
+ <clipPath id="SVGID_4_">
+ <use xlink:href="#SVGID_3_" overflow="visible"/>
+ </clipPath>
+ <g opacity="0.1" clip-path="url(#SVGID_4_)">
+
+ <image overflow="visible" width="466" height="477" xlink:href="data:image/png;base64,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" transform="matrix(0.24 0 0 0.24 -42.9062 -64.6206)">
+ </image>
+ </g>
+ </g>
+ <path fill="#808285" d="M26.841,25.23c0,0.83-0.673,1.502-1.503,1.502H2.889c-0.831,0-1.504-0.672-1.504-1.502V2.78
+ c0-0.83,0.673-1.503,1.504-1.503h22.449c0.83,0,1.503,0.673,1.503,1.503V25.23z"/>
+ <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="14.1128" y1="1.2769" x2="14.1128" y2="26.7329">
+ <stop offset="0" style="stop-color:#B0B0B0"/>
+ <stop offset="1" style="stop-color:#030303"/>
+ </linearGradient>
+ <path opacity="0.87" fill="url(#SVGID_5_)" stroke="#FFFFFF" stroke-width="0.5636" stroke-miterlimit="10" d="M26.841,25.23
+ c0,0.83-0.673,1.502-1.503,1.502H2.889c-0.831,0-1.504-0.672-1.504-1.502V2.78c0-0.83,0.673-1.503,1.504-1.503h22.449
+ c0.83,0,1.503,0.673,1.503,1.503V25.23z"/>
+ <g>
+ <g>
+ <rect x="6.363" y="7.807" fill="#808285" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.367" y="7.807" fill="#808285" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.363" y="11.537" fill="#808285" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.367" y="11.537" fill="#808285" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.363" y="15.269" fill="#808285" width="1.562" height="1.561"/>
+ <g>
+ <rect x="10.367" y="15.269" fill="#808285" width="11.576" height="1.561"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.363" y="18.997" fill="#808285" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.367" y="18.997" fill="#808285" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <rect x="6.065" y="7.45" fill="#FFFFFF" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.069" y="7.45" fill="#FFFFFF" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.065" y="11.18" fill="#FFFFFF" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.069" y="11.18" fill="#FFFFFF" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.065" y="14.911" fill="#FFFFFF" width="1.562" height="1.561"/>
+ <g>
+ <rect x="10.069" y="14.911" fill="#FFFFFF" width="11.576" height="1.561"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.065" y="18.642" fill="#FFFFFF" width="1.562" height="1.561"/>
+ <g>
+ <rect x="10.069" y="18.642" fill="#FFFFFF" width="11.576" height="1.561"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/arrow-icon-purple.svg b/mobile/themes/milagro/images/img/arrow-icon-purple.svg
new file mode 100644
index 0000000..4c0ea1b
--- /dev/null
+++ b/mobile/themes/milagro/images/img/arrow-icon-purple.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 1500 1500" enable-background="new 0 0 1500 1500" xml:space="preserve">
+<path fill="#36424a" d="M750,328.1l750,468.8v375L750,703.1L0,1171.9v-375L750,328.1z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/arrow.png b/mobile/themes/milagro/images/img/arrow.png
new file mode 100644
index 0000000..93fdcc3
--- /dev/null
+++ b/mobile/themes/milagro/images/img/arrow.png
Binary files differ
diff --git a/mobile/themes/milagro/images/img/arrow.svg b/mobile/themes/milagro/images/img/arrow.svg
new file mode 100644
index 0000000..e3b2828
--- /dev/null
+++ b/mobile/themes/milagro/images/img/arrow.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="29px"
+ height="29px" viewBox="0 0 29 29" enable-background="new 0 0 29 29" xml:space="preserve">
+<g id="Layer_2" display="none">
+
+ <image display="inline" overflow="visible" width="29" height="29" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
+bWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
+bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
+eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEz
+NDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
+dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
+dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEu
+MC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVz
+b3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1N
+Ok9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOEUxMUU0Q0VDRjhB
+RTdEOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMTc4NTM2RjJEQ0YxMUUzQjQwMEIzNzVF
+OUU1OTgzRSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMTc4NTM2RTJEQ0YxMUUzQjQwMEIz
+NzVFOUU1OTgzRSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9z
+aCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3ODAxMTc0
+MDcyMDY4MTE4QTZEODBFMkJFN0ZEMjI5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAx
+MTc0MDcyMDY4MTE4RTExRTRDRUNGOEFFN0Q5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpS
+REY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Zy4G/QAAAhRJREFUeNq8l89KQkEU
+xq8uAiFwk2jZKloJguTKhRtXRdCipVvBVdtewgcQhKAHCATDnsCVcJEoWtXmgv1bBBlRGMbtG/kG
+TqL3ztilAz+8o3PONzN3Zs4x5vu+Y2BJcADKYAesgw3wAB7BAPTAORiFRlOiAeTAmW9nZ/RbGDdI
+sCUCjUEX1EERZNkny3adv4+FT8tGdI0BlE3onAlZEU2G/Sf07zJeoGga9OnggYKh2CwF+vuMlw4S
+7bCjazG7oFm7jNdZJHrCDkOQ+qOgJsV4PuP/Ei2JDVOISFAutd5gJSmqj0UjYkFNg/Hbqh1Ta88D
+/gm2wFPIJbEt2pfg2+BySQEPJKYXC0Rr4lCHjXgF9MRZtFkZvZq1OK82ZRcGI/4Ch+CO7WNQd8xM
+xy+rEVxxBHmLUau+r2LzVQx8cux/oxojNpKWm2NX3DwvYDukf5J9R454P8vsyiPhf2sw8Kmpd/om
+dqatrYrnd77zoJ3vTPXUGnMAOctZVsUshyLzhL7TOBOwsqLFDCvglM8qae+B+xAfHX8QZ8Z3WBmY
+WB60wYo4QtcGfvv87OlsoOzD4KJPMGO4pGpx8X9QJ6u/bP/n3Tsvy+QjFswvyjIyn3oR51NvUT7V
+dEWJEUXl0Be1UmCN5EZcI7lhNdK8arBpWQ02batB07o3I0QiqXtnd94yFX7gCYgt+V9mE6TBMxja
+/pf5EWAAeas6YucHuMMAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 -0.0688 0)">
+ </image>
+</g>
+<g id="Layer_1">
+ <path fill="#FFFFFF" d="M14.57,2c6.893,0,12.5,5.607,12.5,12.5S21.463,27,14.57,27c-6.893,0-12.5-5.607-12.5-12.5S7.677,2,14.57,2
+ M14.57,0C6.562,0,0.07,6.492,0.07,14.5c0,8.008,6.492,14.5,14.5,14.5s14.5-6.492,14.5-14.5C29.07,6.492,22.578,0,14.57,0L14.57,0z
+ "/>
+ <polygon fill="#FFFFFF" points="14.996,19.973 11.928,19.973 16.018,14.999 11.928,9.97 14.996,9.97 19.086,14.944 "/>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/blank-footer.svg b/mobile/themes/milagro/images/img/blank-footer.svg
new file mode 100644
index 0000000..b2601ad
--- /dev/null
+++ b/mobile/themes/milagro/images/img/blank-footer.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1000"
+ height="600"
+ viewBox="0 0 5 3">
+
+ <defs>
+ <clipPath id="a">
+ <rect
+ width="5"
+ height="3" />
+ </clipPath>
+ </defs>
+
+
+ <path
+ d="M 0,0 L 5,3 M 0,3 L 5,0"
+ stroke="#ccc"
+ stroke-width=".3"
+ clip-path="url(#a)" />
+</svg>
diff --git a/mobile/themes/milagro/images/img/blank.svg b/mobile/themes/milagro/images/img/blank.svg
new file mode 100644
index 0000000..9aa6200
--- /dev/null
+++ b/mobile/themes/milagro/images/img/blank.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1000"
+ height="600"
+ viewBox="0 0 5 3">
+
+ <defs>
+ <clipPath id="a">
+ <rect
+ width="5"
+ height="3" />
+ </clipPath>
+ </defs>
+
+
+ <path
+ d="M 0,0 L 5,3 M 0,3 L 5,0"
+ stroke="#fff"
+ stroke-width=".3"
+ clip-path="url(#a)" />
+</svg>
diff --git a/mobile/themes/milagro/images/img/device-purple.svg b/mobile/themes/milagro/images/img/device-purple.svg
new file mode 100644
index 0000000..27e7b33
--- /dev/null
+++ b/mobile/themes/milagro/images/img/device-purple.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-49 141 1500 1500" enable-background="new -49 141 1500 1500" xml:space="preserve">
+<path fill="#36424a" d="M1169.8,141H232.2c-51.9,0-93.8,41.9-93.8,93.8v1312.5c0,51.9,41.9,93.8,93.8,93.8h937.5
+ c51.9,0,93.8-41.9,93.8-93.8V234.8C1263.5,182.9,1221.6,141,1169.8,141z M1076,1266H326V328.5h750V1266z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/home.svg b/mobile/themes/milagro/images/img/home.svg
new file mode 100644
index 0000000..648f784
--- /dev/null
+++ b/mobile/themes/milagro/images/img/home.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-0.2 270 612 612" enable-background="new -0.2 270 612 612" xml:space="preserve">
+<path fill="#FFFFFF" d="M600.6,507.3L374.7,281.4c-8.6-8.6-20.2-12-31.6-11.1h-74.6c-11.4-1-22.9,2.4-31.6,11.1L191,327.3v-57H76.5
+ v171.5l-65.4,65.4c-8.6,8.6-12,20.2-11,31.6v75.5c0,21.2,17.1,38.2,38.2,38.2h38.2v191.1c0,21.2,17.1,38.2,38.2,38.2l114.7,0.2
+ l0.1-229.7l152.6,0l0.3,229.5h114.6c21.2,0,38.2-17.1,38.2-38.2V652.5h38.2c21.2,0,38.2-17.1,38.2-38.2v-75.5
+ C612.6,527.5,609.2,515.9,600.6,507.3z M229.4,805.4 M382.4,805.5"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/id-settings.svg b/mobile/themes/milagro/images/img/id-settings.svg
new file mode 100644
index 0000000..1038806
--- /dev/null
+++ b/mobile/themes/milagro/images/img/id-settings.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px"
+ height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
+<g id="Layer_1" display="none">
+
+ <image display="inline" overflow="visible" width="25" height="25" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
+bWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
+bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
+eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEz
+NDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
+dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
+dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEu
+MC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVz
+b3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1N
+OkRvY3VtZW50SUQ9InhtcC5kaWQ6NDUxQTBERTYzRTJFMTFFM0E4MkFEOUUxQzMyRUJEMjEiIHht
+cE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDUxQTBERTUzRTJFMTFFM0E4MkFEOUUxQzMyRUJEMjEi
+IHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giPiA8eG1wTU06
+RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEU4
+MkUxOThGMEI2NkQ2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODEx
+OEU4MkUxOThGMEI2NkQ2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w
+bWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu5zuF0AAAL7SURBVHjaYvz//z8DDDCGtXsAqUwgNgZi
+aQbSwVMgPgvE0/+vqtwBNxdkCdBwfiC73VFLLrPQx4zBWEmCQUqIl2Qbnr37zHD23guG/i2nGPZf
+ezQdKFQJtOwjA9gnoW2TK5ft/09NADIPZC4kpELbohzrl/z/8/cfVS0BmWdXuxhkUTgTKA6aIuwZ
+mJkYcQbD4/dfGT79+AVmH7v3iqFnzxWGlWfv4w06kHkgc0HmswAJXV05UZyKQQa2AbGDkjhDiYs2
+Q97qkwz3gJaC+OHGimDLP37/zSAryI2h10BBDEyBLOHn52LHacmnH7/B9IF7LxkOzHoJFwfxg2bt
+B1rwi+Eh0NIN6U4MOpICKHqh5vKzYDf4F0PdlvMMMgLcDFOO3MTpAJBFMHAcyEa3BAawWgKyYNEZ
+zDAX4mBjeAeNG3QgI8iD0zFM2AQtFcWwKgZZAIoLkGXoIHfVSXDwXXn+gTifWClhWmIoKciwPt2R
+gQ9oASw4kX0LcgAo+HZcfYIRbBg+2X7tKUPCoiMYlsAsAAEQPSHEnEEJLUWB+NgciGHJ1WfvGc4/
+f48iBgoiPixBJIcWDxHAJE2UJdpSguCgQU9Fn7BE+KP3X1D4K4AZFJRZCVriqSXNsCDOBkNh4Mz9
+cItAdMEaSKZEBiA+NkuwRjw2haAgVGhYBw66S8AgRU/KoBSnBwwFD20Z4iw5fv8V1iQMMgg5AyKD
+yWHm4FAgOjM2+RhCMhgwx4PKLeRkigs8QYsfgpbAkiis7MJVtICCDlZ2WQLZ+Cz5+PHbT5yFJB8H
+K9xA9FJ4XZoj3lL4C8TnX0CWXL786LWNjYYMVktKXHTARTo/JyvYh5NCzcEJA2YoSAxbHgKBs5D4
+O8vMoO3888HLD8ExdroMTIzYKy5+TjYGdhZmMFsWmqt1pATxVlrAipEhYcpmhodvPlXQpY6HRXxN
++/rjzCduPgW3VsxUJBnEBXhIbq28/PCF4dSd58itlRp4kwhLu8sMiCXIaHe9AOJT6O0ugAADACHL
+PBsJFDBaAAAAAElFTkSuQmCC">
+ </image>
+</g>
+<g id="Layer_2">
+ <path fill="#1B79A8" d="M19.356,12.5c-0.012-0.247-0.02-0.495-0.042-0.742c0.386-0.184,0.767-0.393,1.143-0.627
+ c-0.097-0.601-0.281-1.185-0.507-1.749c-0.445,0.007-0.883,0.039-1.31,0.094c-0.101-0.229-0.239-0.436-0.367-0.648
+ c-0.127-0.214-0.289-0.404-0.435-0.604c0.229-0.367,0.432-0.745,0.621-1.146c-0.404-0.452-0.874-0.841-1.367-1.192
+ c-0.367,0.241-0.723,0.509-1.052,0.784c-0.209-0.136-0.434-0.239-0.659-0.347c-0.221-0.116-0.461-0.184-0.693-0.273
+ c-0.004-0.44-0.039-0.862-0.098-1.302c-0.586-0.163-1.195-0.237-1.798-0.258c-0.177,0.396-0.33,0.808-0.457,1.225
+ c-0.248,0.013-0.495,0.02-0.741,0.065c-0.246,0.032-0.49,0.076-0.73,0.146c-0.237-0.357-0.504-0.72-0.787-1.049
+ C9.502,5.072,8.939,5.314,8.424,5.634C8.494,6.073,8.58,6.49,8.699,6.91C8.502,7.061,8.292,7.197,8.112,7.368
+ C7.929,7.535,7.74,7.696,7.579,7.885C7.185,7.713,6.771,7.557,6.35,7.427c-0.375,0.476-0.718,0.98-0.98,1.529
+ c0.294,0.332,0.597,0.64,0.918,0.927c-0.084,0.233-0.181,0.463-0.247,0.703c-0.057,0.242-0.139,0.479-0.168,0.727
+ c-0.423,0.067-0.851,0.162-1.28,0.281c-0.065,0.603-0.066,1.209,0,1.812c0.429,0.119,0.856,0.213,1.28,0.281
+ c0.03,0.248,0.111,0.484,0.168,0.727c0.065,0.24,0.163,0.469,0.247,0.703c-0.321,0.287-0.624,0.594-0.917,0.926
+ c0.262,0.549,0.604,1.055,0.979,1.531c0.421-0.131,0.835-0.287,1.229-0.459c0.161,0.188,0.35,0.35,0.533,0.518
+ c0.18,0.17,0.39,0.305,0.586,0.457c-0.119,0.42-0.205,0.838-0.274,1.275c0.515,0.322,1.078,0.562,1.653,0.76
+ c0.283-0.33,0.55-0.693,0.787-1.049c0.24,0.068,0.484,0.111,0.73,0.145c0.246,0.047,0.493,0.055,0.741,0.066
+ c0.128,0.416,0.28,0.828,0.457,1.225c0.604-0.021,1.212-0.096,1.799-0.258c0.058-0.439,0.093-0.861,0.097-1.303
+ c0.232-0.088,0.474-0.158,0.694-0.273c0.225-0.105,0.449-0.211,0.659-0.348c0.328,0.275,0.684,0.543,1.051,0.785
+ c0.493-0.352,0.964-0.74,1.367-1.191c-0.189-0.402-0.391-0.779-0.621-1.146c0.146-0.201,0.308-0.391,0.435-0.604
+ c0.128-0.213,0.267-0.42,0.367-0.648c0.427,0.055,0.864,0.086,1.31,0.092c0.226-0.562,0.41-1.148,0.507-1.748
+ c-0.376-0.234-0.757-0.443-1.143-0.627C19.337,12.996,19.345,12.747,19.356,12.5z M14.183,16.057
+ c-0.672,0.305-1.441,0.428-2.181,0.311c-0.736-0.098-1.437-0.426-2.001-0.914c-0.566-0.486-0.983-1.141-1.193-1.852
+ c-0.21-0.711-0.21-1.493,0-2.205c0.21-0.711,0.626-1.363,1.193-1.852c0.563-0.488,1.264-0.814,2.001-0.912
+ c0.739-0.118,1.509,0.005,2.181,0.311c0.678,0.306,1.265,0.817,1.667,1.443c0.408,0.627,0.612,1.363,0.624,2.112
+ c-0.012,0.75-0.216,1.485-0.624,2.112C15.446,15.238,14.86,15.75,14.183,16.057z"/>
+ <g>
+ <path fill="#1B79A8" d="M19.332,1c2.574,0,4.669,2.095,4.669,4.669V19.33c0,2.575-2.095,4.67-4.669,4.67H5.67
+ c-2.575,0-4.669-2.095-4.669-4.67V5.669C1.001,3.095,3.096,1,5.67,1H19.332 M19.332,0H5.67C2.539,0,0.001,2.538,0.001,5.669V19.33
+ c0,3.132,2.538,5.67,5.669,5.67h13.662c3.131,0,5.669-2.538,5.669-5.67V5.669C25.001,2.538,22.463,0,19.332,0L19.332,0z"/>
+ </g>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/info.svg b/mobile/themes/milagro/images/img/info.svg
new file mode 100644
index 0000000..fe44804
--- /dev/null
+++ b/mobile/themes/milagro/images/img/info.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="21px" height="20px" viewBox="-0.382 -0.207 21 20"
+ overflow="visible" enable-background="new -0.382 -0.207 21 20" xml:space="preserve">
+<defs>
+</defs>
+<circle fill="#FFFFFF" cx="9.943" cy="9.943" r="9.443"/>
+<path fill="#474647" d="M9.944,19.886C4.461,19.886,0,15.426,0,9.943C0,4.46,4.461,0,9.944,0c5.482,0,9.943,4.46,9.943,9.943
+ C19.887,15.426,15.426,19.886,9.944,19.886z M9.944,1.001c-4.931,0-8.943,4.011-8.943,8.942s4.012,8.942,8.943,8.942
+ c4.931,0,8.942-4.012,8.942-8.942S14.875,1.001,9.944,1.001z"/>
+<path fill="#474647" d="M10.871,12.194c0,0.998,0.057,1.127,0.529,1.17l0.271,0.028c0.114,0.086,0.114,0.414-0.014,0.5
+ c-0.5-0.028-1.057-0.042-1.713-0.042c-0.643,0-1.242,0.014-1.713,0.042c-0.128-0.086-0.128-0.414-0.013-0.5l0.27-0.028
+ c0.471-0.043,0.529-0.172,0.529-1.17v-2.156c0-0.57,0-0.741-0.272-0.913L8.544,8.996c-0.1-0.086-0.1-0.343,0-0.427
+ c0.671-0.186,1.685-0.572,2.112-0.829c0.114,0,0.2,0.043,0.257,0.129c-0.03,0.427-0.043,1.055-0.043,1.698V12.194z M10.984,5.743
+ c0,0.684-0.527,1.041-1.07,1.041c-0.628,0-0.999-0.428-0.999-1.013c0-0.628,0.5-1.042,1.07-1.042
+ C10.586,4.729,10.984,5.171,10.984,5.743z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/ios6-share.png b/mobile/themes/milagro/images/img/ios6-share.png
new file mode 100644
index 0000000..f8bcd5c
--- /dev/null
+++ b/mobile/themes/milagro/images/img/ios6-share.png
Binary files differ
diff --git a/mobile/themes/milagro/images/img/ios7-share.png b/mobile/themes/milagro/images/img/ios7-share.png
new file mode 100644
index 0000000..3a352ad
--- /dev/null
+++ b/mobile/themes/milagro/images/img/ios7-share.png
Binary files differ
diff --git a/mobile/themes/milagro/images/img/logo-here-grey.svg b/mobile/themes/milagro/images/img/logo-here-grey.svg
new file mode 100644
index 0000000..e1259de
--- /dev/null
+++ b/mobile/themes/milagro/images/img/logo-here-grey.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="789.3 481.1 351.6 103.2" enable-background="new 789.3 481.1 351.6 103.2" xml:space="preserve">
+<g id="one_green_2">
+ <g>
+ <path fill="#FFFFFF" d="M946.6,540.3c0.4,1,0.8,2,1.2,3c0.4-1,0.8-2.1,1.3-3.1c0.4-1,0.9-2,1.4-2.9l18.5-34.7
+ c0.2-0.4,0.5-0.8,0.7-1c0.2-0.3,0.5-0.4,0.8-0.6c0.3-0.1,0.6-0.2,1-0.2c0.4,0,0.8,0,1.3,0h8.8v62.6h-10.3V523c0-0.7,0-1.6,0.1-2.5
+ c0-0.9,0.1-1.8,0.2-2.7l-18.9,35.5c-0.4,0.8-1,1.4-1.7,1.9c-0.7,0.4-1.5,0.7-2.4,0.7h-1.6c-0.9,0-1.7-0.2-2.4-0.7
+ c-0.7-0.4-1.3-1.1-1.7-1.9l-19.2-35.6c0.1,1,0.2,1.9,0.2,2.8c0,0.9,0.1,1.8,0.1,2.5v40.4h-10.2v-62.6h8.8c0.5,0,1,0,1.3,0
+ c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.6,0.3,0.8,0.6c0.3,0.3,0.5,0.6,0.7,1l18.7,34.7C945.7,538.4,946.2,539.3,946.6,540.3z"/>
+ <path fill="#FFFFFF" d="M992.3,532.8h22.4v8.9h-22.4V532.8z"/>
+ <path fill="#FFFFFF" d="M1037.4,541.4v22h-11.6v-62.6h20.4c4.2,0,7.8,0.5,10.9,1.5c3.1,1,5.6,2.4,7.6,4.1c2,1.8,3.5,3.9,4.4,6.3
+ c1,2.5,1.4,5.1,1.4,8c0,3-0.5,5.8-1.5,8.3c-1,2.5-2.5,4.7-4.5,6.5c-2,1.8-4.5,3.2-7.6,4.2s-6.6,1.5-10.6,1.5L1037.4,541.4
+ L1037.4,541.4z M1037.4,532.3h8.7c2.1,0,4-0.3,5.6-0.8c1.6-0.5,2.9-1.3,3.9-2.3c1-1,1.8-2.2,2.3-3.6c0.5-1.4,0.8-3,0.8-4.8
+ c0-1.7-0.3-3.2-0.8-4.5c-0.5-1.4-1.3-2.5-2.3-3.5c-1-1-2.4-1.7-3.9-2.2c-1.6-0.5-3.4-0.8-5.6-0.8h-8.7V532.3z"/>
+ <path fill="#FFFFFF" d="M1091.8,506.1c0,0.9-0.2,1.8-0.6,2.6c-0.4,0.8-0.9,1.5-1.5,2.1c-0.6,0.6-1.3,1.1-2.2,1.4
+ c-0.8,0.4-1.7,0.5-2.7,0.5c-0.9,0-1.8-0.2-2.6-0.5c-0.8-0.4-1.5-0.8-2.1-1.4c-0.6-0.6-1.1-1.3-1.4-2.1c-0.4-0.8-0.5-1.7-0.5-2.6
+ c0-1,0.2-1.8,0.5-2.7c0.4-0.8,0.8-1.6,1.4-2.2c0.6-0.6,1.3-1.1,2.1-1.4c0.8-0.4,1.7-0.5,2.6-0.5c1,0,1.8,0.2,2.7,0.5
+ c0.8,0.4,1.6,0.8,2.2,1.4c0.6,0.6,1.1,1.3,1.5,2.2C1091.6,504.2,1091.8,505.1,1091.8,506.1z M1090.2,519v44.4h-10.7V519H1090.2z"
+ />
+ <path fill="#FFFFFF" d="M1102.3,563.4V519h6.5c1.4,0,2.3,0.6,2.7,1.9l0.7,3.5c0.9-0.9,1.8-1.8,2.8-2.5c1-0.8,2-1.4,3.2-1.9
+ c1.1-0.5,2.3-1,3.6-1.3c1.3-0.3,2.7-0.4,4.2-0.4c2.4,0,4.6,0.4,6.4,1.2c1.9,0.8,3.4,2,4.7,3.5c1.3,1.5,2.2,3.3,2.9,5.3
+ c0.6,2.1,1,4.3,1,6.8v28.2h-10.7v-28.2c0-2.7-0.6-4.8-1.9-6.3c-1.3-1.5-3.1-2.2-5.6-2.2c-1.8,0-3.6,0.4-5.2,1.3
+ c-1.6,0.8-3.1,2-4.6,3.4v32.1L1102.3,563.4L1102.3,563.4z"/>
+ </g>
+ <g id="icon_3_">
+ <path opacity="0.6" fill="#FFFFFF" enable-background="new " d="M840.9,481.1c-28.5,0-51.6,23.1-51.6,51.6
+ c0,28.5,23.1,51.6,51.6,51.6c28.5,0,51.6-23.1,51.6-51.6C892.5,504.2,869.5,481.1,840.9,481.1z M840.9,575.7
+ c-23.8,0-43-19.2-43-43c0-23.8,19.2-43,43-43c23.8,0,43,19.2,43,43C883.9,556.5,864.7,575.7,840.9,575.7z"/>
+ <g>
+ <g>
+ <g>
+ <path fill="#FFFFFF" d="M860.3,500.3h-38.6c-1.4,0-2.6,1.1-2.6,2.6v59.8c0,1.4,1.1,2.6,2.6,2.6h38.6c1.4,0,2.6-1.1,2.6-2.6
+ v-59.8C862.8,501.4,861.7,500.3,860.3,500.3z M834.5,553.9c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8
+ c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V553.9z M834.5,543.3c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8
+ v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V543.3z M834.5,532.7c0,0.4-0.4,0.8-0.8,0.8h-6.8
+ c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.3,0.8,0.8V532.7z M845.1,553.9c0,0.4-0.4,0.8-0.8,0.8
+ h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V553.9z M845.1,543.3
+ c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V543.3z
+ M845.1,532.7c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.3,0.8,0.8V532.7
+ z M855.7,553.9c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8
+ V553.9z M855.7,543.3c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8
+ c0.4,0,0.8,0.4,0.8,0.8V543.3z M855.7,532.7c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8
+ h6.8c0.4,0,0.8,0.3,0.8,0.8V532.7z M855.7,518.2c0,0.4-0.4,0.8-0.8,0.8h-28c-0.4,0-0.8-0.4-0.8-0.8v-9.1c0-0.4,0.4-0.8,0.8-0.8
+ h28c0.4,0,0.8,0.4,0.8,0.8V518.2z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/logo-here-white.svg b/mobile/themes/milagro/images/img/logo-here-white.svg
new file mode 100644
index 0000000..020201b
--- /dev/null
+++ b/mobile/themes/milagro/images/img/logo-here-white.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="219px" height="50px" viewBox="-6.594 -5.127 219 50"
+ overflow="visible" enable-background="new -6.594 -5.127 219 50" xml:space="preserve">
+<defs>
+</defs>
+<path display="none" fill="#353535" d="M10.433,0.843v32.096h6.345v8.03H0V0.843H10.433z"/>
+<path display="none" fill="#353535" d="M43.15,24.338c0,4.031-0.096,6.885-0.285,8.562c-0.189,1.678-0.784,3.21-1.784,4.598
+ c-1.001,1.388-2.351,2.454-4.051,3.197c-1.702,0.744-3.686,1.115-5.948,1.115c-2.148,0-4.079-0.351-5.787-1.053
+ c-1.712-0.703-3.088-1.756-4.126-3.161c-1.044-1.404-1.662-2.933-1.86-4.585s-0.298-4.544-0.298-8.674v-6.865
+ c0-4.031,0.097-6.886,0.286-8.564c0.189-1.677,0.784-3.209,1.784-4.597s2.351-2.454,4.053-3.197C26.834,0.372,28.816,0,31.082,0
+ c2.146,0,4.076,0.352,5.785,1.054c1.712,0.701,3.085,1.755,4.129,3.159c1.038,1.404,1.659,2.933,1.857,4.585
+ s0.297,4.544,0.297,8.675V24.338z M32.715,11.153c0-1.868-0.102-3.06-0.309-3.582c-0.207-0.519-0.63-0.78-1.277-0.78
+ c-0.542,0-0.962,0.211-1.251,0.631c-0.288,0.422-0.435,1.665-0.435,3.73V29.89c0,2.33,0.097,3.768,0.286,4.312
+ c0.189,0.545,0.633,0.818,1.327,0.818c0.711,0,1.163-0.313,1.361-0.942c0.198-0.628,0.297-2.123,0.297-4.486V11.153z"/>
+<path display="none" fill="#353535" d="M70.985,15.614H60.55v-3.644c0-2.296-0.1-3.733-0.298-4.312
+ c-0.198-0.579-0.668-0.867-1.411-0.867c-0.645,0-1.082,0.248-1.312,0.743c-0.233,0.496-0.35,1.769-0.35,3.817v19.257
+ c0,1.801,0.116,2.986,0.35,3.558c0.23,0.568,0.694,0.854,1.389,0.854c0.758,0,1.273-0.322,1.548-0.966
+ c0.271-0.645,0.408-1.9,0.408-3.768v-4.758h-2.108v-6.097h12.221v21.538h-6.558l-0.966-2.875c-0.711,1.239-1.606,2.169-2.69,2.788
+ c-1.082,0.621-2.359,0.93-3.832,0.93c-1.752,0-3.394-0.426-4.922-1.277c-1.53-0.85-2.691-1.904-3.487-3.16
+ c-0.793-1.255-1.288-2.573-1.487-3.952c-0.197-1.381-0.297-3.449-0.297-6.209V15.292c0-3.833,0.207-6.618,0.618-8.353
+ c0.414-1.735,1.601-3.325,3.558-4.771C52.881,0.723,55.412,0,58.52,0c3.057,0,5.593,0.628,7.607,1.884
+ c2.016,1.255,3.33,2.747,3.939,4.474c0.612,1.726,0.919,4.234,0.919,7.521V15.614z"/>
+<path display="none" fill="#353535" d="M98.866,24.338c0,4.031-0.097,6.885-0.286,8.562c-0.189,1.678-0.784,3.21-1.784,4.598
+ c-1,1.388-2.351,2.454-4.05,3.197c-1.703,0.744-3.686,1.115-5.949,1.115c-2.148,0-4.078-0.351-5.787-1.053
+ c-1.712-0.703-3.088-1.756-4.126-3.161c-1.044-1.404-1.662-2.933-1.86-4.585s-0.297-4.544-0.297-8.674v-6.865
+ c0-4.031,0.096-6.886,0.285-8.564c0.189-1.677,0.784-3.209,1.784-4.597c1.001-1.388,2.351-2.454,4.054-3.197
+ C82.549,0.372,84.532,0,86.797,0c2.146,0,4.077,0.352,5.785,1.054c1.712,0.701,3.085,1.755,4.129,3.159
+ c1.038,1.404,1.659,2.933,1.857,4.585s0.298,4.544,0.298,8.675V24.338z M88.431,11.153c0-1.868-0.103-3.06-0.31-3.582
+ c-0.207-0.519-0.63-0.78-1.277-0.78c-0.542,0-0.962,0.211-1.251,0.631c-0.288,0.422-0.435,1.665-0.435,3.73V29.89
+ c0,2.33,0.097,3.768,0.286,4.312c0.189,0.545,0.633,0.818,1.327,0.818c0.711,0,1.163-0.313,1.361-0.942
+ c0.198-0.628,0.298-2.123,0.298-4.486V11.153z"/>
+<path display="none" fill="#353535" d="M135.695,0.843v40.125h-10.433V24.115h-3.126v16.853h-10.433V0.843h10.433v14.35h3.126V0.843
+ H135.695z"/>
+<path display="none" fill="#353535" d="M139.883,0.843h17.398v8.03h-6.966v7.609h6.52v7.634h-6.52v8.823h7.659v8.03h-18.092V0.843z"
+ />
+<path display="none" fill="#353535" d="M160.976,0.843h7.386c4.925,0,8.257,0.189,10.001,0.57c1.743,0.381,3.163,1.35,4.263,2.913
+ c1.1,1.56,1.647,4.051,1.647,7.472c0,3.123-0.388,5.221-1.166,6.295c-0.776,1.074-2.304,1.719-4.584,1.933
+ c2.064,0.512,3.452,1.198,4.164,2.057c0.711,0.858,1.151,1.647,1.326,2.367c0.172,0.717,0.26,2.697,0.26,5.936v10.583h-9.692V27.634
+ c0-2.147-0.169-3.479-0.507-3.99c-0.339-0.512-1.225-0.768-2.665-0.768v18.092h-10.433V0.843z M171.408,7.708v8.922
+ c1.175,0,1.997-0.161,2.467-0.484c0.472-0.321,0.705-1.366,0.705-3.135v-2.206c0-1.273-0.225-2.107-0.679-2.503
+ C173.446,7.906,172.615,7.708,171.408,7.708z"/>
+<path display="none" fill="#353535" d="M188.313,0.843h17.398v8.03h-6.966v7.609h6.521v7.634h-6.521v8.823h7.66v8.03h-18.093V0.843z
+ "/>
+<path fill="#FFFFFF" d="M10.433,0.843v32.096h6.345v8.03H0V0.843H10.433z"/>
+<path fill="#FFFFFF" d="M43.15,24.338c0,4.031-0.096,6.885-0.285,8.562c-0.189,1.678-0.784,3.21-1.784,4.598
+ c-1.001,1.388-2.351,2.454-4.051,3.197c-1.702,0.744-3.686,1.115-5.948,1.115c-2.148,0-4.079-0.351-5.787-1.053
+ c-1.712-0.703-3.088-1.756-4.126-3.161c-1.044-1.404-1.662-2.933-1.86-4.585s-0.298-4.544-0.298-8.674v-6.865
+ c0-4.031,0.097-6.886,0.286-8.564c0.189-1.677,0.784-3.209,1.784-4.597s2.351-2.454,4.053-3.197C26.834,0.372,28.816,0,31.082,0
+ c2.146,0,4.076,0.352,5.785,1.054c1.712,0.701,3.085,1.755,4.129,3.159c1.038,1.404,1.659,2.933,1.857,4.585
+ s0.297,4.544,0.297,8.675V24.338z M32.715,11.153c0-1.868-0.102-3.06-0.309-3.582c-0.207-0.519-0.63-0.78-1.277-0.78
+ c-0.542,0-0.962,0.211-1.251,0.631c-0.288,0.422-0.435,1.665-0.435,3.73V29.89c0,2.33,0.097,3.768,0.286,4.312
+ c0.189,0.545,0.633,0.818,1.327,0.818c0.711,0,1.163-0.313,1.361-0.942c0.198-0.628,0.297-2.123,0.297-4.486V11.153z"/>
+<path fill="#FFFFFF" d="M70.985,15.614H60.55v-3.644c0-2.296-0.1-3.733-0.298-4.312c-0.198-0.579-0.668-0.867-1.411-0.867
+ c-0.645,0-1.082,0.248-1.312,0.743c-0.233,0.496-0.35,1.769-0.35,3.817v19.257c0,1.801,0.116,2.986,0.35,3.558
+ c0.23,0.568,0.694,0.854,1.389,0.854c0.758,0,1.273-0.322,1.548-0.966c0.271-0.645,0.408-1.9,0.408-3.768v-4.758h-2.108v-6.097
+ h12.221v21.538h-6.558l-0.966-2.875c-0.711,1.239-1.606,2.169-2.69,2.788c-1.082,0.621-2.359,0.93-3.832,0.93
+ c-1.752,0-3.394-0.426-4.922-1.277c-1.53-0.85-2.691-1.904-3.487-3.16c-0.793-1.255-1.288-2.573-1.487-3.952
+ c-0.197-1.381-0.297-3.449-0.297-6.209V15.292c0-3.833,0.207-6.618,0.618-8.353c0.414-1.735,1.601-3.325,3.558-4.771
+ C52.881,0.723,55.412,0,58.52,0c3.057,0,5.593,0.628,7.607,1.884c2.016,1.255,3.33,2.747,3.939,4.474
+ c0.612,1.726,0.919,4.234,0.919,7.521V15.614z"/>
+<path fill="#FFFFFF" d="M98.866,24.338c0,4.031-0.097,6.885-0.286,8.562c-0.189,1.678-0.784,3.21-1.784,4.598
+ c-1,1.388-2.351,2.454-4.05,3.197c-1.703,0.744-3.686,1.115-5.949,1.115c-2.148,0-4.078-0.351-5.787-1.053
+ c-1.712-0.703-3.088-1.756-4.126-3.161c-1.044-1.404-1.662-2.933-1.86-4.585s-0.297-4.544-0.297-8.674v-6.865
+ c0-4.031,0.096-6.886,0.285-8.564c0.189-1.677,0.784-3.209,1.784-4.597c1.001-1.388,2.351-2.454,4.054-3.197
+ C82.549,0.372,84.532,0,86.797,0c2.146,0,4.077,0.352,5.785,1.054c1.712,0.701,3.085,1.755,4.129,3.159
+ c1.038,1.404,1.659,2.933,1.857,4.585s0.298,4.544,0.298,8.675V24.338z M88.431,11.153c0-1.868-0.103-3.06-0.31-3.582
+ c-0.207-0.519-0.63-0.78-1.277-0.78c-0.542,0-0.962,0.211-1.251,0.631c-0.288,0.422-0.435,1.665-0.435,3.73V29.89
+ c0,2.33,0.097,3.768,0.286,4.312c0.189,0.545,0.633,0.818,1.327,0.818c0.711,0,1.163-0.313,1.361-0.942
+ c0.198-0.628,0.298-2.123,0.298-4.486V11.153z"/>
+<path fill="#FFFFFF" d="M135.695,0.843v40.125h-10.433V24.115h-3.126v16.853h-10.433V0.843h10.433v14.35h3.126V0.843H135.695z"/>
+<path fill="#FFFFFF" d="M139.883,0.843h17.398v8.03h-6.966v7.609h6.52v7.634h-6.52v8.823h7.659v8.03h-18.092V0.843z"/>
+<path fill="#FFFFFF" d="M160.976,0.843h7.386c4.925,0,8.257,0.189,10.001,0.57c1.743,0.381,3.163,1.35,4.263,2.913
+ c1.1,1.56,1.647,4.051,1.647,7.472c0,3.123-0.388,5.221-1.166,6.295c-0.776,1.074-2.304,1.719-4.584,1.933
+ c2.064,0.512,3.452,1.198,4.164,2.057c0.711,0.858,1.151,1.647,1.326,2.367c0.172,0.717,0.26,2.697,0.26,5.936v10.583h-9.692V27.634
+ c0-2.147-0.169-3.479-0.507-3.99c-0.339-0.512-1.225-0.768-2.665-0.768v18.092h-10.433V0.843z M171.408,7.708v8.922
+ c1.175,0,1.997-0.161,2.467-0.484c0.472-0.321,0.705-1.366,0.705-3.135v-2.206c0-1.273-0.225-2.107-0.679-2.503
+ C173.446,7.906,172.615,7.708,171.408,7.708z"/>
+<path fill="#FFFFFF" d="M188.313,0.843h17.398v8.03h-6.966v7.609h6.521v7.634h-6.521v8.823h7.66v8.03h-18.093V0.843z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/m-pin-header-logo.svg b/mobile/themes/milagro/images/img/m-pin-header-logo.svg
new file mode 100644
index 0000000..e1259de
--- /dev/null
+++ b/mobile/themes/milagro/images/img/m-pin-header-logo.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="789.3 481.1 351.6 103.2" enable-background="new 789.3 481.1 351.6 103.2" xml:space="preserve">
+<g id="one_green_2">
+ <g>
+ <path fill="#FFFFFF" d="M946.6,540.3c0.4,1,0.8,2,1.2,3c0.4-1,0.8-2.1,1.3-3.1c0.4-1,0.9-2,1.4-2.9l18.5-34.7
+ c0.2-0.4,0.5-0.8,0.7-1c0.2-0.3,0.5-0.4,0.8-0.6c0.3-0.1,0.6-0.2,1-0.2c0.4,0,0.8,0,1.3,0h8.8v62.6h-10.3V523c0-0.7,0-1.6,0.1-2.5
+ c0-0.9,0.1-1.8,0.2-2.7l-18.9,35.5c-0.4,0.8-1,1.4-1.7,1.9c-0.7,0.4-1.5,0.7-2.4,0.7h-1.6c-0.9,0-1.7-0.2-2.4-0.7
+ c-0.7-0.4-1.3-1.1-1.7-1.9l-19.2-35.6c0.1,1,0.2,1.9,0.2,2.8c0,0.9,0.1,1.8,0.1,2.5v40.4h-10.2v-62.6h8.8c0.5,0,1,0,1.3,0
+ c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.6,0.3,0.8,0.6c0.3,0.3,0.5,0.6,0.7,1l18.7,34.7C945.7,538.4,946.2,539.3,946.6,540.3z"/>
+ <path fill="#FFFFFF" d="M992.3,532.8h22.4v8.9h-22.4V532.8z"/>
+ <path fill="#FFFFFF" d="M1037.4,541.4v22h-11.6v-62.6h20.4c4.2,0,7.8,0.5,10.9,1.5c3.1,1,5.6,2.4,7.6,4.1c2,1.8,3.5,3.9,4.4,6.3
+ c1,2.5,1.4,5.1,1.4,8c0,3-0.5,5.8-1.5,8.3c-1,2.5-2.5,4.7-4.5,6.5c-2,1.8-4.5,3.2-7.6,4.2s-6.6,1.5-10.6,1.5L1037.4,541.4
+ L1037.4,541.4z M1037.4,532.3h8.7c2.1,0,4-0.3,5.6-0.8c1.6-0.5,2.9-1.3,3.9-2.3c1-1,1.8-2.2,2.3-3.6c0.5-1.4,0.8-3,0.8-4.8
+ c0-1.7-0.3-3.2-0.8-4.5c-0.5-1.4-1.3-2.5-2.3-3.5c-1-1-2.4-1.7-3.9-2.2c-1.6-0.5-3.4-0.8-5.6-0.8h-8.7V532.3z"/>
+ <path fill="#FFFFFF" d="M1091.8,506.1c0,0.9-0.2,1.8-0.6,2.6c-0.4,0.8-0.9,1.5-1.5,2.1c-0.6,0.6-1.3,1.1-2.2,1.4
+ c-0.8,0.4-1.7,0.5-2.7,0.5c-0.9,0-1.8-0.2-2.6-0.5c-0.8-0.4-1.5-0.8-2.1-1.4c-0.6-0.6-1.1-1.3-1.4-2.1c-0.4-0.8-0.5-1.7-0.5-2.6
+ c0-1,0.2-1.8,0.5-2.7c0.4-0.8,0.8-1.6,1.4-2.2c0.6-0.6,1.3-1.1,2.1-1.4c0.8-0.4,1.7-0.5,2.6-0.5c1,0,1.8,0.2,2.7,0.5
+ c0.8,0.4,1.6,0.8,2.2,1.4c0.6,0.6,1.1,1.3,1.5,2.2C1091.6,504.2,1091.8,505.1,1091.8,506.1z M1090.2,519v44.4h-10.7V519H1090.2z"
+ />
+ <path fill="#FFFFFF" d="M1102.3,563.4V519h6.5c1.4,0,2.3,0.6,2.7,1.9l0.7,3.5c0.9-0.9,1.8-1.8,2.8-2.5c1-0.8,2-1.4,3.2-1.9
+ c1.1-0.5,2.3-1,3.6-1.3c1.3-0.3,2.7-0.4,4.2-0.4c2.4,0,4.6,0.4,6.4,1.2c1.9,0.8,3.4,2,4.7,3.5c1.3,1.5,2.2,3.3,2.9,5.3
+ c0.6,2.1,1,4.3,1,6.8v28.2h-10.7v-28.2c0-2.7-0.6-4.8-1.9-6.3c-1.3-1.5-3.1-2.2-5.6-2.2c-1.8,0-3.6,0.4-5.2,1.3
+ c-1.6,0.8-3.1,2-4.6,3.4v32.1L1102.3,563.4L1102.3,563.4z"/>
+ </g>
+ <g id="icon_3_">
+ <path opacity="0.6" fill="#FFFFFF" enable-background="new " d="M840.9,481.1c-28.5,0-51.6,23.1-51.6,51.6
+ c0,28.5,23.1,51.6,51.6,51.6c28.5,0,51.6-23.1,51.6-51.6C892.5,504.2,869.5,481.1,840.9,481.1z M840.9,575.7
+ c-23.8,0-43-19.2-43-43c0-23.8,19.2-43,43-43c23.8,0,43,19.2,43,43C883.9,556.5,864.7,575.7,840.9,575.7z"/>
+ <g>
+ <g>
+ <g>
+ <path fill="#FFFFFF" d="M860.3,500.3h-38.6c-1.4,0-2.6,1.1-2.6,2.6v59.8c0,1.4,1.1,2.6,2.6,2.6h38.6c1.4,0,2.6-1.1,2.6-2.6
+ v-59.8C862.8,501.4,861.7,500.3,860.3,500.3z M834.5,553.9c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8
+ c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V553.9z M834.5,543.3c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8
+ v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V543.3z M834.5,532.7c0,0.4-0.4,0.8-0.8,0.8h-6.8
+ c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.3,0.8,0.8V532.7z M845.1,553.9c0,0.4-0.4,0.8-0.8,0.8
+ h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V553.9z M845.1,543.3
+ c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8V543.3z
+ M845.1,532.7c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.3,0.8,0.8V532.7
+ z M855.7,553.9c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8c0.4,0,0.8,0.4,0.8,0.8
+ V553.9z M855.7,543.3c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8h6.8
+ c0.4,0,0.8,0.4,0.8,0.8V543.3z M855.7,532.7c0,0.4-0.4,0.8-0.8,0.8h-6.8c-0.4,0-0.8-0.4-0.8-0.8v-6.8c0-0.4,0.4-0.8,0.8-0.8
+ h6.8c0.4,0,0.8,0.3,0.8,0.8V532.7z M855.7,518.2c0,0.4-0.4,0.8-0.8,0.8h-28c-0.4,0-0.8-0.4-0.8-0.8v-9.1c0-0.4,0.4-0.8,0.8-0.8
+ h28c0.4,0,0.8,0.4,0.8,0.8V518.2z"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/milagro.svg b/mobile/themes/milagro/images/img/milagro.svg
new file mode 100644
index 0000000..2e5fded
--- /dev/null
+++ b/mobile/themes/milagro/images/img/milagro.svg
@@ -0,0 +1,40 @@
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="581.8px" height="117px" viewBox="0 0 581.8 117" style="enable-background:new 0 0 581.8 117;"
+ xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#3E454C;}
+ .st1{fill:#C2FF17;}
+ .st2{fill:#31BCA4;}
+ .st3{fill:#40D37B;}
+</style>
+<defs>
+</defs>
+<g>
+ <path class="st0" d="M179.1,95h-6.9L148,34.1V95h-9.9V22.9h15.7l21.9,56.3L198,22.9h15.7V95h-9.9V34.1L179.1,95z"/>
+ <path class="st0" d="M230.6,95V22.9h9.9V95H230.6z"/>
+ <path class="st0" d="M257.5,95V22.9h9.9v63.2h31.3V95H257.5z"/>
+ <path class="st0" d="M354,95l-5.7-15.3h-30.7L312.1,95h-10.8l27.9-72.1h8.7L365.4,95H354z M321,70.8h24.2l-12.1-32.9H333L321,70.8z
+ "/>
+ <path class="st0" d="M408.6,63.9V55h28.2v27.4c-6.9,8.8-17.7,13.8-29.6,13.8c-22,0-38.7-14.9-38.7-37.3c0-21.3,17.4-37.3,38.7-37.3
+ c11.1,0,21,4.9,27.9,12.8l-7,5.8c-5-5.7-12.7-9.7-20.9-9.7C391,30.5,379,42.5,379,58.9c0,17.5,11.7,28.4,28.2,28.4
+ c7.6,0,14.6-2.7,19.7-7.5v-16H408.6z"/>
+ <path class="st0" d="M491.2,95l-21.6-30.5h-7.4V95h-9.9V22.9h21.4c11,0,24.6,5.8,24.6,20.7c0,12.3-8.8,18.4-17.6,20.3L503.6,95
+ H491.2z M473.2,31.8h-11v23.9h9c9.6,0,16.7-3.5,16.7-11.7C487.8,36.6,481.9,31.8,473.2,31.8z"/>
+ <path class="st0" d="M544.8,96.2c-21,0-37.1-16.7-37.1-37.3c0-20.6,16.1-37.3,37.1-37.3c21,0,37.1,16.7,37.1,37.3
+ C581.8,79.5,565.8,96.2,544.8,96.2z M544.8,30.5c-15.3,0-26.6,12.5-26.6,28.4s11.2,28.4,26.6,28.4s26.6-12.5,26.6-28.4
+ S560.1,30.5,544.8,30.5z"/>
+</g>
+<g>
+ <path class="st1" d="M85.9,105.4L1.8,66.2C0.7,65.7,0,64.6,0,63.4v-49c0-2.3,2.4-3.8,4.4-2.8l84.1,39.2c1.1,0.5,1.8,1.6,1.8,2.8v49
+ C90.3,104.9,88,106.4,85.9,105.4z"/>
+ <g>
+ <path class="st2" d="M88.8,52.3L0,93.7l0,20.2c0,2.3,2.4,3.8,4.4,2.8l84.1-39.2c1.1-0.5,1.8-1.6,1.8-2.8V53.6
+ c0-0.7-0.2-1.3-0.5-1.8l0,0l0,0c0,0,0,0,0,0l0,0c-0.2-0.4-0.6-0.6-1-0.9c0.2,0.2,0.3,0.4,0.3,0.7C89.1,51.9,89,52.1,88.8,52.3z"/>
+ </g>
+ <g>
+ <path class="st3" d="M1.6,64.7l88.8-41.4V3.1c0-2.3-2.4-3.8-4.4-2.8L1.8,39.5C0.7,40,0,41.1,0,42.3v21.1c0,0.7,0.2,1.3,0.5,1.8
+ l0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,0c0.2,0.4,0.6,0.6,1,0.9c-0.2-0.2-0.3-0.4-0.3-0.7C1.2,65.1,1.3,64.9,1.6,64.7z"/>
+ </g>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/mpin_menu.png b/mobile/themes/milagro/images/img/mpin_menu.png
new file mode 100644
index 0000000..afc3388
--- /dev/null
+++ b/mobile/themes/milagro/images/img/mpin_menu.png
Binary files differ
diff --git a/mobile/themes/milagro/images/img/mpin_menu.svg b/mobile/themes/milagro/images/img/mpin_menu.svg
new file mode 100644
index 0000000..e1cb4c9
--- /dev/null
+++ b/mobile/themes/milagro/images/img/mpin_menu.svg
@@ -0,0 +1,238 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_2" opacity="0.4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" width="28.01px" height="28.01px" viewBox="0 0 28.01 28.01" enable-background="new 0 0 28.01 28.01"
+ xml:space="preserve">
+<g>
+ <g>
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.0737" y1="-0.0337" x2="14.0737" y2="28.1147">
+ <stop offset="0" style="stop-color:#B0B0B0"/>
+ <stop offset="1" style="stop-color:#171717"/>
+ </linearGradient>
+ <path fill="url(#SVGID_1_)" d="M28.148,26.453c0,0.918-0.744,1.661-1.662,1.661H1.663C0.744,28.114,0,27.371,0,26.453V1.628
+ C0,0.71,0.744-0.034,1.663-0.034h24.823c0.918,0,1.662,0.744,1.662,1.662V26.453z"/>
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="14.0737" y1="-0.0337" x2="14.0737" y2="28.1147">
+ <stop offset="0" style="stop-color:#FFFFFF"/>
+ <stop offset="1" style="stop-color:#D1D3D4"/>
+ </linearGradient>
+ <path fill="url(#SVGID_2_)" d="M25.937,2.178v23.725H2.211V2.178H25.937 M26.486-0.034H1.663C0.744-0.034,0,0.71,0,1.628v24.825
+ c0,0.918,0.744,1.661,1.663,1.661h24.823c0.918,0,1.662-0.743,1.662-1.661V1.628C28.148,0.71,27.404-0.034,26.486-0.034
+ L26.486-0.034z"/>
+ </g>
+ <g>
+ <defs>
+ <path id="SVGID_3_" d="M25.456,23.92c0,0.83-0.673,1.502-1.503,1.502H1.504C0.673,25.422,0,24.75,0,23.92V1.469
+ c0-0.83,0.673-1.503,1.504-1.503h22.449c0.83,0,1.503,0.673,1.503,1.503V23.92z"/>
+ </defs>
+ <clipPath id="SVGID_4_">
+ <use xlink:href="#SVGID_3_" overflow="visible"/>
+ </clipPath>
+ <g opacity="0.1" clip-path="url(#SVGID_4_)">
+
+ <image overflow="visible" width="466" height="477" xlink:href="data:image/png;base64,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" transform="matrix(0.24 0 0 0.24 -42.9062 -64.6206)">
+ </image>
+ </g>
+ </g>
+ <path fill="#487C94" d="M26.841,25.23c0,0.83-0.673,1.502-1.503,1.502H2.889c-0.831,0-1.504-0.672-1.504-1.502V2.78
+ c0-0.83,0.673-1.503,1.504-1.503h22.449c0.83,0,1.503,0.673,1.503,1.503V25.23z"/>
+ <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="14.1128" y1="1.2769" x2="14.1128" y2="26.7329">
+ <stop offset="0" style="stop-color:#B0B0B0"/>
+ <stop offset="1" style="stop-color:#030303"/>
+ </linearGradient>
+ <path opacity="0.87" fill="url(#SVGID_5_)" stroke="#FFFFFF" stroke-width="0.5636" stroke-miterlimit="10" d="M26.841,25.23
+ c0,0.83-0.673,1.502-1.503,1.502H2.889c-0.831,0-1.504-0.672-1.504-1.502V2.78c0-0.83,0.673-1.503,1.504-1.503h22.449
+ c0.83,0,1.503,0.673,1.503,1.503V25.23z"/>
+ <g>
+ <g>
+ <rect x="6.363" y="7.807" fill="#808285" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.367" y="7.807" fill="#808285" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.363" y="11.537" fill="#808285" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.367" y="11.537" fill="#808285" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.363" y="15.269" fill="#808285" width="1.562" height="1.561"/>
+ <g>
+ <rect x="10.367" y="15.269" fill="#808285" width="11.576" height="1.561"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.363" y="18.997" fill="#808285" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.367" y="18.997" fill="#808285" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ </g>
+ <g>
+ <g>
+ <rect x="6.065" y="7.45" fill="#FFFFFF" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.069" y="7.45" fill="#FFFFFF" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.065" y="11.18" fill="#FFFFFF" width="1.562" height="1.562"/>
+ <g>
+ <rect x="10.069" y="11.18" fill="#FFFFFF" width="11.576" height="1.562"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.065" y="14.911" fill="#FFFFFF" width="1.562" height="1.561"/>
+ <g>
+ <rect x="10.069" y="14.911" fill="#FFFFFF" width="11.576" height="1.561"/>
+ </g>
+ </g>
+ <g>
+ <rect x="6.065" y="18.642" fill="#FFFFFF" width="1.562" height="1.561"/>
+ <g>
+ <rect x="10.069" y="18.642" fill="#FFFFFF" width="11.576" height="1.561"/>
+ </g>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/phone.svg b/mobile/themes/milagro/images/img/phone.svg
new file mode 100644
index 0000000..1f243b3
--- /dev/null
+++ b/mobile/themes/milagro/images/img/phone.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 141.732 141.732" height="141.732px" id="Livello_1" version="1.1" viewBox="0 0 141.732 141.732" width="141.732px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Livello_12"><path fill="#fff" d="M108.225,118.226h-66.22V10.889h66.22V118.226z M69.962,129.125c0-2.951,2.37-5.345,5.294-5.345 c2.925,0,5.294,2.394,5.294,5.345c0,2.95-2.369,5.348-5.294,5.348C72.332,134.469,69.962,132.075,69.962,129.125 M112.668,133.976 h0.009V5.341V5.34V5.314h-0.002C112.661,2.377,110.278,0,107.336,0c-0.021,0-0.038,0.002-0.057,0.002V0H95.282h-35H42.894 c-2.938,0.002-5.319,2.379-5.335,5.314h-0.001v128.661h0.008c-0.002,0.056-0.008,0.111-0.008,0.169 c0,2.878,2.419,5.212,5.404,5.212c0.044,0,0.087-0.006,0.131-0.007v0.007h64.316l0,0c2.904,0,5.267-2.333,5.267-5.212 C112.677,134.087,112.67,134.031,112.668,133.976"/></g><g id="Livello_1_1_"/></svg>
\ No newline at end of file
diff --git a/mobile/themes/milagro/images/img/rotate.svg b/mobile/themes/milagro/images/img/rotate.svg
new file mode 100644
index 0000000..f52bab8
--- /dev/null
+++ b/mobile/themes/milagro/images/img/rotate.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px"
+ height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
+<g id="Layer_1" display="none">
+
+ <image display="inline" overflow="visible" width="191" height="178" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL8AAACyCAYAAAATdB7YAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
+bWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
+bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
+eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEz
+NDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
+dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
+dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
+IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
+ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
+cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNl
+SUQ9InhtcC5paWQ6QUZCQjAxNjM2Q0VCMTFFMkExMkRDQkU5NDg5MDM5NTgiIHhtcE1NOkRvY3Vt
+ZW50SUQ9InhtcC5kaWQ6QUZCQjAxNjQ2Q0VCMTFFMkExMkRDQkU5NDg5MDM5NTgiPiA8eG1wTU06
+RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBRkJCMDE2MTZDRUIxMUUyQTEy
+RENCRTk0ODkwMzk1OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBRkJCMDE2MjZDRUIxMUUy
+QTEyRENCRTk0ODkwMzk1OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w
+bWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj4pGz0AAA1JSURBVHja7J0LUFTXGcfPhtUuD50ViRIc
+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" transform="matrix(1 0 0 1 54 61)">
+ </image>
+</g>
+<g id="Layer_2">
+ <polygon fill="#FFFFFF" points="144.037,94.329 131.005,101.854 117.974,109.377 117.974,94.329 117.974,79.281 131.005,86.805
+ "/>
+ <path fill="#FFFFFF" d="M79.302,140.827c0-22.652,18.363-41.015,41.015-41.015c1.097,0,2.18,0.056,3.255,0.141V87.681
+ c-1.078-0.065-2.161-0.108-3.255-0.108c-29.412,0-53.255,23.843-53.255,53.255H79.302z"/>
+ <path fill="#939598" d="M172.011,228.664H87.076V149.08l70.351,0v-10.338l-86.463,0c-9.369,0-16.964,7.594-16.964,16.963v66.332
+ C54,231.406,61.595,239,70.964,239h101.046V228.664z M74.672,193.521c-2.57,0-4.652-2.082-4.652-4.652
+ c0-2.568,2.083-4.65,4.652-4.65c2.568,0,4.651,2.082,4.651,4.65C79.323,191.439,77.241,193.521,74.672,193.521z"/>
+ <path fill="#FFFFFF" d="M232.795,58.335h-66.331c-9.369,0-16.964,7.595-16.964,16.964v146.737c0,9.368,7.595,16.964,16.964,16.964
+ h66.331c9.37,0,16.964-7.596,16.964-16.964V75.299C249.759,65.93,242.165,58.335,232.795,58.335z M199.631,74.355
+ c2.568,0,4.65,2.083,4.65,4.652c0,2.568-2.082,4.651-4.65,4.651c-2.57,0-4.652-2.083-4.652-4.651
+ C194.979,76.438,197.061,74.355,199.631,74.355z M199.631,227.845c-5.709,0-10.337-4.626-10.337-10.334
+ c0-5.71,4.628-10.337,10.337-10.337c5.707,0,10.335,4.627,10.335,10.337C209.966,223.219,205.338,227.845,199.631,227.845z
+ M239.422,200.974h-79.586V91.411h79.586V200.974z"/>
+</g>
+</svg>
diff --git a/mobile/themes/milagro/images/img/screen-purple.svg b/mobile/themes/milagro/images/img/screen-purple.svg
new file mode 100644
index 0000000..8a2bc15
--- /dev/null
+++ b/mobile/themes/milagro/images/img/screen-purple.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 360 611.9 612" enable-background="new 0 360 611.9 612" xml:space="preserve">
+<path fill="#868AAC" d="M573.8,360H38.2C17.1,360,0,377.1,0,398.2V819c0,21.2,17.1,38.2,38.2,38.2h229.5v38.2H153
+ c-21.2,0-38.2,17.1-38.2,38.2V972h382.5v-38.2c0-21.2-17.1-38.2-38.2-38.2H344.2v-38.2h229.5c21.2,0,38.2-17.1,38.2-38.2v-421
+ C612,377.1,594.9,360,573.8,360z M535.5,780.8h-459V436.5h459V780.8z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/setting-white.svg b/mobile/themes/milagro/images/img/setting-white.svg
new file mode 100644
index 0000000..1506c67
--- /dev/null
+++ b/mobile/themes/milagro/images/img/setting-white.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="-49 141 512 512" enable-background="new -49 141 512 512" xml:space="preserve">
+<path fill="#FFFFFF" d="M79,525v-96l288-288h32l64,64v32L175,525H79z M223,413l176-176l-32-32L191,381L223,413z M143,429l-32,32v32
+ h32l32-32L143,429z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/settings-icon-purple.svg b/mobile/themes/milagro/images/img/settings-icon-purple.svg
new file mode 100644
index 0000000..31249e6
--- /dev/null
+++ b/mobile/themes/milagro/images/img/settings-icon-purple.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 90 1500 1500" enable-background="new 0 90 1500 1500" xml:space="preserve">
+<rect y="90" fill="#36424a" width="1500" height="375"/>
+<rect y="652.5" fill="#36424a" width="1500" height="375"/>
+<rect y="1215" fill="#36424a" width="1500" height="375"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/settings.svg b/mobile/themes/milagro/images/img/settings.svg
new file mode 100644
index 0000000..9d17837
--- /dev/null
+++ b/mobile/themes/milagro/images/img/settings.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="103.8 231 1500 1500" enable-background="new 103.8 231 1500 1500" xml:space="preserve">
+<path fill="#36424a" d="M104,1731v-375.2L1228.8,231h124.8l250,250v124.8L479.2,1731H104z M666.4,1293.4L1354,605.8L1229.2,481
+ l-687.6,687.6L666.4,1293.4z M354,1355.8l-124.8,124.8v124.8H354l124.8-124.8L354,1355.8z"/>
+</svg>
diff --git a/mobile/themes/milagro/images/img/user-purple.svg b/mobile/themes/milagro/images/img/user-purple.svg
new file mode 100644
index 0000000..fcc56bb
--- /dev/null
+++ b/mobile/themes/milagro/images/img/user-purple.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 269.9 612 612.1" enable-background="new 0 269.9 612 612.1" xml:space="preserve">
+<path fill="#36424a" d="M456.5,563.3c1.4-8.4,2.6-16.9,2.6-25.6V423c0-84.5-68.5-153-153-153s-153,68.5-153,153v114.8
+ c0,8.7,1.2,17.2,2.6,25.6C63,596.2,0,657.8,0,729v114.8C0,864.9,17.1,882,38.2,882h535.6c21.2,0,38.2-17.1,38.2-38.2V729
+ C612.1,657.8,549.1,596.2,456.5,563.3z M229.5,423c0-42.2,34.3-76.5,76.5-76.5s76.5,34.3,76.5,76.5v114.8
+ c0,42.2-34.3,76.5-76.5,76.5s-76.5-34.3-76.5-76.5V423z M535.6,805.5H76.5V729c0-41.4,44-77.2,109.5-97.4
+ c28,35.7,71.1,59.2,120,59.2s92-23.4,120-59.2c65.5,20.2,109.5,56.1,109.5,97.4V805.5z"/>
+</svg>
diff --git a/mobile/themes/milagro/sass/_template.scss b/mobile/themes/milagro/sass/_template.scss
new file mode 100644
index 0000000..f4b6c08
--- /dev/null
+++ b/mobile/themes/milagro/sass/_template.scss
@@ -0,0 +1,524 @@
+/*
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+*/
+
+// GLOBAL CONFIGS
+
+$IMAGES : "../images/img";
+$BORDERLESS : true;
+
+// Background color
+@mixin bg-color() {
+
+ background: #fff;
+
+ // Box shadow
+
+ -moz-box-shadow: inset 0 0 15px rgba(255,255,255, 0.6);
+ box-shadow: inset 0 0 15px rgba(255,255,255, 0.6);
+ -webkit-box-shadow: inset 0 0 15px rgba(255,255,255, 0.6);
+}
+
+// Font family
+
+@mixin font-family() {
+ font-family: Helvetica, sans-serif;
+}
+
+// Pin Button style
+
+@mixin pin-btn-style() {
+
+ // Remove the default button el properties
+
+ border: 0;
+ background: none;
+
+ // Text color
+
+ color: #36424a;
+ filter: glow(color=#133353, strength=4);
+
+ // Font size
+ font-size: 34pt;
+
+ padding: 0;
+ line-height: 100%;
+
+ // Active color on press
+
+ &:active {
+ background: whitesmoke;
+ }
+}
+
+@mixin pinpad() {
+ background: white;
+}
+
+@mixin pinpad-accessnumber() {
+ background: #4891dc;
+}
+
+@mixin access-number() {
+ text-align: center;
+ position: relative;
+ width: 100%;
+ font-size: 34pt;
+ color: rgb(68, 68, 68);
+ padding-top: 10px;
+ letter-spacing: 10pt;
+}
+
+@mixin circle-main() {
+ width: 20px;
+ height: 20px;
+ margin-left: 5px;
+}
+
+@mixin circles-holder() {
+ position: absolute;
+ width: 260px;
+ top: 30px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ margin:0 auto;
+}
+
+@mixin outer-circle() {
+ background: white;
+ width: 20px;
+ height: 20px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ border: 2px solid #36424a;
+ position: absolute;
+ z-index: 800;
+}
+
+@mixin inner-circle() {
+ background: #36424a;
+ width: 20px;
+ height: 20px;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ border-radius: 50%;
+ border: 2px solid #36424a;
+ position: relative;
+ z-index: 801;
+}
+
+@mixin account-top-bar() {
+ color: black;
+ background: #eeeeee; /* Old browsers */
+ transition: all .5s ease-in-out;
+}
+
+// Top bar
+
+@mixin top-bar(){
+ background-color: #36424a;
+ border-bottom: 1px solid #828284;
+ // -webkit-box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.6);
+}
+
+@mixin header-bar(){
+ background-color: #36424a;
+ border-bottom: 1px solid #828284;
+}
+
+@mixin footer(){
+ border-bottom: 10px solid #36424a;
+}
+
+// Input pin field
+
+@mixin pin-screen() {
+
+ color: black;
+ border: 0;
+ -webkit-text-fill-color: black;
+ -webkit-border-radius: 0.1em;
+ -moz-border-radius: 0.1em;
+ -ms-border-radius: 0.1em;
+ -o-border-radius: 0.1em;
+ border-radius: 0.1em;
+
+ font-size: 114%;
+
+ min-height: 2.5em;
+}
+
+// User
+
+@mixin mpin-user() {
+ color: black;
+ font-size: 114%;
+ display: inline-block;
+ width: 90%;
+ height: 20px;
+}
+
+
+@mixin mpin-menu() {
+ background: url('#{$IMAGES}/settings-icon-purple.svg') top left no-repeat;
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ margin-right: 10px;
+}
+
+@mixin mpin-menu-close() {
+ background: url('#{$IMAGES}/arrow-icon-purple.svg') top left no-repeat;
+ background-repeat: no-repeat;
+ // background-size: auto 100%;
+ width: 16px;
+ height: 16px;
+}
+
+@mixin powered-by() {
+ background-image: url('#{$IMAGES}/milagro.svg');
+ color: white;
+ height: 12px;
+ background-repeat: no-repeat;
+ background-position: right;
+ background-size: auto 100%;
+
+ @include box-flex-value(1.0);
+}
+
+@mixin mpin-logo() {
+ background-image: url('#{$IMAGES}/blank-footer.svg');
+ height: 20px;
+ background-repeat: no-repeat;
+ background-position: left;
+ background-size: auto 100%;
+ margin: 5px 10px 5px 0px;
+
+ @include box-flex-value(1.0);
+}
+
+// Mixin home icon
+
+@mixin home-icon() {
+ background-image: url('#{$IMAGES}/home.svg');
+
+ width: 100%;
+ height: 16px;
+
+ background-repeat: no-repeat;
+ background-position: left;
+
+ margin:0;
+
+ background-size: auto 100%;
+ left: 0;
+ right: 0;
+ top: 10px;
+ align-self: flex-start;
+ float: left;
+ @include box-flex-value(1.0);
+}
+
+@mixin custom-logo() {
+ width: 100%;
+ height: 32px;
+
+ background-image: url('#{$IMAGES}/blank.svg');
+
+ background-repeat: no-repeat;
+ background-position: right;
+ background-size: auto 100%;
+ margin: 5px 10px 5px 0px;
+
+ @include box-flex-value(1.0);
+}
+
+@mixin logo() {
+ width: 183px;
+ height: 69px;
+ background-image: url('#{$IMAGES}/m-pin-header-logo.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ margin: 5px 10px 5px 0px;
+
+ display: block;
+ @include box-flex-value(1.0);
+ width: 100%;
+}
+
+@mixin menu-icon() {
+ width: 28px;
+ height: 28px;
+ background-image: url('#{$IMAGES}/mpin_menu.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+
+ @include box-flex-value(1.0);
+}
+
+
+@mixin mobile-icon() {
+ width: 50px !important;
+ height: 42px !important;
+ background-image: url('#{$IMAGES}/phone.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
+ // margin: 5px 10px 5px 0px;
+
+ margin: 0 auto;
+
+ @include box-flex-value(1.0);
+}
+
+@mixin mpin-button() {
+ -moz-transition: all 0.5s ease 0s;
+ border-radius: 0.3em 0.3em 0.3em 0.3em;
+ background: #36424a;
+ cursor: pointer;
+ color: #FFFFFF;
+ font-family: 'Helvetica', serif;
+ font-weight: normal;
+ height: auto;
+ min-height: 1.8em;
+ margin-top: 10px;
+ border: none;
+ border-bottom: 3px solid #36424a;
+
+ padding: 13px 10px 10px;
+
+ &.green {
+ background: #44A800;
+ }
+
+ &.grey {
+ background: #7E7E7E;
+ }
+
+ &.white {
+ background: white;
+ border: none;
+ border-bottom: 3px solid #cccccc;
+ color: #36424a;
+ }
+
+ &.danger {
+ background: #ef984a;
+ border: none;
+ border-bottom: 3px solid #bf360c;
+ color: white;
+ }
+}
+
+@mixin identity-container() {
+ color: black;
+}
+
+@mixin bottom-holder() {
+
+ background-position: initial initial;
+ background-repeat: initial initial;
+
+ padding-top: 5px;
+ padding-bottom: 5px;
+
+}
+
+
+@mixin central-text() {
+ color: #444;
+ font-size: 4vh;
+ width: 100%;
+ text-align: center;
+}
+
+@mixin input-heading(){
+
+ padding: 0px 0px 5px 0px;
+ font-size: 4vh;
+ width: 100% !important;
+ text-shadow: rgba(255,255,255,0.25) 0 0.08em 0;
+
+ span {
+ text-align: center;
+ color: black;
+ background: transparent;
+ padding: 0px 0px 5px 0px;
+ text-shadow: rgba(255,255,255,0.25) 0 0.08em 0;
+ text-shadow: #fff 0 1px 1px;
+ font-size: .8em;
+ font-weight: normal;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ }
+
+}
+
+@mixin email-input() {
+ color: black;
+ font-size: 18px;
+ font-weight: normal;
+ background: #fff;
+ width: 100%;
+ background: #fff;
+ width: 100%;
+ padding: .4em;
+ min-height: 2.5em;
+ border: 1px solid #36424a;
+ font-style: italic;
+ border-radius: 0;
+ -webkit-border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ display: table-cell;
+}
+
+@mixin device-input() {
+ color: black;
+ font-size: 18px;
+ font-weight: normal;
+ background: #fff;
+ width: 100%;
+ background: #fff;
+ width: 100%;
+ padding: .4em;
+ min-height: 2.5em;
+ border: 1px solid #36424a;
+ font-style: italic;
+ border-radius: 0;
+
+ -webkit-border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -moz-border-radius-topright: 4px;
+ -moz-border-radius-bottomright: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+@mixin top-heading() {
+ color: #36424a;
+ padding: 3vh;
+ font-size: 5vh;
+}
+
+@mixin central-heading() {
+ color: white;
+ font-size: 4vh;
+ width: 100%;
+ text-align: center;
+}
+
+@mixin body-text() {
+ padding: 2vh !important;
+ color: black;
+ text-align: center;
+ font-size: 3vh;
+}
+
+@mixin mpin-copyright() {
+ width: 97px;
+ height: 13px;
+ margin: 10px 0px 10px 10px;
+}
+
+@mixin arrow-icon() {
+ background-image: url('#{$IMAGES}/arrow.svg');
+ width: 1.5em;
+ height: 1.5em;
+ padding: 20px;
+}
+
+@mixin btn-text-label() {
+ margin-right: .6em;
+ font-weight: bold;
+ line-height: 1.2em;
+}
+
+
+@mixin user-label () {
+ width: 40px !important;
+ height: 20px !important;
+ background-image: url('#{$IMAGES}/user-purple.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 40%;
+}
+
+@mixin device-label () {
+ width: 40px !important;
+ height: 20px !important;
+ background-image: url('#{$IMAGES}/device-purple.svg');
+
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 40%;
+}
+
+// Settings image in identity
+
+@mixin account-list() {
+ // Style rounded
+
+ color: #36424a;
+ margin-left: 10px;
+ margin-right: 10px;
+ border-radius: 4px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background-color: white;
+}
+
+
+@mixin settings-item() {
+ color: white;
+ background: #36424a;
+ box-shadow: inset 5px 0 0 #36424a;
+}
+
+@mixin settings-img() {
+ background-image: url('#{$IMAGES}/settings.svg');
+ width: 90%;
+ height: 90%;
+ background-repeat: no-repeat;
+ display: block;
+ position: relative;
+ top: 5px;
+ right: 5px;
+}
+
+@mixin settings-img-active() {
+ background-image: url('#{$IMAGES}/setting-white.svg') !important;
+ width: 90%;
+ height: 90%;
+ background-repeat: no-repeat;
+ display: block;
+ position: relative;
+ top: 5px;
+ right: 5px;
+}
diff --git a/mobile/themes/milagro/views/access-denied.handlebars b/mobile/themes/milagro/views/access-denied.handlebars
new file mode 100644
index 0000000..347e83b
--- /dev/null
+++ b/mobile/themes/milagro/views/access-denied.handlebars
@@ -0,0 +1,38 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'accessdenied_header' }}
+ </div>
+
+ <div class="identityBodyText">
+ <p>
+ {{hlp 'accessdenied_text' }} <span style="color: red;"> {{data.email}} </span> {{hlp 'accessdenied_text_cont' }}
+ </p>
+ <p>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+ <div class="mpinBtn" id="mp_action_register">
+ <span class="btnLabel">{{hlp 'accessdenied_btn' }} </span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/accounts-panel-not-active.handlebars b/mobile/themes/milagro/views/accounts-panel-not-active.handlebars
new file mode 100644
index 0000000..42f54b2
--- /dev/null
+++ b/mobile/themes/milagro/views/accounts-panel-not-active.handlebars
@@ -0,0 +1,17 @@
+<!-- Home/Top Nav Bar -->
+
+<div id="mp_accountListView" class="PinPadListViewSkin notActive">
+ <div class="mp_customScrollBox">
+ <div class="mp_container">
+ <div id="mp_accountContent" class="mp_content"></div>
+ </div>
+ </div>
+</div>
+
+<div id="buttonsContainer">
+
+ <div class="mpinBtn white" id="mp_go_back">
+ <span class="btnLabel">Go back</span>
+ </div>
+
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/accounts-panel.handlebars b/mobile/themes/milagro/views/accounts-panel.handlebars
new file mode 100644
index 0000000..6289edc
--- /dev/null
+++ b/mobile/themes/milagro/views/accounts-panel.handlebars
@@ -0,0 +1,17 @@
+<!-- Home/Top Nav Bar -->
+
+<div id="mp_accountListView" class="PinPadListViewSkin">
+ <div class="mp_customScrollBox">
+ <div class="mp_container">
+ <div id="mp_accountContent" class="mp_content"></div>
+ </div>
+ </div>
+</div>
+
+<div id="buttonsContainer">
+
+ <div class="mpinBtn white" id="mp_acclist_adduser">
+ <span class="btnLabel">{{hlp 'noaccount_button_add'}}</span>
+ </div>
+
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/activate-identity.handlebars b/mobile/themes/milagro/views/activate-identity.handlebars
new file mode 100644
index 0000000..dc8e5be
--- /dev/null
+++ b/mobile/themes/milagro/views/activate-identity.handlebars
@@ -0,0 +1,50 @@
+<!-- User section -->
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+
+ <div class="identityBodyText">
+ <p>
+ {{hlp 'setupReady_text1' }}
+ <span class="email">
+ {{data.email}}
+ </span>
+ </p>
+ <p>
+ {{hlp 'setupReady_text2' }}
+ </p>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+
+ <div class="mpinBtn" id="mpin_action_setup">
+ <span class="btnLabel">{{hlp 'setupReady_button_go' }}</span>
+ </div>
+
+ <div class="mpinBtn" id="mpin_action_resend">
+ <span class="btnLabel">{{hlp 'setupReady_button_resend' }}</span>
+ </div>
+
+ <div class="mpinBtn" id="mpin_accounts">
+ <span class="btnLabel">
+ {{hlp 'setupNotReady_button_back' }}
+ </span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/delete-panel.handlebars b/mobile/themes/milagro/views/delete-panel.handlebars
new file mode 100644
index 0000000..3eeede1
--- /dev/null
+++ b/mobile/themes/milagro/views/delete-panel.handlebars
@@ -0,0 +1,33 @@
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="mp_container">
+ <div class="mp_headerFrame">
+ <div class="mp_alertTitle">
+ {{hlp 'account_delete_question'}}
+ </div>
+ <div class="mp_accountField">
+ {{data.name}}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+
+ <div class="mpinBtn danger" id="mp_acclist_deluser">
+ <span class="btnLabel">{{hlp 'account_delete_button'}}</span>
+ </div>
+
+ <div class="mpinBtn white" id="mp_acclist_cancel">
+ <span class="btnLabel">{{hlp 'account_button_cancel'}}</span>
+ </div>
+
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/help-helphub.handlebars b/mobile/themes/milagro/views/help-helphub.handlebars
new file mode 100644
index 0000000..134f15a
--- /dev/null
+++ b/mobile/themes/milagro/views/help-helphub.handlebars
@@ -0,0 +1,10 @@
+<p>This is the help hub</p>
+
+<div id="buttonsContainer">
+ <div class="mpinBtn green" id="ok_dismiss">
+ <span class="btnLabel">{{hlp 'help_ok_btn'}}</span>
+ </div>
+ <div class="mpinBtn grey" id="show_more">
+ <span class="btnLabel">{{hlp 'help_more_btn'}}</span>
+ </div>
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/help-setup-home.handlebars b/mobile/themes/milagro/views/help-setup-home.handlebars
new file mode 100644
index 0000000..3d79354
--- /dev/null
+++ b/mobile/themes/milagro/views/help-setup-home.handlebars
@@ -0,0 +1,10 @@
+<p>{{hlp 'help_text_1'}}</p>
+
+<div id="buttonsContainer">
+ <div class="mpinBtn green" id="ok_dismiss">
+ <span class="btnLabel">{{hlp 'help_ok_btn'}}</span>
+ </div>
+ <div class="mpinBtn grey" id="show_more">
+ <span class="btnLabel">{{hlp 'help_more_btn'}}</span>
+ </div>
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/helphub-details.handlebars b/mobile/themes/milagro/views/helphub-details.handlebars
new file mode 100644
index 0000000..4478466
--- /dev/null
+++ b/mobile/themes/milagro/views/helphub-details.handlebars
@@ -0,0 +1,13 @@
+<div id="list">
+ <h1>What details will I need to provide?</h1>
+
+ <p>
+ You will simply need to provide an <red>[email address]</red> in order to set up your identity. You will receive an activation email to complete the set up process.
+ </p>
+
+ <p>
+ You will also need to create a PIN number, this will be a secret <red>[4 digit]</red> code known only to you which you will use login to the service.
+ </p>
+
+ <button id="return">Return to Help Hub</button>
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/helphub-index.handlebars b/mobile/themes/milagro/views/helphub-index.handlebars
new file mode 100644
index 0000000..57ceff9
--- /dev/null
+++ b/mobile/themes/milagro/views/helphub-index.handlebars
@@ -0,0 +1,12 @@
+<div id="list">
+ <h1>M-Pin Help hub</h1>
+
+ <ul>
+ <li><a id="first" href="#">What is the difference between signing in with the browser or with Smartphone?</a></li>
+ <li><a id="second" href="#">Which is the most secure method to sign in?</a></li>
+ <li><a id="details" href="#">What details will I need to provide?</a></li>
+ <li><a id="forth" href="#"> Who can see my identity?</a></li>
+ </ul>
+
+ <button id="exit">Exit Help Hub and return to the previous page</button>
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/home.handlebars b/mobile/themes/milagro/views/home.handlebars
new file mode 100644
index 0000000..f504eef
--- /dev/null
+++ b/mobile/themes/milagro/views/home.handlebars
@@ -0,0 +1,21 @@
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+<div id="homeIcon">
+ <div id="mobileIcon"></div>
+</div>
+<div id="buttonsContainer">
+ <div class="mpinBtn" id="mpin_authenticate">
+ <span class="btnLabel">{{hlp 'home_button_authenticateMobile'}}</span>
+ </div>
+ <div class="mpinBtn" id="getPassword">
+ <span class="btnLabel">Get One-Time Password</span>
+ </div>
+ <div class="mpinBtn" id="deviceIdentity">
+ <span class="btnLabel">{{hlp 'home_button_setupMobile'}}</span>
+ </div>
+
+</div>
+<footer id="mpinFooter">
+ <div id="homeBtn"></div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/home_mobile.handlebars b/mobile/themes/milagro/views/home_mobile.handlebars
new file mode 100644
index 0000000..20cf844
--- /dev/null
+++ b/mobile/themes/milagro/views/home_mobile.handlebars
@@ -0,0 +1,20 @@
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+<div id="homeIcon">
+ <div id="mobileIcon"></div>
+</div>
+<div id="buttonsContainer">
+ <h1>{{hlp 'home_button_authenticateMobile_intro'}}</h1>
+ <div class="mpinBtn green" id="mpin_authenticate">
+ <span class="btnLabel">{{hlp 'home_button_authenticateMobile_noTrust'}}</span>
+ </div>
+ <h2>or</h2>
+ <div class="mpinBtn" id="mpin_authenticate">
+ <span class="btnLabel">{{hlp 'home_button_authenticateMobile_trust'}}</span>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn"></div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/identity-not-active.handlebars b/mobile/themes/milagro/views/identity-not-active.handlebars
new file mode 100644
index 0000000..4dafc5e
--- /dev/null
+++ b/mobile/themes/milagro/views/identity-not-active.handlebars
@@ -0,0 +1,47 @@
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="identityBodyText">
+ <p>
+ {{hlp 'setupReady_text1' }}
+ <span class="email">
+ {{data.email}}
+ </span>
+ </p>
+ <p>
+ {{hlp 'setupReady_text2' }}
+ </p>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+ <div class="mpinBtn" id="mpin_action_setup">
+ <span class="btnLabel">{{hlp 'setupReady_button_go' }}</span>
+ </div>
+
+ <div class="mpinBtn" id="mpin_action_resend">
+ <span class="btnLabel">{{hlp 'setupReady_button_resend' }}</span>
+ </div>
+
+ <div class="mpinBtn" id="mpin_accounts">
+ <span class="btnLabel">
+ {{hlp 'setupNotReady_button_back' }}
+ </span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/ios6-startup.handlebars b/mobile/themes/milagro/views/ios6-startup.handlebars
new file mode 100644
index 0000000..daaf8c7
--- /dev/null
+++ b/mobile/themes/milagro/views/ios6-startup.handlebars
@@ -0,0 +1,27 @@
+<!-- User section -->
+
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'mobile_splash_text'}}
+ </div>
+
+ <div class="congrats">
+ {{hlp 'mobile_add_home_ios6'}}
+ <img src='{{img 'ios6-share.png'}}'/>
+ <p>{{hlp 'mobile_add_home_ios'}}</p>
+ </div>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/ios7-startup.handlebars b/mobile/themes/milagro/views/ios7-startup.handlebars
new file mode 100644
index 0000000..580efaf
--- /dev/null
+++ b/mobile/themes/milagro/views/ios7-startup.handlebars
@@ -0,0 +1,27 @@
+<!-- User section -->
+
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'mobile_splash_text'}}
+ </div>
+
+ <div class="congrats">
+ {{hlp 'mobile_add_home_ios7'}}
+ <img src='{{img 'ios7-share.png'}}'/>
+ <p>{{hlp 'mobile_add_home_ios'}}</p>
+ </div>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/login.handlebars b/mobile/themes/milagro/views/login.handlebars
new file mode 100644
index 0000000..a586653
--- /dev/null
+++ b/mobile/themes/milagro/views/login.handlebars
@@ -0,0 +1,76 @@
+<header id="topNav">
+ <a id="mp_action_home" href="#">
+ <div id="homeBtn"></div>
+ </a>
+ </div>
+ <div id="mpinLogo"></div>
+</header>
+<div id="accountTopBar">
+ <div id="mpinUser">
+ <p><%= email %></p>
+ </div>
+ <div id="menuBtn"></div>
+</div>
+
+<div id="pinsHolder">
+
+ <div id="inputContainer">
+ <input id="pinpad-input" type="text" readonly="true" placeholder="Enter your Access Number" maxlength="mpin.pinSize">
+ </div>
+
+ <div class="pre-row">
+ <div class="row">
+ <div class="btn mp_pindigit" data-value="1">
+ <span class="label">1</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="2">
+ <span class="label">2</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="3">
+ <span class="label">3</span>
+ </div>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <div class="btn mp_pindigit" data-value="4">
+ <span class="label">4</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="5">
+ <span class="label">5</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="6">
+ <span class="label">6</span>
+ </div>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <div class="btn mp_pindigit" data-value="7">
+ <span class="label">7</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="8">
+ <span class="label">8</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="9">
+ <span class="label">9</span>
+ </div>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row bottom">
+ <div class="btn" id="mpinClear" data-value="clear">
+ <span class="label">{{hlp 'authPin_button_clear'}}</span>
+ </div>
+ <div class="btn mp_pindigit" data-value="0">
+ <span class="label">0</span>
+ </div>
+ <div class="btn" id="mpinLogin" data-value="go">
+ <span class="label">{{hlp 'authPin_button_login'}}</span>
+ </div>
+ </div>
+ </div>
+</div>
+<footer id="mpinFooter">
+ <div id="homeBtn"></div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/logout.handlebars b/mobile/themes/milagro/views/logout.handlebars
new file mode 100644
index 0000000..2f31abe
--- /dev/null
+++ b/mobile/themes/milagro/views/logout.handlebars
@@ -0,0 +1,38 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="mpinLogo">
+ </div>
+</header>
+
+<!-- User section -->
+
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'logout_text1'}}
+ </div>
+
+ </div>
+
+ <div id="buttonsContainer">
+ <div class="mpinBtn" id="mpin_action_logout">
+ <span class="btnLabel">{{hlp 'logout_button'}}</span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/offline.handlebars b/mobile/themes/milagro/views/offline.handlebars
new file mode 100644
index 0000000..a3c82bf
--- /dev/null
+++ b/mobile/themes/milagro/views/offline.handlebars
@@ -0,0 +1,23 @@
+<!-- User section -->
+
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ The app is offline
+ </div>
+
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/otp-expire.handlebars b/mobile/themes/milagro/views/otp-expire.handlebars
new file mode 100644
index 0000000..5081d75
--- /dev/null
+++ b/mobile/themes/milagro/views/otp-expire.handlebars
@@ -0,0 +1,31 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- User section -->
+
+<div id="identityContainer">
+ <div class="headerText">
+ <h2>{{hlp 'otp_expired_header'}}</h2>
+ </div>
+
+ <div id="bottomBtnHolder">
+ <button class="mpinBtn" id="mpin_login_now">
+ <span class="btnLabel">{{hlp 'otp_expired_button_home' }}</span>
+ </button>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="mpinLogo">
+ </div>
+
+ <div id="poweredBy">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/otp.handlebars b/mobile/themes/milagro/views/otp.handlebars
new file mode 100644
index 0000000..1da64d7
--- /dev/null
+++ b/mobile/themes/milagro/views/otp.handlebars
@@ -0,0 +1,44 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+{{!-- Identity text --}}
+
+<div id="addIdentity">
+ <div class="identityHeader">{{hlp 'otp_signin_header' }}</div>
+</div>
+
+<!-- User section -->
+
+<div id="identityContainer">
+ <div class="mp_headerFrame" id="otpContainer">
+ <h2>{{hlp 'otp_text1' }}</h2>
+ <div id="mpinOTPNumber" class="mp_alertTitle">
+ </div>
+ </div>
+
+ <div class='mpinTimerBox'>
+ <canvas id="mpTimer" width="41" height="41"></canvas>
+ <span class="mpLeftTime" id="mpin_seconds">35</span>
+ </div>
+
+ <div id="bottomBtnHolder">
+ <button class="mpinBtn" id="mpin_cancel">
+ <span class="btnLabel">{{hlp 'mobileGet_button_back' }}</span>
+ </button>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="mpinLogo">
+ </div>
+
+ <div id="poweredBy">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/reactivate-panel.handlebars b/mobile/themes/milagro/views/reactivate-panel.handlebars
new file mode 100644
index 0000000..dd14304
--- /dev/null
+++ b/mobile/themes/milagro/views/reactivate-panel.handlebars
@@ -0,0 +1,33 @@
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="mp_container">
+ <div class="mp_headerFrame">
+ <div class="mp_alertTitle">
+ {{hlp 'account_reactivate_question'}}
+ </div>
+ <div class="mp_accountField">
+ {{data.name}}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+
+ <div class="mpinBtn" id="mp_acclist_reactivateuser">
+ <span class="btnLabel">{{hlp 'account_reactivate_button'}}</span>
+ </div>
+
+ <div class="mpinBtn white" id="mp_acclist_cancel">
+ <span class="btnLabel">{{hlp 'account_button_cancel'}}</span>
+ </div>
+
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/setup-access.handlebars b/mobile/themes/milagro/views/setup-access.handlebars
new file mode 100644
index 0000000..e0302a6
--- /dev/null
+++ b/mobile/themes/milagro/views/setup-access.handlebars
@@ -0,0 +1,86 @@
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<div id="accountTopBar">
+ <div id="mpinUser">
+ <p>{{data.email}}</p>
+ </div>
+ <a href="#" id="menuBtn"></a>
+</div>
+
+<div id="inputContainer">
+ <div id="codes">{{hlp 'pinpad_placeholder_text2'}}</div>
+ <div id="accNumHolder" style="display: none;"></div>
+</div>
+
+<div id="pinsHolder" class="access-number">
+
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="1">
+ 1
+ </button>
+ <button class="btn" data-value="2">
+ 2
+ </button>
+ <button class="btn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="4">
+ 4
+ </button>
+ <button class="btn" data-value="5">
+ 5
+ </button>
+ <button class="btn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="7">
+ 7
+ </button>
+ <button class="btn" data-value="8">
+ 8
+ </button>
+ <button class="btn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row bottom">
+ <button class="btnClear disabled" data-value="clear" id="mpinClear">
+ Clear
+ <!-- <span class="label">clear</span> -->
+ </button>
+ <button class="btn" data-value="0">
+ 0
+ </button>
+ <button class="btnLogin disabled" data-value="go" id="mpinLogin">
+ Next
+ <!-- <span class="label">login</span> -->
+ </button>
+ </div>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="mpinLogo">
+ <a href="#" id="openHelpHub"></a>
+ </div>
+
+ <div id="poweredBy">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/setup-done.handlebars b/mobile/themes/milagro/views/setup-done.handlebars
new file mode 100644
index 0000000..3cff089
--- /dev/null
+++ b/mobile/themes/milagro/views/setup-done.handlebars
@@ -0,0 +1,46 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'setupDone_header'}}
+ </div>
+
+ <div class="identityBodyText">
+ <p>
+ {{hlp 'setupDone_text1'}}
+ <span class="mp_accountField">
+ {{data.userId}}
+ </span>
+ </p>
+ <p>
+ {{hlp 'setupDone_text2'}}
+ </p>
+ <p>
+ {{hlp 'setupDone_text3'}}
+ </p>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+ <div class="mpinBtn" id="mp_action_go">
+ <span class="btnLabel">{{hlp 'setupDone_button_go'}}</span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/setup-home.handlebars b/mobile/themes/milagro/views/setup-home.handlebars
new file mode 100644
index 0000000..aad4eb6
--- /dev/null
+++ b/mobile/themes/milagro/views/setup-home.handlebars
@@ -0,0 +1,58 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- User section -->
+
+<div id="addIdentity">
+ <div class="identityHeader">{{hlp 'setup_header' }}</div>
+</div>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+ <div class="inputContainer">
+
+ <div class="identityElHolder">
+ <div class="identityInput">
+ <div>
+ <label class="inputLabel" for="email">{{hlp 'setup_text1' }}</label>
+ <div class="inputGroup">
+ <div class="userLabel"></div>
+ <input type="email" id="emailInput" placeholder="" name="email" value="{{ data.userId }}">
+ </div>
+ {{#if data.setDeviceName}}
+ <label class="inputLabel" for="deviceInput">{{hlp 'setup_device_label' }}</label>
+ <div class="inputGroup">
+ <div class="deviceLabel"></div>
+ <input type="text" id="deviceInput" placeholder="" value="" name="deviceInput">
+ </div>
+ {{/if}}
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ <div id="bottomBtnHolder">
+ <button class="mpinBtn" id="mp_action_setup">
+ <span class="btnLabel">{{hlp 'setup_button_setup' }}</span>
+ </button>
+ </div>
+
+ {{!-- <info id="info"><i></i>Not sure which option to choose?</info> --}}
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="mpinLogo">
+ </div>
+
+ <div id="poweredBy">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/setup-pin.handlebars b/mobile/themes/milagro/views/setup-pin.handlebars
new file mode 100644
index 0000000..3a6d261
--- /dev/null
+++ b/mobile/themes/milagro/views/setup-pin.handlebars
@@ -0,0 +1,91 @@
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<div id="accountTopBar">
+ <div id="mpinUser">
+ <p>{{data.email}}</p>
+ </div>
+</div>
+
+<div id="inputContainer">
+
+ <div id="codes">{{hlp 'pinpad_placeholder_setup'}}</div>
+ <div id="circlesHolder">
+ {{#loop data.pinSize}}
+ <div class="circle" id="mpin_circle_{{this}}">
+ <div class="outer-circle">
+ </div>
+ </div>
+ {{/loop}}
+ </div>
+
+</div>
+
+<div id="pinsHolder">
+
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="1">
+ 1
+ </button>
+ <button class="btn" data-value="2">
+ 2
+ </button>
+ <button class="btn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="4">
+ 4
+ </button>
+ <button class="btn" data-value="5">
+ 5
+ </button>
+ <button class="btn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="7">
+ 7
+ </button>
+ <button class="btn" data-value="8">
+ 8
+ </button>
+ <button class="btn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row bottom">
+ <button class="btnClear disabled" data-value="clear" id="mpinClear">
+ {{hlp 'clear'}}
+ </button>
+ <button class="btn" data-value="0">
+ 0
+ </button>
+ <button class="btnLogin disabled" data-value="go" id="mpinLogin">
+ {{hlp 'setup'}}
+ </button>
+ </div>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="mpinLogo">
+ <a href="#" id="openHelpHub"></a>
+ </div>
+
+ <div id="poweredBy">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/setup.handlebars b/mobile/themes/milagro/views/setup.handlebars
new file mode 100644
index 0000000..83f389d
--- /dev/null
+++ b/mobile/themes/milagro/views/setup.handlebars
@@ -0,0 +1,92 @@
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<div id="accountTopBar">
+ <div id="mpinUser">
+ <p>{{data.email}}</p>
+ </div>
+ <a href="#" id="menuBtn"></a>
+</div>
+
+<div id="inputContainer">
+
+ <div id="codes">{{hlp 'pinpad_placeholder_text'}}</div>
+ <div id="circlesHolder">
+ {{#loop data.pinSize}}
+ <div class="circle" id="mpin_circle_{{this}}">
+ <div class="outer-circle">
+ </div>
+ </div>
+ {{/loop}}
+ </div>
+
+</div>
+
+<div id="pinsHolder">
+
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="1">
+ 1
+ </button>
+ <button class="btn" data-value="2">
+ 2
+ </button>
+ <button class="btn" data-value="3">
+ 3
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="4">
+ 4
+ </button>
+ <button class="btn" data-value="5">
+ 5
+ </button>
+ <button class="btn" data-value="6">
+ 6
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row">
+ <button class="btn" data-value="7">
+ 7
+ </button>
+ <button class="btn" data-value="8">
+ 8
+ </button>
+ <button class="btn" data-value="9">
+ 9
+ </button>
+ </div>
+ </div>
+ <div class="pre-row">
+ <div class="row bottom">
+ <button class="btnClear disabled" data-value="clear" id="mpinClear">
+ {{hlp 'clear'}}
+ </button>
+ <button class="btn" data-value="0">
+ 0
+ </button>
+ <button class="btnLogin disabled" data-value="go" id="mpinLogin">
+ {{hlp 'sign_in'}}
+ </button>
+ </div>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="mpinLogo">
+ <a href="#" id="openHelpHub"></a>
+ </div>
+
+ <div id="poweredBy">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/success-login.handlebars b/mobile/themes/milagro/views/success-login.handlebars
new file mode 100644
index 0000000..0b704c7
--- /dev/null
+++ b/mobile/themes/milagro/views/success-login.handlebars
@@ -0,0 +1,41 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="logo">
+ </div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'success_header'}}
+ </div>
+
+ <div class="identityBodyText">
+ <p>
+ {{hlp 'success_text'}}
+ <span class="mp_accountField">
+ {{data.email}}
+ </span>
+ </p>
+ <p>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+ <div class="mpinBtn" id="mp_action_logout">
+ <span class="btnLabel" id="btnLabelText">{{hlp 'logout_btn'}}</span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/ui-webview.handlebars b/mobile/themes/milagro/views/ui-webview.handlebars
new file mode 100644
index 0000000..3c88b81
--- /dev/null
+++ b/mobile/themes/milagro/views/ui-webview.handlebars
@@ -0,0 +1,23 @@
+<!-- User section -->
+
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="infoSmall">
+ {{hlp 'embedded_header'}}
+ <p>{{hlp 'embedded_p1'}}</p>
+ <p>{{hlp 'embedded_p2'}}</p>
+ </div>
+ </div>
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/user-row.handlebars b/mobile/themes/milagro/views/user-row.handlebars
new file mode 100644
index 0000000..c572f67
--- /dev/null
+++ b/mobile/themes/milagro/views/user-row.handlebars
@@ -0,0 +1,6 @@
+<div class="mp_titleItem">
+ {{data.name}}
+</div>
+<div id="mp_btIdSettings_" class="mp_buttonItem">
+ <a class="editImg"></a>
+</div>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/user-settings.handlebars b/mobile/themes/milagro/views/user-settings.handlebars
new file mode 100644
index 0000000..bee153c
--- /dev/null
+++ b/mobile/themes/milagro/views/user-settings.handlebars
@@ -0,0 +1,30 @@
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="mp_container">
+ <div id="mp_accountContent" class="mp_content">{{hlp 'edit_identity'}} {{data.name}}</div>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+
+ <div class="mpinBtn white" id="mp_acclist_cancel">
+ <span class="btnLabel">{{hlp 'account_button_backToList'}}</span>
+ </div>
+
+ <div class="mpinBtn white" id="mp_reactivate">
+ <span class="btnLabel">{{hlp 'account_button_reactivate'}}</span>
+ </div>
+
+ <div class="mpinBtn danger" id="mp_deluser">
+ <span class="btnLabel">{{hlp 'account_button_delete'}}</span>
+ </div>
+
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
diff --git a/mobile/themes/milagro/views/warning.handlebars b/mobile/themes/milagro/views/warning.handlebars
new file mode 100644
index 0000000..cf26402
--- /dev/null
+++ b/mobile/themes/milagro/views/warning.handlebars
@@ -0,0 +1,52 @@
+<!-- Home/Top Nav Bar -->
+
+<header id="topNav">
+ <div id="mp_action_home">
+ </div>
+ <div id="mpinLogo">
+ </div>
+</header>
+
+<!-- User section -->
+
+<header id="header">
+ <div id="mpinLogo"></div>
+</header>
+
+<!-- Input button -->
+
+<div id="identityContainer">
+
+ <div class="identityMainText">
+ <div class="congrats">
+ {{hlp 'setupDone_header'}}
+ </div>
+
+ <div class="identityBodyText">
+ <p>
+ {{hlp 'deactivated_header'}}
+ <span class="mp_accountField">
+ {{data.userId}}
+ </span>
+ </p>
+ <p>
+ {{hlp 'deactivated_text1'}}
+ </p>
+ <p>
+ {{hlp 'deactivated_text2'}}
+ </p>
+ </div>
+ </div>
+
+ <div id="buttonsContainer">
+ <div class="mpinBtn" id="mp_action_go">
+ <span class="btnLabel">{{hlp 'deactivated_button_register'}}</span>
+ </div>
+ </div>
+
+</div>
+
+<footer id="mpinFooter">
+ <div id="homeBtn">
+ </div>
+</footer>
\ No newline at end of file
