Wappler_Access/views/registration.ejs

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="registration" appConnect="local" components="{dmxValidator:{},dmxBrowser:{},dmxBootstrap5Alert:{},dmxNotifications:{}}" -->
<dmx-notifications id="notifies1"></dmx-notifications>
<div is="dmx-browser" id="browser1"></div>
<dmx-serverconnect id="conn_regcode" url="/api/Users/regcode"></dmx-serverconnect>
<meta name="ac:route" content="/registration">
<div class="container">
    <form id="register1" is="dmx-serverconnect-form" method="post" action="/api/Users/registration" dmx-on:success="notifies1.success('success')" dmx-on:unauthorized="notifies1.danger('Unauthorized')">
        <input id="inp_username" name="username" type="hidden" class="form-control">
        <input id="inp_userid" name="userid" type="hidden" class="form-control" dmx-bind:value="conn_regcode.data.regcode">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-8 col-xl-6">
                <div class="row">
                    <div class="col text-center">
                        <h1>Register</h1>
                        <p class="text-h3">Enter your registration details below.</p>
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col mt-4">
                        <input type="text" id="inp_firstname" name="firstname" class="form-control" placeholder="First Name" required="">
                    </div>
                </div>
                <div class="row align-items-center">
                    <div class="col mt-4">
                        <input type="text" id="inp_lastname" name="lastname" class="form-control" placeholder="Last Name" required="">
                    </div>
                </div>
                <div class="row align-items-center mt-4">
                    <div class="col">
                        <input type="email" id="inp_email" name="email" class="form-control" placeholder="Email" required="" data-rule-email="">
                    </div>
                </div>
                <div class="row align-items-center mt-4">
                    <div class="col">
                        <input type="password" id="inp_password" name="password" class="form-control" placeholder="Password" required="" minlength="8">
                    </div>
                    <div class="col">
                        <input type="password" id="inp_password2" name="password2" class="form-control" placeholder="Confirm Password" data-rule-equalto="password">
                    </div>
                </div>
                <div class="row justify-content-start mt-4">
                    <div class="col">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input" required="">
                                I Read and Accept <a href="#">Terms and Conditions</a>
                            </label>
                        </div>
                        <button id="register1_submit" class="btn mt-4 btn-primary" type="submit">Register</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>