QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Create a Password Manager App using Intel XDK

Create a Password Manager App using Intel XDK

password-manager

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.

<!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>
   
    <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="afui">
        <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

            <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

Screen Shot 2015-01-19 at 10.22.14 pm

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

Screen Shot 2015-01-19 at 10.28.33 pm

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

Screen Shot 2015-01-19 at 10.31.37 pm

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.

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

Here is how it looks

Screen Shot 2015-01-19 at 10.58.54 pm

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
How to check if someone copied my websiteWeb Animation API Tutorial
Comments: 4
  1. John
    6 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

    ReplyCancel
  2. Krushn Dayshmookh
    7 years ago

    Narayan, you are amazing. thanks to you , I was able to learn so many things about Intel XDK

    ReplyCancel
  3. sarko
    7 years ago

    your work is amazing. God bless you

    ReplyCancel
  4. Magdelina
    7 years ago

    Apaipcretion for this information is over 9000-thank you!

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 4 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Basic App Template
  • App Pages
  • Master Password Page
  • Home Page
  • Add Password Page
  • Password List Page
  • Complete Source Code
Related Articles
  • Create a Feed Reader App using Intel XDK
  • Accessing User Phone Contacts using Intel XDK
  • Create a Camera App using Intel XDK
  • Downloading Files and Showing Progress using Intel XDK
  • Encrypting Local Data In Intel XDK
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license