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.
157 lines
5.2 KiB
157 lines
5.2 KiB
<urban-bucket-form>
|
|
<div class="form">
|
|
<form method="POST">
|
|
|
|
<input type="hidden" name="_token" value={ state.csrfToken } if={ state.csrfToken } />
|
|
|
|
<!-- name -->
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label required" for="name">
|
|
name
|
|
</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control">
|
|
<input id="name" class={ getClasses('name', 'input') } type="text" name="name" value={ props.name } onkeyup={ (event) => { state.validator.handle(event, 'name') }} />
|
|
<field-error errors={ state.validator.errors('name') } ></field-error>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- description -->
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label" for="description">
|
|
description
|
|
</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control">
|
|
<textarea id="description" class={ getClasses('description', 'textarea') } name="description" value={ props.description } onkeyup={ (event) => { state.validator.handle(event, 'description') }}></textarea>
|
|
<field-error errors={ state.validator.errors('description') } ></field-error>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- path -->
|
|
<div class="field is-horizontal">
|
|
<div class="field-label is-normal">
|
|
<label class="label" for="name">
|
|
path
|
|
</label>
|
|
</div>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control">
|
|
<input id="path" class={ getClasses('path', 'input') } type="text" name="path" value={ props.path } onkeyup={ (event) => { state.validator.handle(event, 'path') }} />
|
|
<field-error errors={ state.validator.errors('path') } ></field-error>
|
|
<span class="help">
|
|
path for storage files, if empty default path will be used
|
|
</span>
|
|
</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 }>
|
|
<span class="help">
|
|
everyone can see bucket, files and download them
|
|
</span>
|
|
</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({
|
|
name: {
|
|
presence: true,
|
|
length: {
|
|
maximum: 255
|
|
}
|
|
},
|
|
description: {
|
|
length: {
|
|
maximum: 255
|
|
}
|
|
}
|
|
}, 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>
|