mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-08 09:24:59 +01:00
Remove Form component
This commit is contained in:
Bubka
parent
77d7134cb1
commit
9926725a04
135
resources/js/components/form/errors.js
vendored
135
resources/js/components/form/errors.js
vendored
@ -1,135 +0,0 @@
|
||||
// Original component by Cretu Eusebiu
|
||||
// https://github.com/cretueusebiu/vform
|
||||
|
||||
import { arrayWrap } from './utils'
|
||||
|
||||
export default class Errors {
|
||||
/**
|
||||
* Create a new error bag instance.
|
||||
*/
|
||||
constructor () {
|
||||
this.errors = {}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the errors object or field error messages.
|
||||
*
|
||||
* @param {Object|String} field
|
||||
* @param {Array|String|undefined} messages
|
||||
*/
|
||||
set (field, messages) {
|
||||
if (typeof field === 'object') {
|
||||
this.errors = field
|
||||
} else {
|
||||
this.set({ ...this.errors, [field]: arrayWrap(messages) })
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all the errors.
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
all () {
|
||||
return this.errors
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if there is an error for the given field.
|
||||
*
|
||||
* @param {String} field
|
||||
* @return {Boolean}
|
||||
*/
|
||||
has (field) {
|
||||
return this.errors.hasOwnProperty(field)
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if there are any errors for the given fields.
|
||||
*
|
||||
* @param {...String} fields
|
||||
* @return {Boolean}
|
||||
*/
|
||||
hasAny (...fields) {
|
||||
return fields.some(field => this.has(field))
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if there are any errors.
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
any () {
|
||||
return Object.keys(this.errors).length > 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the first error message for the given field.
|
||||
*
|
||||
* @param String} field
|
||||
* @return {String|undefined}
|
||||
*/
|
||||
get (field) {
|
||||
if (this.has(field)) {
|
||||
return this.getAll(field)[0]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all the error messages for the given field.
|
||||
*
|
||||
* @param {String} field
|
||||
* @return {Array}
|
||||
*/
|
||||
getAll (field) {
|
||||
return arrayWrap(this.errors[field] || [])
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the error message for the given fields.
|
||||
*
|
||||
* @param {...String} fields
|
||||
* @return {Array}
|
||||
*/
|
||||
only (...fields) {
|
||||
const messages = []
|
||||
|
||||
fields.forEach(field => {
|
||||
const message = this.get(field)
|
||||
|
||||
if (message) {
|
||||
messages.push(message)
|
||||
}
|
||||
})
|
||||
|
||||
return messages
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all the errors in a flat array.
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
flatten () {
|
||||
return Object.values(this.errors).reduce((a, b) => a.concat(b), [])
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear one or all error fields.
|
||||
*
|
||||
* @param {String|undefined} field
|
||||
*/
|
||||
clear (field) {
|
||||
const errors = {}
|
||||
|
||||
if (field) {
|
||||
Object.keys(this.errors).forEach(key => {
|
||||
if (key !== field) {
|
||||
errors[key] = this.errors[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.set(errors)
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<p class="help is-danger" v-if="form.errors.has(field)" v-html="form.errors.get(field)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'field-error',
|
||||
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
|
||||
field: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div v-if="form.errors.any()" role="alert" class="field">
|
||||
<slot>
|
||||
<span v-if="form.errors.has('error')" v-html="form.errors.get('error')" class="tag is-danger" />
|
||||
<span v-else v-html="message" class="tag is-danger" />
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'form-error',
|
||||
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
|
||||
message: {
|
||||
type: String,
|
||||
default: 'There were some problems with your input.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div v-if="form.errors.any()" role="alert" class="field">
|
||||
<span v-if="message" v-html="message" class="tag is-danger" />
|
||||
<ul>
|
||||
<li v-for="error in form.errors.flatten()" v-html="error" class="tag is-danger" />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'form-errors',
|
||||
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
|
||||
message: {
|
||||
type: String,
|
||||
default: 'There were some problems with your input.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
238
resources/js/components/form/form.js
vendored
238
resources/js/components/form/form.js
vendored
@ -1,238 +0,0 @@
|
||||
// Original component by Cretu Eusebiu
|
||||
// https://github.com/cretueusebiu/vform
|
||||
|
||||
import axios from 'axios'
|
||||
import Errors from './errors'
|
||||
import { deepCopy } from './utils'
|
||||
|
||||
class Form {
|
||||
/**
|
||||
* Create a new form instance.
|
||||
*
|
||||
* @param {Object} data
|
||||
*/
|
||||
constructor (data = {}) {
|
||||
this.busy = false
|
||||
this.successful = false
|
||||
this.errors = new Errors()
|
||||
this.originalData = deepCopy(data)
|
||||
|
||||
Object.assign(this, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* Fill form data.
|
||||
*
|
||||
* @param {Object} data
|
||||
*/
|
||||
fill (data) {
|
||||
this.keys().forEach(key => {
|
||||
this[key] = data[key]
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the form data.
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
data () {
|
||||
return this.keys().reduce((data, key) => (
|
||||
{ ...data, [key]: this[key] }
|
||||
), {})
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the form data keys.
|
||||
*
|
||||
* @return {Array}
|
||||
*/
|
||||
keys () {
|
||||
return Object.keys(this)
|
||||
.filter(key => !Form.ignore.includes(key))
|
||||
}
|
||||
|
||||
/**
|
||||
* Start processing the form.
|
||||
*/
|
||||
startProcessing () {
|
||||
this.errors.clear()
|
||||
this.busy = true
|
||||
this.successful = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Finish processing the form.
|
||||
*/
|
||||
finishProcessing () {
|
||||
this.busy = false
|
||||
this.successful = true
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear the form errors.
|
||||
*/
|
||||
clear () {
|
||||
this.errors.clear()
|
||||
this.successful = false
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the form fields.
|
||||
*/
|
||||
reset () {
|
||||
Object.keys(this)
|
||||
.filter(key => !Form.ignore.includes(key))
|
||||
.forEach(key => {
|
||||
this[key] = deepCopy(this.originalData[key])
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the from via a GET request.
|
||||
*
|
||||
* @param {String} url
|
||||
* @return {Promise}
|
||||
*/
|
||||
get (url) {
|
||||
return this.submit('get', url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the from via a POST request.
|
||||
*
|
||||
* @param {String} url
|
||||
* @return {Promise}
|
||||
*/
|
||||
post (url) {
|
||||
return this.submit('post', url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the from via a PATCH request.
|
||||
*
|
||||
* @param {String} url
|
||||
* @return {Promise}
|
||||
*/
|
||||
patch (url) {
|
||||
return this.submit('patch', url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the from via a PUT request.
|
||||
*
|
||||
* @param {String} url
|
||||
* @return {Promise}
|
||||
*/
|
||||
put (url) {
|
||||
return this.submit('put', url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the from via a DELETE request.
|
||||
*
|
||||
* @param {String} url
|
||||
* @return {Promise}
|
||||
*/
|
||||
delete (url) {
|
||||
return this.submit('delete', url)
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit the form data via an HTTP request.
|
||||
*
|
||||
* @param {String} method (get, post, patch, put)
|
||||
* @param {String} url
|
||||
* @param {Object} config (axios config)
|
||||
* @return {Promise}
|
||||
*/
|
||||
submit (method, url, config = {}) {
|
||||
this.startProcessing()
|
||||
|
||||
const data = method === 'get'
|
||||
? { params: this.data() }
|
||||
: this.data()
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.request({ url: this.route(url), method, data, ...config })
|
||||
.then(response => {
|
||||
this.finishProcessing()
|
||||
|
||||
resolve(response)
|
||||
})
|
||||
.catch(error => {
|
||||
this.busy = false
|
||||
|
||||
if (error.response) {
|
||||
this.errors.set(this.extractErrors(error.response))
|
||||
}
|
||||
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the errors from the response object.
|
||||
*
|
||||
* @param {Object} response
|
||||
* @return {Object}
|
||||
*/
|
||||
extractErrors (response) {
|
||||
if (!response.data || typeof response.data !== 'object') {
|
||||
return { error: Form.errorMessage }
|
||||
}
|
||||
|
||||
if (response.data.errors) {
|
||||
return { ...response.data.errors }
|
||||
}
|
||||
|
||||
if (response.data.message) {
|
||||
return { error: response.data.message }
|
||||
}
|
||||
|
||||
return { ...response.data }
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a named route.
|
||||
*
|
||||
* @param {String} name
|
||||
* @return {Object} parameters
|
||||
* @return {String}
|
||||
*/
|
||||
route (name, parameters = {}) {
|
||||
let url = name
|
||||
|
||||
if (Form.routes.hasOwnProperty(name)) {
|
||||
url = decodeURI(Form.routes[name])
|
||||
}
|
||||
|
||||
if (typeof parameters !== 'object') {
|
||||
parameters = { id: parameters }
|
||||
}
|
||||
|
||||
Object.keys(parameters).forEach(key => {
|
||||
url = url.replace(`{${key}}`, parameters[key])
|
||||
})
|
||||
|
||||
return url
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear errors on keydown.
|
||||
*
|
||||
* @param {KeyboardEvent} event
|
||||
*/
|
||||
onKeydown (event) {
|
||||
if (event.target.name) {
|
||||
this.errors.clear(event.target.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Form.routes = {}
|
||||
Form.errorMessage = 'Something went wrong. Please try again.'
|
||||
Form.ignore = ['busy', 'successful', 'errors', 'originalData']
|
||||
|
||||
export default Form
|
||||
14
resources/js/components/form/index.js
vendored
14
resources/js/components/form/index.js
vendored
@ -1,14 +0,0 @@
|
||||
import Form from './form'
|
||||
import Errors from './errors'
|
||||
import FieldError from './errors/FieldError'
|
||||
import FormError from './errors/FormError'
|
||||
import FormErrors from './errors/FormErrors'
|
||||
|
||||
export {
|
||||
Form,
|
||||
Errors,
|
||||
FieldError,
|
||||
FormError,
|
||||
FormErrors,
|
||||
Form as default
|
||||
}
|
||||
32
resources/js/components/form/utils.js
vendored
32
resources/js/components/form/utils.js
vendored
@ -1,32 +0,0 @@
|
||||
// Original component by Cretu Eusebiu
|
||||
// https://github.com/cretueusebiu/vform
|
||||
|
||||
/**
|
||||
* Deep copy the given object.
|
||||
*
|
||||
* @param {Object} obj
|
||||
* @return {Object}
|
||||
*/
|
||||
export function deepCopy (obj) {
|
||||
if (obj === null || typeof obj !== 'object') {
|
||||
return obj
|
||||
}
|
||||
|
||||
const copy = Array.isArray(obj) ? [] : {}
|
||||
|
||||
Object.keys(obj).forEach(key => {
|
||||
copy[key] = deepCopy(obj[key])
|
||||
})
|
||||
|
||||
return copy
|
||||
}
|
||||
|
||||
/**
|
||||
* If the given value is not an array, wrap it in one.
|
||||
*
|
||||
* @param {Any} value
|
||||
* @return {Array}
|
||||
*/
|
||||
export function arrayWrap (value) {
|
||||
return Array.isArray(value) ? value : [value]
|
||||
}
|
||||
4
resources/js/components/index.js
vendored
4
resources/js/components/index.js
vendored
@ -1,13 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import Button from './Button'
|
||||
import { FormError, FormErrors, FieldError } from './form'
|
||||
|
||||
// Components that are registered globaly.
|
||||
[
|
||||
Button,
|
||||
FormError,
|
||||
FormErrors,
|
||||
FieldError
|
||||
].forEach(Component => {
|
||||
Vue.component(Component.name, Component)
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user