extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-03-27 14:56:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix navigation using back/close/cancel buttons

Browse Source
This commit is contained in:
Bubka 2023-11-03 14:47:56 +01:00
parent 929a513ad7
commit a8540b0c04
12 changed files with 47 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue
View File

@ -7,8 +7,8 @@
const props = defineProps({
returnTo: {
type: String,
default: 'accounts'
type: Object,
default: { name: 'accounts' }
},
action: {
type: String,
@ -40,7 +40,7 @@
<RouterLink
v-if="action == 'close'"
id="btnClose"
:to="{ name: returnTo }"
:to="returnTo"
:class="classes"
tabindex="0"
role="button"
@ -51,7 +51,7 @@
<RouterLink
v-else-if="action == 'back'"
id="lnkBack"
:to="{ name: returnTo }"
:to="returnTo"
:class="classes"
:aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
>
@ -60,7 +60,7 @@
<RouterLink
v-else-if="action == 'cancel'"
id="btnCancel"
:to="{ name: returnTo }"
:to="returnTo"
:class="classes"
>
{{ $t('commons.cancel') }}

33
resources/js_vue3/router/index.js vendored
View File

@ -6,22 +6,23 @@ import { useTwofaccounts } from '@/stores/twofaccounts'
import authGuard from './middlewares/authGuard'
import starter from './middlewares/starter'
import noEmptyError from './middlewares/noEmptyError'
import startingPoint from './middlewares/startingPoint'
const router = createRouter({
history: createWebHistory('/'),
routes: [
{ path: '/start', name: 'start', component: () => import('../views/Start.vue'), meta: { middlewares: [authGuard] } },
{ path: '/capture', name: 'capture', component: () => import('../views/twofaccounts/Capture.vue'), meta: { middlewares: [authGuard] } },
{ path: '/start', name: 'start', component: () => import('../views/Start.vue'), meta: { middlewares: [authGuard, startingPoint] } },
{ path: '/capture', name: 'capture', component: () => import('../views/twofaccounts/Capture.vue'), meta: { middlewares: [authGuard, startingPoint] } },
{ path: '/accounts', name: 'accounts', component: () => import('../views/twofaccounts/Accounts.vue'), meta: { middlewares: [authGuard, starter] }, alias: '/' },
{ path: '/account/create', name: 'createAccount', component: () => import('../views/twofaccounts/CreateUpdate.vue'), meta: { middlewares: [authGuard] } },
{ path: '/account/import', name: 'importAccounts', component: () => import('../views/twofaccounts/Import.vue'), meta: { middlewares: [authGuard] } },
{ path: '/account/:twofaccountId/edit', name: 'editAccount', component: () => import('../views/twofaccounts/CreateUpdate.vue'), meta: { middlewares: [authGuard] }, props: true },
{ path: '/account/:twofaccountId/qrcode', name: 'showQRcode', component: () => import('../views/twofaccounts/QRcode.vue'), meta: { middlewares: [authGuard] } },
{ path: '/accounts', name: 'accounts', component: () => import('../views/twofaccounts/Accounts.vue'), meta: { middlewares: [authGuard, starter, startingPoint] }, alias: '/' },
{ path: '/account/create', name: 'createAccount', component: () => import('../views/twofaccounts/CreateUpdate.vue'), meta: { middlewares: [authGuard, startingPoint] } },
{ path: '/account/import', name: 'importAccounts', component: () => import('../views/twofaccounts/Import.vue'), meta: { middlewares: [authGuard, startingPoint] } },
{ path: '/account/:twofaccountId/edit', name: 'editAccount', component: () => import('../views/twofaccounts/CreateUpdate.vue'), meta: { middlewares: [authGuard, startingPoint] }, props: true },
{ path: '/account/:twofaccountId/qrcode', name: 'showQRcode', component: () => import('../views/twofaccounts/QRcode.vue'), meta: { middlewares: [authGuard, startingPoint] } },
{ path: '/groups', name: 'groups', component: () => import('../views/groups/Groups.vue'), meta: { middlewares: [authGuard] }, props: true },
{ path: '/group/create', name: 'createGroup', component: () => import('../views/groups/CreateUpdate.vue'), meta: { middlewares: [authGuard] } },
{ path: '/group/:groupId/edit', name: 'editGroup', component: () => import('../views/groups/CreateUpdate.vue'), meta: { middlewares: [authGuard] }, props: true },
{ path: '/groups', name: 'groups', component: () => import('../views/groups/Groups.vue'), meta: { middlewares: [authGuard, startingPoint] }, props: true },
{ path: '/group/create', name: 'createGroup', component: () => import('../views/groups/CreateUpdate.vue'), meta: { middlewares: [authGuard, startingPoint] } },
{ path: '/group/:groupId/edit', name: 'editGroup', component: () => import('../views/groups/CreateUpdate.vue'), meta: { middlewares: [authGuard, startingPoint] }, props: true },
{ path: '/settings/options', name: 'settings.options', component: () => import('../views/settings/Options.vue'), meta: { middlewares: [authGuard], showAbout: true } },
{ path: '/settings/account', name: 'settings.account', component: () => import('../views/settings/Account.vue'), meta: { middlewares: [authGuard], showAbout: true } },
@ -29,12 +30,12 @@ const router = createRouter({
{ path: '/settings/webauthn/:credentialId/edit', name: 'settings.webauthn.editCredential', component: () => import('../views/settings/Credentials/Edit.vue'), meta: { middlewares: [authGuard], showAbout: true }, props: true },
{ path: '/settings/webauthn', name: 'settings.webauthn.devices', component: () => import('../views/settings/WebAuthn.vue'), meta: { middlewares: [authGuard], showAbout: true } },
{ path: '/login', name: 'login', component: () => import('../views/auth/Login.vue'), meta: { disabledWithAuthProxy: true, showAbout: true } },
{ path: '/register', name: 'register', component: () => import('../views/auth/Register.vue'), meta: { disabledWithAuthProxy: true, showAbout: true } },
{ path: '/password/request', name: 'password.request', component: () => import('../views/auth/RequestReset.vue'), meta: { disabledWithAuthProxy: true, showAbout: true } },
{ path: '/user/password/reset', name: 'password.reset', component: () => import('../views/auth/password/Reset.vue'), meta: { disabledWithAuthProxy: true, showAbout: true } },
{ path: '/webauthn/lost', name: 'webauthn.lost', component: () => import('../views/auth/RequestReset.vue'), meta: { disabledWithAuthProxy: true, showAbout: true } },
{ path: '/webauthn/recover', name: 'webauthn.recover', component: () => import('../views/auth/webauthn/Recover.vue'), meta: { disabledWithAuthProxy: true, showAbout: true } },
{ path: '/login', name: 'login', component: () => import('../views/auth/Login.vue'), meta: { middlewares: [startingPoint], disabledWithAuthProxy: true, showAbout: true } },
{ path: '/register', name: 'register', component: () => import('../views/auth/Register.vue'), meta: { middlewares: [startingPoint], disabledWithAuthProxy: true, showAbout: true } },
{ path: '/password/request', name: 'password.request', component: () => import('../views/auth/RequestReset.vue'), meta: { middlewares: [startingPoint], disabledWithAuthProxy: true, showAbout: true } },
{ path: '/user/password/reset', name: 'password.reset', component: () => import('../views/auth/password/Reset.vue'), meta: { middlewares: [startingPoint], disabledWithAuthProxy: true, showAbout: true } },
{ path: '/webauthn/lost', name: 'webauthn.lost', component: () => import('../views/auth/RequestReset.vue'), meta: { middlewares: [startingPoint], disabledWithAuthProxy: true, showAbout: true } },
{ path: '/webauthn/recover', name: 'webauthn.recover', component: () => import('../views/auth/webauthn/Recover.vue'), meta: { middlewares: [startingPoint], disabledWithAuthProxy: true, showAbout: true } },
{ path: '/about', name: 'about', component: () => import('../views/About.vue'), meta: { showAbout: true } },
{ path: '/error', name: 'genericError', component: () => import('../views/Error.vue'), meta: { middlewares: [noEmptyError], err: null } },

11
resources/js_vue3/router/middlewares/startingPoint.js vendored Normal file
View File

@ -0,0 +1,11 @@
/**
* Allows an authenticated user to access the main view only if he owns at least one twofaccount.
* Push to the starter view otherwise.
*/
export default function starter({ to, next, stores }) {
const { user } = stores
const startPoint = useStorage(user.$2fauth.prefix + 'returnTo', 'accounts')
startPoint.value = to.name
next()
}

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

@ -4,20 +4,18 @@
import { UseColorMode } from '@vueuse/components'
const $2fauth = inject('2fauth')
const router = useRouter()
const notify = useNotifyStore()
const returnTo = useStorage($2fauth.prefix + 'returnTo', 'accounts')
const { copy } = useClipboard({ legacy: true })
const returnTo = router.options.history.state.back
const infos = ref()
const listInfos = ref(null)
const userPreferences = ref(false)
const listUserPreferences = ref(null)
const adminSettings = ref(false)
const listAdminSettings = ref(null)
const { copy } = useClipboard({ legacy: true })
onMounted(() => {
systemService.getSystemInfos().then(response => {
infos.value = response.data.common
@ -128,7 +126,7 @@
</div>
<!-- footer -->
<VueFooter :showButtons="true">
<ButtonBackCloseCancel action="back" />
<ButtonBackCloseCancel :returnTo="{ path: returnTo }" action="back" />
</VueFooter>
</ResponsiveWidthWrapper>
</template>

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

@ -109,7 +109,7 @@
</div>
<!-- Footer -->
<VueFooter :showButtons="true" >
<ButtonBackCloseCancel action="back" v-if="!twofaccounts.isEmpty" />
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="back" v-if="!twofaccounts.isEmpty" />
</VueFooter>
</div>
</template>

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

@ -3,8 +3,10 @@
import { useGroups } from '@/stores/groups'
import { useBusStore } from '@/stores/bus'
const router = useRouter()
const groups = useGroups()
const bus = useBusStore()
const isFetching = ref(false)
onMounted(async () => {
@ -68,7 +70,7 @@
</div>
<!-- footer -->
<VueFooter :showButtons="true">
<ButtonBackCloseCancel action="close" />
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
</VueFooter>
</ResponsiveWidthWrapper>
</template>

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

@ -139,7 +139,7 @@
</FormWrapper>
</div>
<VueFooter :showButtons="true">
<ButtonBackCloseCancel action="close" />
<ButtonBackCloseCancel :returnTo="{ name: returnTo }" action="close" />
</VueFooter>
</div>
</template>

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

@ -156,7 +156,7 @@
<Spinner :isVisible="isFetching && tokens.length === 0" />
<!-- footer -->
<VueFooter :showButtons="true">
<ButtonBackCloseCancel action="close" />
<ButtonBackCloseCancel :returnTo="{ name: returnTo }" action="close" />
</VueFooter>
</FormWrapper>
</div>

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

@ -185,7 +185,7 @@
</FormWrapper>
</div>
<VueFooter :showButtons="true">
<ButtonBackCloseCancel action="close" />
<ButtonBackCloseCancel :returnTo="{ name: returnTo }" action="close" />
</VueFooter>
</div>
</template>

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

@ -166,7 +166,7 @@
</form>
<!-- footer -->
<VueFooter :showButtons="true">
<ButtonBackCloseCancel action="close" />
<ButtonBackCloseCancel :returnTo="{ name: returnTo }" action="close" />
</VueFooter>
</FormWrapper>
</div>

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

@ -376,7 +376,7 @@
</span> -->
</button>
</p>
<ButtonBackCloseCancel :action="importableCount > 0 ? 'cancel' : 'close'" />
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" :action="importableCount > 0 ? 'cancel' : 'close'" />
</VueFooter>
</ResponsiveWidthWrapper>
<!-- modal -->

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

@ -29,7 +29,7 @@
</p>
</div>
<div class="fullscreen-footer">
<ButtonBackCloseCancel action="close" />
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
</div>
</div>
</template>