mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-25 06:24:07 +02:00
Refactor views to use a responsive width wrapper component
This commit is contained in:
Bubka
parent
6a41c77144
commit
4511df5764
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
|
||||
<h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
|
||||
<div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<responsive-width-wrapper>
|
||||
<h1 class="title has-text-grey-dark" v-html="title" v-if="title"></h1>
|
||||
<div id="punchline" v-if="punchline" class="block" v-html="punchline"></div>
|
||||
<slot />
|
||||
</responsive-width-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
19
resources/js/components/ResponsiveWidthWrapper.vue
Normal file
19
resources/js/components/ResponsiveWidthWrapper.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-half-widescreen is-one-third-fullhd">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ResponsiveWidthWrapper',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,16 +1,14 @@
|
||||
<template>
|
||||
<div class="options-header has-background-black-ter">
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
|
||||
<div class="tabs is-centered is-fullwidth">
|
||||
<ul>
|
||||
<li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
|
||||
<router-link :id="tab.id" :to="{ name: tab.view }">{{ tab.name }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<responsive-width-wrapper>
|
||||
<div class="tabs is-centered is-fullwidth">
|
||||
<ul>
|
||||
<li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
|
||||
<router-link :id="tab.id" :to="{ name: tab.view }">{{ tab.name }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</responsive-width-wrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
4
resources/js/components/index.js
vendored
4
resources/js/components/index.js
vendored
@ -13,6 +13,7 @@ import FormButtons from './FormButtons'
|
||||
import VueFooter from './Footer'
|
||||
import Kicker from './Kicker'
|
||||
import SettingTabs from './SettingTabs'
|
||||
import ResponsiveWidthWrapper from './ResponsiveWidthWrapper'
|
||||
|
||||
// Components that are registered globaly.
|
||||
[
|
||||
@ -29,7 +30,8 @@ import SettingTabs from './SettingTabs'
|
||||
FormButtons,
|
||||
VueFooter,
|
||||
Kicker,
|
||||
SettingTabs
|
||||
SettingTabs,
|
||||
ResponsiveWidthWrapper
|
||||
].forEach(Component => {
|
||||
Vue.component(Component.name, Component)
|
||||
})
|
||||
|
||||
@ -1,87 +1,85 @@
|
||||
<template>
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
|
||||
<h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
|
||||
<p class="block">
|
||||
<span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
|
||||
{{ $t('commons.2fauth_teaser')}}
|
||||
</p>
|
||||
<img src="logo.svg" style="height: 32px" alt="2FAuth logo" />
|
||||
<p class="block" :class="showUserOptions ? 'mb-5' : '' ">
|
||||
©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a>
|
||||
</p>
|
||||
<responsive-width-wrapper>
|
||||
<h1 class="title has-text-grey-dark">{{ $t('commons.about') }}</h1>
|
||||
<p class="block">
|
||||
<span class="has-text-white"><span class="is-size-5">2FAuth</span> v{{ appVersion }}</span><br />
|
||||
{{ $t('commons.2fauth_teaser')}}
|
||||
</p>
|
||||
<img src="logo.svg" style="height: 32px" alt="2FAuth logo" />
|
||||
<p class="block" :class="showUserOptions ? 'mb-5' : '' ">
|
||||
©Bubka <a class="is-size-7" href="https://github.com/Bubka/2FAuth/blob/master/LICENSE">AGPL-3.0 license</a>
|
||||
</p>
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('commons.resources') }}
|
||||
</h2>
|
||||
<div class="buttons">
|
||||
<a class="button is-dark" href="https://github.com/Bubka/2FAuth">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fab', 'github-alt']" />
|
||||
</span>
|
||||
<span>Github</span>
|
||||
</a>
|
||||
<a class="button is-dark" href="https://docs.2fauth.app/">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'book']" />
|
||||
</span>
|
||||
<span>Docs</span>
|
||||
</a>
|
||||
<a class="button is-dark" href="https://demo.2fauth.app/">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'flask']" />
|
||||
</span>
|
||||
<span>Demo</span>
|
||||
</a>
|
||||
<a class="button is-dark" href="https://docs.2fauth.app/resources/rapidoc.html">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'code']" />
|
||||
</span>
|
||||
<span>API</span>
|
||||
</a>
|
||||
</div>
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('commons.credits') }}
|
||||
</h2>
|
||||
<p class="block">
|
||||
<ul>
|
||||
<li>{{ $t('commons.made_with')}} <a href="https://docs.2fauth.app/credits/">Laravel, Bulma CSS, Vue.js and more</a></li>
|
||||
<li>{{ $t('commons.ui_icons_by')}} <a href="https://fontawesome.com/">Font Awesome</a> <a class="is-size-7" href="https://fontawesome.com/license/free">(CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)</a></li>
|
||||
<li>{{ $t('commons.logos_by')}} <a href="https://2fa.directory/">2FA Directory</a> <a class="is-size-7" href="https://github.com/2factorauth/twofactorauth/blob/master/LICENSE.md">(MIT License)</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('commons.environment') }}
|
||||
</h2>
|
||||
<div class="box has-background-black-bis is-family-monospace is-size-7">
|
||||
<button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listInfos.innerText" v-clipboard:success="clipboardSuccessHandler">
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
</button>
|
||||
<ul ref="listInfos">
|
||||
<li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="showUserOptions">
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('commons.resources') }}
|
||||
</h2>
|
||||
<div class="buttons">
|
||||
<a class="button is-dark" href="https://github.com/Bubka/2FAuth">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fab', 'github-alt']" />
|
||||
</span>
|
||||
<span>Github</span>
|
||||
</a>
|
||||
<a class="button is-dark" href="https://docs.2fauth.app/">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'book']" />
|
||||
</span>
|
||||
<span>Docs</span>
|
||||
</a>
|
||||
<a class="button is-dark" href="https://demo.2fauth.app/">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'flask']" />
|
||||
</span>
|
||||
<span>Demo</span>
|
||||
</a>
|
||||
<a class="button is-dark" href="https://docs.2fauth.app/resources/rapidoc.html">
|
||||
<span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'code']" />
|
||||
</span>
|
||||
<span>API</span>
|
||||
</a>
|
||||
</div>
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('commons.credits') }}
|
||||
</h2>
|
||||
<p class="block">
|
||||
<ul>
|
||||
<li>{{ $t('commons.made_with')}} <a href="https://docs.2fauth.app/credits/">Laravel, Bulma CSS, Vue.js and more</a></li>
|
||||
<li>{{ $t('commons.ui_icons_by')}} <a href="https://fontawesome.com/">Font Awesome</a> <a class="is-size-7" href="https://fontawesome.com/license/free">(CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)</a></li>
|
||||
<li>{{ $t('commons.logos_by')}} <a href="https://2fa.directory/">2FA Directory</a> <a class="is-size-7" href="https://github.com/2factorauth/twofactorauth/blob/master/LICENSE.md">(MIT License)</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('commons.environment') }}
|
||||
{{ $t('settings.user_options') }}
|
||||
</h2>
|
||||
<div class="box has-background-black-bis is-family-monospace is-size-7">
|
||||
<button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listInfos.innerText" v-clipboard:success="clipboardSuccessHandler">
|
||||
<button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listUserOptions.innerText" v-clipboard:success="clipboardSuccessHandler">
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
</button>
|
||||
<ul ref="listInfos">
|
||||
<li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li>
|
||||
<ul ref="listUserOptions">
|
||||
<li v-for="(value, option) in options" :value="value" :key="option"><b>{{option}}</b>: {{value}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="showUserOptions">
|
||||
<h2 class="title is-5 has-text-grey-light">
|
||||
{{ $t('settings.user_options') }}
|
||||
</h2>
|
||||
<div class="box has-background-black-bis is-family-monospace is-size-7">
|
||||
<button class="button is-like-text is-pulled-right is-small is-text" v-clipboard="() => this.$refs.listUserOptions.innerText" v-clipboard:success="clipboardSuccessHandler">
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
</button>
|
||||
<ul ref="listUserOptions">
|
||||
<li v-for="(value, option) in options" :value="value" :key="option"><b>{{option}}</b>: {{value}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
</responsive-width-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,48 +1,46 @@
|
||||
<template>
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
|
||||
<h1 class="title has-text-grey-dark">
|
||||
{{ $t('groups.groups') }}
|
||||
</h1>
|
||||
<div class="is-size-7-mobile">
|
||||
{{ $t('groups.manage_groups_legend')}}
|
||||
</div>
|
||||
<div class="mt-3 mb-6">
|
||||
<router-link class="is-link mt-5" :to="{ name: 'createGroup' }">
|
||||
<font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('groups.create_group') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="groups.length > 0">
|
||||
<div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
|
||||
{{ group.name }}
|
||||
<!-- delete icon -->
|
||||
<button class="button tag is-dark is-pulled-right" @click="deleteGroup(group.id)" :title="$t('commons.delete')">
|
||||
{{ $t('commons.delete') }}
|
||||
</button>
|
||||
<!-- edit link -->
|
||||
<router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="has-text-grey pl-1" :title="$t('commons.rename')">
|
||||
<font-awesome-icon :icon="['fas', 'pen-square']" />
|
||||
</router-link>
|
||||
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.twofaccounts_count }} {{ $t('twofaccounts.accounts') }}</span>
|
||||
</div>
|
||||
<div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0">
|
||||
{{ $t('groups.deleting_group_does_not_delete_accounts')}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isFetching && groups.length === 0" class="has-text-centered">
|
||||
<span class="is-size-4">
|
||||
<font-awesome-icon :icon="['fas', 'spinner']" spin />
|
||||
</span>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
<responsive-width-wrapper>
|
||||
<h1 class="title has-text-grey-dark">
|
||||
{{ $t('groups.groups') }}
|
||||
</h1>
|
||||
<div class="is-size-7-mobile">
|
||||
{{ $t('groups.manage_groups_legend')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 mb-6">
|
||||
<router-link class="is-link mt-5" :to="{ name: 'createGroup' }">
|
||||
<font-awesome-icon :icon="['fas', 'plus-circle']" /> {{ $t('groups.create_group') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="groups.length > 0">
|
||||
<div v-for="group in groups" :key="group.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
|
||||
{{ group.name }}
|
||||
<!-- delete icon -->
|
||||
<button class="button tag is-dark is-pulled-right" @click="deleteGroup(group.id)" :title="$t('commons.delete')">
|
||||
{{ $t('commons.delete') }}
|
||||
</button>
|
||||
<!-- edit link -->
|
||||
<router-link :to="{ name: 'editGroup', params: { id: group.id, name: group.name }}" class="has-text-grey pl-1" :title="$t('commons.rename')">
|
||||
<font-awesome-icon :icon="['fas', 'pen-square']" />
|
||||
</router-link>
|
||||
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.twofaccounts_count }} {{ $t('twofaccounts.accounts') }}</span>
|
||||
</div>
|
||||
<div class="mt-2 is-size-7 is-pulled-right" v-if="groups.length > 0">
|
||||
{{ $t('groups.deleting_group_does_not_delete_accounts')}}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isFetching && groups.length === 0" class="has-text-centered">
|
||||
<span class="is-size-4">
|
||||
<font-awesome-icon :icon="['fas', 'spinner']" spin />
|
||||
</span>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
</responsive-width-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,153 +1,151 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
|
||||
<h1 class="title has-text-grey-dark">
|
||||
{{ $t('twofaccounts.import.import') }}
|
||||
</h1>
|
||||
<div v-if="exportedAccounts.length == 0">
|
||||
<div class="block is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')"></div>
|
||||
<h5 class="title is-5 mb-3 has-text-grey">{{ $t('twofaccounts.import.qr_code') }}</h5>
|
||||
<!-- scan button that launch camera stream -->
|
||||
<div class="block">
|
||||
<div class="buttons mb-0">
|
||||
<button tabindex="0" class="button is-link is-rounded mr-0" @click="capture()">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'camera']" />
|
||||
</span>
|
||||
<span>{{ $t('twofaccounts.import.scan') }}</span>
|
||||
</button>
|
||||
<span class="p-2 mb-2">{{ $t('commons.or') }}</span>
|
||||
<!-- </div> -->
|
||||
<!-- upload a qr code (with basic file field and backend decoding) -->
|
||||
<!-- <div class="block"> -->
|
||||
<label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="qrcodeInputLabel" @keyup.enter="$refs.qrcodeInputLabel.click()">
|
||||
{{ $t('twofaccounts.import.upload') }}
|
||||
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
|
||||
</label>
|
||||
</div>
|
||||
<field-error :form="uploadForm" field="qrcode" />
|
||||
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
|
||||
</div>
|
||||
<h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
|
||||
<!-- upload a file -->
|
||||
<div class="block mb-6">
|
||||
<label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="fileInputLabel" @keyup.enter="$refs.fileInputLabel.click()">
|
||||
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="text/plain,application/json,text/csv,.2fas" v-on:change="submitFile" ref="fileInput">
|
||||
{{ $t('twofaccounts.import.upload') }}
|
||||
</label>
|
||||
<field-error :form="uploadForm" field="file" />
|
||||
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
|
||||
</div>
|
||||
<!-- Supported migration resources -->
|
||||
<h5 class="title is-5 mb-3 has-text-grey-dark">{{ $t('twofaccounts.import.supported_migration_formats') }}</h5>
|
||||
<div class="field is-grouped is-grouped-multiline pt-0">
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">Google Auth</span>
|
||||
<span class="tag is-black">{{ $t('twofaccounts.import.qr_code') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">Aegis Auth</span>
|
||||
<span class="tag is-black">JSON</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">Aegis Auth</span>
|
||||
<span class="tag is-black">{{ $t('twofaccounts.import.plain_text') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">2FAS Auth</span>
|
||||
<span class="tag is-black">JSON</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="is-size-7" v-html="$t('twofaccounts.import.do_not_set_password_or_encryption')"></span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<!-- Account name -->
|
||||
<div v-if="account.id > -2 && account.imported !== 0" class="is-flex-grow-1 has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
|
||||
<img v-if="account.icon && $root.appSettings.showAccountsIcons" class="import-icon" :src="'/storage/icons/' + account.icon" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
|
||||
{{ account.account }}
|
||||
</div>
|
||||
<div v-else class="is-flex-grow-1 has-ellipsis">{{ account.account }}</div>
|
||||
<!-- buttons -->
|
||||
<div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
|
||||
<!-- discard button -->
|
||||
<button class="button tag is-dark has-text-grey-light" @click="discardAccount(index)" :title="$t('twofaccounts.import.discard_this_account')">
|
||||
<font-awesome-icon :icon="['fas', 'trash']" />
|
||||
</button>
|
||||
<!-- import button -->
|
||||
<button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)" :title="$t('twofaccounts.import.import_this_account')">
|
||||
{{ $t('twofaccounts.import.to_import') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- result label -->
|
||||
<div v-else class="has-nowrap">
|
||||
<span v-if="account.imported === 1" class="has-text-success">
|
||||
{{ $t('twofaccounts.import.imported') }} <font-awesome-icon :icon="['fas', 'check']" />
|
||||
</span>
|
||||
<span v-else class="has-text-danger">
|
||||
{{ $t('twofaccounts.import.failure') }} <font-awesome-icon :icon="['fas', 'times']" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-size-6 is-size-7-mobile">
|
||||
<!-- service name -->
|
||||
<div class="is-family-primary has-text-grey">{{ $t('twofaccounts.import.issuer') }}: {{ account.service }}</div>
|
||||
<!-- reasons to invalid G-Auth data -->
|
||||
<div v-if="account.id === -2" class="has-text-danger">
|
||||
<font-awesome-icon class="mr-1" :icon="['fas', 'times-circle']" />{{ account.secret }}
|
||||
</div>
|
||||
<!-- possible duplicates -->
|
||||
<div v-if="account.id === -1 && account.imported !== 1 && !account.errors" class="has-text-warning">
|
||||
<font-awesome-icon class="mr-1" :icon="['fas', 'exclamation-circle']" />{{ $t('twofaccounts.import.possible_duplicate') }}
|
||||
</div>
|
||||
<!-- errors during account creation -->
|
||||
<ul v-if="account.errors">
|
||||
<li v-for="(error) in account.errors" :key="error" class="has-text-danger">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- discard links -->
|
||||
<div v-if="importableCount > 0" class="mt-2 is-size-7 is-pulled-right">
|
||||
<button v-if="duplicateCount" @click="discardDuplicates()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</button>
|
||||
<button @click="discardAccounts()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
|
||||
</div>
|
||||
<div v-if="importedCount == exportedAccounts.length" class="mt-2 is-size-7 is-pulled-right">
|
||||
<button @click="exportedAccounts = []" class="has-text-grey button is-small is-ghost">{{ $t('commons.clear') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isFetching && exportedAccounts.length === 0" class="has-text-centered">
|
||||
<span class="is-size-4">
|
||||
<font-awesome-icon :icon="['fas', 'spinner']" spin />
|
||||
</span>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- Import all button -->
|
||||
<p class="control" v-if="importableCount > 0">
|
||||
<button class="button is-link is-rounded is-focus" @click="createAccounts">
|
||||
<span>{{ $t('twofaccounts.import.import_all') }} ({{importableCount}})</span>
|
||||
<!-- <span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'qrcode']" />
|
||||
</span> -->
|
||||
<responsive-width-wrapper>
|
||||
<h1 class="title has-text-grey-dark">
|
||||
{{ $t('twofaccounts.import.import') }}
|
||||
</h1>
|
||||
<div v-if="exportedAccounts.length == 0">
|
||||
<div class="block is-size-7-mobile" v-html="$t('twofaccounts.import.import_legend')"></div>
|
||||
<h5 class="title is-5 mb-3 has-text-grey">{{ $t('twofaccounts.import.qr_code') }}</h5>
|
||||
<!-- scan button that launch camera stream -->
|
||||
<div class="block">
|
||||
<div class="buttons mb-0">
|
||||
<button tabindex="0" class="button is-link is-rounded mr-0" @click="capture()">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'camera']" />
|
||||
</span>
|
||||
<span>{{ $t('twofaccounts.import.scan') }}</span>
|
||||
</button>
|
||||
</p>
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
<span class="p-2 mb-2">{{ $t('commons.or') }}</span>
|
||||
<!-- </div> -->
|
||||
<!-- upload a qr code (with basic file field and backend decoding) -->
|
||||
<!-- <div class="block"> -->
|
||||
<label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="qrcodeInputLabel" @keyup.enter="$refs.qrcodeInputLabel.click()">
|
||||
{{ $t('twofaccounts.import.upload') }}
|
||||
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
|
||||
</label>
|
||||
</div>
|
||||
<field-error :form="uploadForm" field="qrcode" />
|
||||
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
|
||||
</div>
|
||||
<h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
|
||||
<!-- upload a file -->
|
||||
<div class="block mb-6">
|
||||
<label role="button" tabindex="0" class="button is-link is-rounded is-outlined" ref="fileInputLabel" @keyup.enter="$refs.fileInputLabel.click()">
|
||||
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="text/plain,application/json,text/csv,.2fas" v-on:change="submitFile" ref="fileInput">
|
||||
{{ $t('twofaccounts.import.upload') }}
|
||||
</label>
|
||||
<field-error :form="uploadForm" field="file" />
|
||||
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
|
||||
</div>
|
||||
<!-- Supported migration resources -->
|
||||
<h5 class="title is-5 mb-3 has-text-grey-dark">{{ $t('twofaccounts.import.supported_migration_formats') }}</h5>
|
||||
<div class="field is-grouped is-grouped-multiline pt-0">
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">Google Auth</span>
|
||||
<span class="tag is-black">{{ $t('twofaccounts.import.qr_code') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">Aegis Auth</span>
|
||||
<span class="tag is-black">JSON</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">Aegis Auth</span>
|
||||
<span class="tag is-black">{{ $t('twofaccounts.import.plain_text') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-dark">2FAS Auth</span>
|
||||
<span class="tag is-black">JSON</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="is-size-7" v-html="$t('twofaccounts.import.do_not_set_password_or_encryption')"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="(account, index) in exportedAccounts" :key="account.name" class="group-item has-text-light is-size-5 is-size-6-mobile">
|
||||
<div class="is-flex is-justify-content-space-between">
|
||||
<!-- Account name -->
|
||||
<div v-if="account.id > -2 && account.imported !== 0" class="is-flex-grow-1 has-ellipsis is-clickable" @click="previewAccount(index)" :title="$t('twofaccounts.import.generate_a_test_password')">
|
||||
<img v-if="account.icon && $root.appSettings.showAccountsIcons" class="import-icon" :src="'/storage/icons/' + account.icon" :alt="$t('twofaccounts.icon_for_account_x_at_service_y', {account: account.account, service: account.service})">
|
||||
{{ account.account }}
|
||||
</div>
|
||||
<div v-else class="is-flex-grow-1 has-ellipsis">{{ account.account }}</div>
|
||||
<!-- buttons -->
|
||||
<div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
|
||||
<!-- discard button -->
|
||||
<button class="button tag is-dark has-text-grey-light" @click="discardAccount(index)" :title="$t('twofaccounts.import.discard_this_account')">
|
||||
<font-awesome-icon :icon="['fas', 'trash']" />
|
||||
</button>
|
||||
<!-- import button -->
|
||||
<button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)" :title="$t('twofaccounts.import.import_this_account')">
|
||||
{{ $t('twofaccounts.import.to_import') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- result label -->
|
||||
<div v-else class="has-nowrap">
|
||||
<span v-if="account.imported === 1" class="has-text-success">
|
||||
{{ $t('twofaccounts.import.imported') }} <font-awesome-icon :icon="['fas', 'check']" />
|
||||
</span>
|
||||
<span v-else class="has-text-danger">
|
||||
{{ $t('twofaccounts.import.failure') }} <font-awesome-icon :icon="['fas', 'times']" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-size-6 is-size-7-mobile">
|
||||
<!-- service name -->
|
||||
<div class="is-family-primary has-text-grey">{{ $t('twofaccounts.import.issuer') }}: {{ account.service }}</div>
|
||||
<!-- reasons to invalid G-Auth data -->
|
||||
<div v-if="account.id === -2" class="has-text-danger">
|
||||
<font-awesome-icon class="mr-1" :icon="['fas', 'times-circle']" />{{ account.secret }}
|
||||
</div>
|
||||
<!-- possible duplicates -->
|
||||
<div v-if="account.id === -1 && account.imported !== 1 && !account.errors" class="has-text-warning">
|
||||
<font-awesome-icon class="mr-1" :icon="['fas', 'exclamation-circle']" />{{ $t('twofaccounts.import.possible_duplicate') }}
|
||||
</div>
|
||||
<!-- errors during account creation -->
|
||||
<ul v-if="account.errors">
|
||||
<li v-for="(error) in account.errors" :key="error" class="has-text-danger">{{ error }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- discard links -->
|
||||
<div v-if="importableCount > 0" class="mt-2 is-size-7 is-pulled-right">
|
||||
<button v-if="duplicateCount" @click="discardDuplicates()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</button>
|
||||
<button @click="discardAccounts()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
|
||||
</div>
|
||||
<div v-if="importedCount == exportedAccounts.length" class="mt-2 is-size-7 is-pulled-right">
|
||||
<button @click="exportedAccounts = []" class="has-text-grey button is-small is-ghost">{{ $t('commons.clear') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isFetching && exportedAccounts.length === 0" class="has-text-centered">
|
||||
<span class="is-size-4">
|
||||
<font-awesome-icon :icon="['fas', 'spinner']" spin />
|
||||
</span>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<vue-footer :showButtons="true">
|
||||
<!-- Import all button -->
|
||||
<p class="control" v-if="importableCount > 0">
|
||||
<button class="button is-link is-rounded is-focus" @click="createAccounts">
|
||||
<span>{{ $t('twofaccounts.import.import_all') }} ({{importableCount}})</span>
|
||||
<!-- <span class="icon is-small">
|
||||
<font-awesome-icon :icon="['fas', 'qrcode']" />
|
||||
</span> -->
|
||||
</button>
|
||||
</p>
|
||||
<!-- close button -->
|
||||
<p class="control">
|
||||
<router-link :to="{ name: 'accounts', params: { toRefresh: true } }" class="button is-dark is-rounded" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></router-link>
|
||||
</p>
|
||||
</vue-footer>
|
||||
</responsive-width-wrapper>
|
||||
<!-- modal -->
|
||||
<modal v-model="ShowTwofaccountInModal">
|
||||
<otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user