Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/SupportForm.vue
<template> | <template> | ||||
<div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true"> | <div class="modal" id="support-dialog" tabindex="-1" role="dialog" aria-hidden="true"> | ||||
<div class="modal-dialog" role="document"> | <div class="modal-dialog" role="document"> | ||||
<form class="modal-content" @submit.prevent="submit"> | <form class="modal-content" @submit.prevent="submit"> | ||||
<div class="modal-header"> | <div class="modal-header"> | ||||
<h5 class="modal-title">Contact Support</h5> | <h5 class="modal-title">{{ $t('support.title') }}</h5> | ||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | <button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')"> | ||||
<span aria-hidden="true">×</span> | <span aria-hidden="true">×</span> | ||||
</button> | </button> | ||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<div class="form"> | <div class="form"> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label>Customer number or email address you have with us</label> | <label for="support-user">{{ $t('support.id') }}</label> | ||||
<input id="support-user" type="text" class="form-control" placeholder="e.g. 12345678 or john@kolab.org" v-model="user" /> | <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" /> | ||||
<small class="form-text text-muted">Leave blank if you are not a customer yet</small> | <small class="form-text text-muted">{{ $t('support.id-hint') }}</small> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label>Name</label> | <label for="support-name">{{ $t('support.name') }}</label> | ||||
<input id="support-name" type="text" class="form-control" placeholder="how we should call you in our reply" v-model="name" /> | <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" /> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label>Working email address</label> | <label for="support-email">{{ $t('support.email') }}</label> | ||||
<input id="support-email" type="email" class="form-control" placeholder="make sure we can reach you at this address" v-model="email" required /> | <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required /> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label>Issue Summary</label> | <label for="support-summary">{{ $t('support.summary') }}</label> | ||||
<input id="support-summary" type="text" class="form-control" placeholder="one sentence that summarizes your issue" v-model="summary" required /> | <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required /> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label>Issue Explanation</label> | <label for="support-body">{{ $t('support.expl') }}</label> | ||||
<textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea> | <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="modal-footer"> | <div class="modal-footer"> | ||||
<button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button> | <button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">{{ $t('btn.cancel') }}</button> | ||||
<button type="submit" class="btn btn-primary modal-action"><svg-icon icon="check"></svg-icon> Submit</button> | <button type="submit" class="btn btn-primary modal-action"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button> | ||||
</div> | </div> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
▲ Show 20 Lines • Show All 60 Lines • Show Last 20 Lines |