Differential D1423 Diff 4900 src/resources/vue/Widgets/SupportForm.vue

Changeset View

Standalone View

src/resources/vue/Widgets/SupportForm.vue

This file was added.

				<template>
				<div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-dialog" role="document">
				<form class="modal-content" @submit.prevent="submit">
				<div class="modal-header">
				<h5 class="modal-title">Contact Support</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
				</button>
				</div>
				<div class="modal-body">
				<div class="form">
				<div class="form-group">
				<label>Customer number or email address you have with us</label>
				<input type="text" class="form-control" placeholder="e.g. 12345678 or john@kolab.org" v-model="user" />
				<small class="form-text text-muted">Leave blank if you are not a customer yet</small>
				</div>
				<div class="form-group">
				<label>Name</label>
				<input type="text" class="form-control" placeholder="how we should call you in our reply" v-model="name" />
				</div>
				<div class="form-group">
				<label>Working email address</label>
				<input type="email" class="form-control" placeholder="make sure we can reach you at this address" v-model="email" required />
				</div>
				<div class="form-group">
				<label>Issue Summary</label>
				<input type="text" class="form-control" placeholder="one sentence that summarizes your issue" v-model="summary" required />
				</div>
				<div class="form-group">
				<label>Issue Explanation</label>
				<textarea class="form-control" rows="5" v-model="body" required></textarea>
				</div>
				</div>
				</div>
				<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
				<button type="submit" class="btn btn-primary">Send</button>
				</div>
				</form>
				</div>
				</div>
				</template>

				<script>
				export default {
				methods: {
				submit() {
				let dialog = $('#support-dialog')
				let params = {
				user: this.user,
				name: this.name,
				email: this.email,
				summary: this.summary,
				body: this.body
				}

				axios.post('/api/v4/support/request', params)
				.then(response => {
				this.summary = ''
				this.body = ''
				dialog.modal('hide')
				this.$toast.success(response.data.message)
				})
				.catch(error => {
				})
				}
				}
				}
				</script>