index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <title>pgpNow - Instant PGP encryption and decryption in your browser</title>
    <meta name="description" content="With pgpNow you have secure PGP-based encryption right in your browser. The en- and decryption is all done inside of your local browser, you don't have to trust anybody. If you don't trust me with the code, just fork away and assure yourself. It's open source under MIT licence.">
    <meta name="author" content="Daniel Huhn">
    <meta name="keywords" content="pgp encryption browser secure open source decryption instant offline MIT licence">
        
    <link type="text/css" rel="stylesheet" href="css/groundwork.css" />
    <link type="text/css" rel="stylesheet" href="css/toastr.min.css" />
    <link type="text/css" rel="stylesheet" href="css/magnific-popup.css" />
    
    <link type="text/css" rel="stylesheet" href="css/style.css" />    
</head>
<body>
    
    <div class="padded">
        <div class="one fifth">
            <div class="row">
                <label><b>Keys</b></label>
            </div>
            <div class="row">
                <button id="showOwnKeysButton" class="block">Show my keys</button>
            </div>
            <div class="pad-top row">
                <label>People</label>
            </div>
            <div class="row">
                <select size="4" data-bind="options: partners,
                                   optionsText: 'name',
                                   value: selectedPartner"></select>
            </div>
            <div class="row">                
                <button onclick="partnerManager.showNewPartnerModal()" class="one half">+</button>
                <button onclick="partnerManager.removeSelected()" class="one half">-</button>        
            </div>
        </div>
        <div class="pad-left four fifth">
            <div class="row">
                <div class="row">
                    <label><b>Encryption</b></label>                
                </div>
                <div class="row">                
                    <div>
                        <label>
                            <span>Encrypt</span>
                            <!-- ko if: selectedPartner() -->
                            <span> for</span>
                            <b><span data-bind="text: selectedPartner().name"></span></b>
                            <!-- /ko -->
                        </label>
                    </div>                    
                </div>        
                <div class="row">
                    <div class="two third">
                        <textarea id="encryptTextArea"></textarea>
                    </div>
                    <div class="one third pad-left">
                        <div class="relative fileCryptionDragArea" id="fileEncryptionDragArea">
                            <div class="fileCryptionDragAreaContent absolute middle center">
                                <p>Drag to encrypt</p>
                            </div>
                        </div>
                    </div>
                </div>    
                <div class="row half-pad-top">
                    <button onclick="appEvents.encryptForPartner()">Encrypt</button>
                </div>
            </div>
            <div>                
                <div class="row pad-top">    
                    <label>
                        <span>Decrypt</span>
                        <!-- ko if: selectedPartner() -->
                        <span> (checking signature for</span>
                        <b><span data-bind="text: selectedPartner().name"></span></b>
                        <span>)</span>
                        <!-- /ko -->
                    </label>            
                </div>        
                <div class="row">
                    <div class="two third">
                        <textarea id="decryptTextArea"></textarea>
                    </div>
                    <div class="one third pad-left">
                        <div class="relative fileCryptionDragArea" id="fileDecryptionDragArea">
                            <div class="fileCryptionDragAreaContent absolute middle center">
                                <p>Drag to decrypt</p>
                            </div>
                        </div>
                    </div>
                </div>    
                <div class="row half-pad-top">
                    <button onclick="appEvents.decryptFromPartner()">Decrypt</button>
                </div>
            </div>                
        </div>
    </div>
    
    <div id="ownKeysBox" class="mfp-hide white-popup">
        <div class="row">
            <div class="row">
                <label title="You can give this to anybody"><b>Public key</b></label>
            </div>
            <div class="row">
                <textarea onclick="this.select()"
                          data-bind="value: own.publicKey"></textarea>
            </div>
        </div>
        <div id="showPrivateKeyLinkContainer" class="row pad-top">
            <p><a onclick="appEvents.displayPrivateKey()" href="#">Show my private key</a></p>
        </div>
        <div id="privateKeyContainer" class="hidden row pad-top">
            <div class="row">
                <label><b>Private key</b></label>
            </div>
            <div class="row">
                <p class="red box">This is your private key. You must <b>NEVER</b> give it to <b>anyone!</b></p>
            </div>
            <div class="row">
                <textarea onclick="this.select()"
                          data-bind="value: own.privateKey"></textarea>
            </div>
        </div>
    </div>
    
    <div id="editPartner" class="mfp-hide white-popup">        
        <div class="row">
            <label>Public key</label>
        </div>
        <div class="row">            
            <textarea id="partnerPublicKey"
                      data-bind="value: tmp.editPartnerPublicKey"></textarea>            
        </div>
        <div class="row pad-top">
            <div class="one half half-pad-right">
                <button class="block" onclick="partnerManager.savePartner()">Save Partner</button>
            </div>
            <div class="one half half-pad-left">
                <button class="block" onclick="modalManager.closeModal()">Cancel</button>
            </div>
        </div>        
    </div>
    
    <div id="createNewKeys" class="mfp-hide white-popup">
        <div id="welcomeGenerateNewKey">
            <div class="row">
                <h1 style="font-size: 1.5em;">Welcome to pgpNow :)</h1>
            </div>
            <div class="row">
                <p>With pgpNow you have secure PGP-based encryption right in your browser. I don't have to tell you, that it actually is open source, do I?</p>
                <p>To get started just enter your name so others know who you are (it will be stored in the public key so others can verify the messages)</p>
            </div>

            <form id="setNewUsernameForm">
                <div class="row">
                    <label><b>Enter your name</b></label>
                </div>
                <div class="row">
                    <input id="newUsernameInput" type="text" />
                </div>
                <div class="row pad-top">
                    <p><small><b>NOTE: </b>Generating the keys may take some seconds. Your browser may hang during that time.</small></p>
                </div>
                <div class="row">
                    <input id="setNewUsernameButton" type="submit" class="center pull-left" value="Save my name &amp; start pgpNow" />
                    <a onclick="appEvents.showWelcomeImportExistingKey(); return false;" class="pull-right welcomeLink">Import existing key</a>
                </div>
            </form>
        </div>
        <div class="hidden" id="welcomeImportExistingKeys">
            <div class="row">
                <span style="font-size: 1.3em;"><b>Import existing key</b></span>
            </div>
            <div class="row">
                <p>If you already have a private key, you can import it here.</p>
            </div>
            <div class="row">
                <textarea id="textareaImportExistingKey"></textarea>
            </div>
            <div class="row pad-top">
                <button id="importExistingKeyButton" class="pull-left">Import key & start pgpNow</button>
                <a onclick="appEvents.showWelcomeGenerateNewKey(); return false;" class="pull-right welcomeLink">Cancel</a>
            </div>
        </div>
    </div>
        
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/openpgp.min.js"></script>
    
    <script type="text/javascript" src="js/knockout-2.3.0.js"></script>
    <script type="text/javascript" src="js/knockout-mapping-2.4.1.js"></script>
    
    <script type="text/javascript" src="js/jstorage.min.js"></script>
    <script type="text/javascript" src="js/appStorage.js"></script>
    
    <script type="text/javascript" src="js/toastr.min.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>

    <script type="text/javascript" src="js/ArrayBufferBase64.js"></script>
    <script type="text/javascript" src="js/FileSaver.min.js"></script>
    <script type="text/javascript" src="js/fileCryptor.js"></script>
        
    <script type="text/javascript" src="js/viewModel.js"></script>
    <script type="text/javascript" src="js/modalManager.js"></script>
    <script type="text/javascript" src="js/partnerManager.js"></script>
    <script type="text/javascript" src="js/cryptor.js"></script>
    
    <script type="text/javascript" src="js/appEvents.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>