Use Button tag for action controls

This commit is contained in:
Bubka 2022-09-17 19:31:11 +02:00
parent 46e3ac4c3f
commit e19202e75e
9 changed files with 39 additions and 62 deletions

View File

@ -52,7 +52,7 @@
<vue-footer :showButtons="true"> <vue-footer :showButtons="true">
<!-- Move to selected group button --> <!-- Move to selected group button -->
<p class="control"> <p class="control">
<a class="button is-link is-rounded" @click="moveAccounts()">{{ $t('commons.move') }}</a> <button class="button is-link is-rounded" @click="moveAccounts()">{{ $t('commons.move') }}</button>
</p> </p>
<!-- Cancel button --> <!-- Cancel button -->
<p class="control"> <p class="control">
@ -113,25 +113,25 @@
<vue-footer :showButtons="true"> <vue-footer :showButtons="true">
<!-- New item buttons --> <!-- New item buttons -->
<p class="control" v-if="!editMode"> <p class="control" v-if="!editMode">
<a class="button is-link is-rounded is-focus" @click="start"> <button class="button is-link is-rounded is-focus" @click="start">
<span>{{ $t('commons.new') }}</span> <span>{{ $t('commons.new') }}</span>
<span class="icon is-small"> <span class="icon is-small">
<font-awesome-icon :icon="['fas', 'qrcode']" /> <font-awesome-icon :icon="['fas', 'qrcode']" />
</span> </span>
</a> </button>
</p> </p>
<!-- Manage button --> <!-- Manage button -->
<p class="control" v-if="!editMode"> <p class="control" v-if="!editMode">
<a class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('commons.manage') }}</a> <button class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('commons.manage') }}</button>
</p> </p>
<!-- Done button --> <!-- Done button -->
<p class="control" v-if="editMode"> <p class="control" v-if="editMode">
<a class="button is-success is-rounded" @click="setEditModeTo(false)"> <button class="button is-success is-rounded" @click="setEditModeTo(false)">
<span>{{ $t('commons.done') }}</span> <span>{{ $t('commons.done') }}</span>
<span class="icon is-small"> <span class="icon is-small">
<font-awesome-icon :icon="['fas', 'check']" /> <font-awesome-icon :icon="['fas', 'check']" />
</span> </span>
</a> </button>
</p> </p>
</vue-footer> </vue-footer>
</div> </div>

View File

@ -16,9 +16,9 @@
<div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile"> <div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
{{ group.name }} {{ group.name }}
<!-- delete icon --> <!-- delete icon -->
<a class="tag is-dark is-pulled-right" @click="deleteGroup(group.id)" :title="$t('commons.delete')"> <button class="button tag is-dark is-pulled-right" @click="deleteGroup(group.id)" :title="$t('commons.delete')">
{{ $t('commons.delete') }} {{ $t('commons.delete') }}
</a> </button>
<!-- edit link --> <!-- edit link -->
<router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="has-text-grey pl-1" :title="$t('commons.rename')"> <router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="has-text-grey pl-1" :title="$t('commons.rename')">
<font-awesome-icon :icon="['fas', 'pen-square']" /> <font-awesome-icon :icon="['fas', 'pen-square']" />

View File

@ -14,7 +14,7 @@
</div> </div>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<a class="button is-link" @click="register()">{{ $t('auth.webauthn.register_a_new_device')}}</a> <button class="button is-link" @click="register()">{{ $t('auth.webauthn.register_a_new_device')}}</button>
</div> </div>
<div class="control"> <div class="control">
<router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link> <router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>

View File

@ -2,14 +2,12 @@
<form-wrapper :title="$t('groups.forms.new_group')"> <form-wrapper :title="$t('groups.forms.new_group')">
<form @submit.prevent="createGroup" @keydown="form.onKeydown($event)"> <form @submit.prevent="createGroup" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.name')" autofocus /> <form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.name')" autofocus />
<div class="field is-grouped"> <form-buttons
<div class="control"> :submitId="'btnCreateGroup'"
<v-button>{{ $t('commons.create') }}</v-button> :isBusy="form.isBusy"
</div> :caption="$t('commons.create')"
<div class="control"> :showCancelButton="true"
<button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button> cancelLandingView="groups" />
</div>
</div>
</form> </form>
</form-wrapper> </form-wrapper>
</template> </template>
@ -38,11 +36,6 @@
} }
}, },
cancelCreation: function() {
this.$router.push({ name: 'groups' });
},
}, },

View File

@ -2,14 +2,12 @@
<form-wrapper :title="$t('groups.forms.rename_group')"> <form-wrapper :title="$t('groups.forms.rename_group')">
<form @submit.prevent="updateGroup" @keydown="form.onKeydown($event)"> <form @submit.prevent="updateGroup" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" inputType="text" :label="$t('groups.forms.new_name')" autofocus /> <form-field :form="form" fieldName="name" inputType="text" :label="$t('groups.forms.new_name')" autofocus />
<div class="field is-grouped"> <form-buttons
<div class="control"> :submitId="'btnEditGroup'"
<v-button :isLoading="form.isBusy">{{ $t('commons.save') }}</v-button> :isBusy="form.isBusy"
</div> :caption="$t('commons.save')"
<div class="control"> :showCancelButton="true"
<button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button> cancelLandingView="groups" />
</div>
</div>
</form> </form>
</form-wrapper> </form-wrapper>
</template> </template>
@ -41,11 +39,6 @@
}, },
cancelCreation: function() {
this.$router.push({ name: 'groups' });
},
}, },
} }

View File

@ -2,14 +2,12 @@
<form-wrapper :title="$t('auth.webauthn.rename_device')"> <form-wrapper :title="$t('auth.webauthn.rename_device')">
<form @submit.prevent="updateCredential" @keydown="form.onKeydown($event)"> <form @submit.prevent="updateCredential" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.new_name')" autofocus /> <form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.new_name')" autofocus />
<div class="field is-grouped"> <form-buttons
<div class="control"> :submitId="'btnEditCredential'"
<v-button :isLoading="form.isBusy">{{ $t('commons.save') }}</v-button> :isBusy="form.isBusy"
</div> :caption="$t('commons.save')"
<div class="control"> :showCancelButton="true"
<button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button> cancelLandingView="settings.webauthn.devices" />
</div>
</div>
</form> </form>
</form-wrapper> </form-wrapper>
</template> </template>

View File

@ -2,14 +2,12 @@
<form-wrapper :title="$t('settings.forms.new_token')"> <form-wrapper :title="$t('settings.forms.new_token')">
<form @submit.prevent="generatePAToken" @keydown="form.onKeydown($event)"> <form @submit.prevent="generatePAToken" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.name')" autofocus /> <form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.name')" autofocus />
<div class="field is-grouped"> <form-buttons
<div class="control"> :submitId="'btnGenerateToken'"
<v-button>{{ $t('commons.generate') }}</v-button> :isBusy="form.isBusy"
</div> :caption="$t('commons.generate')"
<div class="control"> :showCancelButton="true"
<button type="button" class="button is-text" @click="cancelGeneration">{{ $t('commons.cancel') }}</button> cancelLandingView="settings.oauth.tokens" />
</div>
</div>
</form> </form>
</form-wrapper> </form-wrapper>
</template> </template>
@ -38,11 +36,6 @@
} }
}, },
cancelGeneration: function() {
this.$router.push({ name: 'settings.oauth.tokens' });
},
}, },

View File

@ -157,15 +157,15 @@
<div class="block has-text-light mb-6" v-html="uri"></div> <div class="block has-text-light mb-6" v-html="uri"></div>
<!-- Copy to clipboard --> <!-- Copy to clipboard -->
<div class="block has-text-link"> <div class="block has-text-link">
<label class="button is-link is-outlined is-rounded" v-clipboard="() => uri" v-clipboard:success="clipboardSuccessHandler"> <button class="button is-link is-outlined is-rounded" v-clipboard="() => uri" v-clipboard:success="clipboardSuccessHandler">
{{ $t('commons.copy_to_clipboard') }} {{ $t('commons.copy_to_clipboard') }}
</label> </button>
</div> </div>
<!-- Open in browser --> <!-- Open in browser -->
<div class="block has-text-link" v-if="isUrl(uri)" @click="openInBrowser(uri)"> <div class="block has-text-link" v-if="isUrl(uri)" @click="openInBrowser(uri)">
<label class="button is-link is-outlined is-rounded"> <button class="button is-link is-outlined is-rounded">
{{ $t('commons.open_in_browser') }} {{ $t('commons.open_in_browser') }}
</label> </button>
</div> </div>
</modal> </modal>
</div> </div>

View File

@ -84,12 +84,12 @@
<vue-footer :showButtons="true"> <vue-footer :showButtons="true">
<!-- Import all button --> <!-- Import all button -->
<p class="control" v-if="importableCount > 0"> <p class="control" v-if="importableCount > 0">
<a class="button is-link is-rounded is-focus" @click="createAccounts"> <button class="button is-link is-rounded is-focus" @click="createAccounts">
<span>{{ $t('twofaccounts.import.import_all') }} ({{importableCount}})</span> <span>{{ $t('twofaccounts.import.import_all') }} ({{importableCount}})</span>
<!-- <span class="icon is-small"> <!-- <span class="icon is-small">
<font-awesome-icon :icon="['fas', 'qrcode']" /> <font-awesome-icon :icon="['fas', 'qrcode']" />
</span> --> </span> -->
</a> </button>
</p> </p>
<!-- close button --> <!-- close button -->
<p class="control"> <p class="control">