extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-01-20 13:19:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix performance issue when switching to Manage mode - Fixes #421

Browse Source
This commit is contained in:
Bubka 2024-11-23 19:36:44 +01:00
parent c409d48bf8
commit 4c14586ff5
7 changed files with 152 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/views/About.vue
View File

@ -8,11 +8,10 @@
<template>
<ResponsiveWidthWrapper>
<UseColorMode v-slot="{ mode }">
<h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
<p class="block">
<UseColorMode v-slot="{ mode }">
<span :class="mode == 'dark' ? 'has-text-white':'has-text-black'"><span class="is-size-5">2FAuth</span> v{{ $2fauth.version }}</span>
</UseColorMode>
<br />
{{ $t('commons.2fauth_teaser')}}
</p>
@ -24,7 +23,6 @@
{{ $t('commons.resources') }}
</h2>
<div class="buttons">
<UseColorMode v-slot="{ mode }">
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://github.com/Bubka/2FAuth" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fab', 'github-alt']" />
@ -49,7 +47,6 @@
</span>
<span>API</span>
</a>
</UseColorMode>
</div>
<h2 class="title is-5 has-text-grey-light">
{{ $t('commons.credits') }}
@ -65,5 +62,6 @@
<VueFooter :showButtons="true">
<ButtonBackCloseCancel :returnTo="{ path: returnTo }" action="back" />
</VueFooter>
</UseColorMode>
</ResponsiveWidthWrapper>
</template>

7
resources/js/views/admin/Users.vue
View File

@ -139,6 +139,7 @@
</div>
<div v-if="visibleUsers.length > 0">
<div v-for="user in visibleUsers" :key="user.id" class="list-item is-size-5 is-size-6-mobile is-flex is-justify-content-space-between">
<UseColorMode v-slot="{ mode }">
<div class="has-ellipsis">
<span>{{ user.name }}</span>
<!-- <FontAwesomeIcon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }} -->
@ -146,21 +147,19 @@
<!-- admin tag -->
<span class="is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ user.email }}</span>
<!-- tag -->
<UseColorMode v-slot="{ mode }">
<div class="tags mt-2">
<span v-if="user.is_admin" class="tag is-rounded has-text-warning-dark" :class="mode == 'dark' ? 'has-background-black-bis' : 'has-background-grey-lighter'" >admin</span>
<span v-if="user.oauth_provider" class="tag is-rounded has-text-grey" :class="mode == 'dark' ? 'has-background-black-bis' : 'has-background-grey-lighter'" >oauth: {{ user.oauth_provider }}</span>
</div>
</UseColorMode>
</div>
<div class="ml-3">
<UseColorMode v-slot="{ mode }">
<!-- manage link -->
<RouterLink :to="{ name: 'admin.manageUser', params: { userId: user.id }}" class="button is-small has-normal-radius" :class="{'is-dark' : mode == 'dark'}" :title="$t('commons.manage')">
{{ $t('commons.manage') }}
</RouterLink>
</UseColorMode>
</div>
</UseColorMode>
</div>
<!-- <div class="mt-2 is-size-7 is-pulled-right">
{{ $t('settings.revoking_a_token_is_permanent')}}

10
resources/js/views/admin/users/Manage.vue
View File

@ -188,6 +188,7 @@
<template>
<UseColorMode v-slot="{ mode }">
<ResponsiveWidthWrapper>
<h1 class="title has-text-grey-dark mb-6">
{{ $t('admin.user_management') }}
@ -200,10 +201,8 @@
</div>
<div v-else>
<div class="mb-6" :class="managedUser.info.is_admin ? 'is-left-bordered-warning' : 'is-left-bordered-link'">
<UseColorMode v-slot="{ mode }">
<p class="title is-4" :class="{ 'has-text-grey-lighter' : mode == 'dark' }">
<span class="has-text-weight-light has-text-grey-dark is-pulled-right">#{{ managedUser.info.id }}</span>{{ managedUser.info.name }}</p>
</UseColorMode>
<p class="subtitle is-6 block">{{ managedUser.info.email }}</p>
</div>
<!-- oauth banner -->
@ -228,7 +227,6 @@
</div>
<div>
<div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }">
<!-- resend email button -->
<button type="button" v-if="managedUser.password_reset" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resendPasswordEmail" :title="$t('admin.resend_email_title')">
{{ $t('admin.resend_email') }}
@ -237,7 +235,6 @@
<button type="button" class="button tag is-pulled-right " :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="resetPassword" :title="$t('admin.reset_password_title')">
{{ $t('admin.reset_password') }}
</button>
</UseColorMode>
</div>
</div>
</div>
@ -258,12 +255,10 @@
</div>
<div v-if="managedUser.valid_personal_access_tokens > 0">
<div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }">
<!-- manage link -->
<button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" @click="revokePATs" :title="$t('admin.revoke_all_pat_for_user')">
{{ $t('settings.revoke') }}
</button>
</UseColorMode>
</div>
</div>
</div>
@ -277,12 +272,10 @@
</div>
<div v-if="managedUser.webauthn_credentials > 0">
<div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }">
<!-- manage link -->
<button type="button" class="button tag is-pulled-right" :class="mode == 'dark' ? 'is-dark has-background-link' : 'is-white'" :title="$t('admin.revoke_all_devices_for_user')">
{{ $t('settings.revoke') }}
</button>
</UseColorMode>
</div>
</div>
</div>
@ -327,4 +320,5 @@
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
</VueFooter>
</ResponsiveWidthWrapper>
</UseColorMode>
</template>

10
resources/js/views/twofaccounts/Accounts.vue
View File

@ -315,6 +315,7 @@
</script>
<template>
<UseColorMode v-slot="{ mode }">
<div>
<GroupSwitch v-if="showGroupSwitch" v-model:showGroupSwitch="showGroupSwitch" v-model:groups="groups.items" />
<DestinationGroupSelector
@ -341,7 +342,6 @@
<!-- group switch toggle -->
<div v-else class="has-text-centered">
<div class="columns">
<UseColorMode v-slot="{ mode }">
<div class="column" v-if="showGroupSwitch">
<button type="button" id="btnHideGroupSwitch" :title="$t('groups.hide_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
{{ $t('groups.select_accounts_to_show') }}
@ -353,7 +353,6 @@
<FontAwesomeIcon :icon="['fas', 'caret-down']" />
</button>
</div>
</UseColorMode>
</div>
</div>
</div>
@ -399,9 +398,7 @@
<transition name="slideCheckbox">
<div class="tfa-cell tfa-checkbox" v-if="bus.inManagementMode">
<div class="field">
<UseColorMode v-slot="{ mode }">
<input class="is-checkradio is-small" :class="mode == 'dark' ? 'is-white':'is-info'" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="twofaccounts.selectedIds">
</UseColorMode>
<label tabindex="0" :for="'ckb_' + account.id" v-on:keypress.space.prevent="twofaccounts.select(account.id)"></label>
</div>
</div>
@ -431,11 +428,9 @@
</span>
<span v-else>
<!-- get hotp button -->
<UseColorMode v-slot="{ mode }">
<button type="button" class="button tag" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @click="showOTP(account)" :title="$t('twofaccounts.import.import_this_account')">
{{ $t('commons.generate') }}
</button>
</UseColorMode>
</span>
</div>
</transition>
@ -451,14 +446,12 @@
</transition>
<transition name="fadeInOut">
<div class="tfa-cell tfa-edit has-text-grey" v-if="bus.inManagementMode">
<UseColorMode v-slot="{ mode }">
<RouterLink :to="{ name: 'editAccount', params: { twofaccountId: account.id }}" class="tag is-rounded mr-1" :class="mode == 'dark' ? 'is-dark' : 'is-white'">
{{ $t('commons.edit') }}
</RouterLink>
<RouterLink :to="{ name: 'showQRcode', params: { twofaccountId: account.id }}" class="tag is-rounded" :class="mode == 'dark' ? 'is-dark' : 'is-white'" :title="$t('twofaccounts.show_qrcode')">
<FontAwesomeIcon :icon="['fas', 'qrcode']" />
</RouterLink>
</UseColorMode>
</div>
</transition>
<transition name="fadeInOut">
@ -481,4 +474,5 @@
</VueFooter>
</div>
</div>
</UseColorMode>
</template>

6
resources/js/views/twofaccounts/Capture.vue
View File

@ -140,11 +140,10 @@
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="modal-slot has-text-centered is-shadowless">
<UseColorMode v-slot="{ mode }">
<div v-if="errorPhrase">
<p class="block is-size-5">{{ $t('twofaccounts.stream.live_scan_cant_start') }}</p>
<UseColorMode v-slot="{ mode }">
<p class="block" :class="{'has-text-light': mode == 'dark'}">{{ $t('twofaccounts.stream.' + errorPhrase + '.reason') }}</p>
</UseColorMode>
<div v-if="errorPhrase == 'need_grant_permission'" >
<p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.solution') }}</p>
<p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.click_camera_icon') }}</p>
@ -173,8 +172,7 @@
</div>
<p v-else class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p>
</div>
<UseColorMode v-else v-slot="{ mode }">
<span class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
<span v-else class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
<Spinner :isVisible="true" :type="'raw'" class="is-size-1" />
</span>
</UseColorMode>

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

@ -409,6 +409,7 @@
</script>
<template>
<UseColorMode v-slot="{ mode }">
<div>
<!-- otp display modal -->
<Modal v-if="user.preferences.AutoSaveQrcodedAccount" v-model="showOtpInModal">
@ -465,7 +466,6 @@
<!-- qcode fileupload -->
<div v-if="!isEditMode" class="field is-grouped">
<div class="control">
<UseColorMode v-slot="{ mode }">
<div role="button" tabindex="0" class="file is-small" :class="{ 'is-black': mode == 'dark' }" @keyup.enter="qrcodeInputLabel.click()">
<label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')" ref="qrcodeInputLabel">
<input inert tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
@ -477,7 +477,6 @@
</span>
</label>
</div>
</UseColorMode>
</div>
</div>
<FieldError v-if="qrcodeForm.errors.hasAny('qrcode')" :error="qrcodeForm.errors.get('qrcode')" :field="'qrcode'" class="help-for-file" />
@ -490,18 +489,15 @@
<div class="field is-grouped">
<!-- Try my luck button -->
<div class="control" v-if="user.preferences.getOfficialIcons">
<UseColorMode v-slot="{ mode }">
<VueButton @click="fetchLogo" :color="mode == 'dark' ? 'is-dark' : ''" :nativeType="'button'" :is-loading="fetchingLogo" :isDisabled="!form.service" aria-describedby="lgdTryMyLuck">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'globe']" />
</span>
<span>{{ $t('twofaccounts.forms.i_m_lucky') }}</span>
</VueButton>
</UseColorMode>
</div>
<!-- upload icon button -->
<div class="control is-flex">
<UseColorMode v-slot="{ mode }">
<div role="button" tabindex="0" class="file mr-3" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()">
<label for="filUploadIcon" class="file-label" ref="iconInputLabel">
<input id="filUploadIcon" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
@ -517,7 +513,6 @@
<img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
<button type="button" class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
</span>
</UseColorMode>
</div>
</div>
<div class="field">
@ -573,4 +568,5 @@
<QrContentDisplay :qrContent="uri" />
</modal>
</div>
</UseColorMode>
</template>

10
resources/js/views/twofaccounts/Import.vue
View File

@ -244,6 +244,7 @@
</script>
<template>
<UseColorMode v-slot="{ mode }">
<div>
<ResponsiveWidthWrapper>
<h1 class="title has-text-grey-dark">
@ -262,9 +263,7 @@
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<UseColorMode v-slot="{ mode }">
<FontAwesomeIcon :icon="['fas', 'qrcode']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
</UseColorMode>
</figure>
</div>
<div class="media-content">
@ -291,9 +290,7 @@
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<UseColorMode v-slot="{ mode }">
<FontAwesomeIcon :icon="['fas', 'file-lines']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
</UseColorMode>
</figure>
</div>
<div class="media-content">
@ -317,9 +314,7 @@
<div class="media">
<div class="media-left">
<figure class="image is-32x32">
<UseColorMode v-slot="{ mode }">
<FontAwesomeIcon :icon="['fas', 'align-left']" size="2x" :class="mode == 'dark' ? 'has-text-grey-darker' : 'has-text-grey-lighter'" />
</UseColorMode>
</figure>
</div>
<div class="media-content">
@ -408,11 +403,9 @@
<!-- buttons -->
<div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
<!-- discard button -->
<UseColorMode v-slot="{ mode }">
<button type="button" class="button tag" :class="{'is-dark has-text-grey-light' : mode == 'dark'}" @click="discardAccount(index)" :title="$t('twofaccounts.import.discard_this_account')">
<FontAwesomeIcon :icon="['fas', 'trash']" />
</button>
</UseColorMode>
<!-- import button -->
<button v-if="account.id > -2" type="button" class="button tag is-link" @click="createAccount(index)" :title="$t('twofaccounts.import.import_this_account')">
{{ $t('twofaccounts.import.to_import') }}
@ -479,4 +472,5 @@
</OtpDisplay>
</modal>
</div>
</UseColorMode>
</template>