urban-filehub/resources/js/components/bucket/form.riot

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