In this tutorial I will show you how to create a password manager app using Intel XDK. For designing the app we will use Intel App Framework and for encrypting passwords we will use Crypto JS.
Basic App Template
Here is the basic template code of the app. We are loading Cordova, Intel XDK, Crypto JS and App Framework.
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="https://cdn.rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/icons.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.base.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css">
</head>
<body>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/af.ui.jquery.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
<script>
</script>
</body>
</html>
App Pages
Our app will have four pages: master password form page, home page, add password page and password list page.
Here is the code to create these four pages. Put this code inside the body tag.
<div id="header">
</div>
<div id="content">
<div id="start" data-title="Master Key" class="panel" selected="true">
</div>
<div id="home" data-title="Home" class="panel">
</div>
<div id="new" data-title="Add Password" class="panel">
</div>
<div id="list" data-title="Passwords List" class="panel">
</div>
</div>
<div id="navbar">
<a href="#" class="icon question">Help</a>
</div>
</div>
Master Password Page
Everytime the app is started the master password page is shown with an input field to enter master password. This password is used to encrypt other passwords. Never store this password in file system or elsewhere because its very risky of getting leaked.
Store it in JavaScript variable every time app is started by taking it as user input.
This is the code for displaying the master password page
This is the code to store the retrieve the master password from input field and store it in a variable temporarily for purpose of encryption and decryption.
function master_password_entered()
{
master_key = document.getElementById("master_password").value;
$.ui.loadContent("#home");
}
This is how this page looks
Home Page
Home Page is display after user has entered the master password. Here we will let user choose weather he wants to add a new password or list existing passwords.
Here is the code
Here is how it looks
Add Password Page
This page displays two input fields. First one is a key to identify the password use and the password itself.
Here is the design code of this page
<div class="formGroupHead">Add a new password</div>
<form>
<input id="key" type="text" placeholder="GMail">
<input id="password" type="password" placeholder="mypassword">
<a class="button" href="javascript:add_password();">Add</a>
</form>
</div>
Here is the JavaScript which adds the encrypts the password and stores it in local storage.
{
var key = document.getElementById("key").value;
var password = document.getElementById("password").value;
var options = { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 };
var encrypted_password = CryptoJS.AES.encrypt(password, master_key, options);
localStorage.setItem(key, encrypted_password);
intel.xdk.notification.alert("Done");
$.ui.loadContent("#home");
}
This is how it looks
Password List Page
This page displays a list of all stored password with the key name. When you click on a key name the password is decrypted and displayed in an alert box.
Here is the code that executes when you press “Show Passwords” button on home screen.
{
var list = '<ul class="list">';
for(var key in localStorage)
{
list = list + '<li><a href="javascript:single_password(\'' + key + '\')">';
list = list + key;
list = list + '</a></li>';
}
list = list + '</ul>';
document.getElementById("list").innerHTML = list;
$.ui.loadContent("#list");
}
function single_password(key)
{
var options = { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 };
var decrypted_password = CryptoJS.AES.decrypt(localStorage.getItem(key), master_key, options);
var plaintext = decrypted_password.toString(CryptoJS.enc.Utf8);
intel.xdk.notification.alert("Password is: " + plaintext);
}
Here is how it looks
Complete Source Code
Here is the complete source code of the app
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="https://cdn.rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/icons.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.base.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css">
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div id="start" data-title="Master Key" class="panel" selected="true">
<div class="formGroupHead">Enter Master Password</div>
<form>
<input id="master_password" type="password" placeholder="mypassword">
<a class="button" href="javascript:master_password_entered();">Next</a>
</form>
</div>
<div id="home" data-title="Home" class="panel" style="text-align: center">
<a class="button" href="#new">Add Password</a>
<br>
<a class="button" href="javascript:list();">Show Passwords</a>
</div>
<div id="new" data-title="Add Password" class="panel">
<div class="formGroupHead">Add a new password</div>
<form>
<input id="key" type="text" placeholder="GMail">
<input id="password" type="password" placeholder="mypassword">
<a class="button" href="javascript:add_password();">Add</a>
</form>
</div>
<div id="list" data-title="Passwords List" class="panel">
</div>
</div>
<div id="navbar">
<a href="#" class="icon question">Help</a>
</div>
</div>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/af.ui.jquery.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
<script>
var master_key = null;
function master_password_entered()
{
master_key = document.getElementById("master_password").value;
$.ui.loadContent("#home");
}
function add_password()
{
var key = document.getElementById("key").value;
var password = document.getElementById("password").value;
var options = { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 };
var encrypted_password = CryptoJS.AES.encrypt(password, master_key, options);
localStorage.setItem(key, encrypted_password);
intel.xdk.notification.alert("Done");
$.ui.loadContent("#home");
}
function list()
{
var list = '<ul class="list">';
for(var key in localStorage)
{
list = list + '<li><a href="javascript:single_password(\'' + key + '\')">';
list = list + key;
list = list + '</a></li>';
}
list = list + '</ul>';
document.getElementById("list").innerHTML = list;
$.ui.loadContent("#list");
}
function single_password(key)
{
var options = { mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 };
var decrypted_password = CryptoJS.AES.decrypt(localStorage.getItem(key), master_key, options);
var plaintext = decrypted_password.toString(CryptoJS.enc.Utf8);
intel.xdk.notification.alert("Password is: " + plaintext);
}
</script>
</body>
</html>