F #4276: Add button to enable/disable an input (#4277)

src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab.js

@@ -18,6 +18,7 @@ define(function(require) {
   // Dependencies
   var Locale = require('utils/locale');
   var Tips = require('utils/tips');
+  var Locks = require('utils/lock');
   var TemplatesTable = require('tabs/templates-tab/datatable');
   var TemplateUtils = require('utils/template-utils');
 
@@ -62,6 +63,7 @@ define(function(require) {
     var that = this;
 
     Tips.setup(role_section);
+    Locks.setup(role_section);
 
     this.templatesTable.initialize();
     this.templatesTable.idInput().attr("required", "");

src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs

@@ -154,6 +154,7 @@
       <div class="service_template_param st_man large-12 columns">
         <label  for="vm_template_contents">{{tr "VM template content"}}
           <span class="tip">{{tr "This information will be merged with the original Virtual Machine template. Configuration attributes and network interfaces will be replaced by those provided by the user when the template is instantiated"}}</span>
+          <span class="lock is-lock" data-msg='{{tr "Please take into account that changing this value manually will bypass Sunstone validation and may result on a malformed template"}}'></span>
         </label>
         <textarea type="text" rows="4" class="vm_template_contents monospace" name="vm_template_contents" placeholder='ATTRIBUTE = "VALUE"'/>
       </div>

src/sunstone/public/app/utils/lock.js

@@ -0,0 +1,67 @@
+/* -------------------------------------------------------------------------- */
+/* Copyright 2002-2019, OpenNebula Project, OpenNebula Systems                */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+define(function(require) {
+  var Locale = require("utils/locale");
+  var Notifier = require("utils/notifier");
+
+  //Replaces all class"tip" divs with an information icon that
+  //displays the tip information on mouseover.
+  var _setup = function(context, input) {
+    if (!context) {
+      context = $(document);
+    }
+
+    //For each lock in this context
+    $('.lock', context).each(function() {
+      //replace the text with an icon and spans
+      $(this).append($("<i/>",{ class:'fas fa-lock' }));
+
+      // input is default lock
+      changeState($(this));
+
+      $(this).click(function() {
+        $(this).toggleClass("is-lock is-unlock");
+        $(this).find("i").toggleClass("fa-lock fa-unlock");
+        changeState($(this));
+      });
+    });
+  }
+
+  function changeState(span) {
+    if (span && span instanceof $) {
+      var input = span.parent().next();
+      var title = span.data("title") || Locale.tr("Unlocked!");
+      var message = span.data("msg") || "";
+
+      if (span.hasClass("is-unlock")) {
+        changeStateInput(input, false);
+        Notifier.notifyCustom(title, message);
+      }
+      else changeStateInput(input, true);
+    }
+  }
+
+  function changeStateInput(input, disabled) {
+    if (input && input instanceof $ && input.is("input, textarea")) {
+      input.attr("disabled", disabled);
+    }
+  }
+
+  return {
+    'setup': _setup
+  }
+})

src/sunstone/public/scss/_settings.scss

@@ -587,7 +587,15 @@ $tooltip-pip-width: 1rem;
 $tooltip-pip-height: $tooltip-pip-width * 0.866;
 $tooltip-radius: $global-radius;
 
-// 36. Top Bar
+// 36. Lock
+// -----------
+
+$is-lock-cursor: pointer;
+$is-lock-color: $light-black;
+$is-unlock-cursor: pointer;
+$isunlock-color: $light-black;
+
+// 37. Top Bar
 // -----------
 
 $topbar-padding: 0.5rem;