nano-buckets/resources/js/components/users/form.riot

<app-users-form>
    <div class="sidebar">
        <div class="sidebar__inner">

            <div class="bar">
                <div class="bar__main">
                    <span if={ !state.user._id }>
                        Create User
                    </span>
                    <span if={ state.user._id }>
                        Update User
                    </span>
                </div>
                <div class="bar__end">
                    <button id="sidebar-user-form-close" class="button button--transparent" type="button" onclick={ (event) => { handleClose(event) } }>
                        <svg class="icon fill-text-contrast" aria-hidden="true">
                            <use xlink:href="/symbol-defs.svg#icon-close"></use>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="sidebar__body">
                <form id="app-users-form" novalidate>
                    <div class="field-group">
                        <label class="field-label">
                            E-Mail
                            <input name="email" type="text" value={ state.user.email } class="field-text" />
                        </label>
                        <field-error name="email"></field-error>
                    </div>
                    <div class="field-group">
                        <label class="field-label">
                            Display Name
                            <input name="display_name" type="text" value={ state.user.display_name } class="field-text" />
                        </label>
                        <field-error name="display_name"></field-error>
                    </div>

                    <div class="field-group m-bottom-7">
                        <label class="field-label">
                            <input name="roles[]" type="checkbox" class="field-choice" value="admin" />
                            <svg class="icon field-choice__unchecked" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-checkbox"></use>
                            </svg>
                            <svg class="icon field-choice__checked" aria-hidden="true">
                                <use xlink:href="/symbol-defs.svg#icon-checkbox-checked"></use>
                            </svg>
                            Admin
                        </label>
                        <field-error name="roles"></field-error>
                    </div>

                    <div class="field-group">
                        <label class="field-label">
                            Password
                            <input name="password" type="password" class="field-text" />
                        </label>
                        <field-error name="password"></field-error>
                    </div>
                    <div class="field-group">
                        <label class="field-label">
                            Password confirm
                            <input name="password_confirm" type="password" class="field-text" />
                        </label>
                        <field-error name="password_confirm"></field-error>
                    </div>
                </form>
            </div>

            <div class="sidebar__footer">
                <button class="button m-bottom-0" type="submit" form="app-users-form">
                    Save
                    <svg class="icon fill-success p-left-3" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-check"></use>
                    </svg>
                </button>
                <button class="button m-bottom-0" type="submit" form="app-users-form" close>
                    Save and Close
                    <svg class="icon fill-success p-left-3" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-arrow-right"></use>
                    </svg>
                </button>
            </div>

            <app-loading loading={ state.loading }></app-loading>

        </div>
    </div>
    <script>

        import axios from 'axios'
        import * as riot from 'riot'

        import FormValidator from './../../FormValidator'
        import FieldError from './../field-error.riot'

        riot.register('field-error', FieldError)
        riot.mount('field-error')

        export default {

            state: {
                user: {

                },
                loading: false
            },

            /**
             *
             *
             */
            onMounted(props, state) {

                this.root.addEventListener('app-users-form-open', (event) => {
                    this.$('.sidebar').classList.add('sidebar--open')

                    // check for data, and if user is send add to state
                    if (event.detail.data) {
                        this.state.user = event.detail.data
                        this.state.formValidation.setConstraits({
                            'email': {
                                'length': {
                                    'maximum': 255
                                },
                                'email': true,
                                'presence': true
                            }
                        })

                        this.update()
                    }
                })

                // create form validation
                this.state.formValidation = new FormValidator('#app-users-form', {
                    'email': {
                        'length': {
                            'maximum': 255
                        },
                        'email': true,
                        'presence': true
                    },
                    'password': {
                        'length': {
                            'maximum': 64
                        },
                        'presence': true
                    },
                    'password_confirm': {
                        'equality': 'password'
                    }
                }, (event, data) => {
                    this.handleSubmit(event, data)
                })

            },

            /**
             *  close current form
             *
             *
             *  @param  {object} event
             *
             */
            handleClose(event)
            {
                event.preventDefault()
                this.$('.sidebar').classList.remove('sidebar--open')

                this.reset()
            },

            /**
             *
             *
             */
            handleSubmit(event, data)
            {
                let method = 'post'
                let url = '/api/users/v1'

                // user is set and has id, send as put with id
                if (this.state.user && this.state.user._id) {
                    method = 'put'
                    url += '/' + this.state.user._id
                }

                this.state.loading = true
                this.update()

                axios({
                    method: method,
                    url: url,
                    data: data
                }).then((response) => {
                    this.state.user = response.data.data

                    // check if submit has close-attribute
                    if (event.submitter.attributes.close) {
                        this.$('#sidebar-user-form-close').click()
                    }
                }).catch((error) => {
                    if (error.response.status === 422) {

                    }
                }).then(() => {
                    this.state.loading = false
                    this.update()
                })
            },

            /**
             *
             *
             */
            reset() {
                this.state.user = { }
                this.update()
            }

        }

    </script>
</app-users-form>