mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-12-23 23:49:53 +01:00
Add Test button to preview OTP before account storage
This commit is contained in:
Bubka
parent
2bc505558b
commit
4263951ef6
@ -6,10 +6,10 @@
|
||||
<p class="is-size-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>
|
||||
<p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>
|
||||
<p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p>
|
||||
<ul class="dots" v-if="internal_type === 'totp'">
|
||||
<ul class="dots" v-if="type === 'totp'">
|
||||
<li v-for="n in 30"></li>
|
||||
</ul>
|
||||
<ul v-else-if="internal_type === 'hotp'">
|
||||
<ul v-else-if="type === 'hotp'">
|
||||
<li>counter: {{ counter }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -22,9 +22,9 @@
|
||||
id: null,
|
||||
internal_service: '',
|
||||
internal_account: '',
|
||||
internal_icon: '',
|
||||
internal_uri: '',
|
||||
internal_type: '',
|
||||
internal_icon: '',
|
||||
type: '',
|
||||
otp : '',
|
||||
timerID: null,
|
||||
position: null,
|
||||
@ -32,64 +32,55 @@
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
setService: {
|
||||
get: function () { return this.internal_service },
|
||||
set: function(value) { this.internal_service = value }
|
||||
},
|
||||
setAccount: {
|
||||
get: function () { return this.internal_account },
|
||||
set: function(value) { this.internal_account = value }
|
||||
},
|
||||
setIcon: {
|
||||
get: function () { return this.internal_icon },
|
||||
set: function(value) { this.internal_icon = value }
|
||||
},
|
||||
setUri: {
|
||||
get: function () { return this.internal_uri },
|
||||
set: function(value) { this.internal_uri = value }
|
||||
},
|
||||
setType: {
|
||||
get: function () { return this.internal_type },
|
||||
set: function(value) { this.internal_type = value }
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
service: '',
|
||||
account: '',
|
||||
uri : '',
|
||||
type: '',
|
||||
icon: ''
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
if( this.uri && this.type ) {
|
||||
|
||||
this.setService = this.service
|
||||
this.setAccount = this.account
|
||||
this.setUri = this.uri
|
||||
this.setType = this.type
|
||||
|
||||
this.internal_type === 'totp' ? this.getTOTP() : this.getHOTP()
|
||||
}
|
||||
this.showAccount()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async getAccount(id) {
|
||||
async showAccount(id) {
|
||||
|
||||
// 2 possible cases :
|
||||
// - 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.type is send by the backend.
|
||||
// - an URI has been set in $parent because we need to preview some OTP before storing the account.
|
||||
// So this.type is set on client side from the provided URI
|
||||
|
||||
this.id = id
|
||||
|
||||
const { data } = await this.axios.get('api/twofaccounts/' + this.id)
|
||||
if( this.id || this.uri ) {
|
||||
if( this.id ) {
|
||||
|
||||
this.setService = data.service
|
||||
this.setAccount = data.account
|
||||
this.setIcon = data.icon
|
||||
this.setType = data.type
|
||||
const { data } = await this.axios.get('api/twofaccounts/' + this.id)
|
||||
|
||||
this.internal_type === 'totp' ? await this.getTOTP() : await this.getHOTP()
|
||||
this.$parent.isActive = true
|
||||
|
||||
this.internal_service = data.service
|
||||
this.internal_account = data.account
|
||||
this.internal_icon = data.icon
|
||||
this.type = data.type
|
||||
}
|
||||
else {
|
||||
|
||||
this.internal_service = this.service
|
||||
this.internal_account = this.account
|
||||
this.internal_icon = this.icon
|
||||
this.internal_uri = this.uri
|
||||
}
|
||||
|
||||
if( !this.type ) {
|
||||
this.type = this.internal_uri.slice(0, 15 ) === "otpauth://totp/" ? 'totp' : 'hotp';
|
||||
}
|
||||
|
||||
this.type === 'totp' ? await this.getTOTP() : await this.getHOTP()
|
||||
this.$parent.isActive = true
|
||||
}
|
||||
},
|
||||
|
||||
getTOTP: function() {
|
||||
@ -135,7 +126,7 @@
|
||||
|
||||
getHOTP: function() {
|
||||
|
||||
this.axios.get('api/twofaccounts/otp', {data: this.id ? this.id : this.internal_uri }).then(response => {
|
||||
this.axios.post('api/twofaccounts/otp', {data: this.id ? this.id : this.internal_uri }).then(response => {
|
||||
let spacePosition = Math.ceil(response.data.otp.length / 2);
|
||||
|
||||
this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);
|
||||
@ -146,7 +137,7 @@
|
||||
clearOTP: function() {
|
||||
this.stopLoop()
|
||||
this.id = this.timerID = this.position = this.counter = null
|
||||
this.service = this.account = this.icon = this.type = ''
|
||||
this.internal_service = this.internal_account = this.internal_icon = this.internal_uri = ''
|
||||
this.otp = '... ...'
|
||||
this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
|
||||
this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);
|
||||
|
||||
9
resources/js/langs/locales.js
vendored
9
resources/js/langs/locales.js
vendored
@ -45,7 +45,7 @@ export default {
|
||||
"refresh": "refresh",
|
||||
"please": "Please ",
|
||||
"response": {
|
||||
"no_valid_totp": "No valid TOTP resource in this QR code"
|
||||
"no_valid_otp": "No valid OTP resource in this QR code"
|
||||
},
|
||||
"something_wrong_with_server": "Something is wrong with your server",
|
||||
"Unable_to_decrypt_uri": "Unable to decrypt uri",
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
},
|
||||
"new_account": "New account",
|
||||
"edit_account": "Edit account",
|
||||
"totp_uri": "TOTP Uri",
|
||||
"otp_uri": "OTP Uri",
|
||||
"hotp_counter": "HOTP Counter",
|
||||
"use_qrcode": {
|
||||
"val": "Use a qrcode",
|
||||
@ -98,7 +98,8 @@ export default {
|
||||
},
|
||||
"choose_image": "Choose an image…",
|
||||
"create": "Create",
|
||||
"save": "Save"
|
||||
"save": "Save",
|
||||
"test": "Test"
|
||||
},
|
||||
"confirm": {
|
||||
"delete": "Are you sure you want to delete this account?",
|
||||
@ -220,7 +221,7 @@ export default {
|
||||
"image": "Supported format are jpeg, png, bmp, gif, svg, or webp"
|
||||
},
|
||||
"uri": {
|
||||
"starts_with": "Only valid TOTP uri are supported"
|
||||
"starts_with": "Only valid OTP uri are supported"
|
||||
},
|
||||
"email": {
|
||||
"exists": "No account found using this email"
|
||||
|
||||
@ -221,13 +221,7 @@
|
||||
},
|
||||
|
||||
showAccount(id) {
|
||||
if( id ) {
|
||||
this.$refs.TwofaccountShow.getAccount(id)
|
||||
}
|
||||
else {
|
||||
let err = new Error("Id missing")
|
||||
this.$router.push({ name: 'genericError', params: { err: err } });
|
||||
}
|
||||
this.$refs.TwofaccountShow.showAccount(id)
|
||||
},
|
||||
|
||||
deleteAccount: function (id) {
|
||||
|
||||
@ -11,8 +11,7 @@
|
||||
<twofaccount-show ref="TwofaccountShow"
|
||||
:service="form.service"
|
||||
:account="form.account"
|
||||
:uri="form.uri"
|
||||
:type="form.type">
|
||||
:uri="form.uri">
|
||||
</twofaccount-show>
|
||||
</div>
|
||||
</div>
|
||||
@ -106,16 +105,29 @@
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.create') }}</v-button>
|
||||
</div>
|
||||
<div class="control" v-if="form.uri">
|
||||
<button type="button" class="button is-success" @click="previewAccount">{{ $t('twofaccounts.forms.test') }}</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- modal -->
|
||||
<modal v-model="ShowTwofaccountInModal">
|
||||
<twofaccount-show ref="TwofaccountPreview"
|
||||
:service="form.service"
|
||||
:account="form.account"
|
||||
:uri="form.uri"
|
||||
:icon="tempIcon">
|
||||
</twofaccount-show>
|
||||
</modal>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Modal from '../../components/Modal'
|
||||
import Form from './../../components/Form'
|
||||
import TwofaccountShow from '../../components/TwofaccountShow'
|
||||
|
||||
@ -123,6 +135,7 @@
|
||||
data() {
|
||||
return {
|
||||
isQuickForm: false,
|
||||
ShowTwofaccountInModal : false,
|
||||
uriIsLocked: true,
|
||||
tempIcon: '',
|
||||
form: new Form({
|
||||
@ -130,7 +143,6 @@
|
||||
account: '',
|
||||
uri: '',
|
||||
icon: '',
|
||||
type: '',
|
||||
qrcode: null
|
||||
})
|
||||
}
|
||||
@ -139,9 +151,9 @@
|
||||
watch: {
|
||||
tempIcon: function(val) {
|
||||
if( this.isQuickForm ) {
|
||||
this.$refs.TwofaccountShow.setIcon = val
|
||||
this.$refs.TwofaccountShow.internal_icon = val
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
@ -149,12 +161,17 @@
|
||||
|
||||
this.isQuickForm = true
|
||||
this.form.fill(this.$route.params.qrAccount)
|
||||
this.form.type = this.form.uri.slice(0, 15 ) === "otpauth://totp/" ? 'totp' : 'hotp';
|
||||
|
||||
}
|
||||
|
||||
// stop OTP generation on modal close
|
||||
this.$on('modalClose', function() {
|
||||
this.$refs.TwofaccountPreview.clearOTP()
|
||||
});
|
||||
},
|
||||
|
||||
components: {
|
||||
Modal,
|
||||
TwofaccountShow,
|
||||
},
|
||||
|
||||
@ -172,6 +189,13 @@
|
||||
|
||||
},
|
||||
|
||||
previewAccount() {
|
||||
// preview is possible only if we have an uri
|
||||
if( this.form.uri ) {
|
||||
this.$refs.TwofaccountPreview.showAccount()
|
||||
}
|
||||
},
|
||||
|
||||
cancelCreation: function() {
|
||||
|
||||
if( this.form.service && this.form.uri ) {
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
'choose_image' => 'Choose an image…',
|
||||
'create' => 'Create',
|
||||
'save' => 'Save',
|
||||
'test' => 'Test',
|
||||
],
|
||||
'confirm' => [
|
||||
'delete' => 'Are you sure you want to delete this account?',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user