mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-12-11 01:30:42 +01:00
300 lines
9.4 KiB
Vue
300 lines
9.4 KiB
Vue
<script setup>
|
|
import Spinner from '@/components/Spinner.vue'
|
|
import TotpLooper from '@/components/TotpLooper.vue'
|
|
import Dots from '@/components/Dots.vue'
|
|
import twofaccountService from '@/services/twofaccountService'
|
|
import { useUserStore } from '@/stores/user'
|
|
import { UseColorMode } from '@vueuse/components'
|
|
import { useDisplayablePassword } from '@/composables/helpers'
|
|
|
|
const user = useUserStore()
|
|
const $2fauth = inject('2fauth')
|
|
const { copy, copied } = useClipboard({ legacy: true })
|
|
|
|
const emit = defineEmits(['please-close-me', 'increment-hotp', 'validation-error'])
|
|
const props = defineProps({
|
|
otp_type : String,
|
|
account : String,
|
|
service : String,
|
|
icon : String,
|
|
secret : String,
|
|
digits : Number,
|
|
algorithm : String,
|
|
period : null,
|
|
counter : null,
|
|
image : String,
|
|
qrcode : null,
|
|
uri : String
|
|
})
|
|
|
|
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,
|
|
period : null,
|
|
counter : null,
|
|
image : String
|
|
})
|
|
const password = ref('')
|
|
const generated_at = ref(null)
|
|
const hasTOTP = ref(false)
|
|
const showInlineSpinner = ref(false)
|
|
|
|
const dots = ref()
|
|
const totpLooper = ref()
|
|
const otpSpanTag = ref()
|
|
|
|
/***
|
|
*
|
|
*/
|
|
const show = async (accountId) => {
|
|
|
|
// 3 possible cases :
|
|
//
|
|
// Case 1 : When user asks for an otp of an existing account: the ID is provided so we fetch the account data
|
|
// from db but without the uri. This prevent the uri (a sensitive data) to transit via http request unnecessarily.
|
|
// In this case this.otp_type is sent by the backend.
|
|
//
|
|
// Case 2 : When user uses the Quick Uploader and preview the account: No ID but we have an URI.
|
|
//
|
|
// 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
|
|
|
|
setLoadingState()
|
|
|
|
// Case 1
|
|
if (accountId) {
|
|
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
|
|
|
|
if( isHMacBased(data.otp_type) && data.counter ) {
|
|
otpauthParams.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'
|
|
}
|
|
// 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)) {
|
|
notify.error(new Error(trans('errors.not_a_supported_otp_type')))
|
|
}
|
|
|
|
try {
|
|
await getOtp()
|
|
focusOnOTP()
|
|
}
|
|
catch(error) {
|
|
clearOTP()
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Requests and handles a fresh OTP
|
|
*/
|
|
async function getOtp() {
|
|
setLoadingState()
|
|
|
|
getOtpPromise().then(response => {
|
|
let otp = response.data
|
|
password.value = otp.password
|
|
|
|
if(user.preferences.copyOtpOnDisplay) {
|
|
copyOTP(otp.password)
|
|
}
|
|
|
|
if (isTimeBased(otp.otp_type)) {
|
|
generated_at.value = otp.generated_at
|
|
otpauthParams.period = otp.period
|
|
hasTOTP.value = true
|
|
|
|
nextTick().then(() => {
|
|
totpLooper.value.startLoop()
|
|
})
|
|
}
|
|
else if (isHMacBased(otp.otp_type)) {
|
|
otpauthParams.counter = otp.counter
|
|
|
|
// returned counter & uri are incremented
|
|
emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
|
|
}
|
|
})
|
|
.catch(error => {
|
|
if (error.response.status === 422) {
|
|
emit('validation-error', error.response)
|
|
}
|
|
throw error
|
|
})
|
|
.finally(() => {
|
|
showInlineSpinner.value = false
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Shows blacked dots and a loading spinner
|
|
*/
|
|
function setLoadingState() {
|
|
showInlineSpinner.value = true
|
|
dots.value.turnOff()
|
|
}
|
|
|
|
/**
|
|
* Returns the appropriate promise to get a fresh OTP from backend
|
|
*/
|
|
function getOtpPromise() {
|
|
if(id.value) {
|
|
return twofaccountService.getOtpById(id.value)
|
|
}
|
|
else if(uri.value) {
|
|
return twofaccountService.getOtpByUri(uri.value)
|
|
}
|
|
else {
|
|
return twofaccountService.getOtpByParams(otpauthParams)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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 = ''
|
|
password.value = '... ...'
|
|
hasTOTP.value = false
|
|
|
|
totpLooper.value?.clearLooper();
|
|
}
|
|
|
|
/**
|
|
* Put focus on the OTP html tag
|
|
*/
|
|
function focusOnOTP() {
|
|
nextTick().then(() => {
|
|
otpSpanTag.value?.focus()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Copies to clipboard and notify
|
|
*
|
|
* @param {string} otp The password to copy
|
|
* @param {*} permit_closing Toggle moddle closing On-Off
|
|
*/
|
|
function copyOTP(otp, permit_closing) {
|
|
copy(otp.replace(/ /g, ''))
|
|
|
|
if (copied) {
|
|
if(user.preferences.kickUserAfter == -1 && (permit_closing || false) === true) {
|
|
user.logout()
|
|
}
|
|
else if(user.preferences.closeOtpOnCopy && (permit_closing || false) === true) {
|
|
emit("please-close-me");
|
|
clearOTP()
|
|
}
|
|
|
|
notify.success({ text: trans('commons.copied_to_clipboard') })
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Checks OTP type is Time based (TOTP)
|
|
*
|
|
* @param {string} otp_type
|
|
*/
|
|
function isTimeBased(otp_type) {
|
|
return (otp_type === 'totp' || otp_type === 'steamtotp')
|
|
}
|
|
|
|
/**
|
|
* Checks OTP type is HMAC based (HOTP)
|
|
*
|
|
* @param {string} otp_type
|
|
*/
|
|
function isHMacBased(otp_type) {
|
|
return otp_type === 'hotp'
|
|
}
|
|
|
|
/**
|
|
* Turns dots On from the first one to the provided one
|
|
*/
|
|
function turnDotOn(dotIndex) {
|
|
dots.value.turnOn(dotIndex)
|
|
}
|
|
|
|
defineExpose({
|
|
show,
|
|
clearOTP
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<figure class="image is-64x64" :class="{ 'no-icon': !otpauthParams.icon }" style="display: inline-block">
|
|
<img :src="$2fauth.config.subdirectory + '/storage/icons/' + otpauthParams.icon" v-if="otpauthParams.icon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
|
|
</figure>
|
|
<UseColorMode v-slot="{ mode }">
|
|
<p class="is-size-4 has-ellipsis" :class="mode == 'dark' ? 'has-text-grey-light' : 'has-text-grey'">{{ otpauthParams.service }}</p>
|
|
<p class="is-size-6 has-ellipsis" :class="mode == 'dark' ? 'has-text-grey' : 'has-text-grey-light'">{{ otpauthParams.account }}</p>
|
|
<p>
|
|
<span
|
|
v-if="!showInlineSpinner"
|
|
id="otp"
|
|
role="log"
|
|
ref="otpSpanTag"
|
|
tabindex="0"
|
|
class="otp is-size-1 is-clickable px-3"
|
|
:class="mode == 'dark' ? 'has-text-white' : 'has-text-grey-dark'"
|
|
@click="copyOTP(password, true)"
|
|
@keyup.enter="copyOTP(password, true)"
|
|
:title="$t('commons.copy_to_clipboard')"
|
|
>
|
|
{{ useDisplayablePassword(password) }}
|
|
</span>
|
|
<span v-else tabindex="0" class="otp is-size-1">
|
|
<Spinner :isVisible="showInlineSpinner" :type="'raw'" />
|
|
</span>
|
|
</p>
|
|
</UseColorMode>
|
|
<Dots v-show="isTimeBased(otpauthParams.otp_type)" ref="dots"></Dots>
|
|
<ul v-show="isHMacBased(otpauthParams.otp_type)">
|
|
<li>counter: {{ otpauthParams.counter }}</li>
|
|
</ul>
|
|
<TotpLooper
|
|
v-if="hasTOTP"
|
|
:period="otpauthParams.period"
|
|
:generated_at="generated_at"
|
|
:autostart="false"
|
|
v-on:loop-ended="getOtp()"
|
|
v-on:loop-started="turnDotOn($event)"
|
|
v-on:stepped-up="turnDotOn($event)"
|
|
ref="totpLooper"
|
|
></TotpLooper>
|
|
</div>
|
|
</template>
|