Page MenuHomePhorge
Differential D2581 Diff 7270 src/resources/vue/User/Info.vue

Changeset View

Standalone View

View Options

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">
&sup1; applied discount: {{ discount }}% - {{ discount_description }} &sup1; {{ $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">
&sup1; applied discount: {{ discount }}% - {{ discount_description }} &sup1; {{ $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">&times;</span> <span aria-hidden="true">&times;</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>