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">
<!-- Move to selected group button -->
<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>
<!-- Cancel button -->
<p class="control">
@ -113,25 +113,25 @@
<vue-footer :showButtons="true">
<!-- New item buttons -->
<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 class="icon is-small">
<font-awesome-icon :icon="['fas', 'qrcode']" />
</span>
</a>
</button>
</p>
<!-- Manage button -->
<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>
<!-- Done button -->
<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 class="icon is-small">
<font-awesome-icon :icon="['fas', 'check']" />
</span>
</a>
</button>
</p>
</vue-footer>
</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">
{{ group.name }}
<!-- 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') }}
</a>
</button>
<!-- edit link -->
<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']" />

View File

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

View File

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

View File

@ -2,14 +2,12 @@
<form-wrapper :title="$t('settings.forms.new_token')">
<form @submit.prevent="generatePAToken" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" inputType="text" :label="$t('commons.name')" autofocus />
<div class="field is-grouped">
<div class="control">
<v-button>{{ $t('commons.generate') }}</v-button>
</div>
<div class="control">
<button type="button" class="button is-text" @click="cancelGeneration">{{ $t('commons.cancel') }}</button>
</div>
</div>
<form-buttons
:submitId="'btnGenerateToken'"
:isBusy="form.isBusy"
:caption="$t('commons.generate')"
:showCancelButton="true"
cancelLandingView="settings.oauth.tokens" />
</form>
</form-wrapper>
</template>
@ -39,11 +37,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>
<!-- Copy to clipboard -->
<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') }}
</label>
</button>
</div>
<!-- Open in browser -->
<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') }}
</label>
</button>
</div>
</modal>
</div>

View File

@ -84,12 +84,12 @@
<vue-footer :showButtons="true">
<!-- Import all button -->
<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 class="icon is-small">
<font-awesome-icon :icon="['fas', 'qrcode']" />
</span> -->
</a>
</button>
</p>
<!-- close button -->
<p class="control">