feature/The results of Create Consumer page should be copy and paste friendly 2

obp-api/src/main/scala/code/snippet/ConsumerRegistration.scala

@@ -208,7 +208,7 @@ class ConsumerRegistration extends MdcLoggable {
       "#post-consumer-registration-more-info-link a *" #> registrationMoreInfoText &
       "#post-consumer-registration-more-info-link a [href]" #> registrationMoreInfoUrl & {
         if(HydraUtil.integrateWithHydra) {
-          "#hydra-client-info-title *" #>"OAuth2" &
+          "#hydra-client-info-title *" #>"OAuth2: " &
           "#admin_url *" #> HydraUtil.hydraAdminUrl &
             "#client_id *" #> {consumer.key.get} &
             "#redirect_uri *" #> consumer.redirectURL.get &

obp-api/src/main/webapp/consumer-registration.html

@@ -172,7 +172,9 @@ Berlin 13359, Germany
 			</div>
 			<br>
 			<p>Please save it in a secure location.</p>
-			
+			<div style="cursor:pointer;text-align: right;" title="">
+				<div class="fa-solid fa-copy" onclick="copyConsumerRegistrationResultToClipboard(this)" id="register-consumer-success-copy-icon" title=""></div>
+			</div>
 			<div class="row">
 				<div class="col-xs-12 col-sm-4">Consumer ID: </div>
 				<div class="col-xs-12 col-sm-8"><span id="app-consumer_id">123</span></div>

obp-api/src/main/webapp/media/js/website.js

@@ -394,3 +394,43 @@ $(document).ready(function() {
 
 	showIndicatorCookiePage('cookies-consent');
 });
+
+// This function copies the JSON result at an API Explorer endpoint to a clipboard
+// when we press a copy icon in top left corner.
+// In case that action is successful the icon is changed for a 2 seconds in order to notify a user about it.
+function copyConsumerRegistrationResultToClipboard(element) {
+  var id = String(element.id).replace('register-consumer-success-copy-icon','register-consumer-success');
+  var r = document.createRange();
+  r.selectNode(document.getElementById(id));
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(r);
+  document.execCommand('copy');
+  window.getSelection().removeAllRanges();
+  // Store original values
+  var titleText = document.getElementById(element.id).title;
+  var iconClass = document.getElementById(element.id).className;
+  // and then change hey
+  document.getElementById(element.id).title = "";
+  document.getElementById(element.id).className = "fa-regular fa-copy";
+  
+  // Below code is GUI related i.e. to notify a user that text is copied to clipboard
+  // --------------------------------------------------------------------------------
+  
+  // It delays the call by ms milliseconds
+  function defer(f, ms) {
+    return function() {
+      setTimeout(() => f.apply(this, arguments), ms);
+    };
+  }
+  
+  // Function which revert icon and text to the initial state.
+  function revertTextAndClass(titleText, iconClass) {
+    document.getElementById(element.id).title = titleText;
+    document.getElementById(element.id).className = iconClass
+  }
+  
+  var revertTextAndClassDeferred = defer(revertTextAndClass, 2000);
+  // Revert the original values of text and icon after 2 seconds
+  revertTextAndClassDeferred(titleText, iconClass); 
+
+}

obp-api/src/main/webapp/templates-hidden/default.html

@@ -44,7 +44,8 @@ Berlin 13359, Germany
 	<link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 	<link id="main_style_sheet" data-lift="WebUI.mainStyleSheet" href="/media/css/website.css?201707241207" rel="stylesheet" type="text/css" />
 	<link id="override_style_sheet" data-lift="WebUI.overrideStyleSheet" href="" rel="stylesheet" type="text/css" />
-
+	<link rel="stylesheet" href="/font-awesome/css/all.min.css">
+	
 	<script src="/media/js/jquery.min.js" type="text/javascript"></script>
 	<script src="/media/js/bootstrap.min.js" type="text/javascript"></script>
 	<script src="/media/js/select2.min.js"></script>