Merge pull request #11 from oooholdings/dev

Show field on Index, Detail and Preview

Author: btrsco

dist/css/field.css

@@ -15,7 +15,8 @@
     3. [Hide Toolbar Elements](#hide-toolbar-elements)
     4. [Customize Password Generation](#customize-password-generation)
     5. [Operation Base Filling](#operation-base-filling)
-    6. [Other Methods](#other-methods)
+    6. [Index and Detail View](#index-and-detail-view)
+    7. [Other Methods](#other-methods)
 4. [Credits](#credits)
 5. [License](#license)
 
@@ -228,6 +229,38 @@ public function fields()
 }
 ```
 
+### Index and Detail View
+
+You can now show the value of your field on the index or detail pages, usually you wouldn't want to do this
+if you're using this field for passwords. But with other use-cases like tokens and such, this would be great.
+Since there's a detail field now, you can use this within the resource preview modal.
+
+```php
+// in app/Nova/[Resource].php
+
+use OutOfOffice\PasswordGenerator\PasswordGenerator;
+
+public function fields()
+{
+    return [
+
+        PasswordGenerator::make( 'Personal Access Token' )
+            // Show the password as plain-text by default on the respective pages
+            // These two methods work well with the others as they just show the password
+            // on page load, you can use the other methods below for the styling
+            ->showValueOnDetail( bool $show = true )
+            ->showValueOnIndex( bool $show = true )
+            // Hide the password with a blur effect on the respective pages
+            ->blurValueOnDetail( bool $show = true )
+            ->blurValueOnIndex( bool $show = true )
+            // Hide the password with a set character on the respective pages
+            ->redactValueOnDetail( bool $redact = true, string $character = '•' )
+            ->redactValueOnIndex( bool $redact = true, string $character = '•' )
+
+    ];
+}
+```
+
 ### Other Methods
 
 Just a list of other miscellaneous methods to control smaller features.

dist/js/field.js

@@ -1,10 +1,103 @@
 <template>
     <PanelItem :index="index"
-               :field="{ name: field.name }" />
+               :field="{ name: field.name }"
+               class="ooo:password-generator">
+        <template v-slot:value>
+            <div v-if="showValueOnDetail || blurValueOnDetail || redactValueOnDetail"
+                 class="ooo:pg-value">
+                <div v-if="hidden"
+                     class="top-0 left-0 inline-block font-mono mr-2"
+                     :class="[ blurValueOnDetail ? 'ooo:pg-value-blurred' : '' ]">
+                    {{ blurValueOnDetail ? fakeValue : dotValue }}
+                </div>
+                <div v-else
+                     class="top-0 left-0 inline-block font-mono mr-2">
+                    {{ field.value }}
+                </div>
+
+                <div class="flex">
+                    <div v-if="!showValueOnDetail || blurValueOnDetail || redactValueOnDetail">
+                        <icon-show v-if="hidden && !hideShowPasswordToggle"
+                                   class="h-4 w-4"
+                                   v-tooltip="tooltips.showPassword.disabled"
+                                   @click="showValue"></icon-show>
+                        <icon-hide v-else
+                                   class="h-4 w-4"
+                                   v-tooltip="tooltips.showPassword.enabled"
+                                   @click="hideValue"></icon-hide>
+                    </div>
+
+                    <icon-copy v-if="!hideCopyPasswordButton"
+                               class="h-4 w-4 ml-2"
+                               v-tooltip="tooltips.copyPassword.dynamic"
+                               @click="copyPassword"></icon-copy>
+                </div>
+            </div>
+            <div v-else>&mdash;</div>
+        </template>
+    </PanelItem>
 </template>
 
 <script>
+import baseField from '../mixins/baseField';
+import hideIcon from './icons/hideIcon';
+import showIcon from './icons/showIcon';
+import copyIcon from './icons/copyIcon';
+
 export default {
-    props: [ 'index', 'resource', 'resourceName', 'resourceId', 'field' ],
+    mixins:     [ baseField ],
+    props:      [ 'index', 'resource', 'resourceName', 'resourceId', 'field' ],
+    components: {
+        'icon-copy': copyIcon,
+        'icon-hide': hideIcon,
+        'icon-show': showIcon,
+    },
+    data() {
+        return {
+            hidden: !this.field.showValueOnDetail,
+        };
+    },
+    mounted() {
+        console.log( this.field );
+    },
+    methods: {
+        showValue() {
+            this.hidden = false;
+        },
+        hideValue() {
+            this.hidden = true;
+        },
+        toggleValueVisibility() {
+            this.hidden = !this.hidden;
+        },
+        copyPassword() {
+            if ( this.field.value !== '' ) {
+                if ( navigator.clipboard && window.isSecureContext ) {
+                    navigator.clipboard.writeText( this.field.value );
+                    Nova.success( 'Password has been copied.' );
+                } else {
+                    let textArea   = document.createElement( 'textarea' );
+                    textArea.value = this.field.value;
+
+                    textArea.style.top      = '-9999px';
+                    textArea.style.left     = '-9999px';
+                    textArea.style.position = 'fixed';
+
+                    document.body.appendChild( textArea );
+                    textArea.focus();
+                    textArea.select();
+
+                    return new Promise( ( res, rej ) => {
+                        document.execCommand( 'copy' ) ? res() : rej();
+                        Nova.success( 'Password has been copied.' );
+
+                        textArea.remove();
+                    } );
+                }
+            } else {
+                Nova.error( 'No password to copy, type or generate a password.' );
+            }
+        },
+    }
 }
 </script>