Add shortcut for copying api keys

application/views/api/help.php

@@ -32,7 +32,7 @@
 		  <tbody>
 			<?php foreach ($api_keys->result() as $row) { ?>
 				<tr>
-					<td><i class="fas fa-key"></i> <?php echo $row->key; ?></td>
+					<td><i class="fas fa-key"></i> <span class="api-key" id="<?php echo $row->key; ?>"><?php echo $row->key; ?></span> <span data-toggle="tooltip" data-original-title="Copy to Clipboard" onclick='copyApiKey("<?php echo $row->key; ?>")'><i class="copy-icon fas fa-copy"></span></td>
 					<td><?php echo $row->description; ?></td>
 					<td>
 						<?php
@@ -56,6 +56,7 @@
 
 						<a href="<?php echo site_url('api/delete/'.$row->key); ?>" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want delete API Key <?php echo $row->key; ?>?');">Delete</a>
 					</td>
+
 				</tr>
 
 			<?php } ?>

application/views/interface_assets/footer.php

@@ -89,6 +89,23 @@ function load_was_map() {
     <script src="<?php echo base_url() ;?>assets/js/sections/station_logbooks.js"></script>
 <?php } ?>
 
+<?php if ($this->uri->segment(1) == "api"  && $this->uri->segment(2) == "help") { ?>
+<script type="text/javascript">
+function copyApiKey(apiKey) {
+   var apiKeyField = $('#'+apiKey);
+   navigator.clipboard.writeText(apiKey).then(function() {
+   });
+   apiKeyField.addClass('flash-copy')
+      .delay('1000').queue(function() {
+         apiKeyField.removeClass('flash-copy').dequeue();
+      });
+}
+
+$(function () {
+   $('[data-toggle="tooltip"]').tooltip({'delay': { show: 500, hide: 0 }, 'placement': 'right'});
+});
+</script>
+<?php } ?>
 
 <?php if ($this->uri->segment(1) == "search" && $this->uri->segment(2) == "filter") { ?>
 

assets/css/general.css

@@ -362,3 +362,28 @@ div#station_logbooks_linked_table_paginate {
     height: calc(100vh - 380px) !important;
     max-height: 900px !important;
 }
+
+.copy-icon {
+   display: block;
+   cursor: pointer;
+   padding-left: 0.5em;
+}
+
+.flash-copy {
+   animation-name: flash;
+   animation-timing-function: ease-out;
+   animation-duration: 1s;
+}
+
+@keyframes flash {
+   0% {
+      background: #28a745;
+   }
+   100% {
+      background: transparent;
+   }
+}
+
+.api-key {
+   font-family: Monospace;
+}