diff --git a/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab.js b/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab.js
index 6fa18c39a9..cc6858581a 100644
--- a/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab.js
+++ b/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", "");
diff --git a/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs b/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs
index b928ce6a06..2ae042fde9 100644
--- a/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/oneflow-templates-tab/utils/role-tab/html.hbs
@@ -154,6 +154,7 @@
diff --git a/src/sunstone/public/app/utils/lock.js b/src/sunstone/public/app/utils/lock.js
new file mode 100644
index 0000000000..e61a348c30
--- /dev/null
+++ b/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($("",{ 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
+ }
+})
diff --git a/src/sunstone/public/scss/_settings.scss b/src/sunstone/public/scss/_settings.scss
index 41af9381b3..5920359272 100644
--- a/src/sunstone/public/scss/_settings.scss
+++ b/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;