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.
226 lines
7.8 KiB
226 lines
7.8 KiB
<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>
|