UX Improvements to shareable certificates

.changelogs/bug-fix-1379.yml

@@ -0,0 +1,7 @@
+significance: patch
+type: added
+links:
+  - "#1379"
+attributions:
+  - "@imknight"
+entry: Adding read-only input for easier sharing of a certificate.

templates/certificates/actions.php

@@ -30,7 +30,7 @@
 	<form action="" method="POST">
 
 		<button class="llms-button-secondary" type="submit" name="llms_generate_cert">
-			<?php esc_html_e( 'Save', 'lifterlms' ); ?>
+			<?php esc_html_e( 'Download', 'lifterlms' ); ?>
 			<i class="fa fa-cloud-download" aria-hidden="true"></i>
 		</button>
 
@@ -40,10 +40,46 @@
 				<i class="fa fa-share-alt" aria-hidden="true"></i>
 			</button>
 		<?php endif; ?>
+
+    <?php if ( $is_sharing_enabled ) : ?>
+			<button id="llms-copy-to-clipboard" class="llms-button-secondary" type="button" aria-disabled="false">
+				<?php echo esc_html__( 'Copy Shareable Link', 'lifterlms' ); ?>
+				<i class="fa fa-clipboard" aria-hidden="true"></i>
+			</button> <span id="llms-copy-to-clipboard-success" class="fa fa-check" role="alert" aria-live="polite" style="display: none;"><span class="sr-only"><?php echo esc_html__( 'Copied', 'lifterlms' ); ?></span></span>
+		<?php endif; ?>
 
 		<input type="hidden" name="certificate_id" value="<?php echo esc_attr( get_the_ID() ); ?>">
+
 		<?php wp_nonce_field( 'llms-cert-actions', '_llms_cert_actions_nonce' ); ?>
 
 	</form>
 
 </div>
+
+<style>
+	#llms-copy-to-clipboard-success {
+		display: none;
+	}
+
+	.sr-only {
+		clip: rect(1px, 1px, 1px, 1px);
+		clip-path: inset(50%);
+		height: 1px;
+		overflow: hidden;
+		position: absolute;
+		white-space: nowrap;
+		width: 1px;
+		margin: -1px;
+	}
+</style>
+
+<script type="text/javascript">
+	document.getElementById( 'llms-copy-to-clipboard' ).addEventListener( 'click', function() {
+		navigator.clipboard.writeText( window.location.href );
+		document.getElementById( 'llms-copy-to-clipboard-success' ).style.display = 'inline-block';
+		setTimeout( function() {
+			document.getElementById( 'llms-copy-to-clipboard-success' ).style.display = 'none';
+		}, 2000 );
+	} );
+</script>
+