advanced claim addition tab

Author: jricher

uma-server-webapp/src/main/webapp/resources/js/policy.js

@@ -406,11 +406,13 @@ var PolicyFormView = Backbone.View.extend({
 this.template = _.template($('#tmpl-policy-form').html());
 }
 
- this.scopeCollection = new Backbone.Collection();
+ this.issuerCollection = new Backbone.Collection();
+
 },
 
 events:{
-'click .btn-share': 'addClaim',
+'click .btn-share': 'addWebfingerClaim',
+'click .btn-share-advanced': 'addAdvancedClaim',
 'click .btn-save': 'savePolicy',
 'click .btn-cancel': 'cancel'
 },
@@ -439,7 +441,7 @@ var PolicyFormView = Backbone.View.extend({
  }); 
  },
 
- addClaim:function(e) {
+ addWebfingerClaim:function(e) {
  e.preventDefault();
 
  // post to the webfinger helper and get the response back
@@ -533,6 +535,13 @@ var PolicyFormView = Backbone.View.extend({
 
 this.$el.html(this.template({policy: json, rs: rs}));
 
+ // build and bind issuer view
+ var issuerView = new ListWidgetView({
+ placeholder: $.t('policy.policy-form.issuer-placeholder'), 
+ helpBlockText: $.t('policy.policy-form.issuer-help'),
+ collection: this.issuerCollection});
+ $("#issuers .controls",this.el).html(issuerView.render().el);
+
  $(this.el).i18n();
 
 return this;

uma-server-webapp/src/main/webapp/resources/template/policy.html

@@ -151,14 +151,59 @@ <h1 data-i18n="policy.policy-form.edit">Edit Policy</h1>
 <button class="btn btn-small btn-cancel"><i class="icon-ban-circle"></i> <span data-i18n="common.cancel">Cancel</span></button>
  </div>
 
-<div id="add-required-claim">
-<form class="form-horizontal">
-<fieldset>
-<input type="text" id="email" placeholder="email address" data-i18n="[placeholder]policy.policy-form.email-address" />
-<button class="btn btn-info btn-share"><i class="icon-share icon-white"></i> <span data-i18n="policy.policy-form.share-email">Share with email address</span></button>
-</fieldset>
-</form>
+<ul class="nav nav-tabs">
+<li class="active"><a data-target="#policy-webfinger-tab" data-toggle="tab" href="#" data-i18n="policy.policy-form.webfinger">Webfinger</a></li>
+<li><a data-target="#policy-advanced-tab" data-toggle="tab" href="#" data-i18n="policy.policy-form.advanced">Advanced</a></li>
+</ul>
+
+<div class="tab-content">
+<div class="tab-pane active" id="policy-webfinger-tab">
+<div id="add-required-claim" class="well">
+<form class="form-horizontal">
+<fieldset>
+<input type="text" id="email" placeholder="email address" data-i18n="[placeholder]policy.policy-form.email-address" />
+<button class="btn btn-info btn-share"><i class="icon-share icon-white"></i> <span data-i18n="policy.policy-form.share-email">Share with email address</span></button>
+</fieldset>
+</form>
+</div>
+</div>
+
+<divdiv class="tab-pane" id="policy-advanced-tab">
+<div class="well">
+<form class="form-horizontal">
+<fieldset>
+<div id="issuers" class="control-group">
+<div class="controls">
+</div>
+</div>
+<div class="control-group">
+<div class="controls">
+<input type="text" id="name" placeholder="claim name" data-i18n="[placeholder]policy.policy-form.claim-name" />
+<input type="text" id="friendly-name" placeholder="friendly claim name" data-i18n="[placeholder]policy.policy-form.friendly-claim-name" />
+</div>
+</div>
+<div class="control-group">
+<div class="controls">
+<input type="text" id="value" placeholder="claim value" data-i18n="[placeholder]policy.policy-form.claim-value" />
+<select id="value-type">
+<option value="text" data-i18n="policy.policy-form.value-type-text">Text</option>
+<option value="number" data-i18n="policy.policy-form.value-type-number">Number</option>
+<option value="boolean" data-i18n="policy.policy-form.value-type-boolean">Boolean</option>
+<option value="json" data-i18n="policy.policy-form.value-type-json">JSON</option>
+</select>
+</div>
+</div>
+<div class="control-group">
+<div class="controls">
+<button class="btn btn-info btn-share-advanced"><i class="icon-share icon-white"></i> <span data-i18n="policy.policy-form.share-advanced">Add to claim set</span></button>
+</div>
+</div>
+</fieldset>
+</form>
+</div>
+
 </div>
+</div>
 
 <form class="form-horizontal">
 <fieldset>