No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Anyone built a Pin Pad Component?

    Framework
    3
    8
    2183
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dgk last edited by 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

      1 Reply Last reply Reply Quote 0
      • a47ae
        a47ae last edited by

        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.

        1 Reply Last reply Reply Quote 1
        • S
          spectrolite last edited by spectrolite

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

          1 Reply Last reply Reply Quote 1
          • D
            dgk last edited by

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

            1 Reply Last reply Reply Quote 0
            • D
              dgk last edited by 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.

              1 Reply Last reply Reply Quote 0
              • a47ae
                a47ae last edited by

                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

                1 Reply Last reply Reply Quote 0
                • D
                  dgk last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • a47ae
                    a47ae last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post