No OneTemporary
Actions

Size

41 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/resources/js/app.js b/src/resources/js/app.js
	index 31a6c847..7efba79d 100644
	--- a/src/resources/js/app.js
	+++ b/src/resources/js/app.js
	@@ -1,516 +1,517 @@
	/**
	* First we will load all of this project's JavaScript dependencies which
	* includes Vue and other libraries. It is a great starting point when
	* building robust, powerful web applications using Vue and Laravel.
	*/

	require('./bootstrap')

	import AppComponent from '../vue/App'
	import MenuComponent from '../vue/Widgets/Menu'
	import SupportForm from '../vue/Widgets/SupportForm'
	import store from './store'
	import { loadLangAsync, i18n } from './locale'

	const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>'

	let isLoading = 0

	// Lock the UI with the 'loading...' element
	const startLoading = () => {
	isLoading++
	let loading = $('#app > .app-loader').removeClass('fadeOut')
	if (!loading.length) {
	$('#app').append($(loader))
	}
	}

	// Hide "loading" overlay
	const stopLoading = () => {
	if (isLoading > 0) {
	$('#app > .app-loader').addClass('fadeOut')
	isLoading--;
	}
	}

	let loadingRoute

	// Note: This has to be before the app is created
	// Note: You cannot use app inside of the function
	window.router.beforeEach((to, from, next) => {
	// check if the route requires authentication and user is not logged in
	if (to.meta.requiresAuth && !store.state.isLoggedIn) {
	// remember the original request, to use after login
	store.state.afterLogin = to;

	// redirect to login page
	next({ name: 'login' })

	return
	}

	if (to.meta.loading) {
	startLoading()
	loadingRoute = to.name
	}

	next()
	})

	window.router.afterEach((to, from) => {
	if (to.name && loadingRoute === to.name) {
	stopLoading()
	loadingRoute = null
	}

	// When changing a page remove old:
	// - error page
	// - modal backdrop
	$('#error-page,.modal-backdrop.show').remove()
	+ $('body').css('padding', 0) // remove padding added by unclosed modal
	})

	const app = new Vue({
	components: {
	AppComponent,
	MenuComponent,
	},
	i18n,
	store,
	router: window.router,
	data() {
	return {
	isUser: !window.isAdmin && !window.isReseller,
	appName: window.config['app.name'],
	appUrl: window.config['app.url'],
	themeDir: '/themes/' + window.config['app.theme']
	}
	},
	methods: {
	// Clear (bootstrap) form validation state
	clearFormValidation(form) {
	$(form).find('.is-invalid').removeClass('is-invalid')
	$(form).find('.invalid-feedback').remove()
	},
	hasPermission(type) {
	const authInfo = store.state.authInfo
	const key = 'enable' + type.charAt(0).toUpperCase() + type.slice(1)
	return !!(authInfo && authInfo.statusInfo[key])
	},
	hasRoute(name) {
	return this.$router.resolve({ name: name }).resolved.matched.length > 0
	},
	hasSKU(name) {
	const authInfo = store.state.authInfo
	return authInfo.statusInfo.skus && authInfo.statusInfo.skus.indexOf(name) != -1
	},
	isController(wallet_id) {
	if (wallet_id && store.state.authInfo) {
	let i
	for (i = 0; i < store.state.authInfo.wallets.length; i++) {
	if (wallet_id == store.state.authInfo.wallets[i].id) {
	return true
	}
	}
	for (i = 0; i < store.state.authInfo.accounts.length; i++) {
	if (wallet_id == store.state.authInfo.accounts[i].id) {
	return true
	}
	}
	}

	return false
	},
	// Set user state to "logged in"
	loginUser(response, dashboard, update) {
	if (!update) {
	store.commit('logoutUser') // destroy old state data
	store.commit('loginUser')
	}

	localStorage.setItem('token', response.access_token)
	axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token

	if (response.email) {
	store.state.authInfo = response
	}

	if (dashboard !== false) {
	this.$router.push(store.state.afterLogin \|\| { name: 'dashboard' })
	}

	store.state.afterLogin = null

	// Refresh the token before it expires
	let timeout = response.expires_in \|\| 0

	// We'll refresh 60 seconds before the token expires
	if (timeout > 60) {
	timeout -= 60
	}

	// TODO: We probably should try a few times in case of an error
	// TODO: We probably should prevent axios from doing any requests
	// while the token is being refreshed

	this.refreshTimeout = setTimeout(() => {
	axios.post('/api/auth/refresh').then(response => {
	this.loginUser(response.data, false, true)
	})
	}, timeout * 1000)
	},
	// Set user state to "not logged in"
	logoutUser(redirect) {
	store.commit('logoutUser')
	localStorage.setItem('token', '')
	delete axios.defaults.headers.common.Authorization

	if (redirect !== false) {
	this.$router.push({ name: 'login' })
	}

	clearTimeout(this.refreshTimeout)
	},
	logo(mode) {
	let src = this.appUrl + this.themeDir + '/images/logo_' + (mode \|\| 'header') + '.png'

	return `<img src="${src}" alt="${this.appName}">`
	},
	// Display "loading" overlay inside of the specified element
	addLoader(elem, small = true) {
	$(elem).css({position: 'relative'}).append(small ? $(loader).addClass('small') : $(loader))
	},
	// Remove loader element added in addLoader()
	removeLoader(elem) {
	$(elem).find('.app-loader').remove()
	},
	startLoading,
	stopLoading,
	isLoading() {
	return isLoading > 0
	},
	errorPage(code, msg, hint) {
	// Until https://github.com/vuejs/vue-router/issues/977 is implemented
	// we can't really use router to display error page as it has two side
	// effects: it changes the URL and adds the error page to browser history.
	// For now we'll be replacing current view with error page "manually".

	if (!msg) msg = this.$te('error.' + code) ? this.$t('error.' + code) : this.$t('error.unknown')
	if (!hint) hint = ''

	const error_page = '<div id="error-page" class="error-page">'
	+ `<div class="code">${code}</div><div class="message">${msg}</div><div class="hint">${hint}</div>`
	+ '</div>'

	$('#error-page').remove()
	$('#app').append(error_page)

	app.updateBodyClass('error')
	},
	errorHandler(error) {
	this.stopLoading()

	if (!error.response) {
	// TODO: probably network connection error
	} else if (error.response.status === 401) {
	// Remember requested route to come back to it after log in
	if (this.$route.meta.requiresAuth) {
	store.state.afterLogin = this.$route
	this.logoutUser()
	} else {
	this.logoutUser(false)
	}
	} else {
	this.errorPage(error.response.status, error.response.statusText)
	}
	},
	downloadFile(url) {
	// TODO: This might not be a best way for big files as the content
	// will be stored (temporarily) in browser memory
	// TODO: This method does not show the download progress in the browser
	// but it could be implemented in the UI, axios has 'progress' property
	axios.get(url, { responseType: 'blob' })
	.then(response => {
	const link = document.createElement('a')
	const contentDisposition = response.headers['content-disposition']
	let filename = 'unknown'

	if (contentDisposition) {
	const match = contentDisposition.match(/filename="(.+)"/);
	if (match.length === 2) {
	filename = match[1];
	}
	}

	link.href = window.URL.createObjectURL(response.data)
	link.download = filename
	link.click()
	})
	},
	price(price, currency) {
	// TODO: Set locale argument according to the currently used locale
	return ((price \|\| 0) / 100).toLocaleString('de-DE', { style: 'currency', currency: currency \|\| 'CHF' })
	},
	priceLabel(cost, discount) {
	let index = ''

	if (discount) {
	cost = Math.floor(cost * ((100 - discount) / 100))
	index = '\u00B9'
	}

	return this.price(cost) + '/month' + index
	},
	clickRecord(event) {
	if (!/^(a\|button\|svg\|path)$/i.test(event.target.nodeName)) {
	let link = $(event.target).closest('tr').find('a')[0]
	if (link) {
	link.click()
	}
	}
	},
	domainStatusClass(domain) {
	if (domain.isDeleted) {
	return 'text-muted'
	}

	if (domain.isSuspended) {
	return 'text-warning'
	}

	if (!domain.isVerified \|\| !domain.isLdapReady \|\| !domain.isConfirmed) {
	return 'text-danger'
	}

	return 'text-success'
	},
	domainStatusText(domain) {
	if (domain.isDeleted) {
	return this.$t('status.deleted')
	}

	if (domain.isSuspended) {
	return this.$t('status.suspended')
	}

	if (!domain.isVerified \|\| !domain.isLdapReady \|\| !domain.isConfirmed) {
	return this.$t('status.notready')
	}

	return this.$t('status.active')
	},
	distlistStatusClass(list) {
	if (list.isDeleted) {
	return 'text-muted'
	}

	if (list.isSuspended) {
	return 'text-warning'
	}

	if (!list.isLdapReady) {
	return 'text-danger'
	}

	return 'text-success'
	},
	distlistStatusText(list) {
	if (list.isDeleted) {
	return this.$t('status.deleted')
	}

	if (list.isSuspended) {
	return this.$t('status.suspended')
	}

	if (!list.isLdapReady) {
	return this.$t('status.notready')
	}

	return this.$t('status.active')
	},
	pageName(path) {
	let page = this.$route.path

	// check if it is a "menu page", find the page name
	// otherwise we'll use the real path as page name
	window.config.menu.every(item => {
	if (item.location == page && item.page) {
	page = item.page
	return false
	}
	})

	page = page.replace(/^\//, '')

	return page ? page : '404'
	},
	supportDialog(container) {
	let dialog = $('#support-dialog')

	// FIXME: Find a nicer way of doing this
	if (!dialog.length) {
	SupportForm.i18n = i18n
	let form = new Vue(SupportForm)
	form.$mount($('<div>').appendTo(container)[0])
	form.$root = this
	form.$toast = this.$toast
	dialog = $(form.$el)
	}

	dialog.on('shown.bs.modal', () => {
	dialog.find('input').first().focus()
	}).modal()
	},
	userStatusClass(user) {
	if (user.isDeleted) {
	return 'text-muted'
	}

	if (user.isSuspended) {
	return 'text-warning'
	}

	if (!user.isImapReady \|\| !user.isLdapReady) {
	return 'text-danger'
	}

	return 'text-success'
	},
	userStatusText(user) {
	if (user.isDeleted) {
	return this.$t('status.deleted')
	}

	if (user.isSuspended) {
	return this.$t('status.suspended')
	}

	if (!user.isImapReady \|\| !user.isLdapReady) {
	return this.$t('status.notready')
	}

	return this.$t('status.active')
	},
	updateBodyClass(name) {
	// Add 'class' attribute to the body, different for each page
	// so, we can apply page-specific styles
	document.body.className = 'page-' + (name \|\| this.pageName()).replace(/\/.*$/, '')
	}
	}
	})

	// Fetch the locale file and the start the app
	loadLangAsync().then(() => app.$mount('#app'))

	// Add a axios request interceptor
	window.axios.interceptors.request.use(
	config => {
	// This is the only way I found to change configuration options
	// on a running application. We need this for browser testing.
	config.headers['X-Test-Payment-Provider'] = window.config.paymentProvider

	return config
	},
	error => {
	// Do something with request error
	return Promise.reject(error)
	}
	)

	// Add a axios response interceptor for general/validation error handler
	window.axios.interceptors.response.use(
	response => {
	if (response.config.onFinish) {
	response.config.onFinish()
	}

	return response
	},
	error => {
	let error_msg
	let status = error.response ? error.response.status : 200

	// Do not display the error in a toast message, pass the error as-is
	if (error.config.ignoreErrors) {
	return Promise.reject(error)
	}

	if (error.config.onFinish) {
	error.config.onFinish()
	}

	if (error.response && status == 422) {
	error_msg = "Form validation error"

	const modal = $('div.modal.show')

	$(modal.length ? modal : 'form').each((i, form) => {
	form = $(form)

	$.each(error.response.data.errors \|\| {}, (idx, msg) => {
	const input_name = (form.data('validation-prefix') \|\| form.find('form').first().data('validation-prefix') \|\| '') + idx
	let input = form.find('#' + input_name)

	if (!input.length) {
	input = form.find('[name="' + input_name + '"]');
	}

	if (input.length) {
	// Create an error message
	// API responses can use a string, array or object
	let msg_text = ''
	if ($.type(msg) !== 'string') {
	$.each(msg, (index, str) => {
	msg_text += str + ' '
	})
	}
	else {
	msg_text = msg
	}

	let feedback = $('<div class="invalid-feedback">').text(msg_text)

	if (input.is('.list-input')) {
	// List input widget
	let controls = input.children(':not(:first-child)')

	if (!controls.length && typeof msg == 'string') {
	// this is an empty list (the main input only)
	// and the error message is not an array
	input.find('.main-input').addClass('is-invalid')
	} else {
	controls.each((index, element) => {
	if (msg[index]) {
	$(element).find('input').addClass('is-invalid')
	}
	})
	}

	input.addClass('is-invalid').next('.invalid-feedback').remove()
	input.after(feedback)
	}
	else {
	// Standard form element
	input.addClass('is-invalid')
	input.parent().find('.invalid-feedback').remove()
	input.parent().append(feedback)
	}
	}
	})

	form.find('.is-invalid:not(.listinput-widget)').first().focus()
	})
	}
	else if (error.response && error.response.data) {
	error_msg = error.response.data.message
	}
	else {
	error_msg = error.request ? error.request.statusText : error.message
	}

	app.$toast.error(error_msg \|\| app.$t('error.server'))

	// Pass the error as-is
	return Promise.reject(error)
	}
	)
	diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
	index c25fd63f..ee30a2c2 100644
	--- a/src/resources/vue/User/Info.vue
	+++ b/src/resources/vue/User/Info.vue
	@@ -1,443 +1,442 @@
	<template>
	<div class="container">
	<status-component v-if="user_id !== 'new'" :status="status" @status-update="statusUpdate"></status-component>

	<div class="card" id="user-info">
	<div class="card-body">
	<div class="card-title" v-if="user_id !== 'new'">{{ $t('user.title') }}
	<button
	class="btn btn-outline-danger button-delete float-right"
	@click="showDeleteConfirmation()" type="button"
	>
	<svg-icon icon="trash-alt"></svg-icon> {{ $t('user.delete') }}
	</button>
	</div>
	<div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div>
	<div class="card-text">
	<form @submit.prevent="submit">
	<div v-if="user_id !== 'new'" class="form-group row plaintext">
	<label for="status" class="col-sm-4 col-form-label">{{ $t('form.status') }}</label>
	<div class="col-sm-8">
	<span :class="$root.userStatusClass(user) + ' form-control-plaintext'" id="status">{{ $root.userStatusText(user) }}</span>
	</div>
	</div>
	<div class="form-group row">
	<label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="first_name" v-model="user.first_name">
	</div>
	</div>
	<div class="form-group row">
	<label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="last_name" v-model="user.last_name">
	</div>
	</div>
	<div class="form-group row">
	<label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="organization" v-model="user.organization">
	</div>
	</div>
	<div class="form-group row">
	<label for="email" class="col-sm-4 col-form-label">{{ $t('form.email') }}</label>
	<div class="col-sm-8">
	<input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email">
	</div>
	</div>
	<div class="form-group row">
	<label for="aliases-input" class="col-sm-4 col-form-label">{{ $t('user.aliases-email') }}</label>
	<div class="col-sm-8">
	<list-input id="aliases" :list="user.aliases"></list-input>
	</div>
	</div>
	<div class="form-group row">
	<label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label>
	<div class="col-sm-8">
	<input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'">
	</div>
	</div>
	<div class="form-group row">
	<label for="password_confirmaton" class="col-sm-4 col-form-label">{{ $t('form.password-confirm') }}</label>
	<div class="col-sm-8">
	<input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation" :required="user_id === 'new'">
	</div>
	</div>
	<div v-if="user_id === 'new'" id="user-packages" class="form-group row">
	<label class="col-sm-4 col-form-label">Package</label>
	<div class="col-sm-8">
	<table class="table table-sm form-list">
	<thead class="thead-light sr-only">
	<tr>
	<th scope="col"></th>
	<th scope="col">{{ $t('user.package') }}</th>
	<th scope="col">{{ $t('user.price') }}</th>
	<th scope="col"></th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id">
	<td class="selection">
	<input type="checkbox" @click="selectPackage"
	:value="pkg.id"
	:checked="pkg.id == package_id"
	:id="'pkg-input-' + pkg.id"
	>
	</td>
	<td class="name">
	<label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label>
	</td>
	<td class="price text-nowrap">
	{{ $root.priceLabel(pkg.cost, discount) }}
	</td>
	<td class="buttons">
	<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>
	<span class="sr-only">{{ $t('btn.moreinfo') }}</span>
	</button>
	</td>
	</tr>
	</tbody>
	</table>
	<small v-if="discount > 0" class="hint">
	<hr class="m-0">
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	</div>
	</div>
	<div v-if="user_id !== 'new'" id="user-skus" class="form-group row">
	<label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
	<div class="col-sm-8">
	<table class="table table-sm form-list">
	<thead class="thead-light sr-only">
	<tr>
	<th scope="col"></th>
	<th scope="col">{{ $t('user.subscription') }}</th>
	<th scope="col">{{ $t('user.price') }}</th>
	<th scope="col"></th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="sku in skus" :id="'s' + sku.id" :key="sku.id">
	<td class="selection">
	<input type="checkbox" @input="onInputSku"
	:value="sku.id"
	:disabled="sku.readonly"
	:checked="sku.enabled"
	:id="'sku-input-' + sku.title"
	>
	</td>
	<td class="name">
	<label :for="'sku-input-' + sku.title">{{ sku.name }}</label>
	<div v-if="sku.range" class="range-input">
	<label class="text-nowrap">{{ sku.range.min }} {{ sku.range.unit }}</label>
	<input
	type="range" class="custom-range" @input="rangeUpdate"
	:value="sku.value \|\| sku.range.min"
	:min="sku.range.min"
	:max="sku.range.max"
	>
	</div>
	</td>
	<td class="price text-nowrap">
	{{ $root.priceLabel(sku.cost, discount) }}
	</td>
	<td class="buttons">
	<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>
	<span class="sr-only">{{ $t('btn.moreinfo') }}</span>
	</button>
	</td>
	</tr>
	</tbody>
	</table>
	<small v-if="discount > 0" class="hint">
	<hr class="m-0">
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	</div>
	</div>
	<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	</form>
	</div>
	</div>
	</div>
	<div id="delete-warning" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
	<div class="modal-content">
	<div class="modal-header">
	- <h5 class="modal-title"></h5>
	+ <h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5>
	<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	<p>{{ $t('user.delete-text') }}</p>
	</div>
	<div class="modal-footer">
	<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()">
	<svg-icon icon="trash-alt"></svg-icon> {{ $t('btn.delete') }}
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import ListInput from '../Widgets/ListInput'
	import StatusComponent from '../Widgets/Status'

	export default {
	components: {
	ListInput,
	StatusComponent
	},
	data() {
	return {
	discount: 0,
	discount_description: '',
	user_id: null,
	user: { aliases: [] },
	packages: [],
	package_id: null,
	skus: [],
	status: {}
	}
	},
	created() {
	this.user_id = this.$route.params.user

	let wallet = this.$store.state.authInfo.accounts[0]

	if (!wallet) {
	wallet = this.$store.state.authInfo.wallets[0]
	}

	if (wallet && wallet.discount) {
	this.discount = wallet.discount
	this.discount_description = wallet.discount_description
	}

	this.$root.startLoading()

	if (this.user_id === 'new') {
	// do nothing (for now)
	axios.get('/api/v4/packages')
	.then(response => {
	this.$root.stopLoading()

	this.packages = response.data.filter(pkg => !pkg.isDomain)
	this.package_id = this.packages[0].id
	})
	.catch(this.$root.errorHandler)
	}
	else {
	axios.get('/api/v4/users/' + this.user_id)
	.then(response => {
	this.$root.stopLoading()

	this.user = response.data
	this.user.first_name = response.data.settings.first_name
	this.user.last_name = response.data.settings.last_name
	this.user.organization = response.data.settings.organization
	this.discount = this.user.wallet.discount
	this.discount_description = this.user.wallet.discount_description
	this.status = response.data.statusInfo

	axios.get('/api/v4/users/' + this.user_id + '/skus?type=user')
	.then(response => {
	// "merge" SKUs with user entitlement-SKUs
	this.skus = response.data
	.map(sku => {
	const userSku = this.user.skus[sku.id]
	if (userSku) {
	sku.enabled = true
	sku.skuCost = sku.cost
	sku.cost = userSku.costs.reduce((sum, current) => sum + current)
	sku.value = userSku.count
	sku.costs = userSku.costs
	} else if (!sku.readonly) {
	sku.enabled = false
	}

	return sku
	})

	// Update all range inputs (and price)
	this.$nextTick(() => {
	$('#user-skus input[type=range]').each((idx, elem) => { this.rangeUpdate(elem) })
	})
	})
	.catch(this.$root.errorHandler)
	})
	.catch(this.$root.errorHandler)
	}
	},
	mounted() {
	$('#first_name').focus()
	},
	methods: {
	submit() {
	this.$root.clearFormValidation($('#user-info form'))

	let method = 'post'
	let location = '/api/v4/users'

	if (this.user_id !== 'new') {
	method = 'put'
	location += '/' + this.user_id

	let skus = {}
	$('#user-skus input[type=checkbox]:checked').each((idx, input) => {
	let id = $(input).val()
	let range = $(input).parents('tr').first().find('input[type=range]').val()

	skus[id] = range \|\| 1
	})
	this.user.skus = skus
	} else {
	this.user.package = this.package_id
	}

	axios[method](location, this.user)
	.then(response => {
	if (response.data.statusInfo) {
	this.$store.state.authInfo.statusInfo = response.data.statusInfo
	}

	this.$toast.success(response.data.message)
	this.$router.push({ name: 'users' })
	})
	},
	onInputSku(e) {
	let input = e.target
	let sku = this.findSku(input.value)
	let required = []

	// We use 'readonly', not 'disabled', because we might want to handle
	// input events. For example to display an error when someone clicks
	// the locked input
	if (input.readOnly) {
	input.checked = !input.checked
	// TODO: Display an alert explaining why it's locked
	return
	}

	// TODO: Following code might not work if we change definition of forbidden/required
	// or we just need more sophisticated SKU dependency rules

	if (input.checked) {
	// Check if a required SKU is selected, alert the user if not
	(sku.required \|\| []).forEach(title => {
	this.skus.forEach(item => {
	let checkbox
	if (item.handler == title && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
	if (!checkbox.checked) {
	required.push(item.name)
	}
	}
	})
	})

	if (required.length) {
	input.checked = false
	return alert(this.$t('user.skureq', { sku: sku.name, list: required.join(', ') }))
	}
	} else {
	// Uncheck all dependent SKUs, e.g. when unchecking Groupware we also uncheck Activesync
	// TODO: Should we display an alert instead?
	this.skus.forEach(item => {
	if (item.required && item.required.indexOf(sku.handler) > -1) {
	$('#s' + item.id).find('input[type=checkbox]').prop('checked', false)
	}
	})
	}

	// Uncheck+lock/unlock conflicting SKUs
	(sku.forbidden \|\| []).forEach(title => {
	this.skus.forEach(item => {
	let checkbox
	if (item.handler == title && (checkbox = $('#s' + item.id).find('input[type=checkbox]')[0])) {
	if (input.checked) {
	checkbox.checked = false
	checkbox.readOnly = true
	} else {
	checkbox.readOnly = false
	}
	}
	})
	})
	},
	selectPackage(e) {
	// Make sure there always is only one package selected
	$('#user-packages input').prop('checked', false)
	this.package_id = $(e.target).prop('checked', false).val()
	},
	rangeUpdate(e) {
	let input = $(e.target \|\| e)
	let value = input.val()
	let record = input.parents('tr').first()
	let sku_id = record.find('input[type=checkbox]').val()
	let sku = this.findSku(sku_id)
	let existing = sku.costs ? sku.costs.length : 0
	let cost

	// Calculate cost, considering both existing entitlement cost and sku cost
	if (existing) {
	cost = sku.costs
	.sort((a, b) => a - b) // sort by cost ascending (free units first)
	.slice(0, value)
	.reduce((sum, current) => sum + current)

	if (value > existing) {
	cost += sku.skuCost * (value - existing)
	}
	} else {
	cost = sku.cost * (value - sku.units_free)
	}

	// Update the label
	input.prev().text(value + ' ' + sku.range.unit)

	// Update the price
	record.find('.price').text(this.$root.priceLabel(cost, this.discount))
	},
	findSku(id) {
	for (let i = 0; i < this.skus.length; i++) {
	if (this.skus[i].id == id) {
	return this.skus[i];
	}
	}
	},
	statusUpdate(user) {
	this.user = Object.assign({}, this.user, user)
	},
	deleteUser() {
	// Delete the user from the confirm dialog
	axios.delete('/api/v4/users/' + this.user_id)
	.then(response => {
	if (response.data.status == 'success') {
	- this.$toast.success(response.data.message)
	- this.$router.push({ name: 'users' })
	+ this.$toast.success(response.data.message)
	+ this.$router.push({ name: 'users' })
	}
	})
	},
	showDeleteConfirmation() {
	// Deleting self, redirect to /profile/delete page
	if (this.user_id == this.$store.state.authInfo.id) {
	this.$router.push({ name: 'profile-delete' })
	} else {
	// Display the warning
	let dialog = $('#delete-warning')
	- dialog.find('.modal-title').text(this.$t('user.delete-email', { email: this.user.email }))
	dialog.on('shown.bs.modal', () => {
	dialog.find('button.modal-cancel').focus()
	}).modal()
	}
	}
	}
	}
	</script>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Jan 31, 7:04 AM (8 h, 7 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 426179
Default Alt Text: (41 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions