diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-20 23:49:29 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-20 23:49:29 -0500 |
commit | 6cb7da37824d02a1898d08d0f9495c77fde4dd1d (patch) | |
tree | 95e37ea3c20f416d6a205ee4ab050c307b18eafe /front-end/src/components/global/OtpInput.vue |
inital commit
Diffstat (limited to 'front-end/src/components/global/OtpInput.vue')
-rw-r--r-- | front-end/src/components/global/OtpInput.vue | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/front-end/src/components/global/OtpInput.vue b/front-end/src/components/global/OtpInput.vue new file mode 100644 index 0000000..59f6fa1 --- /dev/null +++ b/front-end/src/components/global/OtpInput.vue @@ -0,0 +1,54 @@ +<script setup lang="ts"> +import { toRefs } from 'vue'; +import { IMfaFlowContinuiation, apiCall, useMessage, useWait } from '@vnuge/vnlib.browser'; +import { toSafeInteger } from 'lodash-es'; +import VOtpInput from 'vue3-otp-input'; + +const emit = defineEmits(['clear']) + +const props = defineProps<{ + upgrade: IMfaFlowContinuiation +}>() + +const { upgrade } = toRefs(props) +const { waiting } = useWait(); +const { onInput } = useMessage(); + +const SubimitTotp = (code: string) => { + + //If a request is still pending, do nothing + if (waiting.value) { + return + } + + apiCall(async ({ toaster }) => { + //Submit totp code + const res = await upgrade.value.submit({ code: toSafeInteger(code) }) + res.getResultOrThrow() + + emit('clear') + + // Push a new toast message + toaster.general.success({ + title: 'Success', + text: 'You have been logged in', + }) + }) +} + +</script> + +<template> + <div id="totp-login-form"> + <div class="flex"> + <div class="mx-auto mt-4"> + <VOtpInput class="otp-input" input-type="letter-numeric" :is-disabled="waiting" separator="" + input-classes="primary input rounded" :num-inputs="6" value="" @on-change="onInput" + @on-complete="SubimitTotp" /> + </div> + </div> + </div> +</template> + +<style lang="scss"> +</style>
\ No newline at end of file |