508 Fixes

Addresses swagger-api#1021 mostly by adding label tags, generating unique element
ids as needed.

In the process, moved the label text that gets set in the
*ContentTypeView.js files to the respective handlebar templates since
the text was static as far as I could tell.

src/main/javascript/view/ContentTypeView.js

@@ -4,10 +4,8 @@ SwaggerUi.Views.ContentTypeView = Backbone.View.extend({
   initialize: function() {},
 
   render: function(){
+  	this.model.contentTypeId = 'ct' + Math.random();
     $(this.el).html(Handlebars.templates.content_type(this.model));
-
-    $('label[for=contentType]', $(this.el)).text('Response Content Type');
-
     return this;
   }
 });

src/main/javascript/view/ParameterContentTypeView.js

@@ -4,10 +4,8 @@ SwaggerUi.Views.ParameterContentTypeView = Backbone.View.extend({
   initialize: function  () {},
 
   render: function(){
+  	this.model.parameterContentTypeId = 'pct' + Math.random();
     $(this.el).html(Handlebars.templates.parameter_content_type(this.model));
-
-    $('label[for=parameterContentType]', $(this.el)).text('Parameter content type:');
-
     return this;
   }
 

src/main/javascript/view/ParameterView.js

@@ -31,6 +31,7 @@ SwaggerUi.Views.ParameterView = Backbone.View.extend({
     this.model.isBody = this.model.paramType === 'body' || this.model.in === 'body';
     this.model.isFile = type && type.toLowerCase() === 'file';
     this.model.default = (this.model.default || this.model.defaultValue);
+    this.model.valueId = this.model.name + Math.random();
 
     if (this.model.allowableValues) {
       this.model.isList = true;

src/main/javascript/view/ResponseContentTypeView.js

@@ -4,10 +4,8 @@ SwaggerUi.Views.ResponseContentTypeView = Backbone.View.extend({
   initialize: function(){},
 
   render: function(){
+  	this.model.responseContentTypeId = 'rct' + Math.random();
     $(this.el).html(Handlebars.templates.response_content_type(this.model));
-
-    $('label[for=responseContentType]', $(this.el)).text('Response Content Type');
-
     return this;
   }
 });

src/main/template/apikey_button_view.handlebars

@@ -1,7 +1,7 @@
 <!--div class='auth_button' id='apikey_button'><img class='auth_icon' alt='apply api key' src='images/apikey.jpeg'></div-->
 <div class='auth_container' id='apikey_container'>
   <div class='key_input_container'>
-    <div class='auth_label'>{{keyName}}</div>
+    <div class='auth_label'><label for="input_apiKey_entry">{{keyName}}</label></div>
     <input placeholder="api_key" class="auth_input" id="input_apiKey_entry" name="apiKey" type="text"/>
     <div class='auth_submit'><a class='auth_submit_button' id="apply_api_key" href="#">apply</a></div>
   </div>

src/main/template/basic_auth_button_view.handlebars

@@ -1,9 +1,9 @@
 <div class='auth_button' id='basic_auth_button'><img class='auth_icon' src='images/password.jpeg'></div>
 <div class='auth_container' id='basic_auth_container'>
   <div class='key_input_container'>
-    <div class="auth_label">Username</div>
+    <div class="auth_label"><label for="input_username">Username</label></div>
     <input placeholder="username" class="auth_input" id="input_username" name="username" type="text"/>
-    <div class="auth_label">Password</div>
+    <div class="auth_label"><label for="password">Password</label></div>
     <input placeholder="password" class="auth_input" id="input_password" name="password" type="password"/>
     <div class='auth_submit'><a class='auth_submit_button' id="apply_basic_auth" href="#">apply</a></div>
   </div>

src/main/template/content_type.handlebars

@@ -1,5 +1,5 @@
-<label for="contentType"></label>
-<select name="contentType">
+<label for="{{contentTypeId}}">Response Content Type</label>
+<select name="contentType" id="{{contentTypeId}}">
 {{#if produces}}
   {{#each produces}}
 	<option value="{{{this}}}">{{{this}}}</option>

src/main/template/param.handlebars

@@ -1,30 +1,30 @@
-<td class='code'>{{name}}</td>
+<td class='code'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
 
 	{{#if isBody}}
 		{{#if isFile}}
-			<input type="file" name='{{name}}'/>
+			<input type="file" name='{{name}}' id='{{valueId}}'/>
 			<div class="parameter-content-type" />
 		{{else}}
 			{{#if default}}
-				<textarea class='body-textarea' name='{{name}}'>{{default}}</textarea>
+				<textarea class='body-textarea' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
         <br />
         <div class="parameter-content-type" />
 			{{else}}
-				<textarea class='body-textarea' name='{{name}}'></textarea>
+				<textarea class='body-textarea' name='{{name}}' id='{{valueId}}'></textarea>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}
 		{{/if}}
 	{{else}}
 		{{#if isFile}}
-			<input type="file" name='{{name}}'/>
+			<input type="file" name='{{name}}' id='{{valueId}}'/>
 			<div class="parameter-content-type" />
 		{{else}}
 			{{#if default}}
-				<input class='parameter' minlength='0' name='{{name}}' placeholder='' type='text' value='{{default}}'/>
+				<input class='parameter' minlength='0' id='{{valueId}}' name='{{name}}' placeholder='' type='text' value='{{default}}'/>
 			{{else}}
-				<input class='parameter' minlength='0' name='{{name}}' placeholder='' type='text' value=''/>
+				<input class='parameter' minlength='0' id='{{valueId}}' name='{{name}}' placeholder='' type='text' value=''/>
 			{{/if}}
 		{{/if}}
 	{{/if}}

src/main/template/param_list.handlebars

@@ -1,9 +1,9 @@
 {{#if required}}
-<td class='code required'>{{name}}</td>
+<td class='code required'><label for='{{valueId}}'>{{name}}</label></td>
 {{/if}}
-<td class='code'>{{name}}</td>
+<td class='code'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
-  <select {{#isArray this}} multiple='multiple'{{/isArray}} class='parameter' name='{{name}}'>
+  <select {{#isArray this}} multiple='multiple'{{/isArray}} class='parameter' name='{{name}}' id='{{valueId}}'>
     {{#if required}}
     {{else}}
       {{#if default}}

src/main/template/param_readonly.handlebars

@@ -1,7 +1,7 @@
-<td class='code'>{{name}}</td>
+<td class='code'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
     {{#if isBody}}
-        <textarea class='body-textarea' readonly='readonly' name='{{name}}'>{{default}}</textarea>
+        <textarea class='body-textarea' readonly='readonly' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
     {{else}}
         {{#if default}}
             {{default}}

src/main/template/param_readonly_required.handlebars

@@ -1,7 +1,7 @@
-<td class='code required'>{{name}}</td>
+<td class='code required'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
     {{#if isBody}}
-        <textarea class='body-textarea'  readonly='readonly' placeholder='(required)' name='{{name}}'>{{default}}</textarea>
+        <textarea class='body-textarea' readonly='readonly' placeholder='(required)' name='{{name}}' id='{{valueId}}'>{{default}}</textarea>
     {{else}}
         {{#if default}}
             {{default}}

src/main/template/param_required.handlebars

@@ -1,27 +1,27 @@
-<td class='code required'>{{name}}</td>
+<td class='code required'><label for='{{valueId}}'>{{name}}</label></td>
 <td>
 	{{#if isBody}}
 		{{#if isFile}}
-			<input type="file" name='{{name}}'/>
+			<input type="file" name='{{name}}' id='{{valueId}}'/>
 		{{else}}
 			{{#if default}}
-				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}'>{{default}}</textarea>
+				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}' id="{{valueId}}">{{default}}</textarea>
         <br />
         <div class="parameter-content-type" />
 			{{else}}
-				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}'></textarea>
+				<textarea class='body-textarea required' placeholder='(required)' name='{{name}}' id='{{valueId}}'></textarea>
 				<br />
 				<div class="parameter-content-type" />
 			{{/if}}
 		{{/if}}
 	{{else}}
 		{{#if isFile}}
-			<input class='parameter' class='required' type='file' name='{{name}}'/>
+			<input class='parameter' class='required' type='file' name='{{name}}' id='{{valueId}}'/>
 		{{else}}
 			{{#if default}}
-				<input class='parameter required' minlength='1' name='{{name}}' placeholder='(required)' type='text' value='{{default}}'/>
+				<input class='parameter required' minlength='1' name='{{name}}' id='{{valueId}}' placeholder='(required)' type='text' value='{{default}}'/>
 			{{else}}
-				<input class='parameter required' minlength='1' name='{{name}}' placeholder='(required)' type='text' value=''/>
+				<input class='parameter required' minlength='1' name='{{name}}' id='{{valueId}}' placeholder='(required)' type='text' value=''/>
 			{{/if}}
 		{{/if}}
 	{{/if}}

src/main/template/parameter_content_type.handlebars

@@ -1,5 +1,5 @@
-<label for="parameterContentType"></label>
-<select name="parameterContentType">
+<label for="{{parameterContentTypeId}}">Parameter content type:</label>
+<select name="parameterContentType" id="{{parameterContentTypeId}}">
 {{#if consumes}}
   {{#each consumes}}
   <option value="{{{this}}}">{{{this}}}</option>

src/main/template/response_content_type.handlebars

@@ -1,5 +1,5 @@
-<label for="responseContentType"></label>
-<select name="responseContentType">
+<label for="{{responseContentTypeId}}">Response Content Type</label>
+<select name="responseContentType" id="{{responseContentTypeId}}">
 {{#if produces}}
   {{#each produces}}
   <option value="{{{this}}}">{{{this}}}</option>