conextra/public/www/templates/register-modal.html

Conextra for Web Development. Helps create a SPWA (Single-page Progressive Web Application).

<!-- Modal Sign in -->
<div class="modal fade" tabindex="-1" aria-hidden="false">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title h4 text-muted">Register</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body m-3">
                <form autocomplete="on" onsubmit="
    event.preventDefault();
    var newpassword = this.querySelector('#new-password').value, 
        confirm = this.querySelector('#confirm-password').value,
        username = this.querySelector('#username').value,
        name = this.querySelector('#name').value,
        accept = this.querySelector('#accept').checked;
    if (newpassword.length &lt; 6) { UFE?.showAlert('Password must be at least 6 characters long.', 'alert-warning'); return;}
    if (newpassword !== confirm) { UFE?.showAlert('Please check your password.', 'alert-warning'); return; }
    wsUser.create_account(username, newpassword,name);
    UFE?.modalHide();
    ">
                    <div class="row gx-2">
                        <div class="mt-3">
                            <input class="form-control" id="name" required type="text" placeholder="Your name" />
                        </div>
                    </div>
                    <div class="mt-3">
                        <input class="form-control" id="username" name="username" autocomplete="username" required type="email" placeholder="Email address" />
                    </div>
                    <div class="row gx-2">
                        <div class="mt-3 col-sm-6">
                            <input class="form-control" id="new-password" name="new-password" autocomplete="new-password" required type="password" placeholder="Password" />
                        </div>
                        <div class="mt-3 col-sm-6">
                            <input class="form-control" id="confirm-password" name="confirm-password" autocomplete="new-password" required type="password" placeholder="Confirm Password" />
                        </div>
                    </div>
                    <div class="form-check mt-3">
                        <input class="form-check-input" id="accept" required type="checkbox" title="I agree" />
                        <label class="form-label"><span onclick="document.getElementById('accept').checked = !document.getElementById('accept').checked">I accept the </span><a href="/pages/terms.html" target="_blank">terms </a>and <a href="/pages/privacy_policy.html" target="_blank">privacy policy</a></label>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary d-block w-100 mt-3" path="isWsOnline" bind="enabled" onclick="this.blur()">Register</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>