Move creating a new Namespace to new create component

src/views/labels/NewLabel.vue

@@ -78,9 +78,6 @@ export default {
 					this.error(e, this)
 				})
 		},
-		back() {
-			this.$router.go(-1)
-		},
 	},
 }
 </script>

src/views/namespaces/NewNamespace.vue

@@ -1,48 +1,46 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<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}">
+	<create
+		title="Create a new namespace"
+		@create="newNamespace()"
+		:create-disabled="namespace.title === ''"
+	>
+		<div class="field">
+			<label class="label" for="namespaceTitle">Namespace Title</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': namespaceService.loading }"
+			>
 				<input
 					@keyup.enter="newNamespace()"
 					@keyup.esc="back()"
 					class="input"
 					placeholder="The namespace's name goes here..."
 					type="text"
-					:class="{ 'disabled': namespaceService.loading}"
+					:class="{ disabled: namespaceService.loading }"
 					v-focus
-					v-model="namespace.title"/>
-			</p>
-			<p class="control">
-				<x-button
-					:disabled="namespace.title === ''"
-					@click="newNamespace()"
-					:shadow="false"
-					icon="plus"
-				>
-					Add
-				</x-button>
-			</p>
+					v-model="namespace.title"
+				/>
+			</div>
 		</div>
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
 			Please specify a title.
 		</p>
 		<p
-			class="small"
-			v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
-			What's a namespace?</p>
-	</div>
+			class="is-small has-text-centered"
+			v-tooltip.bottom="
+				'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'
+			"
+		>
+			What's a namespace?
+		</p>
+	</create>
 </template>
 
 <script>
-import router from '../../router'
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
-import {IS_FULLPAGE} from '@/store/mutation-types'
+import { IS_FULLPAGE } from '@/store/mutation-types'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewNamespace',
@@ -53,6 +51,9 @@ export default {
 			namespaceService: NamespaceService,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.namespace = new NamespaceModel()
 		this.namespaceService = new NamespaceService()
@@ -69,19 +70,20 @@ export default {
 			}
 			this.showError = false
 
-			this.namespaceService.create(this.namespace)
-				.then(r => {
+			this.namespaceService
+				.create(this.namespace)
+				.then((r) => {
 					this.$store.commit('namespaces/addNamespace', r)
-					this.success({message: 'The namespace was successfully created.'}, this)
-					router.back()
+					this.success(
+						{ message: 'The namespace was successfully created.' },
+						this
+					)
+					this.$router.back()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
-		back() {
-			router.go(-1)
-		},
 	},
 }
 </script>