Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Admin/User.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="card" id="user-info"> | <div class="card" id="user-info"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<h1 class="card-title">{{ user.email }}</h1> | <h1 class="card-title">{{ user.email }}</h1> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form class="read-only short"> | <form class="read-only short"> | ||||
<div v-if="user.wallet.user_id != user.id" class="form-group row plaintext"> | <div v-if="user.wallet.user_id != user.id" class="row plaintext"> | ||||
<label for="manager" class="col-sm-4 col-form-label">{{ $t('user.managed-by') }}</label> | <label for="manager" class="col-sm-4 col-form-label">{{ $t('user.managed-by') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="manager"> | <span class="form-control-plaintext" id="manager"> | ||||
<router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link> | <router-link :to="{ path: '/user/' + user.wallet.user_id }">{{ user.wallet.user_email }}</router-link> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext"> | <div class="row plaintext"> | ||||
<label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">({{ $t('form.created') }})</span></label> | <label for="userid" class="col-sm-4 col-form-label">ID <span class="text-muted">({{ $t('form.created') }})</span></label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="userid"> | <span class="form-control-plaintext" id="userid"> | ||||
{{ user.id }} <span class="text-muted">({{ user.created_at }})</span> | {{ user.id }} <span class="text-muted">({{ user.created_at }})</span> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext"> | <div class="row plaintext"> | ||||
<label for="status" class="col-sm-4 col-form-label">{{ $t('form.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="form-control-plaintext" id="status"> | <span class="form-control-plaintext" id="status"> | ||||
<span :class="$root.userStatusClass(user)">{{ $root.userStatusText(user) }}</span> | <span :class="$root.userStatusClass(user)">{{ $root.userStatusText(user) }}</span> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext" v-if="user.first_name"> | <div class="row plaintext" v-if="user.first_name"> | ||||
<label for="first_name" class="col-sm-4 col-form-label">{{ $t('form.firstname') }}</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"> | ||||
<span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span> | <span class="form-control-plaintext" id="first_name">{{ user.first_name }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext" v-if="user.last_name"> | <div class="row plaintext" v-if="user.last_name"> | ||||
<label for="last_name" class="col-sm-4 col-form-label">{{ $t('form.lastname') }}</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"> | ||||
<span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span> | <span class="form-control-plaintext" id="last_name">{{ user.last_name }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext" v-if="user.organization"> | <div class="row plaintext" v-if="user.organization"> | ||||
<label for="organization" class="col-sm-4 col-form-label">{{ $t('user.org') }}</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"> | ||||
<span class="form-control-plaintext" id="organization">{{ user.organization }}</span> | <span class="form-control-plaintext" id="organization">{{ user.organization }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext" v-if="user.phone"> | <div class="row plaintext" v-if="user.phone"> | ||||
<label for="phone" class="col-sm-4 col-form-label">{{ $t('form.phone') }}</label> | <label for="phone" class="col-sm-4 col-form-label">{{ $t('form.phone') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="phone">{{ user.phone }}</span> | <span class="form-control-plaintext" id="phone">{{ user.phone }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext"> | <div class="row plaintext"> | ||||
<label for="external_email" class="col-sm-4 col-form-label">{{ $t('user.ext-email') }}</label> | <label for="external_email" class="col-sm-4 col-form-label">{{ $t('user.ext-email') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="external_email"> | <span class="form-control-plaintext" id="external_email"> | ||||
<a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a> | <a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a> | ||||
<button type="button" class="btn btn-secondary btn-sm" @click="emailEdit">{{ $t('btn.edit') }}</button> | <button type="button" class="btn btn-secondary btn-sm" @click="emailEdit">{{ $t('btn.edit') }}</button> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext" v-if="user.billing_address"> | <div class="row plaintext" v-if="user.billing_address"> | ||||
<label for="billing_address" class="col-sm-4 col-form-label">{{ $t('user.address') }}</label> | <label for="billing_address" class="col-sm-4 col-form-label">{{ $t('user.address') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span> | <span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row plaintext"> | <div class="row plaintext"> | ||||
<label for="country" class="col-sm-4 col-form-label">{{ $t('user.country') }}</label> | <label for="country" class="col-sm-4 col-form-label">{{ $t('user.country') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="country">{{ user.country }}</span> | <span class="form-control-plaintext" id="country">{{ user.country }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</form> | </form> | ||||
<div class="mt-2"> | <div class="mt-2"> | ||||
<button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser"> | <button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser"> | ||||
▲ Show 20 Lines • Show All 47 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances"> | <div class="tab-pane show active" id="user-finances" role="tabpanel" aria-labelledby="tab-finances"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<h2 class="card-title"> | <h2 class="card-title"> | ||||
{{ $t('wallet.title') }} | {{ $t('wallet.title') }} | ||||
<span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance, wallet.currency) }}</strong></span> | <span :class="wallet.balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(wallet.balance, wallet.currency) }}</strong></span> | ||||
</h2> | </h2> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form class="read-only short"> | <form class="read-only short"> | ||||
<div class="form-group row"> | <div class="row"> | ||||
<label class="col-sm-4 col-form-label">{{ $t('user.discount') }}</label> | <label class="col-sm-4 col-form-label">{{ $t('user.discount') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="discount"> | <span class="form-control-plaintext" id="discount"> | ||||
<span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span> | <span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span> | ||||
<button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">{{ $t('btn.edit') }}</button> | <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">{{ $t('btn.edit') }}</button> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row" v-if="wallet.mandate && wallet.mandate.id"> | <div class="row" v-if="wallet.mandate && wallet.mandate.id"> | ||||
<label class="col-sm-4 col-form-label">{{ $t('user.auto-payment') }}</label> | <label class="col-sm-4 col-form-label">{{ $t('user.auto-payment') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span id="autopayment" :class="'form-control-plaintext' + (wallet.mandateState ? ' text-danger' : '')" | <span id="autopayment" :class="'form-control-plaintext' + (wallet.mandateState ? ' text-danger' : '')" | ||||
v-html="$t('user.auto-payment-text', { | v-html="$t('user.auto-payment-text', { | ||||
amount: wallet.mandate.amount + ' ' + wallet.currency, | amount: wallet.mandate.amount + ' ' + wallet.currency, | ||||
balance: wallet.mandate.balance + ' ' + wallet.currency, | balance: wallet.mandate.balance + ' ' + wallet.currency, | ||||
method: wallet.mandate.method | method: wallet.mandate.method | ||||
})" | })" | ||||
> | > | ||||
<span v-if="wallet.mandateState">({{ wallet.mandateState }})</span>. | <span v-if="wallet.mandateState">({{ wallet.mandateState }})</span>. | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row" v-if="wallet.providerLink"> | <div class="row" v-if="wallet.providerLink"> | ||||
<label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} {{ $t('form.id') }}</label> | <label class="col-sm-4 col-form-label">{{ capitalize(wallet.provider) }} {{ $t('form.id') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" v-html="wallet.providerLink"></span> | <span class="form-control-plaintext" v-html="wallet.providerLink"></span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</form> | </form> | ||||
<div class="mt-2"> | <div class="mt-2"> | ||||
<button id="button-award" class="btn btn-success" type="button" @click="awardDialog">{{ $t('user.add-bonus') }}</button> | <button id="button-award" class="btn btn-success" type="button" @click="awardDialog">{{ $t('user.add-bonus') }}</button> | ||||
<button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">{{ $t('user.add-penalty') }}</button> | <button id="button-penalty" class="btn btn-danger" type="button" @click="penalizeDialog">{{ $t('user.add-penalty') }}</button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2> | <h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2> | ||||
<transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log> | <transaction-log v-if="wallet.id && !walletReload" class="card-text" :wallet-id="wallet.id" :is-admin="true"></transaction-log> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases"> | <div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<table class="table table-sm table-hover"> | <table class="table table-sm table-hover mb-0"> | ||||
<thead class="thead-light"> | <thead> | ||||
<tr> | <tr> | ||||
<th scope="col">{{ $t('form.email') }}</th> | <th scope="col">{{ $t('form.email') }}</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="(alias, index) in user.aliases" :id="'alias' + index" :key="index"> | <tr v-for="(alias, index) in user.aliases" :id="'alias' + index" :key="index"> | ||||
<td>{{ alias }}</td> | <td>{{ alias }}</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
<tfoot class="table-fake-body"> | <tfoot class="table-fake-body"> | ||||
<tr> | <tr> | ||||
<td>{{ $t('user.aliases-none') }}</td> | <td>{{ $t('user.aliases-none') }}</td> | ||||
</tr> | </tr> | ||||
</tfoot> | </tfoot> | ||||
</table> | </table> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions"> | <div class="tab-pane" id="user-subscriptions" role="tabpanel" aria-labelledby="tab-subscriptions"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<table class="table table-sm table-hover mb-0"> | <table class="table table-sm table-hover mb-0"> | ||||
<thead class="thead-light"> | <thead> | ||||
<tr> | <tr> | ||||
<th scope="col">{{ $t('user.subscription') }}</th> | <th scope="col">{{ $t('user.subscription') }}</th> | ||||
<th scope="col">{{ $t('user.price') }}</th> | <th scope="col">{{ $t('user.price') }}</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="(sku, sku_id) in skus" :id="'sku' + sku.id" :key="sku_id"> | <tr v-for="(sku, sku_id) in skus" :id="'sku' + sku.id" :key="sku_id"> | ||||
<td>{{ sku.name }}</td> | <td>{{ sku.name }}</td> | ||||
Show All 16 Lines | <div class="container"> | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains"> | <div class="tab-pane" id="user-domains" role="tabpanel" aria-labelledby="tab-domains"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<table class="table table-sm table-hover"> | <table class="table table-sm table-hover mb-0"> | ||||
<thead class="thead-light"> | <thead> | ||||
<tr> | <tr> | ||||
<th scope="col">{{ $t('domain.namespace') }}</th> | <th scope="col">{{ $t('domain.namespace') }}</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord"> | <tr v-for="domain in domains" :id="'domain' + domain.id" :key="domain.id" @click="$root.clickRecord"> | ||||
<td> | <td> | ||||
<svg-icon icon="globe" :class="$root.domainStatusClass(domain)" :title="$root.domainStatusText(domain)"></svg-icon> | <svg-icon icon="globe" :class="$root.domainStatusClass(domain)" :title="$root.domainStatusText(domain)"></svg-icon> | ||||
<router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link> | <router-link :to="{ path: '/domain/' + domain.id }">{{ domain.namespace }}</router-link> | ||||
</td> | </td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
<tfoot class="table-fake-body"> | <tfoot class="table-fake-body"> | ||||
<tr> | <tr> | ||||
<td>{{ $t('user.domains-none') }}</td> | <td>{{ $t('user.domains-none') }}</td> | ||||
</tr> | </tr> | ||||
</tfoot> | </tfoot> | ||||
</table> | </table> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users"> | <div class="tab-pane" id="user-users" role="tabpanel" aria-labelledby="tab-users"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<table class="table table-sm table-hover"> | <table class="table table-sm table-hover mb-0"> | ||||
<thead class="thead-light"> | <thead> | ||||
<tr> | <tr> | ||||
<th scope="col">{{ $t('form.primary-email') }}</th> | <th scope="col">{{ $t('form.primary-email') }}</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord"> | <tr v-for="item in users" :id="'user' + item.id" :key="item.id" @click="$root.clickRecord"> | ||||
<td> | <td> | ||||
<svg-icon icon="user" :class="$root.userStatusClass(item)" :title="$root.userStatusText(item)"></svg-icon> | <svg-icon icon="user" :class="$root.userStatusClass(item)" :title="$root.userStatusText(item)"></svg-icon> | ||||
Show All 9 Lines | <div class="container"> | ||||
</tfoot> | </tfoot> | ||||
</table> | </table> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="user-distlists" role="tabpanel" aria-labelledby="tab-distlists"> | <div class="tab-pane" id="user-distlists" role="tabpanel" aria-labelledby="tab-distlists"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<table class="table table-sm table-hover"> | <table class="table table-sm table-hover mb-0"> | ||||
<thead class="thead-light"> | <thead> | ||||
<tr> | <tr> | ||||
<th scope="col">{{ $t('form.email') }}</th> | <th scope="col">{{ $t('form.email') }}</th> | ||||
</tr> | </tr> | ||||
</thead> | </thead> | ||||
<tbody> | <tbody> | ||||
<tr v-for="list in distlists" :key="list.id" @click="$root.clickRecord"> | <tr v-for="list in distlists" :key="list.id" @click="$root.clickRecord"> | ||||
<td> | <td> | ||||
<svg-icon icon="users" :class="$root.distlistStatusClass(list)" :title="$root.distlistStatusText(list)"></svg-icon> | <svg-icon icon="users" :class="$root.distlistStatusClass(list)" :title="$root.distlistStatusText(list)"></svg-icon> | ||||
Show All 9 Lines | <div class="container"> | ||||
</table> | </table> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tab-pane" id="user-settings" role="tabpanel" aria-labelledby="tab-settings"> | <div class="tab-pane" id="user-settings" role="tabpanel" aria-labelledby="tab-settings"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form class="read-only short"> | <form class="read-only short"> | ||||
<div class="form-group row plaintext"> | <div class="row plaintext"> | ||||
<label for="greylisting" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label> | <label for="greylisting" class="col-sm-4 col-form-label">{{ $t('user.greylisting') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="greylisting"> | <span class="form-control-plaintext" id="greylisting"> | ||||
<span v-if="user.config.greylisting" class="text-success">{{ $t('form.enabled') }}</span> | <span v-if="user.config.greylisting" class="text-success">{{ $t('form.enabled') }}</span> | ||||
<span v-else class="text-danger">{{ $t('form.disabled') }}</span> | <span v-else class="text-danger">{{ $t('form.disabled') }}</span> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="discount-dialog" class="modal" tabindex="-1" role="dialog"> | <div id="discount-dialog" 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">{{ $t('user.discount-title') }}</h5> | <h5 class="modal-title">{{ $t('user.discount-title') }}</h5> | ||||
<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')"> | <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button> | ||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<p class="form-group"> | <p> | ||||
<select v-model="wallet.discount_id" class="custom-select"> | <select v-model="wallet.discount_id" class="form-select"> | ||||
<option value="">- {{ $t('form.none') }} -</option> | <option value="">- {{ $t('form.none') }} -</option> | ||||
<option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option> | <option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option> | ||||
</select> | </select> | ||||
</p> | </p> | ||||
</div> | </div> | ||||
<div class="modal-footer"> | <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-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button> | ||||
<button type="button" class="btn btn-primary modal-action" @click="submitDiscount()"> | <button type="button" class="btn btn-primary modal-action" @click="submitDiscount()"> | ||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="email-dialog" class="modal" tabindex="-1" role="dialog"> | <div id="email-dialog" 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">{{ $t('user.ext-email') }}</h5> | <h5 class="modal-title">{{ $t('user.ext-email') }}</h5> | ||||
<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')"> | <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button> | ||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<p class="form-group"> | <p> | ||||
<input v-model="external_email" name="external_email" class="form-control"> | <input v-model="external_email" name="external_email" class="form-control"> | ||||
</p> | </p> | ||||
</div> | </div> | ||||
<div class="modal-footer"> | <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-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button> | ||||
<button type="button" class="btn btn-primary modal-action" @click="submitEmail()"> | <button type="button" class="btn btn-primary modal-action" @click="submitEmail()"> | ||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="oneoff-dialog" class="modal" tabindex="-1" role="dialog"> | <div id="oneoff-dialog" 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">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5> | <h5 class="modal-title">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5> | ||||
<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')"> | <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button> | ||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<form data-validation-prefix="oneoff_"> | <form data-validation-prefix="oneoff_"> | ||||
<div class="form-group"> | <div class="row mb-3"> | ||||
<label for="oneoff_amount" class="col-form-label">{{ $t('form.amount') }}</label> | <label for="oneoff_amount" class="col-form-label">{{ $t('form.amount') }}</label> | ||||
<div class="input-group"> | <div class="input-group"> | ||||
<input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required> | <input type="text" class="form-control" id="oneoff_amount" v-model="oneoff_amount" required> | ||||
<span class="input-group-append"> | |||||
<span class="input-group-text">{{ wallet.currency }}</span> | <span class="input-group-text">{{ wallet.currency }}</span> | ||||
</span> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group"> | <div class="row"> | ||||
<label for="oneoff_description" class="col-form-label">{{ $t('form.description') }}</label> | <label for="oneoff_description" class="col-form-label">{{ $t('form.description') }}</label> | ||||
<input class="form-control" id="oneoff_description" v-model="oneoff_description" required> | <input class="form-control" id="oneoff_description" v-model="oneoff_description" required> | ||||
</div> | </div> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
<div class="modal-footer"> | <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-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button> | ||||
<button type="button" class="btn btn-primary modal-action" @click="submitOneOff()"> | <button type="button" class="btn btn-primary modal-action" @click="submitOneOff()"> | ||||
<svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }} | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="reset-2fa-dialog" class="modal" tabindex="-1" role="dialog"> | <div id="reset-2fa-dialog" 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">{{ $t('user.reset-2fa-title') }}</h5> | <h5 class="modal-title">{{ $t('user.reset-2fa-title') }}</h5> | ||||
<button type="button" class="close" data-dismiss="modal" :aria-label="$t('btn.close')"> | <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button> | ||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | </div> | ||||
<div class="modal-body"> | <div class="modal-body"> | ||||
<p>{{ $t('user.2fa-hint1') }}</p> | <p>{{ $t('user.2fa-hint1') }}</p> | ||||
<p>{{ $t('user.2fa-hint2') }}</p> | <p>{{ $t('user.2fa-hint2') }}</p> | ||||
</div> | </div> | ||||
<div class="modal-footer"> | <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-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button> | ||||
<button type="button" class="btn btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</button> | <button type="button" class="btn btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Modal } from 'bootstrap' | |||||
import TransactionLog from '../Widgets/TransactionLog' | import TransactionLog from '../Widgets/TransactionLog' | ||||
export default { | export default { | ||||
components: { | components: { | ||||
TransactionLog | TransactionLog | ||||
}, | }, | ||||
beforeRouteUpdate (to, from, next) { | beforeRouteUpdate (to, from, next) { | ||||
// An event called when the route that renders this component has changed, | // An event called when the route that renders this component has changed, | ||||
▲ Show 20 Lines • Show All 122 Lines • ▼ Show 20 Lines | export default { | ||||
methods: { | methods: { | ||||
capitalize(str) { | capitalize(str) { | ||||
return str.charAt(0).toUpperCase() + str.slice(1) | return str.charAt(0).toUpperCase() + str.slice(1) | ||||
}, | }, | ||||
awardDialog() { | awardDialog() { | ||||
this.oneOffDialog(false) | this.oneOffDialog(false) | ||||
}, | }, | ||||
discountEdit() { | discountEdit() { | ||||
$('#discount-dialog') | if (!this.discount_dialog) { | ||||
.on('shown.bs.modal', e => { | const dialog = $('#discount-dialog')[0] | ||||
$(e.target).find('select').focus() | |||||
dialog.addEventListener('shown.bs.modal', e => { | |||||
$(dialog).find('select').focus() | |||||
// Note: Vue v-model is strict, convert null to a string | // Note: Vue v-model is strict, convert null to a string | ||||
this.wallet.discount_id = this.wallet_discount_id || '' | this.wallet.discount_id = this.wallet_discount_id || '' | ||||
}) | }) | ||||
.modal() | |||||
this.discount_dialog = new Modal(dialog) | |||||
} | |||||
this.discount_dialog.show() | |||||
if (!this.discounts.length) { | if (!this.discounts.length) { | ||||
// Fetch discounts | // Fetch discounts | ||||
axios.get('/api/v4/users/' + this.user.id + '/discounts') | axios.get('/api/v4/users/' + this.user.id + '/discounts') | ||||
.then(response => { | .then(response => { | ||||
this.discounts = response.data.list | this.discounts = response.data.list | ||||
}) | }) | ||||
} | } | ||||
}, | }, | ||||
emailEdit() { | emailEdit() { | ||||
this.external_email = this.user.external_email | this.external_email = this.user.external_email | ||||
this.$root.clearFormValidation($('#email-dialog')) | this.$root.clearFormValidation($('#email-dialog')) | ||||
$('#email-dialog') | if (!this.email_dialog) { | ||||
.on('shown.bs.modal', e => { | const dialog = $('#email-dialog')[0] | ||||
$(e.target).find('input').focus() | |||||
dialog.addEventListener('shown.bs.modal', e => { | |||||
$(dialog).find('input').focus() | |||||
}) | }) | ||||
.modal() | |||||
this.email_dialog = new Modal(dialog) | |||||
} | |||||
this.email_dialog.show() | |||||
}, | }, | ||||
setMandateState() { | setMandateState() { | ||||
let mandate = this.wallet.mandate | let mandate = this.wallet.mandate | ||||
if (mandate && mandate.id) { | if (mandate && mandate.id) { | ||||
if (!mandate.isValid) { | if (!mandate.isValid) { | ||||
this.wallet.mandateState = mandate.isPending ? 'pending' : 'invalid' | this.wallet.mandateState = mandate.isPending ? 'pending' : 'invalid' | ||||
} else if (mandate.isDisabled) { | } else if (mandate.isDisabled) { | ||||
this.wallet.mandateState = 'disabled' | this.wallet.mandateState = 'disabled' | ||||
} | } | ||||
} | } | ||||
}, | }, | ||||
oneOffDialog(negative) { | oneOffDialog(negative) { | ||||
this.oneoff_negative = negative | this.oneoff_negative = negative | ||||
this.dialog = $('#oneoff-dialog').on('shown.bs.modal', event => { | |||||
this.$root.clearFormValidation(event.target) | if (!this.oneoff_dialog) { | ||||
$(event.target).find('#oneoff_amount').focus() | const dialog = $('#oneoff-dialog')[0] | ||||
}).modal() | |||||
dialog.addEventListener('shown.bs.modal', () => { | |||||
this.$root.clearFormValidation(dialog) | |||||
$(dialog).find('#oneoff_amount').focus() | |||||
}) | |||||
this.oneoff_dialog = new Modal(dialog) | |||||
} | |||||
this.oneoff_dialog.show() | |||||
}, | }, | ||||
penalizeDialog() { | penalizeDialog() { | ||||
this.oneOffDialog(true) | this.oneOffDialog(true) | ||||
}, | }, | ||||
reload() { | reload() { | ||||
// this is to reload transaction log | // this is to reload transaction log | ||||
this.walletReload = true | this.walletReload = true | ||||
this.$nextTick(() => { this.walletReload = false }) | this.$nextTick(() => { this.walletReload = false }) | ||||
}, | }, | ||||
reset2FA() { | reset2FA() { | ||||
$('#reset-2fa-dialog').modal('hide') | new Modal('#reset-2fa-dialog').hide() | ||||
axios.post('/api/v4/users/' + this.user.id + '/reset2FA') | axios.post('/api/v4/users/' + this.user.id + '/reset2FA') | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.skus = this.skus.filter(sku => sku.id != this.sku2FA) | this.skus = this.skus.filter(sku => sku.id != this.sku2FA) | ||||
this.has2FA = false | this.has2FA = false | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
reset2FADialog() { | reset2FADialog() { | ||||
$('#reset-2fa-dialog').modal() | new Modal('#reset-2fa-dialog').show() | ||||
}, | }, | ||||
submitDiscount() { | submitDiscount() { | ||||
$('#discount-dialog').modal('hide') | this.discount_dialog.hide() | ||||
axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id }) | axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet.discount_id }) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.wallet = Object.assign({}, this.wallet, response.data) | this.wallet = Object.assign({}, this.wallet, response.data) | ||||
// Update prices in Subscriptions tab | // Update prices in Subscriptions tab | ||||
if (this.user.wallet.id == response.data.id) { | if (this.user.wallet.id == response.data.id) { | ||||
this.discount = this.wallet.discount | this.discount = this.wallet.discount | ||||
this.discount_description = this.wallet.discount_description | this.discount_description = this.wallet.discount_description | ||||
this.skus.forEach(sku => { | this.skus.forEach(sku => { | ||||
sku.price = this.$root.priceLabel(sku.cost, this.discount) | sku.price = this.$root.priceLabel(sku.cost, this.discount) | ||||
}) | }) | ||||
} | } | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
submitEmail() { | submitEmail() { | ||||
axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email }) | axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email }) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
$('#email-dialog').modal('hide') | this.email_dialog.hide() | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.user.external_email = this.external_email | this.user.external_email = this.external_email | ||||
this.external_email = null // required because of Vue | this.external_email = null // required because of Vue | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
submitOneOff() { | submitOneOff() { | ||||
let wallet_id = this.user.wallets[0].id | let wallet_id = this.user.wallets[0].id | ||||
let post = { | let post = { | ||||
amount: this.oneoff_amount, | amount: this.oneoff_amount, | ||||
description: this.oneoff_description | description: this.oneoff_description | ||||
} | } | ||||
if (this.oneoff_negative && /^\d+(\.?\d+)?$/.test(post.amount)) { | if (this.oneoff_negative && /^\d+(\.?\d+)?$/.test(post.amount)) { | ||||
post.amount *= -1 | post.amount *= -1 | ||||
} | } | ||||
this.$root.clearFormValidation(this.dialog) | this.$root.clearFormValidation('#oneoff-dialog') | ||||
axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post) | axios.post('/api/v4/wallets/' + wallet_id + '/one-off', post) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.dialog.modal('hide') | this.oneoff_dialog.hide() | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance}) | this.wallet = Object.assign({}, this.wallet, {balance: response.data.balance}) | ||||
this.oneoff_amount = '' | this.oneoff_amount = '' | ||||
this.oneoff_description = '' | this.oneoff_description = '' | ||||
this.reload() | this.reload() | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
Show All 21 Lines |