PHP Classes

File: resources/js/components/FormField.vue

Recommend this page to a friend!
  Classes of Naif Alshaye  >  Random Laravel Nova Password Field  >  resources/js/components/FormField.vue  >  Download  
File: resources/js/components/FormField.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Random Laravel Nova Password Field
Display a password field in Laravel Nova
Author: By
Last change:
Date: 2 years ago
Size: 2,670 bytes
 

Contents

Class file image Download
<template>
    <default-field :field="field">
        <template slot="field">
            <div style="display: flex">
                <input :id="field.name" type="text"
                       class="w-full form-control form-input form-input-bordered"
                       :class="errorClasses"
                       :placeholder="field.name"
                       autocomplete="off"
                       v-model="value"/>
                <input type="button" class="button"  value="***" v-on:click="generate();">
                <div class="tooltip">
                    <button type="button" class="copyButtton" v-on:click="copyPassword()">
                        <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
                        Copy
                    </button>
                </div>
            </div>
            <p v-if="hasError" class="my-2 text-danger">
                {{ firstError }}
            </p>
        </template>
    </default-field>
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'

export default {
    mixins: [FormField, HandlesValidationErrors],

    props: ['resourceName', 'resourceId', 'field'],

    methods: {
        generate() {
            var chars = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()-+<>ABCDEFGHIJKLMNOP1234567890";
            var pass = "";
            var length = 10;
            if (this.field.length > 0){
                length = this.field.length;
            }
            for (var x = 0; x < length; x++) {
                var i = Math.floor(Math.random() * chars.length);
                pass += chars.charAt(i);
            }
            this.value = pass;
        },
        copyPassword() {
            var copyText = document.getElementById(this.field.name);
            var tooltip = document.getElementById("myTooltip");
            if (copyText.value.length > 0) {
                copyText.select();
                document.execCommand("copy");
                tooltip.innerHTML = "Copied";
            }
            else{
                tooltip.innerHTML = "Generate a password first";
            }
        },
        /*
         * Set the initial, internal value for the field.
         */
        setInitialValue() {
          this.value = this.field.value || ''
        },

        /**
         * Fill the given FormData object with the field's internal value.
         */
        fill(formData) {
          formData.append(this.field.attribute, this.value || '')
        },

        /**
         * Update the field's internal value.
         */
        handleChange(value) {
          this.value = value
        }
    }
}
</script>
For more information send a message to info at phpclasses dot org.