Merge pull request #92 from ammendonca/KEYCLOAK-147

KEYCLOAK-147: Create onoffswitch directive and use it where applicable.
This commit is contained in:
stianst 2013-11-08 03:40:15 -08:00
commit 29a4031046
4 changed files with 46 additions and 126 deletions

View file

@ -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() {

View file

@ -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>

View file

@ -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">

View file

@ -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>