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: 5 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>