Anyone built a Pin Pad Component?

dgk

Anyone put together a pin pad component using Quasar components? Just asking before I put in the time myself.

see also http://forum.quasar-framework.org/topic/673/make-own-component-from-quasar-component

a47ae

I already answered in the other thread, but I can go into detail about the simple component I wrote there.

<template>
    <div>
        <div v-for="row in 3" class="row justify-center">
            <div v-for="col in 3" class="col-auto">
                <q-btn @click="handleClick((row-1)*3 + col)" :disabled="disabled">
                    {{ (row-1)*3 + col }}
                </q-btn>
            </div>
        </div>
        <q-input v-model="pin" clearable placeholder="PIN" class="pin-input"/>
    </div>
</template>

<script>
  import { QBtn, QInput, Toast } from 'quasar'

  const PIN_LENGT = 4
  // Just for demo purposes
  const CORRECT_PIN = '1234'

  export default {
    data () {
      return {
        pin: '',
        disabled: false
      }
    },
    methods: {
      handleClick (digit) {
        this.pin += digit
      },

      validatePin () {
        if (this.pin === CORRECT_PIN) {
          Toast.create.positive({ html: 'Correct PIN!' })
        } else {
          Toast.create.negative({ html: 'Wrong PIN!' })
        }

        this.reset()
      },

      reset () {
        this.pin = ''
        this.disabled = false
      }
    },
    watch: {
      pin (val) {
        if (val && val.length === PIN_LENGT) {
          this.disabled = true
          this.validatePin()
        }
      }
    },
    components: { QBtn, QInput }
  }
</script>

<style>
    .pin-input {
        width: 20%;
        margin: auto;
    }
</style>

This version is a bit extended. I use a loop to create the buttons in a grid, but you could also write down each button manually.
Each button press sends its digit to an event handler, which will concatenate the currently entered pin with the new digit.
I use a watcher to watch the digit and if it reaches a specified length I call a check method.
The check method compares the pin against an expected string (in real life this would probably be an AJAX call to your server) and if the pin is correct shows an appropriate Toast message. In either case, the pin pad gets reset.
This is a very simple solution, but you should be able to customize it to your needs.

spectrolite

the detailed method and explanation is here http://forum.quasar-framework.org/topic/696/how-to-building-components-with-quasar
thanks again @a47ae

dgk

@a47ae Thanks for you post. When give it a spin I’ll report back and share any improvements or new features.

dgk

@a47ae The code works great thx.

@rstoenescu I would like to add the pin pad as an option to the the Dialog component but am having a hard time tracking down the .14beta source code. The repo only has the distribution code which is uglified/minified. I’d do it as a PR if I knew which repo/branch to fork.

a47ae

Great to hear that it works as expected
You can finde the source code for Quasar in its Github repository right here: https://github.com/quasarframework/quasar

dgk

it was the beta source code I couldn’t identify/find but I just noticed that @rstoenescu has released the beta as .14 so now source for that is easily found/identified.

a47ae

The latest beta version also is equivalent to the dev branch most of the time.

No More Posting New Topics!

Anyone built a Pin Pad Component?