D3373.1775441717.diff
No OneTemporary
Actions

Authored By

Unknown

Size

77 KB

Referenced Files

None

Subscribers

None

D3373.1775441717.diff
View Options

	diff --git a/src/resources/js/bootstrap.js b/src/resources/js/bootstrap.js
	--- a/src/resources/js/bootstrap.js
	+++ b/src/resources/js/bootstrap.js
	@@ -20,12 +20,16 @@
	import FontAwesomeIcon from './fontawesome'
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	+import Btn from '../vue/Widgets/Btn'
	+import BtnRouter from '../vue/Widgets/BtnRouter'
	import Toast from '../vue/Widgets/Toast'
	import store from './store'

	window.Vue = Vue

	Vue.component('SvgIcon', FontAwesomeIcon)
	+Vue.component('Btn', Btn)
	+Vue.component('BtnRouter', BtnRouter)

	const vTooltip = (el, binding) => {
	let t = []
	diff --git a/src/resources/vue/Admin/Domain.vue b/src/resources/vue/Admin/Domain.vue
	--- a/src/resources/vue/Admin/Domain.vue
	+++ b/src/resources/vue/Admin/Domain.vue
	@@ -25,12 +25,12 @@
	</div>
	</form>
	<div class="mt-2 buttons">
	- <button v-if="!domain.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendDomain">
	+ <btn v-if="!domain.isSuspended" id="button-suspend" class="btn-warning" @click="suspendDomain">
	{{ $t('btn.suspend') }}
	- </button>
	- <button v-if="domain.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendDomain">
	+ </btn>
	+ <btn v-if="domain.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendDomain">
	{{ $t('btn.unsuspend') }}
	- </button>
	+ </btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue
	--- a/src/resources/vue/Admin/User.vue
	+++ b/src/resources/vue/Admin/User.vue
	@@ -58,7 +58,7 @@
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="external_email">
	<a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a>
	- <button type="button" class="btn btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</button>
	+ <btn class="btn-secondary btn-sm ms-2" @click="emailEdit">{{ $t('btn.edit') }}</btn>
	</span>
	</div>
	</div>
	@@ -76,12 +76,12 @@
	</div>
	</form>
	<div class="mt-2 buttons">
	- <button v-if="!user.isSuspended" id="button-suspend" class="btn btn-warning" type="button" @click="suspendUser">
	+ <btn v-if="!user.isSuspended" id="button-suspend" class="btn-warning" @click="suspendUser">
	{{ $t('btn.suspend') }}
	- </button>
	- <button v-if="user.isSuspended" id="button-unsuspend" class="btn btn-warning" type="button" @click="unsuspendUser">
	+ </btn>
	+ <btn v-if="user.isSuspended" id="button-unsuspend" class="btn-warning" @click="unsuspendUser">
	{{ $t('btn.unsuspend') }}
	- </button>
	+ </btn>
	</div>
	</div>
	</div>
	@@ -147,7 +147,7 @@
	<div class="col-sm-8">
	<span class="form-control-plaintext" id="discount">
	<span>{{ wallet.discount ? (wallet.discount + '% - ' + wallet.discount_description) : 'none' }}</span>
	- <button type="button" class="btn btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</button>
	+ <btn class="btn-secondary btn-sm ms-2" @click="discountEdit">{{ $t('btn.edit') }}</btn>
	</span>
	</div>
	</div>
	@@ -173,8 +173,8 @@
	</div>
	</form>
	<div class="mt-2 buttons">
	- <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>
	+ <btn id="button-award" class="btn-success" @click="awardDialog">{{ $t('user.add-bonus') }}</btn>
	+ <btn id="button-penalty" class="btn-danger" @click="penalizeDialog">{{ $t('user.add-penalty') }}</btn>
	</div>
	</div>
	<h2 class="card-title mt-4">{{ $t('wallet.transactions') }}</h2>
	@@ -231,12 +231,8 @@
	¹ {{ $t('user.discount-hint') }}: {{ discount }}% - {{ discount_description }}
	</small>
	<div class="mt-2 buttons">
	- <button type="button" class="btn btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">
	- {{ $t('user.reset-2fa') }}
	- </button>
	- <button type="button" class="btn btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">
	- {{ $t('user.add-beta') }}
	- </button>
	+ <btn class="btn-danger" id="reset2fa" v-if="has2FA" @click="reset2FADialog">{{ $t('user.reset-2fa') }}</btn>
	+ <btn class="btn-secondary" id="addbetasku" v-if="!hasBeta" @click="addBetaSku">{{ $t('user.add-beta') }}</btn>
	</div>
	</div>
	</div>
	@@ -408,7 +404,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('user.discount-title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>
	@@ -419,10 +415,8 @@
	</p>
	</div>
	<div class="modal-footer">
	- <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()">
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	- </button>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-primary modal-action" @click="submitDiscount()" icon="check">{{ $t('btn.submit') }}</btn>
	</div>
	</div>
	</div>
	@@ -433,7 +427,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('user.ext-email') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>
	@@ -441,10 +435,8 @@
	</p>
	</div>
	<div class="modal-footer">
	- <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()">
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	- </button>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-primary modal-action" @click="submitEmail()" icon="check">{{ $t('btn.submit') }}</btn>
	</div>
	</div>
	</div>
	@@ -455,7 +447,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t(oneoff_negative ? 'user.add-penalty-title' : 'user.add-bonus-title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<form data-validation-prefix="oneoff_">
	@@ -473,10 +465,8 @@
	</form>
	</div>
	<div class="modal-footer">
	- <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()">
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	- </button>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-primary modal-action" @click="submitOneOff()" icon="check">{{ $t('btn.submit') }}</btn>
	</div>
	</div>
	</div>
	@@ -487,15 +477,15 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('user.reset-2fa-title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>{{ $t('user.2fa-hint1') }}</p>
	<p>{{ $t('user.2fa-hint2') }}</p>
	</div>
	<div class="modal-footer">
	- <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>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-danger modal-action" @click="reset2FA()">{{ $t('btn.reset') }}</btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Distlist/Info.vue b/src/resources/vue/Distlist/Info.vue
	--- a/src/resources/vue/Distlist/Info.vue
	+++ b/src/resources/vue/Distlist/Info.vue
	@@ -6,9 +6,7 @@
	<div class="card-body">
	<div class="card-title" v-if="list_id !== 'new'">
	{{ $tc('distlist.list-title', 1) }}
	- <button class="btn btn-outline-danger button-delete float-end" @click="deleteList()" tag="button">
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('distlist.delete') }}
	- </button>
	+ <btn class="btn-outline-danger button-delete float-end" @click="deleteList()" icon="trash-alt">{{ $t('distlist.delete') }}</btn>
	</div>
	<div class="card-title" v-if="list_id === 'new'">{{ $t('distlist.new') }}</div>
	<div class="card-text">
	@@ -51,7 +49,7 @@
	<list-input id="members" :list="list.members"></list-input>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	@@ -65,7 +63,7 @@
	</small>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/Distlist/List.vue b/src/resources/vue/Distlist/List.vue
	--- a/src/resources/vue/Distlist/List.vue
	+++ b/src/resources/vue/Distlist/List.vue
	@@ -5,9 +5,9 @@
	<div class="card-title">
	{{ $tc('distlist.list-title', 2) }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	- <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-list" :to="{ path: 'distlist/new' }" tag="button">
	- <svg-icon icon="users"></svg-icon> {{ $t('distlist.create') }}
	- </router-link>
	+ <btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="distlist/new" icon="users">
	+ {{ $t('distlist.create') }}
	+ </btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	diff --git a/src/resources/vue/Domain/Info.vue b/src/resources/vue/Domain/Info.vue
	--- a/src/resources/vue/Domain/Info.vue
	+++ b/src/resources/vue/Domain/Info.vue
	@@ -6,12 +6,7 @@
	<div class="card-body">
	<div class="card-title" v-if="domain_id === 'new'">{{ $t('domain.new') }}</div>
	<div class="card-title" v-else>{{ $t('form.domain') }}
	- <button
	- class="btn btn-outline-danger button-delete float-end"
	- @click="showDeleteConfirmation()" type="button"
	- >
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('domain.delete') }}
	- </button>
	+ <btn class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()" icon="trash-alt">{{ $t('domain.delete') }}</btn>
	</div>
	<div class="card-text">
	<ul class="nav nav-tabs mt-3" role="tablist">
	@@ -49,9 +44,7 @@
	<label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
	<subscription-select v-if="domain.id" class="col-sm-8 pt-sm-1" type="domain" :object="domain" :readonly="true"></subscription-select>
	</div>
	- <button v-if="!domain.id" class="btn btn-primary mt-3" type="submit">
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	- </button>
	+ <btn v-if="!domain.id" class="btn-primary mt-3" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	<hr class="m-0" v-if="domain.id">
	<div v-if="domain.id && !domain.isConfirmed" class="card-body" id="domain-verify">
	@@ -67,7 +60,7 @@
	<span>{{ $t('domain.verify-outro') }}</span>
	</p>
	<p>{{ $t('domain.verify-sample') }} <pre>{{ domain.dns.join("\n") }}</pre></p>
	- <button class="btn btn-primary" type="button" @click="confirm"><svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.verify') }}</button>
	+ <btn class="btn-primary" @click="confirm" icon="sync-alt">{{ $t('btn.verify') }}</btn>
	</div>
	</div>
	<div v-if="domain.isConfirmed" class="card-body" id="domain-config">
	@@ -92,7 +85,7 @@
	</small>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('form.submit') }}</btn>
	</form>
	</div>
	</div>
	@@ -105,16 +98,14 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('domain.delete-domain', { domain: domain.namespace }) }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>{{ $t('domain.delete-text') }}</p>
	</div>
	<div class="modal-footer">
	- <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="deleteDomain()">
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('btn.delete') }}
	- </button>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-danger modal-action" @click="deleteDomain()" icon="trash-alt">{{ $t('btn.delete') }}</btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Domain/List.vue b/src/resources/vue/Domain/List.vue
	--- a/src/resources/vue/Domain/List.vue
	+++ b/src/resources/vue/Domain/List.vue
	@@ -4,16 +4,15 @@
	<div class="card-body">
	<div class="card-title">
	{{ $t('user.domains') }}
	- <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-domain" :to="{ path: 'domain/new' }" tag="button">
	- <svg-icon icon="globe"></svg-icon> {{ $t('domain.create') }}
	- </router-link>
	+ <btn-router v-if="!$root.isDegraded()" class="btn-success float-end" to="domain/new" icon="globe">
	+ {{ $t('domain.create') }}
	+ </btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	<thead>
	<tr>
	<th scope="col">{{ $t('domain.namespace') }}</th>
	- <th scope="col"></th>
	</tr>
	</thead>
	<tbody>
	@@ -22,12 +21,11 @@
	<svg-icon icon="globe" :class="$root.statusClass(domain)" :title="$root.statusText(domain)"></svg-icon>
	<router-link :to="{ path: 'domain/' + domain.id }">{{ domain.namespace }}</router-link>
	</td>
	- <td class="buttons"></td>
	</tr>
	</tbody>
	<tfoot class="table-fake-body">
	<tr>
	- <td colspan="2">{{ $t('user.domains-none') }}</td>
	+ <td>{{ $t('user.domains-none') }}</td>
	</tr>
	</tfoot>
	</table>
	diff --git a/src/resources/vue/Login.vue b/src/resources/vue/Login.vue
	--- a/src/resources/vue/Login.vue
	+++ b/src/resources/vue/Login.vue
	@@ -28,9 +28,7 @@
	<small class="text-muted mt-2">{{ $t('login.2fa_desc') }}</small>
	</div>
	<div class="text-center">
	- <button class="btn btn-primary" type="submit">
	- <svg-icon icon="sign-in-alt"></svg-icon> {{ $t('login.sign_in') }}
	- </button>
	+ <btn class="btn-primary" type="submit" icon="sign-in-alt">{{ $t('login.sign_in') }}</btn>
	</div>
	</form>
	</div>
	diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
	--- a/src/resources/vue/Meet/Room.vue
	+++ b/src/resources/vue/Meet/Room.vue
	@@ -126,13 +126,13 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('meet.leave-title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<p>{{ $t('meet.leave-body') }}</p>
	</div>
	<div class="modal-footer">
	- <button type="button" class="btn btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
	+ <btn class="btn-danger modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
	</div>
	</div>
	</div>
	@@ -143,7 +143,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('meet.media-title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<form class="media-setup-form">
	@@ -169,7 +169,7 @@
	</form>
	</div>
	<div class="modal-footer">
	- <button type="button" class="btn btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
	+ <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Meet/RoomOptions.vue b/src/resources/vue/Meet/RoomOptions.vue
	--- a/src/resources/vue/Meet/RoomOptions.vue
	+++ b/src/resources/vue/Meet/RoomOptions.vue
	@@ -5,7 +5,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('meet.options') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<form id="room-options-password">
	@@ -14,9 +14,9 @@
	<span v-if="config.password" id="password-input-text" class="input-group-text">{{ config.password }}</span>
	<span v-else id="password-input-text" class="input-group-text text-muted">{{ $t('meet.password-none') }}</span>
	<input type="text" :value="config.password" name="password" class="form-control rounded-start activable">
	- <button type="button" @click="passwordSave" id="password-save-btn" class="btn btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</button>
	- <button type="button" v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn btn-outline-danger rounded">{{ $t('meet.password-clear') }}</button>
	- <button type="button" v-else @click="passwordSet" id="password-set-btn" class="btn btn-outline-primary rounded">{{ $t('meet.password-set') }}</button>
	+ <btn @click="passwordSave" id="password-save-btn" class="btn-outline-primary activable rounded-end">{{ $t('btn.save') }}</btn>
	+ <btn v-if="config.password" id="password-clear-btn" @click="passwordClear" class="btn-outline-danger rounded">{{ $t('meet.password-clear') }}</btn>
	+ <btn v-else @click="passwordSet" id="password-set-btn" class="btn-outline-primary rounded">{{ $t('meet.password-set') }}</btn>
	</div>
	<small class="text-muted">
	{{ $t('meet.password-text') }}
	@@ -44,7 +44,7 @@
	</form>
	</div>
	<div class="modal-footer">
	- <button type="button" class="btn btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</button>
	+ <btn class="btn-secondary modal-action" data-bs-dismiss="modal">{{ $t('btn.close') }}</btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/PasswordReset.vue b/src/resources/vue/PasswordReset.vue
	--- a/src/resources/vue/PasswordReset.vue
	+++ b/src/resources/vue/PasswordReset.vue
	@@ -12,7 +12,7 @@
	<label for="reset_email" class="visually-hidden">{{ $t('form.email') }}</label>
	<input type="text" class="form-control" id="reset_email" :placeholder="$t('form.email')" required v-model="email">
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	</form>
	</div>
	</div>
	@@ -28,8 +28,8 @@
	<label for="reset_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
	<input type="text" class="form-control" id="reset_short_code" :placeholder="$t('form.code')" required v-model="short_code">
	</div>
	- <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	+ <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	+ <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	<input type="hidden" id="reset_code" v-model="code" />
	</form>
	</div>
	@@ -52,8 +52,8 @@
	</div>
	<small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
	</div>
	- <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	+ <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/Reseller/Invitations.vue b/src/resources/vue/Reseller/Invitations.vue
	--- a/src/resources/vue/Reseller/Invitations.vue
	+++ b/src/resources/vue/Reseller/Invitations.vue
	@@ -8,11 +8,7 @@
	<div class="card-text">
	<div class="mb-2 d-flex">
	<list-search :placeholder="$t('invitation.search')" :on-search="searchInvitations"></list-search>
	- <div>
	- <button class="btn btn-success create-invite ms-1" @click="inviteUserDialog">
	- <svg-icon icon="envelope-open-text"></svg-icon> {{ $t('invitation.create') }}
	- </button>
	- </div>
	+ <btn class="btn-success create-invite ms-1" @click="inviteUserDialog" icon="envelope-open-text">{{ $t('invitation.create') }}</btn>
	</div>

	<table id="invitations-list" class="table table-sm table-hover">
	@@ -33,14 +29,12 @@
	{{ inv.created }}
	</td>
	<td class="buttons">
	- <button class="btn text-danger button-delete p-0 ms-1" @click="deleteInvite(inv.id)">
	- <svg-icon icon="trash-alt"></svg-icon>
	+ <btn class="text-danger button-delete p-0 ms-1" @click="deleteInvite(inv.id)" icon="trash-alt">
	<span class="btn-label">{{ $t('btn.delete') }}</span>
	- </button>
	- <button class="btn button-resend p-0 ms-1" :disabled="inv.isNew \|\| inv.isCompleted" @click="resendInvite(inv.id)">
	- <svg-icon icon="redo"></svg-icon>
	+ </btn>
	+ <btn class="button-resend p-0 ms-1" :disabled="inv.isNew \|\| inv.isCompleted" @click="resendInvite(inv.id)" icon="redo">
	<span class="btn-label">{{ $t('btn.resend') }}</span>
	- </button>
	+ </btn>
	</td>
	</tr>
	</tbody>
	@@ -56,7 +50,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('invitation.create-title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<form>
	@@ -72,10 +66,8 @@
	</form>
	</div>
	<div class="modal-footer">
	- <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="inviteUser()">
	- <svg-icon icon="paper-plane"></svg-icon> {{ $t('invitation.send') }}
	- </button>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-primary modal-action" icon="paper-plane" @click="inviteUser()">{{ $t('invitation.send') }}</btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Resource/Info.vue b/src/resources/vue/Resource/Info.vue
	--- a/src/resources/vue/Resource/Info.vue
	+++ b/src/resources/vue/Resource/Info.vue
	@@ -6,9 +6,7 @@
	<div class="card-body">
	<div class="card-title" v-if="resource_id !== 'new'">
	{{ $tc('resource.list-title', 1) }}
	- <button class="btn btn-outline-danger button-delete float-end" @click="deleteResource()" tag="button">
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('resource.delete') }}
	- </button>
	+ <btn class="btn-outline-danger button-delete float-end" @click="deleteResource()" icon="trash-alt">{{ $t('resource.delete') }}</btn>
	</div>
	<div class="card-title" v-if="resource_id === 'new'">{{ $t('resource.new') }}</div>
	<div class="card-text">
	@@ -53,7 +51,7 @@
	<input type="text" class="form-control" id="email" disabled v-model="resource.email">
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	@@ -74,7 +72,7 @@
	</small>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/Resource/List.vue b/src/resources/vue/Resource/List.vue
	--- a/src/resources/vue/Resource/List.vue
	+++ b/src/resources/vue/Resource/List.vue
	@@ -5,9 +5,9 @@
	<div class="card-title">
	{{ $tc('resource.list-title', 2) }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	- <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-resource" :to="{ path: 'resource/new' }" tag="button">
	- <svg-icon icon="cog"></svg-icon> {{ $t('resource.create') }}
	- </router-link>
	+ <btn-router v-if="!$root.isDegraded()" to="resource/new" class="btn-success float-end" icon="cog">
	+ {{ $t('resource.create') }}
	+ </btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	diff --git a/src/resources/vue/Settings.vue b/src/resources/vue/Settings.vue
	--- a/src/resources/vue/Settings.vue
	+++ b/src/resources/vue/Settings.vue
	@@ -19,7 +19,7 @@
	</ul>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/SharedFolder/Info.vue b/src/resources/vue/SharedFolder/Info.vue
	--- a/src/resources/vue/SharedFolder/Info.vue
	+++ b/src/resources/vue/SharedFolder/Info.vue
	@@ -6,9 +6,7 @@
	<div class="card-body">
	<div class="card-title" v-if="folder_id !== 'new'">
	{{ $tc('shf.list-title', 1) }}
	- <button class="btn btn-outline-danger button-delete float-end" @click="deleteFolder()" tag="button">
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('shf.delete') }}
	- </button>
	+ <btn class="btn-outline-danger button-delete float-end" @click="deleteFolder()" icon="trash-alt">{{ $t('shf.delete') }}</btn>
	</div>
	<div class="card-title" v-if="folder_id === 'new'">{{ $t('shf.new') }}</div>
	<div class="card-text">
	@@ -61,7 +59,7 @@
	<input type="text" class="form-control" id="email" disabled v-model="folder.email">
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	@@ -75,7 +73,7 @@
	</small>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/SharedFolder/List.vue b/src/resources/vue/SharedFolder/List.vue
	--- a/src/resources/vue/SharedFolder/List.vue
	+++ b/src/resources/vue/SharedFolder/List.vue
	@@ -5,9 +5,9 @@
	<div class="card-title">
	{{ $tc('shf.list-title', 2) }}
	<small><sup class="badge bg-primary">{{ $t('dashboard.beta') }}</sup></small>
	- <router-link v-if="!$root.isDegraded()" class="btn btn-success float-end create-folder" :to="{ path: 'shared-folder/new' }" tag="button">
	- <svg-icon icon="cog"></svg-icon> {{ $t('shf.create') }}
	- </router-link>
	+ <btn-router v-if="!$root.isDegraded()" to="shared-folder/new" class="btn-success float-end" icon="cog">
	+ {{ $t('shf.create') }}
	+ </btn-router>
	</div>
	<div class="card-text">
	<table class="table table-sm table-hover">
	diff --git a/src/resources/vue/Signup.vue b/src/resources/vue/Signup.vue
	--- a/src/resources/vue/Signup.vue
	+++ b/src/resources/vue/Signup.vue
	@@ -10,7 +10,7 @@
	</div>
	</div>
	<div class="card-body text-center">
	- <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button>
	+ <btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn>
	<div class="plan-description text-start mt-3" v-html="item.description"></div>
	</div>
	</div>
	@@ -35,8 +35,8 @@
	<label for="signup_email" class="visually-hidden">{{ $t('signup.email') }}</label>
	<input type="text" class="form-control" id="signup_email" :placeholder="$t('signup.email')" required v-model="email">
	</div>
	- <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	+ <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	+ <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	</form>
	</div>
	</div>
	@@ -52,8 +52,8 @@
	<label for="signup_short_code" class="visually-hidden">{{ $t('form.code') }}</label>
	<input type="text" class="form-control" id="signup_short_code" :placeholder="$t('form.code')" required v-model="short_code">
	</div>
	- <button class="btn btn-secondary" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary ms-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}</button>
	+ <btn class="btn-secondary" @click="stepBack">{{ $t('btn.back') }}</btn>
	+ <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn>
	<input type="hidden" id="signup_code" v-model="code" />
	</form>
	</div>
	@@ -88,10 +88,11 @@
	<label for="signup_voucher" class="visually-hidden">{{ $t('signup.voucher') }}</label>
	<input type="text" class="form-control" id="signup_voucher" :placeholder="$t('signup.voucher')" v-model="voucher">
	</div>
	- <button v-if="!invitation" class="btn btn-secondary me-2" type="button" @click="stepBack">{{ $t('btn.back') }}</button>
	- <button class="btn btn-primary" type="submit">
	- <svg-icon icon="check"></svg-icon> <span v-if="invitation">{{ $t('btn.signup') }}</span><span v-else>{{ $t('btn.submit') }}</span>
	- </button>
	+ <btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn>
	+ <btn class="btn-primary" type="submit" icon="check">
	+ <span v-if="invitation">{{ $t('btn.signup') }}</span>
	+ <span v-else>{{ $t('btn.submit') }}</span>
	+ </btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/User/Info.vue b/src/resources/vue/User/Info.vue
	--- a/src/resources/vue/User/Info.vue
	+++ b/src/resources/vue/User/Info.vue
	@@ -5,12 +5,9 @@
	<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-end"
	- @click="showDeleteConfirmation()" type="button"
	- >
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.delete') }}
	- </button>
	+ <btn icon="trash-alt" class="btn-outline-danger button-delete float-end" @click="showDeleteConfirmation()">
	+ {{ $t('user.delete') }}
	+ </btn>
	</div>
	<div class="card-title" v-if="user_id === 'new'">{{ $t('user.new') }}</div>
	<div class="card-text">
	@@ -78,12 +75,8 @@
	<div id="password-link" v-if="passwordMode == 'link' \|\| user.passwordLinkCode" class="mt-2">
	<span>{{ $t('user.pass-link-label') }}</span> <code>{{ passwordLink }}</code>
	<span class="d-inline-block">
	- <button class="btn btn-link p-1" type="button" :title="$t('btn.copy')" @click="passwordLinkCopy">
	- <svg-icon :icon="['far', 'clipboard']"></svg-icon>
	- </button>
	- <button v-if="user.passwordLinkCode" class="btn btn-link text-danger p-1" type="button" :title="$t('btn.delete')" @click="passwordLinkDelete">
	- <svg-icon icon="trash-alt"></svg-icon>
	- </button>
	+ <btn class="btn-link p-1" :icon="['far', 'clipboard']" :title="$t('btn.copy')" @click="passwordLinkCopy"></btn>
	+ <btn v-if="user.passwordLinkCode" class="btn-link text-danger p-1" icon="trash-alt" :title="$t('btn.delete')" @click="passwordLinkDelete"></btn>
	</span>
	</div>
	</div>
	@@ -96,7 +89,7 @@
	<label class="col-sm-4 col-form-label">{{ $t('user.subscriptions') }}</label>
	<subscription-select v-if="user.id" class="col-sm-8 pt-sm-1" :object="user"></subscription-select>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="tab-settings">
	@@ -110,7 +103,7 @@
	</small>
	</div>
	</div>
	- <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	@@ -122,16 +115,14 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('user.delete-email', { email: user.email }) }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</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-bs-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>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-danger modal-action" icon="trash-alt" @click="deleteUser()">{{ $t('btn.delete') }}</btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/User/List.vue b/src/resources/vue/User/List.vue
	--- a/src/resources/vue/User/List.vue
	+++ b/src/resources/vue/User/List.vue
	@@ -8,11 +8,9 @@
	<div class="card-text">
	<div class="mb-2 d-flex">
	<list-search :placeholder="$t('user.search')" :on-search="searchUsers"></list-search>
	- <div v-if="!$root.isDegraded()">
	- <router-link class="btn btn-success ms-1 create-user" :to="{ path: 'user/new' }" tag="button">
	- <svg-icon icon="user"></svg-icon> {{ $t('user.create') }}
	- </router-link>
	- </div>
	+ <btn-router v-if="!$root.isDegraded()" to="user/new" class="btn-success ms-1" icon="user">
	+ {{ $t('user.create') }}
	+ </btn-router>
	</div>
	<table id="users-list" class="table table-sm table-hover">
	<thead>
	diff --git a/src/resources/vue/User/Profile.vue b/src/resources/vue/User/Profile.vue
	--- a/src/resources/vue/User/Profile.vue
	+++ b/src/resources/vue/User/Profile.vue
	@@ -4,13 +4,9 @@
	<div class="card-body">
	<div class="card-title">
	{{ $t('user.profile-title') }}
	- <router-link
	- v-if="$root.isController(wallet.id)"
	- class="btn btn-outline-danger button-delete float-end"
	- to="/profile/delete" tag="button"
	- >
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.profile-delete') }}
	- </router-link>
	+ <btn-router v-if="$root.isController(wallet.id)" to="profile/delete" class="btn-outline-danger float-end" icon="trash-alt">
	+ {{ $t('user.profile-delete') }}
	+ </btn-router>
	</div>
	<div class="card-text">
	<form @submit.prevent="submit">
	@@ -69,7 +65,7 @@
	<label for="password" class="col-sm-4 col-form-label">{{ $t('form.password') }}</label>
	<password-input class="col-sm-8" v-model="profile"></password-input>
	</div>
	- <button class="btn btn-primary button-submit mt-2" type="submit"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-primary button-submit mt-2" type="submit" icon="check">{{ $t('btn.submit') }}</btn>
	</form>
	</div>
	</div>
	diff --git a/src/resources/vue/User/ProfileDelete.vue b/src/resources/vue/User/ProfileDelete.vue
	--- a/src/resources/vue/User/ProfileDelete.vue
	+++ b/src/resources/vue/User/ProfileDelete.vue
	@@ -8,10 +8,10 @@
	<p>{{ $t('user.profile-delete-text2') }}</p>
	<p v-if="supportEmail" v-html="$t('user.profile-delete-support', { href: 'mailto:' + supportEmail, email: supportEmail })"></p>
	<p>{{ $t('user.profile-delete-contact', { app: $root.appName }) }}</p>
	- <button class="btn btn-secondary button-cancel" @click="$router.go(-1)">{{ $t('btn.cancel') }}</button>
	- <button class="btn btn-danger button-delete" @click="deleteProfile">
	- <svg-icon icon="trash-alt"></svg-icon> {{ $t('user.profile-delete') }}
	- </button>
	+ <p class="buttons">
	+ <btn class="btn-secondary button-cancel" @click="$router.go(-1)">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-danger button-delete" @click="deleteProfile" icon="trash-alt">{{ $t('user.profile-delete') }}</btn>
	+ </p>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
	--- a/src/resources/vue/Wallet.vue
	+++ b/src/resources/vue/Wallet.vue
	@@ -10,16 +10,16 @@
	{{ $t('wallet.pending-payments-warning') }}
	</div>
	<p>
	- <button type="button" class="btn btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</button>
	+ <btn class="btn-primary" @click="paymentMethodForm('manual')">{{ $t('wallet.add-credit') }}</btn>
	</p>
	<div id="mandate-form" v-if="!mandate.isValid && !mandate.isPending">
	<template v-if="mandate.id && !mandate.isValid">
	<div class="alert alert-danger">
	{{ $t('wallet.auto-payment-failed') }}
	</div>
	- <button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button>
	+ <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
	</template>
	- <button type="button" class="btn btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</button>
	+ <btn class="btn-primary" @click="paymentMethodForm('auto')">{{ $t('wallet.auto-payment-setup') }}</btn>
	</div>
	<div id="mandate-info" v-else>
	<div v-if="mandate.isDisabled" class="disabled-mandate alert alert-danger">
	@@ -33,8 +33,8 @@
	{{ $t('wallet.auto-payment-inprogress') }}
	</div>
	<p class="buttons">
	- <button type="button" class="btn btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</button>
	- <button type="button" class="btn btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</button>
	+ <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn>
	+ <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn>
	</p>
	</div>
	</div>
	@@ -69,9 +69,7 @@
	<select id="receipt-id" class="form-control">
	<option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option>
	</select>
	- <button type="button" class="btn btn-secondary" @click="receiptDownload">
	- <svg-icon icon="download"></svg-icon> {{ $t('btn.download') }}
	- </button>
	+ <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn>
	</div>
	<p v-if="!receipts.length">
	{{ $t('wallet.receipts-none') }}
	@@ -96,7 +94,7 @@
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title">{{ paymentDialogTitle }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	<div id="payment-method" v-if="paymentForm == 'method'">
	@@ -163,25 +161,22 @@
	</div>
	</div>
	<div class="modal-footer">
	- <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"
	- v-if="paymentForm == 'auto' && (mandate.isValid \|\| mandate.isPending)"
	- @click="autoPayment"
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn class="btn-primary modal-action" icon="check" @click="autoPayment"
	+ v-if="paymentForm == 'auto' && (mandate.isValid \|\| mandate.isPending)"
	>
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}
	- </button>
	- <button type="button" class="btn btn-primary modal-action"
	- v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
	- @click="autoPayment"
	+ {{ $t('btn.submit') }}
	+ </btn>
	+ <btn class="btn btn-primary modal-action" icon="check" @click="autoPayment"
	+ v-if="paymentForm == 'auto' && !mandate.isValid && !mandate.isPending"
	>
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}
	- </button>
	- <button type="button" class="btn btn-primary modal-action"
	- v-if="paymentForm == 'manual'"
	- @click="payment"
	+ {{ $t('btn.continue') }}
	+ </btn>
	+ <btn class="btn-primary modal-action" icon="check" @click="payment"
	+ v-if="paymentForm == 'manual'"
	>
	- <svg-icon icon="check"></svg-icon> {{ $t('btn.continue') }}
	- </button>
	+ {{ $t('btn.continue') }}
	+ </btn>
	</div>
	</div>
	</div>
	diff --git a/src/resources/vue/Widgets/Btn.vue b/src/resources/vue/Widgets/Btn.vue
	new file mode 100644
	--- /dev/null
	+++ b/src/resources/vue/Widgets/Btn.vue
	@@ -0,0 +1,14 @@
	+<template>
	+ <button class="btn" :type="type" @click="$emit('click', $event)">
	+ <svg-icon v-if="icon" :icon="icon"></svg-icon> <slot></slot>
	+ </button>
	+</template>
	+
	+<script>
	+ export default {
	+ props: {
	+ type: { type: String, default: 'button' },
	+ icon: { type: [ Array, String ], default: '' },
	+ }
	+ }
	+</script>
	diff --git a/src/resources/vue/Widgets/BtnRouter.vue b/src/resources/vue/Widgets/BtnRouter.vue
	new file mode 100644
	--- /dev/null
	+++ b/src/resources/vue/Widgets/BtnRouter.vue
	@@ -0,0 +1,23 @@
	+<template>
	+ <router-link :to="to" custom v-slot="{ navigate }">
	+ <btn :class="className()" :icon="icon" @click="navigate">
	+ <slot></slot>
	+ </btn>
	+ </router-link>
	+</template>
	+
	+<script>
	+ export default {
	+ props: {
	+ to: { type: [ Object, String ], default: () => {} },
	+ icon: { type: [ Array, String ], default: '' },
	+ },
	+ methods: {
	+ className() {
	+ let label = this.to.length ? this.to : this.to.name
	+
	+ return ['btn', label.replace('/', '-')]
	+ }
	+ }
	+ }
	+</script>
	diff --git a/src/resources/vue/Widgets/PackageSelect.vue b/src/resources/vue/Widgets/PackageSelect.vue
	--- a/src/resources/vue/Widgets/PackageSelect.vue
	+++ b/src/resources/vue/Widgets/PackageSelect.vue
	@@ -26,10 +26,9 @@
	{{ $root.priceLabel(pkg.cost, discount, currency) }}
	</td>
	<td class="buttons">
	- <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="pkg.description">
	- <svg-icon icon="info-circle"></svg-icon>
	+ <btn v-if="pkg.description" class="btn-link btn-lg p-0" v-tooltip="pkg.description" icon="info-circle">
	<span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
	- </button>
	+ </btn>
	</td>
	</tr>
	</tbody>
	diff --git a/src/resources/vue/Widgets/Status.vue b/src/resources/vue/Widgets/Status.vue
	--- a/src/resources/vue/Widgets/Status.vue
	+++ b/src/resources/vue/Widgets/Status.vue
	@@ -8,9 +8,9 @@
	<br>
	<span id="refresh-text" v-if="refresh">{{ $t('status.prepare-refresh') }}</span>
	</p>
	- <button v-if="refresh" id="status-refresh" href="#" class="btn btn-secondary" @click="statusRefresh">
	- <svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.refresh') }}
	- </button>
	+ <btn v-if="refresh" id="status-refresh" href="#" class="btn-secondary" @click="statusRefresh" icon="sync-alt">
	+ {{ $t('btn.refresh') }}
	+ </btn>
	</div>
	<div v-else class="d-flex align-items-start">
	<p id="status-body" class="flex-grow-1">
	@@ -19,9 +19,9 @@
	{{ $t('status.verify') }}
	</p>
	<div v-if="scope == 'domain'">
	- <button id="status-verify" class="btn btn-secondary text-nowrap" @click="confirmDomain">
	- <svg-icon icon="sync-alt"></svg-icon> {{ $t('btn.verify') }}
	- </button>
	+ <btn id="status-verify" class="btn-secondary text-nowrap" @click="confirmDomain" icon="sync-alt">
	+ {{ $t('btn.verify') }}
	+ </btn>
	</div>
	<div v-else-if="state.link && scope != 'domain'">
	<router-link id="status-link" class="btn btn-secondary" :to="{ path: state.link }">{{ $t('status.verify-domain') }}</router-link>
	diff --git a/src/resources/vue/Widgets/SubscriptionSelect.vue b/src/resources/vue/Widgets/SubscriptionSelect.vue
	--- a/src/resources/vue/Widgets/SubscriptionSelect.vue
	+++ b/src/resources/vue/Widgets/SubscriptionSelect.vue
	@@ -34,10 +34,9 @@
	{{ $root.priceLabel(sku.cost, discount, currency) }}
	</td>
	<td class="buttons">
	- <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="sku.description">
	- <svg-icon icon="info-circle"></svg-icon>
	+ <btn v-if="sku.description" class="btn-link btn-lg p-0" v-tooltip="sku.description" icon="info-circle">
	<span class="visually-hidden">{{ $t('btn.moreinfo') }}</span>
	- </button>
	+ </btn>
	</td>
	</tr>
	</tbody>
	diff --git a/src/resources/vue/Widgets/SupportForm.vue b/src/resources/vue/Widgets/SupportForm.vue
	--- a/src/resources/vue/Widgets/SupportForm.vue
	+++ b/src/resources/vue/Widgets/SupportForm.vue
	@@ -4,36 +4,34 @@
	<form class="modal-content" @submit.prevent="submit">
	<div class="modal-header">
	<h5 class="modal-title">{{ $t('support.title') }}</h5>
	- <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close" data-bs-dismiss="modal" :aria-label="$t('btn.close')"></btn>
	</div>
	<div class="modal-body">
	- <form>
	- <div class="mb-3">
	- <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
	- <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
	- <small class="text-muted">{{ $t('support.id-hint') }}</small>
	- </div>
	- <div class="mb-3">
	- <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
	- <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
	- </div>
	- <div class="mb-3">
	- <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
	- <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
	- </div>
	- <div class="mb-3">
	- <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
	- <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
	- </div>
	- <div>
	- <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
	- <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
	- </div>
	- </form>
	+ <div class="mb-3">
	+ <label for="support-user" class="form-label">{{ $t('support.id') }}</label>
	+ <input id="support-user" type="text" class="form-control" :placeholder="$t('support.id-pl')" v-model="user" />
	+ <small class="text-muted">{{ $t('support.id-hint') }}</small>
	+ </div>
	+ <div class="mb-3">
	+ <label for="support-name" class="form-label">{{ $t('support.name') }}</label>
	+ <input id="support-name" type="text" class="form-control" :placeholder="$t('support.name-pl')" v-model="name" />
	+ </div>
	+ <div class="mb-3">
	+ <label for="support-email" class="form-label">{{ $t('support.email') }}</label>
	+ <input id="support-email" type="email" class="form-control" :placeholder="$t('support.email-pl')" v-model="email" required />
	+ </div>
	+ <div class="mb-3">
	+ <label for="support-summary" class="form-label">{{ $t('support.summary') }}</label>
	+ <input id="support-summary" type="text" class="form-control" :placeholder="$t('support.summary-pl')" v-model="summary" required />
	+ </div>
	+ <div>
	+ <label for="support-body" class="form-label">{{ $t('support.expl') }}</label>
	+ <textarea id="support-body" class="form-control" rows="5" v-model="body" required></textarea>
	+ </div>
	</div>
	<div class="modal-footer">
	- <button type="button" class="btn btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</button>
	- <button type="submit" class="btn btn-primary modal-action"><svg-icon icon="check"></svg-icon> {{ $t('btn.submit') }}</button>
	+ <btn class="btn-secondary modal-cancel" data-bs-dismiss="modal">{{ $t('btn.cancel') }}</btn>
	+ <btn type="submit" class="btn-primary modal-action" icon="check">{{ $t('btn.submit') }}</btn>
	</div>
	</form>
	</div>
	diff --git a/src/resources/vue/Widgets/ToastMessage.vue b/src/resources/vue/Widgets/ToastMessage.vue
	--- a/src/resources/vue/Widgets/ToastMessage.vue
	+++ b/src/resources/vue/Widgets/ToastMessage.vue
	@@ -7,7 +7,7 @@
	<svg-icon icon="exclamation-circle" v-else-if="data.type == 'warning'"></svg-icon>
	<svg-icon :icon="data.icon" v-else-if="data.type == 'custom' && data.icon"></svg-icon>
	<strong>{{ data.title \|\| $t('msg.' + data.type) }}</strong>
	- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></button>
	+ <btn class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></btn>
	</div>
	<div v-if="data.body" v-html="data.body" class="toast-body"></div>
	<div v-else class="toast-body">{{ data.msg }}</div>
	diff --git a/src/resources/vue/Widgets/TransactionLog.vue b/src/resources/vue/Widgets/TransactionLog.vue
	--- a/src/resources/vue/Widgets/TransactionLog.vue
	+++ b/src/resources/vue/Widgets/TransactionLog.vue
	@@ -15,12 +15,10 @@
	<td class="datetime">{{ transaction.createdAt }}</td>
	<td class="email" v-if="isAdmin">{{ transaction.user }}</td>
	<td class="selection">
	- <button class="btn btn-lg btn-link btn-action" title="Details" type="button"
	- v-if="transaction.hasDetails"
	- @click="loadTransaction(transaction.id)"
	- >
	- <svg-icon icon="info-circle"></svg-icon>
	- </button>
	+ <btn v-if="transaction.hasDetails" class="btn-lg btn-link btn-action" icon="info-circle"
	+ :title="$t('form.details')"
	+ @click="loadTransaction(transaction.id)"
	+ ></btn>
	</td>
	<td class="description">{{ description(transaction) }}</td>
	<td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td>
	diff --git a/src/resources/vue/Widgets/UserSearch.vue b/src/resources/vue/Widgets/UserSearch.vue
	--- a/src/resources/vue/Widgets/UserSearch.vue
	+++ b/src/resources/vue/Widgets/UserSearch.vue
	@@ -4,7 +4,7 @@
	<form @submit.prevent="searchUser" class="row justify-content-center">
	<div class="input-group col-sm-8">
	<input class="form-control" type="text" :placeholder="$t('user.search-pl')" v-model="search">
	- <button type="submit" class="btn btn-primary"><svg-icon icon="search"></svg-icon> {{ $t('btn.search') }}</button>
	+ <btn type="submit" class="btn-primary" icon="search">{{ $t('btn.search') }}</btn>
	</div>
	</form>
	<table v-if="users.length" class="table table-sm table-hover mt-4">
	diff --git a/src/tests/Browser/DegradedAccountTest.php b/src/tests/Browser/DegradedAccountTest.php
	--- a/src/tests/Browser/DegradedAccountTest.php
	+++ b/src/tests/Browser/DegradedAccountTest.php
	@@ -76,31 +76,31 @@
	->assertVisible('tbody tr:nth-child(3) td:first-child svg.text-warning') // John
	->assertText('tbody tr:nth-child(3) td:first-child svg.text-warning title', 'Degraded');
	})
	- ->assertMissing('button.create-user');
	+ ->assertMissing('button.user-new');

	// Goto /domains and assert that the warning is also displayed there
	$browser->visit(new DomainList())
	->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
	->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
	- ->assertMissing('button.create-domain');
	+ ->assertMissing('button.domain-new');

	// Goto /distlists and assert that the warning is also displayed there
	$browser->visit(new DistlistList())
	->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
	->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
	- ->assertMissing('button.create-list');
	+ ->assertMissing('button.distlist-new');

	// Goto /resources and assert that the warning is also displayed there
	$browser->visit(new ResourceList())
	->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
	->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
	- ->assertMissing('button.create-resource');
	+ ->assertMissing('button.resource-new');

	// Goto /shared-folders and assert that the warning is also displayed there
	$browser->visit(new SharedFolderList())
	->assertSeeIn('#status-degraded p.alert', 'The account is degraded')
	->assertSeeIn('#status-degraded p.alert', 'Please, make a payment')
	- ->assertMissing('button.create-resource');
	+ ->assertMissing('button.shared-folder-new');

	// Test that /rooms is not accessible
	$browser->visit('/rooms')
	diff --git a/src/tests/Browser/DistlistTest.php b/src/tests/Browser/DistlistTest.php
	--- a/src/tests/Browser/DistlistTest.php
	+++ b/src/tests/Browser/DistlistTest.php
	@@ -124,8 +124,8 @@
	$this->browse(function (Browser $browser) {
	// Create a group
	$browser->visit(new DistlistList())
	- ->assertSeeIn('button.create-list', 'Create list')
	- ->click('button.create-list')
	+ ->assertSeeIn('button.distlist-new', 'Create list')
	+ ->click('button.distlist-new')
	->on(new DistlistInfo())
	->assertSeeIn('#distlist-info .card-title', 'New distribution list')
	->assertSeeIn('@nav #tab-general', 'General')
	diff --git a/src/tests/Browser/ResourceTest.php b/src/tests/Browser/ResourceTest.php
	--- a/src/tests/Browser/ResourceTest.php
	+++ b/src/tests/Browser/ResourceTest.php
	@@ -125,8 +125,8 @@
	$this->browse(function (Browser $browser) {
	// Create a resource
	$browser->visit(new ResourceList())
	- ->assertSeeIn('button.create-resource', 'Create resource')
	- ->click('button.create-resource')
	+ ->assertSeeIn('button.resource-new', 'Create resource')
	+ ->click('button.resource-new')
	->on(new ResourceInfo())
	->assertSeeIn('#resource-info .card-title', 'New resource')
	->assertSeeIn('@nav #tab-general', 'General')
	diff --git a/src/tests/Browser/SharedFolderTest.php b/src/tests/Browser/SharedFolderTest.php
	--- a/src/tests/Browser/SharedFolderTest.php
	+++ b/src/tests/Browser/SharedFolderTest.php
	@@ -131,8 +131,8 @@
	$this->browse(function (Browser $browser) {
	// Create a folder
	$browser->visit(new SharedFolderList())
	- ->assertSeeIn('button.create-folder', 'Create folder')
	- ->click('button.create-folder')
	+ ->assertSeeIn('button.shared-folder-new', 'Create folder')
	+ ->click('button.shared-folder-new')
	->on(new SharedFolderInfo())
	->assertSeeIn('#folder-info .card-title', 'New shared folder')
	->assertSeeIn('@nav #tab-general', 'General')
	diff --git a/src/tests/Browser/UserProfileTest.php b/src/tests/Browser/UserProfileTest.php
	--- a/src/tests/Browser/UserProfileTest.php
	+++ b/src/tests/Browser/UserProfileTest.php
	@@ -72,7 +72,7 @@
	->assertSeeIn('@links .link-profile', 'Your profile')
	->click('@links .link-profile')
	->on(new UserProfile())
	- ->assertSeeIn('#user-profile .button-delete', 'Delete account')
	+ ->assertSeeIn('#user-profile .profile-delete', 'Delete account')
	->whenAvailable('@form', function (Browser $browser) {
	$user = User::where('email', 'john@kolab.org')->first();
	// Assert form content
	@@ -165,7 +165,7 @@
	->assertSeeIn('@links .link-profile', 'Your profile')
	->click('@links .link-profile')
	->on(new UserProfile())
	- ->assertMissing('#user-profile .button-delete')
	+ ->assertMissing('#user-profile .profile-delete')
	->whenAvailable('@form', function (Browser $browser) {
	// TODO: decide on what fields the non-controller user should be able
	// to see/change
	@@ -202,7 +202,7 @@
	->assertSeeIn('@links .link-profile', 'Your profile')
	->click('@links .link-profile')
	->on(new UserProfile())
	- ->click('#user-profile .button-delete')
	+ ->click('#user-profile .profile-delete')
	->waitForLocation('/profile/delete')
	->assertSeeIn('#user-delete .card-title', 'Delete this account?')
	->assertSeeIn('#user-delete .button-cancel', 'Cancel')
	@@ -213,7 +213,7 @@
	->on(new UserProfile());

	// Test deleting the user
	- $browser->click('#user-profile .button-delete')
	+ $browser->click('#user-profile .profile-delete')
	->waitForLocation('/profile/delete')
	->click('#user-delete .button-delete')
	->waitForLocation('/login')
	diff --git a/src/tests/Browser/UsersTest.php b/src/tests/Browser/UsersTest.php
	--- a/src/tests/Browser/UsersTest.php
	+++ b/src/tests/Browser/UsersTest.php
	@@ -405,8 +405,8 @@

	$this->browse(function (Browser $browser) {
	$browser->visit(new UserList())
	- ->assertSeeIn('button.create-user', 'Create user')
	- ->click('button.create-user')
	+ ->assertSeeIn('button.user-new', 'Create user')
	+ ->click('button.user-new')
	->on(new UserInfo())
	->assertSeeIn('#user-info .card-title', 'New user account')
	->with('@general', function (Browser $browser) {
	@@ -660,7 +660,7 @@
	// Packages on new user page
	$this->browse(function (Browser $browser) {
	$browser->visit(new UserList())
	- ->click('button.create-user')
	+ ->click('button.user-new')
	->on(new UserInfo())
	->with('@general', function (Browser $browser) {
	$browser->whenAvailable('@packages', function (Browser $browser) {
	@@ -768,7 +768,7 @@
	// Packages on new user page
	$this->browse(function (Browser $browser) {
	$browser->visit(new UserList())
	- ->click('button.create-user')
	+ ->click('button.user-new')
	->on(new UserInfo())
	->with('@general', function (Browser $browser) {
	$browser->whenAvailable('@packages', function (Browser $browser) {

File Metadata

Mime Type: text/plain
Expires: Mon, Apr 6, 2:15 AM (11 h, 37 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 18835265
Default Alt Text: D3373.1775441717.diff (77 KB)

D3373.1775441717.diffNo OneTemporaryActions

D3373.1775441717.diffView Options

File Metadata

Event Timeline

D3373.1775441717.diff
No OneTemporary
Actions

D3373.1775441717.diff
View Options