sso fields

app/assets/javascripts/admin/university/edit.js

@@ -3,17 +3,20 @@ window.osuny.university.edit = {
         'use strict';
         this.hasSsoInput = document.querySelector('input[type="checkbox"][name="university[has_sso]"]');
         this.hasSsoInput.addEventListener('change', this.onHasSsoChange.bind(this));
-        this.ssoFields = document.getElementById('sso-inputs');
+        this.ssoFields = document.querySelectorAll('.sso-inputs');
         this.onHasSsoChange();
     },
 
     onHasSsoChange: function () {
         'use strict';
-        var value = this.hasSsoInput.checked;
-        if (value) {
-            this.ssoFields.classList.remove('d-none');
-        } else {
-            this.ssoFields.classList.add('d-none');
+        var value = this.hasSsoInput.checked,
+            i;
+        for (i = 0; i < this.ssoFields.length; i += 1) {
+            if (value) {
+                this.ssoFields[i].classList.remove('d-none');
+            } else {
+                this.ssoFields[i].classList.add('d-none');
+            }
         }
     },
 

app/views/server/universities/_form.html.erb

@@ -35,13 +35,13 @@
   <div class="row">
     <div class="col-md-6">
       <%= f.input :has_sso %>
-      <div id="sso-inputs">
+      <div class="sso-inputs">
         <%= f.input :sso_target_url, required: true %>
         <%= f.input :sso_cert, required: true %>
         <%= f.input :sso_name_identifier_format, required: true %>
       </div>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-6 sso-inputs">
       <h4 class="mb-4"><%= University.human_attribute_name('sso_mapping') %></h4>
       <%= f.error_notification message: f.object.errors[:sso_mapping].to_sentence if f.object.errors[:sso_mapping].present? %>
       <%= render 'sso_mapping', university: university %>