From f578d2a3abbe923b469246fb514770067f5a8987 Mon Sep 17 00:00:00 2001
From: ammendonca <ammendonca@gmail.com>
Date: Wed, 6 Nov 2013 13:31:36 +0000
Subject: [PATCH] KEYCLOAK-147: Create onoffswitch directive and use it where
 applicable.

---
 .../META-INF/resources/admin/js/app.js        | 36 +++++++-
 .../admin/partials/application-detail.html    | 12 +--
 .../admin/partials/realm-detail.html          | 91 ++-----------------
 .../resources/admin/partials/realm-smtp.html  | 33 +------
 4 files changed, 46 insertions(+), 126 deletions(-)

diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
index 7025d2ee44..e564dad87b 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
@@ -368,10 +368,42 @@ module.directive('collapsed', function() {
     }
 });
 
+/**
+ * Directive for presenting an ON-OFF switch for checkbox.
+ * Usage: <input ng-model="mmm" name="nnn" id="iii" onoffswitch [on-text="ooo" off-text="fff"] />
+ */
+module.directive('onoffswitch', function() {
+    return {
+        restrict: "EA",
+        require: 'ngModel',
+        replace: true,
+        scope: {
+            ngModel: '=',
+            ngBind: '=',
+            name: '=',
+            id: '=',
+            onText: '@onText',
+            offText: '@offText'
+        },
+        compile: function(element, attrs) {
+            if (!attrs.onText) { attrs.onText = "ON"; }
+            if (!attrs.offText) { attrs.offText = "OFF"; }
 
+            var html = "<div class=\"onoffswitch\">" +
+                "<input type=\"checkbox\" data-ng-model=\"ngModel\" class=\"onoffswitch-checkbox\" name=\"" + attrs.name + "\" id=\"" + attrs.id + "\">" +
+                "<label for=\"" + attrs.id + "\" class=\"onoffswitch-label\">" +
+                "<span class=\"onoffswitch-inner\">" +
+                "<span class=\"onoffswitch-active\">{{onText}}</span>" +
+                "<span class=\"onoffswitch-inactive\">{{offText}}</span>" +
+                "</span>" +
+                "<span class=\"onoffswitch-switch\"></span>" +
+                "</label>" +
+                "</div>";
 
-
-
+            element.replaceWith($(html));
+        }
+    }
+});
 
 
 module.directive('kcInput', function() {
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
index 2c11b73c62..e766d57d1e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
@@ -44,17 +44,7 @@
 
                         <div class="form-group clearfix block">
                             <label for="enabled" class="control-label">Enabled</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="application.enabled" class="onoffswitch-checkbox"
-                                       name="enabled" id="enabled">
-                                <label for="enabled" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="application.enabled" name="enabled" id="enabled" onoffswitch />
                         </div>
                         <div class="form-group">
                             <label for="baseUrl" class="control-label">Base URL</label>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
index d35d8cdfa4..157bb0ce59 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
@@ -34,113 +34,38 @@
                         </div>
                         <div class="form-group">
                             <label for="enabled" class="control-label">Enabled</label>
-
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.enabled" class="onoffswitch-checkbox"
-                                       name="enabled" id="enabled">
-                                <label for="enabled" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.enabled" name="enabled" id="enabled" onoffswitch />
                         </div>
                     </fieldset>
                     <fieldset>
                         <legend uncollapsed><span class="text">Login Options</span></legend>
                         <div class="form-group clearfix block">
                             <label for="social" class="control-label">Social login</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.social" class="onoffswitch-checkbox" name="social" id="social">
-                                <label for="social" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.social" name="social" id="social" onoffswitch />
                         </div>
                         <div class="form-group clearfix block">
                             <label for="registrationAllowed" class="control-label">User registration</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.registrationAllowed" class="onoffswitch-checkbox" name="registrationAllowed" id="registrationAllowed">
-                                <label for="registrationAllowed" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.registrationAllowed" name="registrationAllowed" id="registrationAllowed" onoffswitch />
                         </div>
                         <div class="form-group clearfix block">
                             <label for="resetPasswordAllowed" class="control-label">Reset password</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.resetPasswordAllowed" class="onoffswitch-checkbox" name="resetPasswordAllowed" id="resetPasswordAllowed">
-                                <label for="resetPasswordAllowed" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.resetPasswordAllowed" name="resetPasswordAllowed" id="resetPasswordAllowed" onoffswitch />
                         </div>
                         <div class="form-group clearfix block">
                             <label for="verifyEmail" class="control-label">Verify email</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.verifyEmail" class="onoffswitch-checkbox" name="verifyEmail" id="verifyEmail">
-                                <label for="verifyEmail" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.verifyEmail" name="verifyEmail" id="verifyEmail" onoffswitch />
                         </div>
                         <div class="form-group clearfix block">
                             <label for="accountManagement" class="control-label two-lines">User account management</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.accountManagement" class="onoffswitch-checkbox"
-                                       name="accountManagement" id="accountManagement">
-                                <label for="accountManagement" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.accountManagement" name="accountManagement" id="accountManagement" onoffswitch />
                         </div>
                         <div class="form-group clearfix block">
                             <label for="requireSsl" class="control-label">Require SSL</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.requireSsl" class="onoffswitch-checkbox" name="requireSsl" id="requireSsl">
-                                <label for="requireSsl" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.requireSsl" name="requireSsl" id="requireSsl" onoffswitch />
                         </div>
                         <div class="form-group">
                             <label for="cookieLoginAllowed" class="control-label">Cookie login allowed</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.cookieLoginAllowed" class="onoffswitch-checkbox" name="cookieLoginAllowed" id="cookieLoginAllowed">
-                                <label for="cookieLoginAllowed" class="onoffswitch-label">
-                                            <span class="onoffswitch-inner">
-                                                <span class="onoffswitch-active">ON</span>
-                                                <span class="onoffswitch-inactive">OFF</span>
-                                            </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.cookieLoginAllowed" name="cookieLoginAllowed" id="cookieLoginAllowed" onoffswitch />
                         </div>
                     </fieldset>
                     <div class="form-actions" data-ng-show="createRealm">
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-smtp.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-smtp.html
index 6abd4ee4a5..dd24ea73f6 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-smtp.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-smtp.html
@@ -42,45 +42,18 @@
                         </div>
                         <div class="form-group clearfix">
                             <label for="smtpSSL" class="control-label">Enable SSL</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.smtpServer.ssl" class="onoffswitch-checkbox" name="smtpSSL" id="smtpSSL">
-                                <label for="smtpSSL" class="onoffswitch-label">
-                                        <span class="onoffswitch-inner">
-                                            <span class="onoffswitch-active">ON</span>
-                                            <span class="onoffswitch-inactive">OFF</span>
-                                        </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.smtpServer.ssl" name="smtpSSL" id="smtpSSL" onoffswitch />
                         </div>
                         <div class="form-group clearfix">
                             <label for="smtpStartTLS" class="control-label">Enable StartTLS</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.smtpServer.starttls" class="onoffswitch-checkbox" name="smtpStartTLS" id="smtpStartTLS">
-                                <label for="smtpStartTLS" class="onoffswitch-label">
-                                        <span class="onoffswitch-inner">
-                                            <span class="onoffswitch-active">ON</span>
-                                            <span class="onoffswitch-inactive">OFF</span>
-                                        </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.smtpServer.starttls" name="smtpStartTLS" id="smtpStartTLS" onoffswitch />
                         </div>
                     </fieldset>
                     <fieldset>
                         <legend collapsed><span class="text">Authentication</span></legend>
                         <div class="form-group clearfix">
                             <label for="smtpAuth" class="control-label">Enabled</label>
-                            <div class="onoffswitch">
-                                <input type="checkbox" data-ng-model="realm.smtpServer.auth" class="onoffswitch-checkbox" name="smtpAuth" id="smtpAuth">
-                                <label for="smtpAuth" class="onoffswitch-label">
-                                        <span class="onoffswitch-inner">
-                                            <span class="onoffswitch-active">ON</span>
-                                            <span class="onoffswitch-inactive">OFF</span>
-                                        </span>
-                                    <span class="onoffswitch-switch"></span>
-                                </label>
-                            </div>
+                            <input ng-model="realm.smtpServer.auth" name="smtpAuth" id="smtpAuth" onoffswitch />
                         </div>
                         <div class="form-group clearfix">
                             <label for="smtpUsername" class="control-label">Username <span class="required" ng-show="realm.smtpServer.auth">*</span></label>