extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-26 10:15:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Set Back/Close/Cancel buttons using a component

Browse Source
This commit is contained in:
Bubka 2023-11-03 13:20:40 +01:00
parent b9eb4f0afb
commit 929a513ad7
16 changed files with 104 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js_vue3/app.js vendored
View File

@ -49,6 +49,7 @@ import FormWrapper from '@/layouts/FormWrapper.vue'
import Footer from '@/layouts/Footer.vue'
import Modal from '@/layouts/Modal.vue'
import VueButton from '@/components/formElements/Button.vue'
import ButtonBackCloseCancel from '@/components/formElements/ButtonBackCloseCancel.vue'
import FieldError from '@/components/formElements/FieldError.vue'
import FormField from '@/components/formElements/FormField.vue'
import FormPasswordField from '@/components/formElements/FormPasswordField.vue'
@ -65,6 +66,7 @@ app
.component('VueFooter', Footer)
.component('Modal', Modal)
.component('VueButton', VueButton)
.component('ButtonBackCloseCancel', ButtonBackCloseCancel)
.component('FieldError', FieldError)
.component('FormField', FormField)
.component('FormPasswordField', FormPasswordField)

7
resources/js_vue3/components/DestinationGroupSelector.vue
View File

@ -62,12 +62,7 @@
<p class="control">
<button class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
</p>
<!-- Cancel button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<button id="btnCancel" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showDestinationGroupSelector', false)">{{ $t('commons.cancel') }}</button>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
</VueFooter>
</div>
</template>

7
resources/js_vue3/components/GroupSwitch.vue
View File

@ -45,12 +45,7 @@
</div>
</div>
<VueFooter :showButtons="true">
<!-- Close Group switch button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showGroupSwitch', false)">{{ $t('commons.close') }}</button>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="$emit('update:showGroupSwitch', false)" />
</VueFooter>
</div>
</template>

87
resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue Normal file
View File

@ -0,0 +1,87 @@
<script setup>
import { useColorMode } from '@vueuse/core'
const router = useRouter()
const route = useRoute()
const mode = useColorMode()
const props = defineProps({
returnTo: {
type: String,
default: 'accounts'
},
action: {
type: String,
default: 'close'
},
useLinkTag: {
type: Boolean,
default: true
},
isText: {
type: Boolean,
default: false
},
isCapture: {
type: Boolean,
default: false
},
})
const classes = 'button is-rounded'
+ (mode.value === 'dark' && ! props.isText && ! props.isCapture ? ' is-dark' : '')
+ (props.isText ? ' is-text' : '')
+ (props.isCapture ? ' is-large is-warning' : '')
</script>
<template>
<!-- back / close / cancel button -->
<p v-if="useLinkTag" class="control">
<RouterLink
v-if="action == 'close'"
id="btnClose"
:to="{ name: returnTo }"
:class="classes"
tabindex="0"
role="button"
:aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
>
{{ $t('commons.close') }}
</RouterLink>
<RouterLink
v-else-if="action == 'back'"
id="lnkBack"
:to="{ name: returnTo }"
:class="classes"
:aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
>
{{ $t('commons.back') }}
</RouterLink>
<RouterLink
v-else-if="action == 'cancel'"
id="btnCancel"
:to="{ name: returnTo }"
:class="classes"
>
{{ $t('commons.cancel') }}
</RouterLink>
</p>
<p v-else class="control">
<button
v-if="action == 'close'"
id="btnClose"
:class="classes"
@click="$emit('closed')"
>
{{ $t('commons.close') }}
</button>
<button
v-if="action == 'cancel'"
id="btnCancel"
:class="classes"
@click="$emit('canceled')"
>
{{ $t('commons.cancel') }}
</button>
</p>
</template>

9
resources/js_vue3/layouts/Modal.vue
View File

@ -1,6 +1,4 @@
<script setup>
import { UseColorMode } from '@vueuse/components'
const { notify } = useNotification()
const props = defineProps({
@ -45,12 +43,7 @@
</section>
</div>
<div v-if="props.closable" class="fullscreen-footer">
<!-- Close button -->
<UseColorMode v-slot="{ mode }">
<button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click.stop="closeModal">
{{ $t('commons.close') }}
</button>
</UseColorMode>
<ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="closeModal" />
</div>
</div>
</template>

14
resources/js_vue3/views/About.vue
View File

@ -128,19 +128,7 @@
</div>
<!-- footer -->
<VueFooter :showButtons="true">
<!-- close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink
id="lnkBack"
:to="{ name: returnTo }"
:aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})"
class="button is-rounded"
:class="{'is-dark' : mode == 'dark'}">
{{ $t('commons.back') }}
</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="back" />
</VueFooter>
</ResponsiveWidthWrapper>
</template>

9
resources/js_vue3/views/Start.vue
View File

@ -109,14 +109,7 @@
</div>
<!-- Footer -->
<VueFooter :showButtons="true" >
<!-- back button -->
<p class="control" v-if="! twofaccounts.isEmpty">
<UseColorMode v-slot="{ mode }">
<RouterLink id="lnkBack" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" :to="{ name: 'accounts' }" >
{{ $t('commons.back') }}
</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="back" v-if="!twofaccounts.isEmpty" />
</VueFooter>
</div>
</template>

7
resources/js_vue3/views/groups/Groups.vue
View File

@ -68,12 +68,7 @@
</div>
<!-- footer -->
<VueFooter :showButtons="true">
<!-- close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink id="btnClose" :to="{ name: 'accounts' }" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}">{{ $t('commons.close') }}</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="close" />
</VueFooter>
</ResponsiveWidthWrapper>
</template>

17
resources/js_vue3/views/settings/Account.vue
View File

@ -3,7 +3,6 @@
import SettingTabs from '@/layouts/SettingTabs.vue'
import { useUserStore } from '@/stores/user'
import { useNotifyStore } from '@/stores/notify'
import { UseColorMode } from '@vueuse/components'
const $2fauth = inject('2fauth')
const user = useUserStore()
@ -140,21 +139,7 @@
</FormWrapper>
</div>
<VueFooter :showButtons="true">
<!-- close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink
id="btnClose"
:to="{ name: returnTo }"
class="button is-rounded"
:class="{'is-dark' : mode === 'dark'}"
tabindex="0"
role="button"
:aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
{{ $t('commons.close') }}
</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="close" />
</VueFooter>
</div>
</template>

16
resources/js_vue3/views/settings/OAuth.vue
View File

@ -156,21 +156,7 @@
<Spinner :isVisible="isFetching && tokens.length === 0" />
<!-- footer -->
<VueFooter :showButtons="true">
<!-- close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink
id="btnClose"
:to="{ name: returnTo }"
class="button is-rounded"
:class="{'is-dark' : mode === 'dark'}"
tabindex="0"
role="button"
:aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
{{ $t('commons.close') }}
</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="close" />
</VueFooter>
</FormWrapper>
</div>

17
resources/js_vue3/views/settings/Options.vue
View File

@ -7,7 +7,6 @@
import { useGroups } from '@/stores/groups'
import { useAppSettingsStore } from '@/stores/appSettings'
import { useNotifyStore } from '@/stores/notify'
import { UseColorMode } from '@vueuse/components'
import VersionChecker from '@/components/VersionChecker.vue'
const $2fauth = inject('2fauth')
@ -186,21 +185,7 @@
</FormWrapper>
</div>
<VueFooter :showButtons="true">
<!-- Close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink
id="btnClose"
:to="{ name: returnTo }"
class="button is-rounded"
:class="{'is-dark' : mode === 'dark'}"
tabindex="0"
role="button"
:aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
{{ $t('commons.close') }}
</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="close" />
</VueFooter>
</div>
</template>

16
resources/js_vue3/views/settings/WebAuthn.vue
View File

@ -166,21 +166,7 @@
</form>
<!-- footer -->
<VueFooter :showButtons="true">
<!-- close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink
id="btnClose"
:to="{ name: returnTo }"
class="button is-rounded"
:class="{'is-dark' : mode === 'dark'}"
tabindex="0"
role="button"
:aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
{{ $t('commons.close') }}
</RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel action="close" />
</VueFooter>
</FormWrapper>
</div>

5
resources/js_vue3/views/twofaccounts/Capture.vue
View File

@ -168,10 +168,7 @@
</div>
</div>
<div class="fullscreen-footer">
<!-- Cancel button -->
<button id="btnCancel" class="button is-large is-warning is-rounded" @click="exitStream()">
{{ $t('commons.cancel') }}
</button>
<ButtonBackCloseCancel action="cancel" :isCapture="true" :useLinkTag="false" @canceled="exitStream()" />
</div>
</div>
</template>

8
resources/js_vue3/views/twofaccounts/CreateUpdate.vue
View File

@ -399,9 +399,7 @@
<div class="control">
<VueButton :isLoading="form.isBusy" >{{ $t('commons.save') }}</VueButton>
</div>
<div class="control">
<button id="btnCancel" type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
</div>
<ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
</div>
</div>
</div>
@ -498,9 +496,7 @@
<p class="control" v-if="form.otp_type && form.secret">
<button id="btnPreview" type="button" class="button is-success is-rounded" @click="previewOTP">{{ $t('twofaccounts.forms.test') }}</button>
</p>
<p class="control">
<button id="btnCancel" type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
</p>
<ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
</VueFooter>
</form>
<!-- modal -->

7
resources/js_vue3/views/twofaccounts/Import.vue
View File

@ -376,12 +376,7 @@
</span> -->
</button>
</p>
<!-- close button -->
<p class="control">
<UseColorMode v-slot="{ mode }">
<RouterLink :id="importableCount > 0 ? 'btnCancel' : 'btnClose'" :to="{ name: 'accounts' }" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></RouterLink>
</UseColorMode>
</p>
<ButtonBackCloseCancel :action="importableCount > 0 ? 'cancel' : 'close'" />
</VueFooter>
</ResponsiveWidthWrapper>
<!-- modal -->

9
resources/js_vue3/views/twofaccounts/QRcode.vue
View File

@ -1,7 +1,6 @@
<script setup>
import twofaccountService from '@/services/twofaccountService'
import Spinner from '@/components/Spinner.vue'
import { UseColorMode } from '@vueuse/components'
const router = useRouter()
const route = useRoute()
@ -18,7 +17,6 @@
const { data } = await twofaccountService.getQrcode(route.params.twofaccountId)
qrcode.value = data.qrcode
}
</script>
<template>
@ -31,12 +29,7 @@
</p>
</div>
<div class="fullscreen-footer">
<!-- Close button -->
<UseColorMode v-slot="{ mode }">
<button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click.stop="router.push({ name: 'accounts' });">
{{ $t('commons.close') }}
</button>
</UseColorMode>
<ButtonBackCloseCancel action="close" />
</div>
</div>
</template>