feat(app): add input-otp demo (#96)

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

src/components.d.ts

@@ -50,6 +50,8 @@ export namespace Components {
     }
     interface ComponentInput {
     }
+    interface ComponentInputOtp {
+    }
     interface ComponentItem {
     }
     interface ComponentItemGroup {
@@ -240,6 +242,12 @@ declare global {
         prototype: HTMLComponentInputElement;
         new (): HTMLComponentInputElement;
     };
+    interface HTMLComponentInputOtpElement extends Components.ComponentInputOtp, HTMLStencilElement {
+    }
+    var HTMLComponentInputOtpElement: {
+        prototype: HTMLComponentInputOtpElement;
+        new (): HTMLComponentInputOtpElement;
+    };
     interface HTMLComponentItemElement extends Components.ComponentItem, HTMLStencilElement {
     }
     var HTMLComponentItemElement: {
@@ -448,6 +456,7 @@ declare global {
         "component-icons": HTMLComponentIconsElement;
         "component-infinite-scroll": HTMLComponentInfiniteScrollElement;
         "component-input": HTMLComponentInputElement;
+        "component-input-otp": HTMLComponentInputOtpElement;
         "component-item": HTMLComponentItemElement;
         "component-item-group": HTMLComponentItemGroupElement;
         "component-list": HTMLComponentListElement;
@@ -526,6 +535,8 @@ declare namespace LocalJSX {
     }
     interface ComponentInput {
     }
+    interface ComponentInputOtp {
+    }
     interface ComponentItem {
     }
     interface ComponentItemGroup {
@@ -610,6 +621,7 @@ declare namespace LocalJSX {
         "component-icons": ComponentIcons;
         "component-infinite-scroll": ComponentInfiniteScroll;
         "component-input": ComponentInput;
+        "component-input-otp": ComponentInputOtp;
         "component-item": ComponentItem;
         "component-item-group": ComponentItemGroup;
         "component-list": ComponentList;
@@ -668,6 +680,7 @@ declare module "@stencil/core" {
             "component-icons": LocalJSX.ComponentIcons & JSXBase.HTMLAttributes<HTMLComponentIconsElement>;
             "component-infinite-scroll": LocalJSX.ComponentInfiniteScroll & JSXBase.HTMLAttributes<HTMLComponentInfiniteScrollElement>;
             "component-input": LocalJSX.ComponentInput & JSXBase.HTMLAttributes<HTMLComponentInputElement>;
+            "component-input-otp": LocalJSX.ComponentInputOtp & JSXBase.HTMLAttributes<HTMLComponentInputOtpElement>;
             "component-item": LocalJSX.ComponentItem & JSXBase.HTMLAttributes<HTMLComponentItemElement>;
             "component-item-group": LocalJSX.ComponentItemGroup & JSXBase.HTMLAttributes<HTMLComponentItemGroupElement>;
             "component-list": LocalJSX.ComponentList & JSXBase.HTMLAttributes<HTMLComponentListElement>;

src/components/input-otp/input-otp.css

@@ -0,0 +1,72 @@
+import { Component, h, State } from '@stencil/core';
+import { toastController } from '@ionic/core';
+
+@Component({
+  tag: 'component-input-otp',
+  styleUrl: 'input-otp.css'
+})
+export class InputOtp {
+  otpRef: any;
+
+  @State() otpValue: string = '';
+
+  setFocus = () => {
+    this.otpRef?.setFocus();
+  }
+
+  componentDidLoad() {
+    this.setFocus();
+  }
+
+  handleOtpComplete = async (event: CustomEvent) => {
+    const otp = event.detail.value;
+
+    const toast = await toastController.create({
+      message: `Entered OTP: ${otp}`,
+      duration: 1000,
+      position: 'bottom'
+    });
+
+    await toast.present();
+    await toast.onDidDismiss();
+    this.reset();
+  }
+
+  reset = () => {
+    if (this.otpRef) {
+      this.otpRef.value = '';
+    }
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }
+
+  render() {
+    return [
+      <ion-header translucent={true}>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button defaultHref="/"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Input OTP</ion-title>
+        </ion-toolbar>
+      </ion-header>,
+
+      <ion-content>
+        <div class="ion-padding ion-text-center">
+          <h2>Enter Verification Code</h2>
+          <p>Please enter the 4-digit code sent to your device</p>
+
+          <ion-input-otp
+            ref={el => (this.otpRef = el)}
+            onIonComplete={this.handleOtpComplete}
+            separators="2"
+            class="ion-margin-top"
+          >
+            Didn't get the code? <a onClick={() => this.setFocus()}>Resend Code</a>
+          </ion-input-otp>
+        </div>
+      </ion-content>,
+    ];
+  }
+}

src/components/input-otp/input-otp.tsx

@@ -12,7 +12,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
 
-  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-title" content="Ionic PWA">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 

src/index.html

@@ -17,6 +17,7 @@ export const getComponents = () => {
     { name: 'Icons', icon: '/assets/component-icon.svg', id: 'icons' },
     { name: 'Infinite Scroll', icon: '/assets/component-icon.svg', id: 'infinite-scroll' },
     { name: 'Input', icon: '/assets/component-icon.svg', id: 'input' },
+    { name: 'Input OTP', icon: '/assets/component-icon.svg', id: 'input-otp' },
     { name: 'Item', icon: '/assets/component-icon.svg', id: 'item' },
     { name: 'Item Group', icon: '/assets/component-icon.svg', id: 'item-group' },
     { name: 'List', icon: '/assets/component-icon.svg', id: 'list' },