You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.1 KiB
109 lines
3.1 KiB
<urban-bucket-form>
|
|
<div class="form">
|
|
<form method="POST">
|
|
|
|
<input type="hidden" name="_token" value={ state.csrfToken } if={ state.csrfToken } />
|
|
|
|
<!-- title -->
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label" for="title">
|
|
title
|
|
</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control">
|
|
<input id="title" class={ getClasses('title', 'input') } type="text" name="title" value={ props.title } onkeyup={ (event) => { state.validator.handle(event, 'title') }} />
|
|
<field-error errors={ state.validator.errors('title') } ></field-error>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- is public -->
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label" for="public">
|
|
public
|
|
</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<input id="public" type="checkbox" name="public" value="1" checked={ props.public }>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- submit -->
|
|
<div class="field">
|
|
<div class="control">
|
|
<button class="button is-primary" type="submit" disabled={ state.validator.errors().length > 0 }>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<script>
|
|
|
|
import Validator from '@tentakelfabrik/tiny-validator/src/validator'
|
|
import FieldError from '../field-error.riot'
|
|
|
|
riot.register('field-error', FieldError)
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} props [description]
|
|
* @param {[type]} state [description]
|
|
*
|
|
*/
|
|
onBeforeMount(props, state) {
|
|
state.validator = new Validator({
|
|
title: {
|
|
presence: true
|
|
}
|
|
}, this)
|
|
|
|
//
|
|
const meta = document.querySelector("meta[name='csrf-token']")
|
|
|
|
if (meta) {
|
|
state.csrfToken = meta.getAttribute("content")
|
|
}
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @param {[type]} key
|
|
* @param {[type]} defaultClass
|
|
* @return {[type]}
|
|
*
|
|
*/
|
|
getClasses(key, defaultClass) {
|
|
const classes = [
|
|
defaultClass
|
|
]
|
|
|
|
const errors = this.state.validator.errors(key)
|
|
|
|
if (errors && errors.length > 0) {
|
|
classes.push('is-danger')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</urban-bucket-form>
|