Unable to generate and view random characters in framework7

Wappler General How To
#1

Hey everyone,

I want to create an user registration form. Where when a user inputs his email address an OTP should be set and send to his email address to validate it’s correct or fake. I’m using javascript to generate code. It’s working on web project (bootstrap) but not in mobile project (framework7).

This is page

<div class="page" data-name="secure-random">
  <div class="navbar navbar-large no-border no-shadow no-hairline navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="link back"><i class="icon icon-back"></i>
        </a>
      </div>
      <div class="title sliding">Create Account</div>
      <div class="right"></div>
      <div class="title-large">
        <div class="title-large-text">Register Yourself</div>
      </div>
    </div>
  </div>
  <div class="page-content wappler-block">
    
    <div class="block">
      <h2>Step &bull; 01</h2>
      <p>Enter your valid email address here. System will send an email containing an OTP to validate your email address.</p>
    </div>
    <form id="reg_form" is="dmx-serverconnect-form" method="post">
      <div class="list no-hairlines">
        <ul>
          <li class="item-content item-input item-input-outline">
            <div class="item-inner">
              <div class="item-title item-floating-label">Email</div>
              <div class="item-input-wrap">
                <input type="email" name="Email" placeholder="Enter your email here">
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-inner">
              <div class="item-title item-floating-label">OTP</div>
              <div class="item-input-wrap">
                <input type="text" id="secureRandomStringInput" readonly>
                <span class="input-clear-button"></span>
              </div>
            </div>
          </li>
          <li>

            <button class="button" id="generateButton" >Generate Secure String</button>
          </li>
          <li class="item-content item-input item-input-outline">
            <div class="item-inner">
              <button type="submit" class="item-link list-button button button-primary button-raised button-fill text- text-color-white">Send OTP</button>
            </div>
          </li>
        </ul>
      </div>
    </form>
  </div>
</div>

This is app.js file

// Dom7
var $ = Dom7;

// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
  theme = document.location.search.split('theme=')[1].split('&')[0];
}

// Init App
var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  on: {
    pageMounted: function (page) {
      if (window.dmx && dmx.app) {
        dmx.app.$parse(page.el);
        dmx.app.$update();
      }
    }
  },
  routes: window.routes ? window.routes : [],
  popup: {
    closeOnEscape: true,
  },
  sheet: {
    closeOnEscape: true,
  },
  popover: {
    closeOnEscape: true,
  },
  actions: {
    closeOnEscape: true,
  }
});

if (document.querySelector('.view-main')) {
  var mainView = app.views.create('.view-main');
}

$$(document).on('page:init', '.page[data-name="secure-random"]', function (e) {
  // Function to generate a secure random string
  function generateSecureRandomString(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const cryptoRandomValues = new Uint32Array(length);
    const randomStringArray = [];

    // Generate secure random values
    crypto.getRandomValues(cryptoRandomValues);

    // Convert random values to characters
    for (let i = 0; i < length; i++) {
      const randomIndex = cryptoRandomValues[i] % characters.length;
      randomStringArray.push(characters.charAt(randomIndex));
    }

    return randomStringArray.join('');
  }

  // Event handler for the "Generate Secure String" button
  $$(e.target).find('#generateButton').on('click', function () {
    const secureRandomString = generateSecureRandomString(6);
    $$(e.target).find('#secureRandomStringInput').val(secureRandomString);
  });
});