Create a Password Manager App using Intel XDK

This post is a part 46 of Intel XDK Complete Tutorial post series.

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.

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.

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

<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>

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.

var master_key = null;
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

<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>

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 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>

Here is the JavaScript which adds the encrypts the password and stores it in local storage.

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");
}

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.

Here is how it looks

Complete Source Code

Here is the complete source code of the app

<!DOCTYPE html>
<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>

Jan 19, 2015Narayan Prusty

John

2 years ago

Im not really good with this.do you know how to create a one time authentication encryption password,that is the password has been set by the one who created the app

Reply Cancel