From 92abfb9e7576faee14c3bb2b65a42548d174696b Mon Sep 17 00:00:00 2001
From: Guillaume Vincent <guillaume@oslab.fr>
Date: Mon, 21 Dec 2015 17:31:08 +0100
Subject: [PATCH] add Clipboard action on button copy

---
 app/app.js              | 86 +++++++++++++++++++++++++++----------------------
 app/lesspass.js         |  3 +-
 package.json            |  4 ++-
 static/index.html       | 43 ++++++++++++++-----------
 tests/lesspass.tests.js |  4 +--
 5 files changed, 79 insertions(+), 61 deletions(-)

diff --git a/app/app.js b/app/app.js
index 08f4748..d2c58e1 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,38 +1,59 @@
 import {lesspass} from '../app/lesspass';
 import angular from 'angular';
 
+import Clipboard from 'clipboard';
+
 class lesspassController {
-    constructor() {
-        this.lowercase = true;
-        this.uppercase = true;
-        this.numbers = true;
-        this.symbols = true;
-    }
-    displayHelp(){
-        $('body').chardinJs('start');
+    constructor($scope) {
+        var vm = this;
+
+        this.password = '';
+        this.site = {
+            site_name: '',
+            password_length: 12,
+            password_types: ['lowercase', 'uppercase', 'numbers', 'symbols'],
+            counter: 1
+        };
+
+        $scope.$watch(function () {
+            return vm.password;
+        }, function () {
+            vm.updatePassword();
+        });
+        $scope.$watchCollection(function () {
+            return vm.site;
+        }, function () {
+            vm.updatePassword();
+        });
+
+        new Clipboard('.copy-btn');
     }
-    createPassword() {
-        var passwordTypes = [];
-        if (this.lowercase) {
-            passwordTypes.push('lowercase');
-        }
-        if (this.uppercase) {
-            passwordTypes.push('uppercase');
-        }
-        if (this.numbers) {
-            passwordTypes.push('numbers');
+
+    updatePasswordTypes(type) {
+        var passwordTypes = this.site.password_types;
+        var indexOfId = passwordTypes.indexOf(type);
+        if (indexOfId == -1) {
+            passwordTypes.push(type)
+        } else {
+            passwordTypes.splice(indexOfId, 1)
         }
-        if (this.symbols) {
-            passwordTypes.push('symbols');
+        this.updatePassword();
+    }
+
+    updatePassword() {
+        if(this.password && this.site.site_name){
+            this.generatedPassword = lesspass.create_password(this.password, this.site);
         }
-        var site_information = {
-            'site_name': this.site,
-            'password_length': 12,
-            'password_types': passwordTypes,
-            'counter': 1
-        };
+    }
 
-        this.generatedPassword = lesspass.create_password(this.password, site_information);
+    displayHelp() {
+        if (this.helpDisplayed) {
+            $('body').chardinJs('stop');
+            this.helpDisplayed = false;
+        } else {
+            $('body').chardinJs('start');
+            this.helpDisplayed = true;
+        }
     }
 }
 
@@ -40,14 +61,3 @@ class lesspassController {
 angular
     .module('app', [])
     .controller('lesspassController', lesspassController);
-
-
-/*
-var clipboard = new Clipboard('#copy-btn',{
-    text: function(trigger) {
-        $('body').chardinJs('stop');
-        var elements = document.getElementById('foo').value.split(':');
-        return PasswordGenerator.make_password(elements[0], elements[1]);
-    }
-});
-*/
\ No newline at end of file
diff --git a/app/lesspass.js b/app/lesspass.js
index ace2005..984779a 100644
--- a/app/lesspass.js
+++ b/app/lesspass.js
@@ -31,7 +31,7 @@ export class lesspass {
         };
         return passwordTypes
             .map(passwordType => passwordTypesInfo[passwordType])
-            .sort((pt1, pt2) => pt1.order > pt2.order)
+            .sort((passwordType1, passwordType2) => passwordType1.order > passwordType2.order)
             .map(passwordType => passwordType.value)
             .join('');
     }
@@ -56,7 +56,6 @@ export class lesspass {
         return passwordChar[index % passwordChar.length];
     }
 
-
     static _encode(hash, template) {
         var password = '';
         this._string2charCodes(hash).map(
diff --git a/package.json b/package.json
index 43cdee1..318cccf 100644
--- a/package.json
+++ b/package.json
@@ -34,12 +34,14 @@
   "homepage": "https://github.com/guillaumevincent/lesspass#readme",
   "dependencies": {
     "angular": "^1.4.8",
-    "bootstrap": "^3.3.6"
+    "bootstrap": "^3.3.6",
+    "clipboard": "^1.5.5"
   },
   "devDependencies": {
     "babel-core": "latest",
     "babel-polyfill": "latest",
     "babel-preset-es2015": "latest",
+    "babelify": "latest",
     "browserify": "latest",
     "jshint": "latest",
     "mocha": "latest",
diff --git a/static/index.html b/static/index.html
index a1eb38d..a8a2732 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>lesspass</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/chardinjs.css">
     <link rel="icon" type="image/png" href="https://lesspass.com/images/favicon.png">
@@ -33,11 +34,8 @@
     </style>
     <script src="js/jquery-1.9.1.min.js"></script>
     <script src="js/chardinjs.min.js"></script>
-    <script src="js/clipboard.min.js"></script>
 </head>
 <body>
-
-
 <div id="header">
     <div class="container text-center">
         <div id="logo">
@@ -63,7 +61,7 @@
                     <div class="col-md-6"></div>
                     <div class="col-md-6">
                         <p>
-                            <span class="green">lesspass</span> ne sauvegarde pas vos mots de passe, il les regénère à
+                            <span class="green">LessPass</span> ne sauvegarde pas vos mots de passe, il les regénère à
                             chaque fois que vous en avez besoin. Chaque mot de passe est unique et propre à chaque site.
                             Tout ce dont vous avez besoin c'est de vous souvenir d'un seul mot de passe, et lesspass
                             fait le reste.
@@ -83,20 +81,27 @@
         <div class="row">
             <div class="col-md-4">
                 <div class="form-group">
+                    <label for="password">Mot de passe</label>
+                    <input ng-model="lesspass.password" type="password" class="form-control" id="password"
+                           placeholder="ex: mot de passe fort"
+                           data-intro="1/ Entrez votre mot de passe"
+                           data-position="top">
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="form-group">
                     <label for="site">Site</label>
-                    <input ng-model="lesspass.site" type="text" class="form-control" id="site"
+                    <input ng-model="lesspass.site.site_name" type="text" class="form-control" id="site"
                            placeholder="ex: facebook"
-                           data-intro="1/ Entrez le site sur lequel vous souhaitez vous connecter"
+                           data-intro="2/ Entrez le site sur lequel vous souhaitez vous connecter"
                            data-position="top">
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-1">
                 <div class="form-group">
-                    <label for="password">Mot de passe</label>
-                    <input ng-model="lesspass.password" type="password" class="form-control" id="password"
-                           placeholder="ex: mot de passe fort"
-                           data-intro="2/ Entrez votre mot de passe"
-                           data-position="top">
+                    <label for="password_length">Longueur</label>
+                    <input ng-model="lesspass.site.password_length" type="number" class="form-control" id="password"
+                           min="6" max="64">
                 </div>
             </div>
             <div class="col-md-4">
@@ -104,14 +109,15 @@
                 <div class="input-group"
                      data-intro="3/ Copiez le mot de passe unique généré"
                      data-position="top">
-                    <input id="password_generated" class="form-control" disabled type="text"
+                    <input id="password_generated" class="form-control" type="text"
                            ng-value="lesspass.generatedPassword">
                     <div class="input-group-btn">
                         <button ng-click="lesspass.displayHelp()" type="button" class="btn btn-default hidden-xs"
                                 aria-label="Help">
                             <span class="glyphicon glyphicon-question-sign"></span>
                         </button>
-                        <button ng-click="lesspass.createPassword()" type="button" class="btn btn-default">
+                        <button type="button" class="btn btn-default copy-btn"
+                                data-clipboard-target="#password_generated">
                             <span class="glyphicon glyphicon-copy"></span>
                         </button>
                     </div>
@@ -122,7 +128,7 @@
             <div class="col-md-2">
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" ng-model="lesspass.lowercase" ng-checked="lesspass.lowercase">
+                        <input type="checkbox" checked ng-click="lesspass.updatePasswordTypes('lowercase')">
                         minuscules (a-z)
                     </label>
                 </div>
@@ -130,7 +136,7 @@
             <div class="col-md-2">
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" ng-model="lesspass.uppercase" ng-checked="lesspass.uppercase">
+                        <input type="checkbox" checked ng-click="lesspass.updatePasswordTypes('uppercase')">
                         MAJUSCULES (A-Z)
                     </label>
                 </div>
@@ -138,7 +144,7 @@
             <div class="col-md-2">
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" ng-model="lesspass.numbers" ng-checked="lesspass.numbers">
+                        <input type="checkbox" checked ng-click="lesspass.updatePasswordTypes('numbers')">
                         nombres (0-9)
                     </label>
                 </div>
@@ -146,11 +152,12 @@
             <div class="col-md-3">
                 <div class="checkbox">
                     <label>
-                        <input type="checkbox" ng-model="lesspass.symbols" ng-checked="lesspass.symbols">
+                        <input type="checkbox" checked ng-click="lesspass.updatePasswordTypes('symbols')">
                         caractères spéciaux (@&%?)
                     </label>
                 </div>
             </div>
+
         </div>
     </form>
 </div>
diff --git a/tests/lesspass.tests.js b/tests/lesspass.tests.js
index c2ebdb1..374c6d5 100644
--- a/tests/lesspass.tests.js
+++ b/tests/lesspass.tests.js
@@ -57,11 +57,11 @@ describe('lesspass', ()=> {
             assert.equal('n', lesspass._getTemplate(['numbers']));
             assert.equal('s', lesspass._getTemplate(['symbols']));
         });
-        it('should concatenate template if two password types', ()=> {
+        it('should concatenate template if two password password_types', ()=> {
             assert.equal('vcVC', lesspass._getTemplate(['lowercase', 'uppercase']));
             assert.equal('vcns', lesspass._getTemplate(['lowercase', 'numbers', 'symbols']));
         });
-        it('should not care about order of type in password types', ()=> {
+        it('should not care about order of type in password password_types', ()=> {
             assert.equal(
                 lesspass._getTemplate(['uppercase', 'lowercase']),
                 lesspass._getTemplate(['lowercase', 'uppercase'])