Added QRcode generation to Web UI

https://fedorahosted.org/freeipa/ticket/3369

Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>

install/ui/README-LICENSE.txt

@@ -40,6 +40,9 @@ Dojo, Dojo Builder - dual licensed under BSD license and AFL version 2.1
  * util/build/_base/*.js
  * build/dojo/dojo.js
 
+QRCode.js - licensed under MIT license
+ * qrcode.js
+
 Full license texts and copyright notices are listed below.
 
 = jQuery copyright notice with MIT license =
@@ -194,6 +197,27 @@ TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 SUCH DAMAGE.
 
+= The MIT License (MIT) - QRCcode.js  =
+Copyright (c) 2012 davidshimjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
 = MIT license template =
 Copyright (C) <year> <copyright holders>
 

install/ui/index.html

@@ -44,7 +44,8 @@
                 'js/libs/bootstrap.js',
                 'js/libs/jquery.ordered-map.js',
                 'js/libs/browser.js',
-                'js/dojo/dojo.js'
+                'js/dojo/dojo.js',
+                'js/libs/qrcode.js'
             ];
             ipa_loader.scripts(scripts, function() {
                 require(['freeipa/app'], function(app){ app.run(); });

install/ui/less/plugins/otp.less

@@ -0,0 +1,8 @@
+
+.otp-uri {
+	word-wrap: break-word;
+}
+
+.qrcode-widget img {
+	margin: 0 auto;
+}

install/ui/less/rcue.less

@@ -8,4 +8,5 @@
 @import "rcue/forms";
 @import "dialog";
 @import "brand";
-@import "forms-override.less";
+@import "forms-override";
+@import "plugins/otp";

install/ui/src/freeipa/add.js

@@ -84,7 +84,7 @@ IPA.entity_adder_dialog = function(spec) {
                 that.hide_message();
                 that.add(
                     function(data, text_status, xhr) {
-                        that.added.notify();
+                        that.added.notify([data], that);
                         that.show_message(that.get_success_message(data));
                         that.reset();
                         that.focus_first_element();
@@ -100,7 +100,7 @@ IPA.entity_adder_dialog = function(spec) {
                 that.hide_message();
                 that.add(
                     function(data, text_status, xhr) {
-                        that.added.notify();
+                        that.added.notify([data], that);
                         that.close();
                         var result = data.result.result;
                         that.show_edit_page(that.entity, result);
@@ -129,7 +129,7 @@ IPA.entity_adder_dialog = function(spec) {
         that.hide_message();
         that.add(
             function(data, text_status, xhr) {
-                that.added.notify();
+                that.added.notify([data], that);
                 that.close();
                 that.notify_success(data);
             },

install/ui/src/freeipa/otptoken.js

@@ -26,10 +26,10 @@ define([
         './reg',
         './details',
         './facet',
+        './qrcode',
         './search',
         './entity'],
-            function(IPA, $, menu, phases, reg, mod_details, mod_facet) {
-
+            function(IPA, $, menu, phases, reg, mod_details, mod_facet, QRCode) {
 /**
  * OTP tokens module
  * @class
@@ -200,6 +200,9 @@ return {
         $pre_ops: [
             otptoken.adder_dialog_preop
         ],
+        $post_ops: [
+            otptoken.adder_dialog_qrcode_post_op
+        ],
         fields: [
             {
                 $type: 'radio',
@@ -307,6 +310,176 @@ otptoken.adder_dialog = function(spec) {
     return that;
 };
 
+/**
+ * Displays text as QR code
+ * @class
+ * @extends IPA.widget
+ */
+otptoken.qr_widget = function(spec) {
+
+    var that = IPA.widget(spec);
+
+    /**
+     * Text to be displayed as QR Code
+     * @property {string}
+     * @readonly
+     */
+    that.text = spec.text;
+
+    /**
+     * Show link with the text instead of QR code
+     * @property {boolean}
+     */
+    that.show_link = !!spec.show_link;
+
+    /** @inheritDoc */
+    that.create = function(container) {
+
+        that.widget_create(container);
+        container.addClass('qrcode-widget');
+
+        that.div_link_control = $('<a/>', {
+            name: that.name,
+            href: ''
+        }).appendTo(that.container);
+
+        that.qr_control = $('<div/>', {
+            name: that.name
+        }).appendTo(that.div_link_control);
+
+        that.uri_control = $('<div/>', {
+            name: 'uri-control',
+            'class': 'otp-uri',
+            style: 'display: none;'
+        }).appendTo(container);
+
+        that.link_container = $('<div/>', {
+            style: 'padding: 5px 0;'
+        }).appendTo(container);
+
+        that.show_uri_link = $('<a/>', {
+            name: 'show-uri',
+            href: '#',
+            text: 'Show configuration uri',
+            click: function(e) {
+                e.preventDefault();
+                that.update_display_mode(!that.show_link);
+            }
+        }).appendTo(that.link_container);
+
+        that.qrcode = new QRCode(that.qr_control[0], {
+            text: "",
+            width: 450,
+            height: 450,
+            colorDark : "#000000",
+            colorLight : "#ffffff",
+            correctLevel : QRCode.CorrectLevel.M
+        });
+
+        that.update(that.text);
+        that.update_display_mode(that.show_link);
+    };
+
+    /**
+     * Update displayed information with supplied values.
+     * @param {String|Array|null} values
+     */
+    that.update = function(values) {
+
+        var val;
+        if (typeof values === 'string') {
+            val = values;
+        } else if (values.length) {
+            val = values[0];
+        } else {
+            val = '';
+        }
+        that.text = val;
+        that.qrcode.makeCode(that.text);
+        that.uri_control.text(that.text);
+        that.div_link_control.prop('href', that.text);
+    };
+
+    /**
+     * Switches between QR code and link
+     * @protected
+     * @param {boolean} show_link
+     */
+    that.update_display_mode = function(show_link) {
+
+        that.show_link = !!show_link;
+
+         if (that.show_link) {
+             that.show_uri_link.text('Show QR code');
+             that.qr_control.hide();
+             that.uri_control.show();
+         } else {
+             that.show_uri_link.text('Show configuration uri');
+             that.qr_control.show();
+             that.uri_control.hide();
+         }
+    };
+
+    /**
+     * @inheritDoc
+     */
+    that.clear = function() {
+        that.qrcode.clear();
+        that.link_control.text('');
+    };
+
+    return that;
+};
+
+/**
+ * Displays text as QR code in a dialog
+ * @class
+ * @extends IPA.message_dialog
+ */
+otptoken.qr_dialog = function(spec) {
+
+    var that = IPA.message_dialog(spec);
+
+    /**
+     * Uses IPA.dialog UI
+     */
+    that.create_content = that.dialog_create_content;
+
+    return that;
+};
+
+/**
+ * OTP adder dialog post-op which enables showing of QR code after token is
+ * successfully added by displaying QR dialog.
+ * @member otptoken
+ */
+otptoken.adder_dialog_qrcode_post_op = function(object) {
+
+    object.added.attach(function(data) {
+
+        var uri = data.result.result.uri;
+        var qr_dialog = otptoken.qr_dialog({
+            name: 'qr_dialog',
+            title: 'Configure your token',
+            widgets: [
+                {
+                    $type: 'qrcode',
+                    name: 'qr',
+                    text: uri
+                }
+            ]
+        });
+
+        qr_dialog.open();
+        qr_dialog.show_message('Configure your token by scanning the QR code \
+                                below. Click on the QR core if you see this on \
+                                the device you want to configure.');
+    });
+
+
+    return object;
+};
+
 /**
  * Entity specification object
  * @member otptoken
@@ -319,7 +492,10 @@ otptoken.spec = make_spec();
  */
 otptoken.register = function() {
     var e = reg.entity;
+    var w = reg.widget;
+
     e.register({type: 'otptoken', spec: otptoken.spec});
+    w.register('qrcode', otptoken.qr_widget);
 };
 
 phases.on('registration', otptoken.register);

install/ui/src/freeipa/qrcode.js

@@ -0,0 +1,27 @@
+/*  Authors:
+ *    Petr Vobornik <pvoborni@redhat.com>
+ *
+ * Copyright (C) 2013 Red Hat
+ * see file 'COPYING' for use and warranty information
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+//
+// AMD Wrapper for QRCode.js library
+// It expects that the library was already loaded.
+//
+define(function() {
+    return window.QRCode;
+});

install/ui/src/libs/Makefile.am

@@ -9,6 +9,7 @@ app_DATA =				\
 	jquery-ui.js 			\
 	json2.js 			\
 	loader.js 			\
+	qrcode.js 			\
 	$(NULL)
 
 EXTRA_DIST =                            \