forked from vikunja/frontend
konrad
2104d1ea4b
Fix input validation for new tasks Better layout for input validation for new lists Add input length validation for new namepaces Add input length validation for new lists Add input length validation for new tasks Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#70
86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<div class="fullpage">
|
|
<a class="close" @click="back()">
|
|
<icon :icon="['far', 'times-circle']">
|
|
</icon>
|
|
</a>
|
|
<h3>Create a new namespace</h3>
|
|
<div class="field is-grouped">
|
|
<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
|
|
<input v-focus
|
|
class="input"
|
|
v-bind:class="{ 'disabled': namespaceService.loading}"
|
|
v-model="namespace.name"
|
|
type="text"
|
|
@keyup.enter="newNamespace()"
|
|
@keyup.esc="back()"
|
|
placeholder="The namespace's name goes here..."/>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-success noshadow" @click="newNamespace()" :disabled="namespace.name.length <= 5">
|
|
<span class="icon is-small">
|
|
<icon icon="plus"/>
|
|
</span>
|
|
Add
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<p class="help is-danger" v-if="showError && namespace.name.length <= 5">
|
|
Please specify at least five characters.
|
|
</p>
|
|
<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">
|
|
What's a namespace?</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import auth from '../../auth'
|
|
import router from '../../router'
|
|
import NamespaceModel from "../../models/namespace";
|
|
import NamespaceService from "../../services/namespace";
|
|
|
|
export default {
|
|
name: "NewNamespace",
|
|
data() {
|
|
return {
|
|
showError: false,
|
|
namespace: NamespaceModel,
|
|
namespaceService: NamespaceService,
|
|
}
|
|
},
|
|
beforeMount() {
|
|
// Check if the user is already logged in, if so, redirect him to the homepage
|
|
if (!auth.user.authenticated) {
|
|
router.push({name: 'home'})
|
|
}
|
|
},
|
|
created() {
|
|
this.namespace = new NamespaceModel()
|
|
this.namespaceService = new NamespaceService()
|
|
this.$parent.setFullPage();
|
|
},
|
|
methods: {
|
|
newNamespace() {
|
|
if (this.namespace.name.length <= 4) {
|
|
this.showError = true
|
|
return
|
|
}
|
|
this.showError = false
|
|
|
|
this.namespaceService.create(this.namespace)
|
|
.then(() => {
|
|
this.$parent.loadNamespaces()
|
|
this.success({message: 'The namespace was successfully created.'}, this)
|
|
router.push({name: 'home'})
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
back() {
|
|
router.go(-1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|