Introducing q-otp: Making OTP Input Convenient

[qertis]

Dear developers,

I am thrilled to introduce a new Quasar extension called q-otp. The purpose of this extension is to provide a convenient and user-friendly OTP (One-Time Password) input for Quasar applications.

We understand that OTP inputs play a crucial role in many applications, especially those that require two-factor authentication or secure verification processes. With q-otp, we aim to simplify the implementation of OTP inputs and enhance the user experience.

We have put a lot of effort into developing q-otp, and we believe it can greatly simplify the implementation of OTP inputs in your Quasar applications. However, we need your help to make it even better.

We invite you to try out q-otp and provide us with your valuable feedback. Whether it's regarding the ease of use, performance, or any suggestions for improvement, your input will be immensely valuable in refining q-otp and making it a valuable tool for the Quasar community.

You can find the q-otp repository on GitHub: link to repository

Light theme

Dark theme:

Best regards,
Denis Baskovsky

[rstoenescu]

Nice! Thanks for sharing with the community.
I'd suggest adding a few screenshots and a demo. This would improve the adoption of your component. Might be a good idea to release it as standalone also (check our "yarn create quasar" > Quasar UI kit) as this will enlarge the audience (devs using our Vite plugin and/or UMD).

[qertis]

For developers who use Vite, I can suggest a simpler way to import a plugin, without even initializing the App Extension:

<script lang="ts" setup>
import QOtp from 'quasar-app-extension-q-otp/src/component/QOtp.vue'
</script>
<template>
  ...
  <QOtp />
  ...
</template>

Ideally, I would like to have the ability to directly import Quasar components through a CDN. For example, using defineAsyncComponent like this:

app.component(
  "QOtp",
  defineAsyncComponent(
    () =>
      import(
        "https://cdn.jsdelivr.net/npm/quasar-app-extension-q-otp@^0.0.3/src/component/QOtp.vue"
      )
  )
);

I tried doing this but found that the functionality of @vue/compiler-sfc doesn't allow for such a mechanism. It seems that it is not capable of rendering TypeScript and SCSS on the fly. I'm eagerly awaiting such a possibility because it would make development easier without relying on the CLI.

[kamasuPaul]

Just wondering. Does it support having 6 input boxes instead of 4

[yusufkandemir]

After a very quick look at the repo, it is possible through the num prop.
https://github.com/qertis/q-otp/blob/master/src/component/QOtp.vue

[dilungasr]

Is it capable of pasting?

[qertis]

Yes. Ctrl+V and PasteEvent

[qertis]

New version - 0.1.0

New design

Validation

Hint and loading props

[KenKenHipolito]

Is this responsive out of the box? Currently having a problem the input are not changing width

This my current config