mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-03-15 07:28:30 +01:00
Fix OTP not being displayed on the Import view
This commit is contained in:
Bubka
parent
999e059592
commit
e18653d553
@ -4,10 +4,12 @@
|
||||
import Dots from '@/components/Dots.vue'
|
||||
import twofaccountService from '@/services/twofaccountService'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useNotifyStore } from '@/stores/notify'
|
||||
import { UseColorMode } from '@vueuse/components'
|
||||
import { useDisplayablePassword } from '@/composables/helpers'
|
||||
|
||||
const user = useUserStore()
|
||||
const notify = useNotifyStore()
|
||||
const $2fauth = inject('2fauth')
|
||||
const { copy, copied } = useClipboard({ legacy: true })
|
||||
|
||||
@ -29,17 +31,17 @@
|
||||
|
||||
const id = ref(null)
|
||||
const uri = ref(null)
|
||||
const otpauthParams = reactive({
|
||||
otp_type : String,
|
||||
account : String,
|
||||
service : String,
|
||||
icon : String,
|
||||
secret : String,
|
||||
digits : Number,
|
||||
algorithm : String,
|
||||
const otpauthParams = ref({
|
||||
otp_type : '',
|
||||
account : '',
|
||||
service : '',
|
||||
icon : '',
|
||||
secret : '',
|
||||
digits : null,
|
||||
algorithm : '',
|
||||
period : null,
|
||||
counter : null,
|
||||
image : String
|
||||
image : ''
|
||||
})
|
||||
const password = ref('')
|
||||
const generated_at = ref(null)
|
||||
@ -66,16 +68,15 @@
|
||||
// Case 3 : When user uses the Advanced form and preview the account: We should have all OTP parameter
|
||||
// to obtain an otp, including Secret and otp_type which are required
|
||||
|
||||
otpauthParams.otp_type = props.otp_type
|
||||
otpauthParams.account = props.account
|
||||
otpauthParams.service = props.service
|
||||
otpauthParams.icon = props.icon
|
||||
otpauthParams.secret = props.secret
|
||||
otpauthParams.digits = props.digits
|
||||
otpauthParams.algorithm = props.algorithm
|
||||
otpauthParams.period = props.period
|
||||
otpauthParams.counter = props.counter
|
||||
|
||||
otpauthParams.value.otp_type = props.otp_type
|
||||
otpauthParams.value.account = props.account
|
||||
otpauthParams.value.service = props.service
|
||||
otpauthParams.value.icon = props.icon
|
||||
otpauthParams.value.secret = props.secret
|
||||
otpauthParams.value.digits = props.digits
|
||||
otpauthParams.value.algorithm = props.algorithm
|
||||
otpauthParams.value.period = props.period
|
||||
otpauthParams.value.counter = props.counter
|
||||
setLoadingState()
|
||||
|
||||
// Case 1
|
||||
@ -83,25 +84,25 @@
|
||||
id.value = accountId
|
||||
const { data } = await twofaccountService.get(id.value)
|
||||
|
||||
otpauthParams.service = data.service
|
||||
otpauthParams.account = data.account
|
||||
otpauthParams.icon = data.icon
|
||||
otpauthParams.otp_type = data.otp_type
|
||||
otpauthParams.value.service = data.service
|
||||
otpauthParams.value.account = data.account
|
||||
otpauthParams.value.icon = data.icon
|
||||
otpauthParams.value.otp_type = data.otp_type
|
||||
|
||||
if( isHMacBased(data.otp_type) && data.counter ) {
|
||||
otpauthParams.counter = data.counter
|
||||
otpauthParams.value.counter = data.counter
|
||||
}
|
||||
}
|
||||
// Case 2
|
||||
else if(props.uri) {
|
||||
uri.value = props.uri
|
||||
otpauthParams.otp_type = props.uri.slice(0, 15 ).toLowerCase() === "otpauth://totp/" ? 'totp' : 'hotp'
|
||||
otpauthParams.value.otp_type = props.uri.slice(0, 15 ).toLowerCase() === "otpauth://totp/" ? 'totp' : 'hotp'
|
||||
}
|
||||
// Case 3
|
||||
else if (! props.secret) {
|
||||
notify.error(new Error(trans('errors.cannot_create_otp_without_secret')))
|
||||
}
|
||||
else if (! isTimeBased(otpauthParams.otp_type) && ! isHMacBased(otpauthParams.otp_type)) {
|
||||
else if (! isTimeBased(otpauthParams.value.otp_type) && ! isHMacBased(otpauthParams.value.otp_type)) {
|
||||
notify.error(new Error(trans('errors.not_a_supported_otp_type')))
|
||||
}
|
||||
|
||||
@ -120,7 +121,7 @@
|
||||
async function getOtp() {
|
||||
setLoadingState()
|
||||
|
||||
getOtpPromise().then(response => {
|
||||
await getOtpPromise().then(response => {
|
||||
let otp = response.data
|
||||
password.value = otp.password
|
||||
|
||||
@ -130,7 +131,7 @@
|
||||
|
||||
if (isTimeBased(otp.otp_type)) {
|
||||
generated_at.value = otp.generated_at
|
||||
otpauthParams.period = otp.period
|
||||
otpauthParams.value.period = otp.period
|
||||
hasTOTP.value = true
|
||||
|
||||
nextTick().then(() => {
|
||||
@ -138,7 +139,7 @@
|
||||
})
|
||||
}
|
||||
else if (isHMacBased(otp.otp_type)) {
|
||||
otpauthParams.counter = otp.counter
|
||||
otpauthParams.value.counter = otp.counter
|
||||
|
||||
// returned counter & uri are incremented
|
||||
emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
|
||||
@ -148,7 +149,8 @@
|
||||
if (error.response.status === 422) {
|
||||
emit('validation-error', error.response)
|
||||
}
|
||||
throw error
|
||||
console.log(error)
|
||||
//throw error
|
||||
})
|
||||
.finally(() => {
|
||||
showInlineSpinner.value = false
|
||||
@ -174,7 +176,7 @@
|
||||
return twofaccountService.getOtpByUri(uri.value)
|
||||
}
|
||||
else {
|
||||
return twofaccountService.getOtpByParams(otpauthParams)
|
||||
return twofaccountService.getOtpByParams(otpauthParams.value)
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,8 +184,8 @@
|
||||
* Reset component's refs
|
||||
*/
|
||||
function clearOTP() {
|
||||
id.value = otpauthParams.counter = generated_at.value = null
|
||||
otpauthParams.service = otpauthParams.account = otpauthParams.icon = otpauthParams.otp_type = otpauthParams.secret = ''
|
||||
id.value = otpauthParams.value.counter = generated_at.value = null
|
||||
otpauthParams.value.service = otpauthParams.value.account = otpauthParams.value.icon = otpauthParams.value.otp_type = otpauthParams.value.secret = ''
|
||||
password.value = '... ...'
|
||||
hasTOTP.value = false
|
||||
|
||||
|
||||
@ -5,13 +5,14 @@
|
||||
import { useNotifyStore } from '@/stores/notify'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useBusStore } from '@/stores/bus'
|
||||
import { useTwofaccounts } from '@/stores/twofaccounts'
|
||||
import { UseColorMode } from '@vueuse/components'
|
||||
|
||||
const $2fauth = inject('2fauth')
|
||||
const notify = useNotifyStore()
|
||||
const user = useUserStore()
|
||||
const bus = useBusStore()
|
||||
const router = useRouter()
|
||||
const twofaccounts = useTwofaccounts()
|
||||
const otpDisplay = ref(null)
|
||||
const fileInput = ref(null)
|
||||
const fileInputLabel = ref(null)
|
||||
@ -28,6 +29,14 @@
|
||||
counter: null,
|
||||
period: null,
|
||||
}))
|
||||
const fileForm = new Form({
|
||||
file: null,
|
||||
withSecret: true
|
||||
})
|
||||
const qrcodeForm = new Form({
|
||||
qrcode: null,
|
||||
withSecret: true
|
||||
})
|
||||
const showTwofaccountInModal = ref(false)
|
||||
const supportedSources = [
|
||||
{app: '2FAuth', format: 'JSON'},
|
||||
@ -132,13 +141,14 @@
|
||||
* Stores the provided account
|
||||
*/
|
||||
async function createAccount(accountIndex) {
|
||||
let twofaccount = exportedAccounts.value[accountIndex]
|
||||
mapAccountToForm(twofaccount)
|
||||
form.fill(exportedAccounts.value[accountIndex])
|
||||
|
||||
await form.post('/api/v1/twofaccounts', {returnError: true})
|
||||
.then(response => {
|
||||
exportedAccounts.value[accountIndex].imported = 1
|
||||
exportedAccounts.value[accountIndex].id = response.data.id
|
||||
delete response.data.secret
|
||||
twofaccounts.items.push(response.data)
|
||||
})
|
||||
.catch(error => {
|
||||
exportedAccounts.value[accountIndex].imported = 0
|
||||
@ -151,34 +161,14 @@
|
||||
* Generates a fresh OTP password and displays it
|
||||
*/
|
||||
function previewAccount(accountIndex) {
|
||||
mapAccountToForm(exportedAccounts.value[accountIndex])
|
||||
.then(() => {
|
||||
// this.$refs.OtpDisplayForAdvancedForm.$forceUpdate()
|
||||
otpDisplay.value?.show()
|
||||
form.fill(exportedAccounts.value[accountIndex])
|
||||
showTwofaccountInModal.value = true
|
||||
|
||||
nextTick().then(() => {
|
||||
otpDisplay.value.show()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps account field with the Form object
|
||||
*/
|
||||
function mapAccountToForm(twofaccount) {
|
||||
form.account = twofaccount.account
|
||||
form.service = twofaccount.service
|
||||
form.otp_type = twofaccount.otp_type
|
||||
form.icon = twofaccount.icon
|
||||
form.secret = twofaccount.secret
|
||||
form.algorithm = twofaccount.algorithm
|
||||
form.digits = twofaccount.digits
|
||||
form.counter = twofaccount.otp_type === 'hotp' ? twofaccount.counter : null
|
||||
form.period = twofaccount.otp_type === 'totp' ? twofaccount.period : null
|
||||
}
|
||||
|
||||
const fileForm = new Form({
|
||||
file: null,
|
||||
withSecret: true
|
||||
})
|
||||
|
||||
/**
|
||||
* Uploads the submitted file to the backend for parsing
|
||||
*/
|
||||
@ -205,11 +195,6 @@
|
||||
isFetching.value = false
|
||||
}
|
||||
|
||||
const qrcodeForm = new Form({
|
||||
qrcode: null,
|
||||
withSecret: true
|
||||
})
|
||||
|
||||
/**
|
||||
* Uploads the submitted QR code file to the backend for decoding
|
||||
*/
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
'account' => 'Account',
|
||||
'accounts' => 'Accounts',
|
||||
'icon' => 'Icon',
|
||||
'icon_for_account_x_at_service_y' => 'Icon of the {account} account at {service}',
|
||||
'icon_for_account_x_at_service_y' => 'Icon of the :account account at :service',
|
||||
'icon_to_illustrate_the_account' => 'Icon that illustrates the account',
|
||||
'remove_icon' => 'Remove icon',
|
||||
'no_account_here' => 'No 2FA here!',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user