Skip to content

Commit

Permalink
Fix performance issue when switching to Manage mode - Fixes #421
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bubka
Bubka committed Nov 23, 2024
1 parent c409d48 commit 4c14586
Show file tree
Hide file tree
Showing 7 changed files with 152 additions and 179 deletions.
56 changes: 27 additions & 29 deletions resources/js/views/About.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<span :class="mode == 'dark' ? 'has-text-white':'has-text-black'"><span class="is-size-5">2FAuth</span> v{{ $2fauth.version }}</span>
<br />
{{ $t('commons.2fauth_teaser')}}
</p>
Expand All @@ -24,32 +23,30 @@
{{ $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']" />
</span>
<span>Github</span>
</a>
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'book']" />
</span>
<span>Docs</span>
</a>
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://demo.2fauth.app/" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'flask']" />
</span>
<span>Demo</span>
</a>
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/resources/rapidoc.html" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'code']" />
</span>
<span>API</span>
</a>
</UseColorMode>
<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']" />
</span>
<span>Github</span>
</a>
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'book']" />
</span>
<span>Docs</span>
</a>
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://demo.2fauth.app/" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'flask']" />
</span>
<span>Demo</span>
</a>
<a class="button" :class="{'is-dark' : mode == 'dark'}" href="https://docs.2fauth.app/resources/rapidoc.html" target="_blank">
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'code']" />
</span>
<span>API</span>
</a>
</div>
<h2 class="title is-5 has-text-grey-light">
{{ $t('commons.credits') }}
Expand All @@ -65,5 +62,6 @@
<VueFooter :showButtons="true">
<ButtonBackCloseCancel :returnTo="{ path: returnTo }" action="back" />
</VueFooter>
</UseColorMode>
</ResponsiveWidthWrapper>
</template>
27 changes: 13 additions & 14 deletions resources/js/views/admin/Users.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,28 +139,27 @@
</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">
<div class="has-ellipsis">
<span>{{ user.name }}</span>
<!-- <FontAwesomeIcon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }} -->
<!-- set as admin link -->
<!-- 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 }">
<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 }} -->
<!-- set as admin link -->
<!-- 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 -->
<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 }">
</div>
<div class="ml-3">
<!-- 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>

</div>
</UseColorMode>
</div>
<!-- <div class="mt-2 is-size-7 is-pulled-right">
{{ $t('settings.revoking_a_token_is_permanent')}}
Expand Down
46 changes: 20 additions & 26 deletions resources/js/views/admin/users/Manage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@


<template>
<UseColorMode v-slot="{ mode }">
<ResponsiveWidthWrapper>
<h1 class="title has-text-grey-dark mb-6">
{{ $t('admin.user_management') }}
Expand All @@ -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="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>
<p class="subtitle is-6 block">{{ managedUser.info.email }}</p>
</div>
<!-- oauth banner -->
Expand All @@ -228,16 +227,14 @@
</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') }}
</button>
<!-- reset password button -->
<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>
<!-- 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') }}
</button>
<!-- reset password button -->
<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>
</div>
</div>
</div>
Expand All @@ -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>
<!-- 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>
</div>
</div>
</div>
Expand All @@ -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>
<!-- 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>
</div>
</div>
</div>
Expand Down Expand Up @@ -327,4 +320,5 @@
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
</VueFooter>
</ResponsiveWidthWrapper>
</UseColorMode>
</template>
52 changes: 23 additions & 29 deletions resources/js/views/twofaccounts/Accounts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -341,19 +342,17 @@
<!-- 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') }}
</button>
</div>
<div class="column" v-else>
<button type="button" id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
{{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
<FontAwesomeIcon :icon="['fas', 'caret-down']" />
</button>
</div>
</UseColorMode>
<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') }}
</button>
</div>
<div class="column" v-else>
<button type="button" id="btnShowGroupSwitch" :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" :class="{'has-text-grey' : mode != 'dark'}" @click.stop="showGroupSwitch = !showGroupSwitch">
{{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp;
<FontAwesomeIcon :icon="['fas', 'caret-down']" />
</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -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>
<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">
<label tabindex="0" :for="'ckb_' + account.id" v-on:keypress.space.prevent="twofaccounts.select(account.id)"></label>
</div>
</div>
Expand Down Expand Up @@ -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>
<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>
</span>
</div>
</transition>
Expand All @@ -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>
<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>
</div>
</transition>
<transition name="fadeInOut">
Expand All @@ -481,4 +474,5 @@
</VueFooter>
</div>
</div>
</UseColorMode>
</template>
Loading

0 comments on commit 4c14586

Please sign in to comment.