Update to 0.3

Integrated clipboard.js and changed the generated pass field visibility toggle to a copy-to-clipboard button. Updated generated passfield from readonly to plain text for mobile compatibility for selecting and copying pass.

assets/css/style.css

@@ -39,13 +39,19 @@
     font-style: italic;
     width: 100%;
     text-align: center;
-    color: dimgray;
+    color: grey;
 }
 
-#passgrinder .toggle-password {
+#passgrinder .toggle-password, #passgrinder .toggle-copy {
     cursor: pointer;
 }
 
 #passgrinder #pg-result {
     display: none;
 }
+
+@media all and (max-width: 767px) {
+    #passgrinder #pg-message #success {
+        display: none;
+    }
+}

assets/js/script.js

@@ -60,6 +60,15 @@ jQuery( document ).ready( function($) {
 });
 
 
+
+// Auto select all on generated pass field on click
+jQuery( document ).ready( function($) {
+    $('#pg-result-pass').on('touchstart click', function(){ 
+        $(this).select(); 
+    });
+});
+
+
 
 // Hide generated password field and response on reset
 jQuery( document ).ready( function($) {
@@ -78,6 +87,7 @@ jQuery( document ).ready( function($) {
     $( '#passgrinder-form' ).submit(function(e){
         e.preventDefault();
 
+
         // Hash the password/s
         var md5;
         if ( $.md5($('#pg-password').val(), null, true) !== '' ) {
@@ -107,43 +117,39 @@ jQuery( document ).ready( function($) {
 
         // Form post action and response handling
         $.post(settings.ajaxurl, data, function(response) {
-//            console.log('Encoded: '+pg_z85);
-//            console.log( data );
             console.log( "PassGrinder: " );
             console.log( response );
 
             $("#pg-result").show();
             $("#pg-result-pass").val(pg_z85);
 
-            // Copy pass to clipboard automatically
-            var input = $("#pg-result-pass"), userstate;
-            if (input.attr("type") === "password") { // Check for current field type (password or test)
-                input.attr("type", "text"); // If password, change to text so we can copy it
-                userstate = 1; // Indicate previous user-set state so we know whether or not to change back
-            }
-            $("#pg-result-pass").select();
-            document.execCommand("copy");
-            if (userstate == 1) {
-                input.attr("type", "password"); 
-                userstate = null;
-            }
+            // Clipboard.js, copy on click
+            var clipboard = new ClipboardJS('.toggle-copy');
+
+            clipboard.on('success', function() {
+                $('#pg-message #success').html( 'Copied to the clipboard!' );
+            });
+
+            clipboard.on('error', function() {
+                $('#pg-message #fail').html( 'Something went wrong. Please manually copy your password.' );
+            });
 
             // Send response
             if ( response.success == true ) {
                 $('#pg-message #success').html( response.data );
+
+                // Auto reset form after 5 minutes
+                if ( $("#pg-result-pass").val() ) { // Double check that it is necessary
+                    setTimeout( function() { 
+                        $("#passgrinder-form").trigger('reset'); 
+                        $('#pg-message #reset').html("PassGrinder has automatically reset to protect your password."); 
+                        console.log( "PassGrinder: Automatically reset" ); 
+                    }, 300000);
+                }
             } else {
                 $('#pg-message #fail').html( response.data );
             }
 
-            // Auto reset form after time
-            if ( $("#pg-result-pass").val() ) {
-                setTimeout( function() { 
-                    $("#passgrinder-form").trigger('reset'); 
-                    $('#pg-message #reset').html("Form has automatically reset to protect your password."); 
-                    console.log( "PassGrinder: For automatically reset" ); 
-                }, 30000);
-            }
-
         });
 
     });

inc/class-passgrinder.php

@@ -34,6 +34,9 @@ function enqueue() {
         // Load z85 encoding
         wp_enqueue_script( 'passgrinder-z85', plugin_dir_url(__FILE__) . '../assets/js/encodeZ85.js' );
 
+        // Load clipboard.js
+        wp_enqueue_script( 'passgrinder-clipboardjs', plugin_dir_url(__FILE__) . '../assets/js/clipboard.min.js' );
+
 
         // set variables for script
         wp_localize_script( 'passgrinder', 'settings', array(
@@ -54,7 +57,7 @@ public function eval_helper() {
 
         // send success or error
         if ( $pass !== "" ) {
-            wp_send_json_success( __( 'Copied to the clipboard!', 'passgrinder' ) );
+            wp_send_json_success( __( 'Successfully generated your password!', 'passgrinder' ) );
         } else {
             wp_send_json_error( __( 'Something went wrong. Please refresh and try again!', 'passgrinder' ) );
         }
@@ -139,9 +142,9 @@ public function shortcode_form($atts) {
 
         <div id="pg-result" class="form-group row">
             <div class="input-group col">
-                <input type="password" id="pg-result-pass" name="pg-result-pass" class="form-control" value="" placeholder="Your Generated Password" readonly />
+                <input type="text" id="pg-result-pass" name="pg-result-pass" class="form-control" value="" placeholder="Your Generated Password" />
                 <div class="input-group-append">
-                    <div class="input-group-text toggle-password"><i class="fa fa-eye"></i></div>
+                    <div class="input-group-text toggle-copy" data-clipboard-target="#pg-result-pass"><i class="fa fa-copy"></i></div>
                 </div>
             </div>
         </div>

passgrinder.php

@@ -5,7 +5,7 @@
   Description: 
   Author:      Jeremy Caris
   Author URI:  https://passgrinder.com/
-  Version:     0.2
+  Version:     0.3
   Category:    utility
 
 */