Add clickable API URL to API keys page

application/views/api/help.php

@@ -16,6 +16,7 @@
   <div class="card-body">
 	<p class="card-text">The Cloudlog API (Application Programming Interface) lets third party systems access Cloudlog in a controlled way. Access to the API is managed via API keys.</p>
 	<p class="card-text">You will need to generate an API key for each tool you wish to use (e.g. CloudlogCAT). Generate a read-write key if the application needs to send data to Cloudlog. Generate a read-only key if the application only needs to obtain data from Cloudlog.</p>
+   <p class="card-text"><span class="badge badge-warning">API URL</span> The API URL for this Cloudlog instance is: <span class="api-url" id="apiUrl"><a target="_blank" href="<?php echo base_url(); ?>"><?php echo base_url(); ?></a></span><span data-toggle="tooltip" data-original-title="<?php echo $this->lang->line('copy_to_clipboard'); ?>" onClick='copyApiUrl()'><i class="copy-icon fas fa-copy"></i></span></p>
 	<p class="card-text"><span class="badge badge-info">Info</span> It's good practice to delete a key if you are no longer using the associated application.</p>
 
 		<?php if ($api_keys->num_rows() > 0) { ?>

application/views/interface_assets/footer.php

@@ -158,6 +158,16 @@ function copyApiKey(apiKey) {
       });
 }
 
+function copyApiUrl() {
+   var apiUrlField = $('#apiUrl');
+   navigator.clipboard.writeText("<?php echo base_url(); ?>").then(function() {
+   });
+   apiUrlField.addClass('flash-copy')
+      .delay('1000').queue(function() {
+         apiUrlField.removeClass('flash-copy').dequeue();
+      });
+}
+
 $(function () {
    $('[data-toggle="tooltip"]').tooltip({'delay': { show: 500, hide: 0 }, 'placement': 'right'});
 });

assets/css/general.css

@@ -405,6 +405,10 @@ div#station_logbooks_linked_table_paginate {
    }
 }
 
+.api-url {
+   font-family: Monospace;
+}
+
 .api-key {
    font-family: Monospace;
 }