extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-26 06:52:13 +02: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

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

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

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

@ -139,28 +139,27 @@
</div> </div>
<div v-if="visibleUsers.length > 0"> <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 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"> <UseColorMode v-slot="{ mode }">
<span>{{ user.name }}</span> <div class="has-ellipsis">
<!-- <FontAwesomeIcon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }} --> <span>{{ user.name }}</span>
<!-- set as admin link --> <!-- <FontAwesomeIcon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }} -->
<!-- admin tag --> <!-- set as admin link -->
<span class="is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ user.email }}</span> <!-- admin tag -->
<!-- tag --> <span class="is-block has-ellipsis is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ user.email }}</span>
<UseColorMode v-slot="{ mode }"> <!-- tag -->
<div class="tags mt-2"> <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.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> <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> </div>
</UseColorMode> </div>
</div> <div class="ml-3">
<div class="ml-3">
<UseColorMode v-slot="{ mode }">
<!-- manage link --> <!-- 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')"> <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') }} {{ $t('commons.manage') }}
</RouterLink> </RouterLink>
</UseColorMode>
</div> </div>
</UseColorMode>
</div> </div>
<!-- <div class="mt-2 is-size-7 is-pulled-right"> <!-- <div class="mt-2 is-size-7 is-pulled-right">
{{ $t('settings.revoking_a_token_is_permanent')}} {{ $t('settings.revoking_a_token_is_permanent')}}

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

@ -188,6 +188,7 @@
<template> <template>
<UseColorMode v-slot="{ mode }">
<ResponsiveWidthWrapper> <ResponsiveWidthWrapper>
<h1 class="title has-text-grey-dark mb-6"> <h1 class="title has-text-grey-dark mb-6">
{{ $t('admin.user_management') }} {{ $t('admin.user_management') }}
@ -200,10 +201,8 @@
</div> </div>
<div v-else> <div v-else>
<div class="mb-6" :class="managedUser.info.is_admin ? 'is-left-bordered-warning' : 'is-left-bordered-link'"> <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' }">
<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>
<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> <p class="subtitle is-6 block">{{ managedUser.info.email }}</p>
</div> </div>
<!-- oauth banner --> <!-- oauth banner -->
@ -228,16 +227,14 @@
</div> </div>
<div> <div>
<div class="tags ml-3 is-right"> <div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }"> <!-- resend email button -->
<!-- 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')">
<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') }}
{{ $t('admin.resend_email') }} </button>
</button> <!-- reset password 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')">
<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') }}
{{ $t('admin.reset_password') }} </button>
</button>
</UseColorMode>
</div> </div>
</div> </div>
</div> </div>
@ -258,12 +255,10 @@
</div> </div>
<div v-if="managedUser.valid_personal_access_tokens > 0"> <div v-if="managedUser.valid_personal_access_tokens > 0">
<div class="tags ml-3 is-right"> <div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }"> <!-- manage link -->
<!-- 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')">
<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') }}
{{ $t('settings.revoke') }} </button>
</button>
</UseColorMode>
</div> </div>
</div> </div>
</div> </div>
@ -277,12 +272,10 @@
</div> </div>
<div v-if="managedUser.webauthn_credentials > 0"> <div v-if="managedUser.webauthn_credentials > 0">
<div class="tags ml-3 is-right"> <div class="tags ml-3 is-right">
<UseColorMode v-slot="{ mode }"> <!-- manage link -->
<!-- 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')">
<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') }}
{{ $t('settings.revoke') }} </button>
</button>
</UseColorMode>
</div> </div>
</div> </div>
</div> </div>
@ -327,4 +320,5 @@
<ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" /> <ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
</VueFooter> </VueFooter>
</ResponsiveWidthWrapper> </ResponsiveWidthWrapper>
</UseColorMode>
</template> </template>

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

@ -315,6 +315,7 @@
</script> </script>
<template> <template>
<UseColorMode v-slot="{ mode }">
<div> <div>
<GroupSwitch v-if="showGroupSwitch" v-model:showGroupSwitch="showGroupSwitch" v-model:groups="groups.items" /> <GroupSwitch v-if="showGroupSwitch" v-model:showGroupSwitch="showGroupSwitch" v-model:groups="groups.items" />
<DestinationGroupSelector <DestinationGroupSelector
@ -341,19 +342,17 @@
<!-- group switch toggle --> <!-- group switch toggle -->
<div v-else class="has-text-centered"> <div v-else class="has-text-centered">
<div class="columns"> <div class="columns">
<UseColorMode v-slot="{ mode }"> <div class="column" v-if="showGroupSwitch">
<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">
<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') }}
{{ $t('groups.select_accounts_to_show') }} </button>
</button> </div>
</div> <div class="column" v-else>
<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">
<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;
{{ groups.current }} ({{ twofaccounts.filteredCount }})&nbsp; <FontAwesomeIcon :icon="['fas', 'caret-down']" />
<FontAwesomeIcon :icon="['fas', 'caret-down']" /> </button>
</button> </div>
</div>
</UseColorMode>
</div> </div>
</div> </div>
</div> </div>
@ -399,9 +398,7 @@
<transition name="slideCheckbox"> <transition name="slideCheckbox">
<div class="tfa-cell tfa-checkbox" v-if="bus.inManagementMode"> <div class="tfa-cell tfa-checkbox" v-if="bus.inManagementMode">
<div class="field"> <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">
<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> <label tabindex="0" :for="'ckb_' + account.id" v-on:keypress.space.prevent="twofaccounts.select(account.id)"></label>
</div> </div>
</div> </div>
@ -431,11 +428,9 @@
</span> </span>
<span v-else> <span v-else>
<!-- get hotp button --> <!-- 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')">
<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') }}
{{ $t('commons.generate') }} </button>
</button>
</UseColorMode>
</span> </span>
</div> </div>
</transition> </transition>
@ -451,14 +446,12 @@
</transition> </transition>
<transition name="fadeInOut"> <transition name="fadeInOut">
<div class="tfa-cell tfa-edit has-text-grey" v-if="bus.inManagementMode"> <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'">
<RouterLink :to="{ name: 'editAccount', params: { twofaccountId: account.id }}" class="tag is-rounded mr-1" :class="mode == 'dark' ? 'is-dark' : 'is-white'"> {{ $t('commons.edit') }}
{{ $t('commons.edit') }} </RouterLink>
</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')">
<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']" />
<FontAwesomeIcon :icon="['fas', 'qrcode']" /> </RouterLink>
</RouterLink>
</UseColorMode>
</div> </div>
</transition> </transition>
<transition name="fadeInOut"> <transition name="fadeInOut">
@ -481,4 +474,5 @@
</VueFooter> </VueFooter>
</div> </div>
</div> </div>
</UseColorMode>
</template> </template>

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

@ -140,41 +140,39 @@
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-three-quarters"> <div class="column is-three-quarters">
<div class="modal-slot has-text-centered is-shadowless"> <div class="modal-slot has-text-centered is-shadowless">
<div v-if="errorPhrase"> <UseColorMode v-slot="{ mode }">
<p class="block is-size-5">{{ $t('twofaccounts.stream.live_scan_cant_start') }}</p> <div v-if="errorPhrase">
<UseColorMode v-slot="{ mode }"> <p class="block is-size-5">{{ $t('twofaccounts.stream.live_scan_cant_start') }}</p>
<p class="block" :class="{'has-text-light': mode == 'dark'}">{{ $t('twofaccounts.stream.' + errorPhrase + '.reason') }}</p> <p class="block" :class="{'has-text-light': mode == 'dark'}">{{ $t('twofaccounts.stream.' + errorPhrase + '.reason') }}</p>
</UseColorMode> <div v-if="errorPhrase == 'need_grant_permission'" >
<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.solution') }}</p> <p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.click_camera_icon') }}</p>
<p class="is-size-7 mb-3">{{ $t('twofaccounts.stream.need_grant_permission.click_camera_icon') }}</p>
<div class="addressbar columns is-mobile is-gapless"> <div class="addressbar columns is-mobile is-gapless">
<div class="column is-narrow has-text-left circled"> <div class="column is-narrow has-text-left circled">
<FontAwesomeIcon :icon="['fas', 'lock']" class="ml-1" size="xs" /> <FontAwesomeIcon :icon="['fas', 'lock']" class="ml-1" size="xs" />
<FontAwesomeIcon :icon="['fas', 'video-slash']" class="ml-3" size="xs" /> <FontAwesomeIcon :icon="['fas', 'video-slash']" class="ml-3" size="xs" />
</div> </div>
<div class="column has-text-left ml-3"> <div class="column has-text-left ml-3">
http://my.2fauth.app/... http://my.2fauth.app/...
</div> </div>
<div class="column is-narrow has-text-right"> <div class="column is-narrow has-text-right">
<FontAwesomeIcon :icon="['far', 'star']" class="mr-1" /> <FontAwesomeIcon :icon="['far', 'star']" class="mr-1" />
</div>
</div> </div>
<p>
<a @click.stop="reloadLocation">{{ $t('commons.refresh') }}</a>
</p>
<!-- <div class="addressbar">
<FontAwesomeIcon :icon="['fas', 'video-slash']" class="mr-3 ml-2" size="xs" />
<span class="circled">http://my.2fauth.app/...</span>
<FontAwesomeIcon :icon="['far', 'star']" class="mr-3" size="xs" />
</div> -->
</div> </div>
<p> <p v-else class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p>
<a @click.stop="reloadLocation">{{ $t('commons.refresh') }}</a>
</p>
<!-- <div class="addressbar">
<FontAwesomeIcon :icon="['fas', 'video-slash']" class="mr-3 ml-2" size="xs" />
<span class="circled">http://my.2fauth.app/...</span>
<FontAwesomeIcon :icon="['far', 'star']" class="mr-3" size="xs" />
</div> -->
</div> </div>
<p v-else class="is-size-7">{{ $t('twofaccounts.stream.' + errorPhrase + '.solution') }}</p> <span v-else class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
</div>
<UseColorMode v-else v-slot="{ mode }">
<span class="is-size-4" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">
<Spinner :isVisible="true" :type="'raw'" class="is-size-1" /> <Spinner :isVisible="true" :type="'raw'" class="is-size-1" />
</span> </span>
</UseColorMode> </UseColorMode>

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

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

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

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