Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/User/Info.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | <status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component> | ||||
<div class="card" id="user-info"> | <div class="card" id="user-info"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title" v-if="user_id !== 'new'">User account | <div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }} | ||||
<button | <button | ||||
class="btn btn-outline-danger button-delete float-right" | class="btn btn-outline-danger button-delete float-right" | ||||
@click="showDeleteConfirmation()" type="button" | @click="showDeleteConfirmation()" type="button" | ||||
> | > | ||||
<svg-icon icon="trash-alt"></svg-icon> Delete user | <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.delete') }} | ||||
</button> | </button> | ||||
</div> | </div> | ||||
<div class="card-title" v-if="user_id === 'new'">New user account</div> | <div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form @submit.prevent="submit"> | <form @submit.prevent="submit"> | ||||
<div v-if="user_id !== 'new'" class="form-group row plaintext"> | <div v-if="user_id !== 'new'" class="form-group row plaintext"> | ||||
<label for="status" class="col-sm-4 col-form-label">Status</label> | <label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span :class="$root.userStatusClass(user) + ' form-control-plaintext'" id="status">{{ $root.userStatusText(user) }}</span> | <span :class="$root.userStatusClass(user) + ' form-control-plaintext'" id="status">{{ $root.userStatusText(user) }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="first_name" class="col-sm-4 col-form-label">First name</label> | <label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<input type="text" class="form-control" id="first_name" v-model="user.first_name"> | <input type="text" class="form-control" id="first_name" v-model="user.first_name"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="last_name" class="col-sm-4 col-form-label">Last name</label> | <label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<input type="text" class="form-control" id="last_name" v-model="user.last_name"> | <input type="text" class="form-control" id="last_name" v-model="user.last_name"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="organization" class="col-sm-4 col-form-label">Organization</label> | <label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<input type="text" class="form-control" id="organization" v-model="user.organization"> | <input type="text" class="form-control" id="organization" v-model="user.organization"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="email" class="col-sm-4 col-form-label">Email</label> | <label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email"> | <input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="aliases-input" class="col-sm-4 col-form-label">Email aliases</label> | <label for="aliases-input" class="col-sm-4 col-form-label">{{ $t('user.aliases-email') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<list-input id="aliases" :list="user.aliases"></list-input> | <list-input id="aliases" :list="user.aliases"></list-input> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="password" class="col-sm-4 col-form-label">Password</label> | <label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'"> | <input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<label for="password_confirmaton" class="col-sm-4 col-form-label">Confirm password</label> | <label for="password_confirmaton" class="col-sm-4 col-form-label">{{ $t('form.password-confirm') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'"> | <input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'"> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="user_id === 'new'" id="user-packages" class="form-group row"> | <div v-if="user_id === 'new'" id="user-packages" class="form-group row"> | ||||
<label class="col-sm-4 col-form-label">Package</label> | <label class="col-sm-4 col-form-label">Package</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<table class="table table-sm form-list"> | <table class="table table-sm form-list"> | ||||
<thead class="thead-light sr-only"> | <thead class="thead-light sr-only"> | ||||
<tr> | <tr> | ||||
<th scope="col"></th> | <th scope="col"></th> | ||||
<th scope="col">Package</th> | <th scope="col">{{ $t('user.package') }}</th> | ||||
<th scope="col">Price</th> | <th scope="col">{{ $t('user.price') }}</th> | ||||
<th scope="col"></th> | <th scope="col"></th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id"> | <tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id"> | ||||
<td class="selection"> | <td class="selection"> | ||||
<input type="checkbox" @click="selectPackage" | <input type="checkbox" @click="selectPackage" | ||||
:value="pkg.id" | :value="pkg.id" | ||||
:checked="pkg.id == package_id" | :checked="pkg.id == package_id" | ||||
:id="'pkg-input-' + pkg.id" | :id="'pkg-input-' + pkg.id" | ||||
> | > | ||||
</td> | </td> | ||||
<td class="name"> | <td class="name"> | ||||
<label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label> | <label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label> | ||||
</td> | </td> | ||||
<td class="price text-nowrap"> | <td class="price text-nowrap"> | ||||
{{ $root.priceLabel(pkg.cost, discount) }} | {{ $root.priceLabel(pkg.cost, discount) }} | ||||
</td> | </td> | ||||
<td class="buttons"> | <td class="buttons"> | ||||
<button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="pkg.description"> | <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="pkg.description"> | ||||
<svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
<span class="sr-only">More information</span> | <span class="sr-only">{{ $t('btn.moreinfo') }}</span> | ||||
</button> | </button> | ||||
</td> | </td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<small v-if="discount > 0" class="hint"> | <small v-if="discount > 0" class="hint"> | ||||
<hr class="m-0"> | <hr class="m-0"> | ||||
¹ applied discount: {{ discount }}% - {{ discount_description }} | ¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }} | ||||
</small> | </small> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="user_id !== 'new'" id="user-skus" class="form-group row"> | <div v-if="user_id !== 'new'" id="user-skus" class="form-group row"> | ||||
<label class="col-sm-4 col-form-label">Subscriptions</label> | <label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<table class="table table-sm form-list"> | <table class="table table-sm form-list"> | ||||
<thead class="thead-light sr-only"> | <thead class="thead-light sr-only"> | ||||
<tr> | <tr> | ||||
<th scope="col"></th> | <th scope="col"></th> | ||||
<th scope="col">Subscription</th> | <th scope="col">{{ $t('user.subscription') }}</th> | ||||
<th scope="col">Price</th> | <th scope="col">{{ $t('user.price') }}</th> | ||||
<th scope="col"></th> | <th scope="col"></th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id"> | <tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id"> | ||||
<td class="selection"> | <td class="selection"> | ||||
<input type="checkbox" @input="onInputSku" | <input type="checkbox" @input="onInputSku" | ||||
:value="sku.id" | :value="sku.id" | ||||
Show All 15 Lines | <div class="container"> | ||||
</div> | </div> | ||||
</td> | </td> | ||||
<td class="price text-nowrap"> | <td class="price text-nowrap"> | ||||
{{ $root.priceLabel(sku.cost, discount) }} | {{ $root.priceLabel(sku.cost, discount) }} | ||||
</td> | </td> | ||||
<td class="buttons"> | <td class="buttons"> | ||||
<button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="sku.description"> | <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="sku.description"> | ||||
<svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
<span class="sr-only">More information</span> | <span class="sr-only">{{ $t('btn.moreinfo') }}</span> | ||||
</button> | </button> | ||||
</td> | </td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<small v-if="discount > 0" class="hint"> | <small v-if="discount > 0" class="hint"> | ||||
<hr class="m-0"> | <hr class="m-0"> | ||||
¹ applied discount: {{ discount }}% - {{ discount_description }} | ¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }} | ||||
</small> | </small> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button> | <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="delete-warning" class="modal" tabindex="-1" role="dialog"> | <div id="delete-warning" class="modal" tabindex="-1" role="dialog"> | ||||
<div class="modal-dialog" role="document"> | <div class="modal-dialog" role="document"> | ||||
<div class="modal-content"> | <div class="modal-content"> | ||||
<div class="modal-header"> | <div class="modal-header"> | ||||
<h5 class="modal-title"></h5> | <h5 class="modal-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"> | ||||
<p>Do you really want to delete this user permanently? | <p>{{ $t('user.delete-text') }}</p> | ||||
This will delete all account data and withdraw the permission to access the email account. | |||||
Please note that this action cannot be undone.</p> | |||||
</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="button" class="btn btn-danger modal-action" @click="deleteUser()"> | <button type="button" class="btn btn-danger modal-action" @click="deleteUser()"> | ||||
<svg-icon icon="trash-alt"></svg-icon> Delete | <svg-icon icon="trash-alt"></svg-icon> {{ $t('btn.delete') }} | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
▲ Show 20 Lines • Show All 150 Lines • ▼ Show 20 Lines | export default { | ||||
required.push(item.name) | required.push(item.name) | ||||
} | } | ||||
} | } | ||||
}) | }) | ||||
}) | }) | ||||
if (required.length) { | if (required.length) { | ||||
input.checked = false | input.checked = false | ||||
return alert(sku.name + ' requires ' + required.join(', ') + '.') | return alert(this.$t('user.skureq', { sku: sku.name, list: required.join(', ') })) | ||||
} | } | ||||
} else { | } else { | ||||
// Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync | // Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync | ||||
// TODO: Should we display an alert instead? | // TODO: Should we display an alert instead? | ||||
this.skus.forEach(item => { | this.skus.forEach(item => { | ||||
if (item.required && item.required.indexOf(sku.handler) > -1) { | if (item.required && item.required.indexOf(sku.handler) > -1) { | ||||
$('#s' + item.id).find('input[type=checkbox]').prop('checked', false) | $('#s' + item.id).find('input[type=checkbox]').prop('checked', false) | ||||
} | } | ||||
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines | export default { | ||||
}, | }, | ||||
showDeleteConfirmation() { | showDeleteConfirmation() { | ||||
// Deleting self, redirect to /profile/delete page | // Deleting self, redirect to /profile/delete page | ||||
if (this.user_id == this.$store.state.authInfo.id) { | if (this.user_id == this.$store.state.authInfo.id) { | ||||
this.$router.push({ name: 'profile-delete' }) | this.$router.push({ name: 'profile-delete' }) | ||||
} else { | } else { | ||||
// Display the warning | // Display the warning | ||||
let dialog = $('#delete-warning') | let dialog = $('#delete-warning') | ||||
dialog.find('.modal-title').text('Delete ' + this.user.email) | dialog.find('.modal-title').text(this.$t('user.delete-email', { email: this.user.email })) | ||||
dialog.on('shown.bs.modal', () => { | dialog.on('shown.bs.modal', () => { | ||||
dialog.find('button.modal-cancel').focus() | dialog.find('button.modal-cancel').focus() | ||||
}).modal() | }).modal() | ||||
} | } | ||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |