Vue sso

app/controllers/server/universities_controller.rb

@@ -62,7 +62,7 @@ class Server::UniversitiesController < Server::ApplicationController
     params.require(:university).permit(:name,
       :address, :zipcode, :city, :country,
       :private, :identifier, :logo, :logo_delete, :sms_sender_name,
-      :has_sso, :sso_target_url, :sso_cert, :sso_name_identifier_format,
+      :has_sso, :sso_target_url, :sso_cert, :sso_name_identifier_format, :sso_mapping,
       :invoice_date, :invoice_amount)
   end
 end

app/views/admin/communication/blocks/edit.html.erb

@@ -6,7 +6,7 @@
 %>
 <div id="app" v-cloak>
   <div class="spinner-border text-primary" role="status">
-    <span class="sr-only">Loading...</span>
+    <span class="sr-only"><%= t 'loading' %></span>
   </div>
   <%= simple_form_for [:admin, @block] do |f| %>
     <div class="row">

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

+<%# Include vue.js before call Vue.createApp %>
+<%= javascript_include_tag 'vue' %>
+
+<div id="app" v-cloak>
+  <div class="spinner-border text-primary" role="status">
+    <span class="sr-only"><%= t 'loading' %></span>
+  </div>
+  <a v-on:click="fields.push({sso_key: '', internal_key: '', roles: {}})">
+    <%= t '.add_field' %>
+  </a>
+
+  <draggable :list="fields" handle=".dragHandle">
+    <div v-for="(field, index) in fields">
+      <div class="card">
+        <div>
+          <a class="btn ps-0 pt-0 dragHandle">
+            <i class="fa fa-bars handle"></i>
+          </a>
+        </div>
+        <div class="form-group">
+          <label for="" class="form-control-label">SSO Key *</label>
+          <input 
+            v-model="field.sso_key"
+            type="text" class="form-control">
+        </div>
+        <div class="form-group">
+          <label for="" class="form-control-label">Internal Key *</label>
+          <select v-model="field.internal_key" id="" class="form-select" required>
+            <option value="email">Email</option>
+            <option value="first_name">First Name</option>
+            <option value="last_name">Last Name</option>
+            <option value="role">Role*</option>
+            <option value="phone">Phone</option>
+            <option value="language">Language</option>
+            <option value="picture_url">Picture URL</option>
+          </select>
+        </div>
+        <div v-if="field.internal_key === 'role'">
+          <% User.roles.keys.each do |role| %>
+            <div class="form-group">
+              <label for=""><%= role %></label>
+              <input v-model="field.roles.<%= role %>" type="text">
+            </div>
+          <% end %>
+        </div>
+        <a class="btn btn-sm btn-danger ms-3"
+          v-on:click="fields.splice(fields.indexOf(field), 1)"
+          title="Remove field">
+          <i class="fas fa-times"></i>
+        </a>
+      </div>
+    </div>
+  </draggable>
+
+  <textarea name="university[sso_mapping]" id="university_sso_mapping" rows="20" cols="200">
+    {{ JSON.stringify(fields) }}
+  </textarea>
+</div>
+
+<script>
+  var app = Vue.createApp({
+    components: {
+      draggable: VueDraggableNext.VueDraggableNext,
+    },
+    data() {
+      return {
+        fields: <%= university.sso_mapping.to_json.html_safe || "[]" %>
+      }
+    }
+  });
+
+  window.addEventListener('load', function(){
+    setTimeout(function() {
+      app.mount('#app');
+    }, 1000);
+  });
+</script>
\ No newline at end of file