The app lets people signup/log in with the usual OAuth mechanisms such as Google, Facebook, LinkedIn, Microsoft, etc., but also gives an option for people to just signup using their own email & password combination. However, I want to make sure that those emails are legit of course, and so this system generates the 6 digit code, sets a 24 hour expiration and emails it to them.
Then they go through the process in the usual fashion, checking the code, the expiration and so forth. The form behaves just as you would expect, typing in a number and then the field automatically focuses on the one to the right so no tabbing required. Fields highlight upon focus and give a nice experience as one would expect.
It runs through a myriad of error checking of things that could go wrong and alerts the user to them under the Verify button. The whole thing works a treat and integrates very smoothly into my app’s overall workflow.
Another cool example of what you can do with Bubble.
Thanks for sharing. Just wondering why you didn’t want to use Bubble’s built in confirmation feature?
I find it more and more common that websites don’t let you paste the confirmation code into different boxes (truncates after the first number) which is super annoying. Were you able to solve for that?
I didn’t use Bubble’s built in feature because I’ve never used it before and I have a very specific vision of what I wanted and so I just got on with building what I had in my mind. I’ll circle back and learn a little bit more about their solution.
As far as pasting goes, my solution doesn’t allow a 6-digit paste to occur. Each digit needs to be entered manually, and using the Input Formatter plug in, each input can contain no more than 1 character. When a character is typed, a workflow is triggered to set the focus to the next field to the right.
I’m sure if I thought about it, I could come up with a system that would allow a single paste of the 6-digit number and populate the boxes just fine. In fact I could have easily used a single Input to accept the entire paste, but chose this method because it seems to resemble what I’m commonly seeing out there. Always open to ideas though.
I never used the inputter plugin, but off the top of my head, the solution may work something like this:
Don’t set a character limit on the first box (but only allow 1 digit to be viewable) and then on input change →
IF input length = 1 → focus on next box;
ELSE (input length = 6) → extract digits 2-6 and put them in boxes 2-6 and focus on verify button.
I definitely checked out GPT for the regex, it got me close but didn’t nail it. I noticed that sometimes regex formulas will work outside of Bubble, but then within Bubble it doesn’t quite get there without some subtle tweaks.
Nice job and creative solution. I’d potentially be concerned about it being a little too wonky in certain situations (see image ) but this is def functional. Nice!
I just made it fixed width, I think I would just make it fit on a mobile screen and keep it fixed width for that size. That would probably fix it. Does it look better now?
Yeah, I know what you are talking about. I think that is a Bubble issue. I am not even copying any spaces but it is showing up as a space for a moment when pasting.
) but this is def functional. Nice!