WebBuild/wwwroot/tenants/themes/compact/components/register/mobilnewregisteruser.js

var Unibase;
(function (Unibase) {
    let Themes;
    (function (Themes) {
        let Compact;
        (function (Compact) {
            let Components;
            (function (Components) {
                class MobilNewRegisterUser extends Unibase.Platform.Core.BaseComponent {
                    jsFiles() {
                        return ["tenants/themes/compact/index.mobil_anonymous.js", "platform/membership/managers/accountmanager.js", "libs/passwordrequirement/passwordrequirement.js"];
                    }
                    cssFiles() {
                        return ["libs/passwordrequirement/passwordrequirement.css"];
                    }
                    html(id, containerid) {
                        if (jQuery("#external-form").length === 0) {
                            var index = new Components.Index_Mobil_Anonymous();
                            index.init(null);
                        }
                        let html = '';
                        if (($(window).width()) > 1200) {
                            html += `<div class="row h-100"> <div class="col-xl-5"><div class="banner-img-container h-100"><img src="tenants/themes/compact/imgs/mobil-desktop-view-bg.png" alt="img" class="h-100 w-100"> </div> </div> <div class="col-xl-7 desktop-view"> <form class="mt-100" id="frm_RegisterUser"  default="" data-validate="parsley" data-isdynamic="false"> <div id="div_ValidationSummary"></div> <div id="div_RegisterUser"><h1 class="display-4 mb-30 text-dark-100 text-center">Registration</h1>
                    <div class="alert alert-primary d-none">We will send new code to your <a href=""><u>Email or Phone</u></a> to create your password.</div> <div class="form-group"><input class="form-control" required placeholder="Enter Registered Phone Number" id="txt_EmailorPhone" type="text"></div> <div class="form-group floating-label-form-group floating-label-form-group-with-value focus" id="div_TenantsAutoComplete"><select id="ddl_Tenant" class=" form-control value-control" data-isdynamic="false"></select></div><button class="btn text-white btn-block" type="button" id="btn_SendOtp" style="background:#001F5D;">Confirm</button><p class="text-right mt-20"><a href="Index.html#/login">Back to login</a></p></div> <div id="div_CreatePswd" class="d-none"> <h1 class="display-5 mb-30 text-center">Create your Password</h1>
                    <div class="form-group"><label class="form-control" id="lbl_Email"></label></div><div class="form-group"><input class="form-control pr-password " required id="txt_NewPswd" placeholder="New password" type="password"><span toggle="#txt_NewPswd" id="passwordHide" class="fa fa-eye-slash font-15 mr-10 field-icon"></span>
                        <div class="showpwsdreq"></div> </div> <div class="form-group"><input class="form-control" required id="txt_ConfirmPswd" placeholder="Re-enter new password" type="password" autocomplete="new-password"><span toggle="#txt_ConfirmPswd" id="confirmPasswordHide" class="fa fa-eye-slash font-15 mr-10 field-icon"></span></div>
                    <button class="btn text-white btn-block mb-20" disabled="disabled" type="button" id="btn_CreatePswd" style="background:#001F5D;">Create Password</button> <div class="input-group mb-20"><div class="custom-control custom-checkbox col-xs"><input class="custom-control-input" id="InputTermsandConditions" type="checkbox"><label class="custom-control-label font-14" for="InputTermsandConditions">I accept the terms & conditions</label></div></div><p class="text-right"><a href="Index.html#/login">Back to login</a></p></div> <div id="div_SuccessMsg" class="d-none"> <div class="d-62 bg-white rounded-circle mb-10 d-flex align-items-center justify-content-center mx-auto"><i class="fa fa-check font-50 text-success"></i></div> <h1 class="display-4 mb-20 text-center">Password Created Successfully</h1> <p class="text-center"><a href="Index.html#/login">Click here to Login</a></p> </div></form> </div></div>`;
                        }
                        else {
                            html += `<div><form id="frm_RegisterUser" default="" class="p-4 " data-validate="parsley" data-isdynamic="false" style="background: url(tenants/themes/compact/imgs/mobil-background.png) no-repeat;"><div id="div_ValidationSummary" class="position-fixed w-85"></div><div id="div_RegisterUser"> <div class="d-flex flex-column  justify-content-around p-3 mt-4" style="height:100vh"> <div class="form-group-body">  <div class=" mx-auto mb-20"><h1 class="display-4 mb-60 text-white text-center font-weight-bold">Registration</h1></div> <div class="alert alert-primary d-none">We will send new code to your <a href=""><u>Email or Phone</u></a> to create your password.</div><div class="form-group mb-20"><input class="form-control" required autocomplete="off" placeholder="Enter Registered Email or Phone" id="txt_EmailorPhone" type="text"></div><div class="form-group  floating-label-form-group floating-label-form-group-with-value focus" id="div_TenantsAutoComplete"><select id="ddl_Tenant" class="form-control value-control" data-isdynamic="false"></select></div> <p class="text-right "><a href="Index.html#/login" class="text-white">Back to login</a></p> </div> <div class="footer-register"><button class="btn btn-block rounded-10 text-white" type="button" style="background:#001F5D; padding: 10px !important;" id="btn_SendOtp">Confirm</button> </div> </div></div><div id="div_CreatePswd" class="d-none"><div class="d-flex flex-column justify-content-around" style="height: 100vh"> <div class="form-group"> <h1 class="display-5 text-white my-50 font-weight-bold text-center">Create your Password</h1><div class="form-group"><input class="form-control pr-password" required id="txt_NewPswd" placeholder="New password" type="password" autocomplete="new-password"><span toggle="#txt_NewPswd" id="passwordHide" class="fa fa-eye-slash font-15 mr-10 field-icon"></span> <div class="showpwsdreq"></div></div> <div class="form-group"><input class="form-control" required id="txt_ConfirmPswd" placeholder="Re-enter new password" type="password" autocomplete="new-password"><span toggle="#txt_ConfirmPswd" id="confirmPasswordHide" class="fa fa-eye-slash font-15 mr-10 field-icon"></span></div></div> <div class="form-footer"> <button class="btn btn-primary btn-block mb-20 rounded-10" type="button" id="btn_CreatePswd" style="background:#001F5D; padding: 10px !important;">Create Password</button> </div> </div></div> <div id="div_SuccessMsg" class="d-none"> <div class="d-62 bg-white rounded-circle mb-10 d-flex align-items-center justify-content-center mx-auto"><i class="fa fa-check font-50 text-success"></i></div> <h1 class="display-4 mb-20 text-center">Password Created Successfully</h1> <p class="text-center"><a href="Index.html#/login">Click here to Login</a></p></div></form></div>`;
                        }
                        html += `<div id="modal_Otp" class="modal fade hide"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header mt-2 mb-2">  <h5 class="modal-title pull-left">Mobile or Email Verification</h5><button type="button" class="btn btn-primary btn-simple pull-right" data-dismiss="modal" aria-hidden="true">&times;</button></div> <div class="modal-body" id="div_modalbody"> <div class="mb-10"> <p class="lbl_Otp">We have sent OTP on your Mobile Number and Email!</p> </div> <div class="floating-label-form-group mb-2"><input class="form-control" id="txt_Otp" placeholder="Enter Mobile OTP/Email OTP" type="password" autocomplete="new-password"><span toggle="#txt_Otp" id="OtpHide" class="fa fa-eye-slash font-15 mr-10 field-icon"></span></div> </div> <div class="modal-footer mb-2" style="display:block"><button type="button" class="btn btn-primary pull-left" id="btn_ResendOtp">Resend</button><button type="button" class="btn btn-primary pull-right" id="btn_VerifyOtp">Verify</button></div> </div></div></div>`;
                        return html;
                    }
                    load(id, containerid, callback) {
                        this._accountManager = Unibase.Platform.Membership.Managers.AccountManager.Instance();
                        this.loadTenants();
                        jQuery(".preloader-it").delay(500).fadeOut("slow");
                        jQuery("#external-container").delay(500).fadeIn("slow");
                        jQuery("#bizgaze_body").css("background-color", "#f4f6f7");
                        $("#div_modalbody").removeAttr("style");
                        $(".pr-password").click(function () {
                            var signUpPswd = $(".pr-password");
                            signUpPswd.passwordRequirements({
                                numCharacters: 8,
                                useLowercase: true,
                                useUppercase: true,
                                useNumbers: true,
                                useSpecial: true
                            });
                        });
                        $("#passwordHide").click(function () {
                            var input = $('#txt_NewPswd');
                            input.attr('type') == "password" ? input.attr('type', 'text') : input.attr('type', 'password');
                            $("#passwordHide").toggleClass('fa-eye-slash fa-eye');
                        });
                        $("#confirmPasswordHide").click(function () {
                            var input = $('#txt_ConfirmPswd');
                            input.attr('type') == "password" ? input.attr('type', 'text') : input.attr('type', 'password');
                            $('#confirmPasswordHide').toggleClass('fa-eye-slash fa-eye');
                        });
                        $("#OtpHide").click(function () {
                            var input = $('#txt_Otp');
                            input.attr('type') == "password" ? input.attr('type', 'text') : input.attr('type', 'password');
                            $('#OtpHide').toggleClass('fa-eye-slash fa-eye');
                        });
                        $("#txt_EmailorPhone").keypress(function (e) {
                            if (e.which == 13)
                                document.getElementById("btn_SendOtp").click();
                        });
                        $("#txt_Otp").keypress(function (e) {
                            if (e.which == 13)
                                document.getElementById("btn_VerifyOtp").click();
                        });
                        $("#txt_NewPswd,#txt_ConfirmPswd").keypress(function (e) {
                            if (e.which == 13)
                                document.getElementById("btn_CreatePswd").click();
                        });
                        var instance = this;
                        $("#btn_SendOtp").click(function () {
                            instance.validate();
                        });
                        $(".btn_SendOtp").click(function () {
                            instance.validate();
                        });
                        $("#btn_CreatePswd").click(function () {
                            instance.createPassword();
                        });
                        $("#btn_VerifyOtp").click(function () {
                            instance.verifyOtp();
                        });
                        $("#btn_ResendOtp").click(function () {
                            instance.sendOtp(instance.OtpId);
                        });
                        if (callback != null)
                            callback();
                    }
                    loadTenants() {
                        var instance = this;
                        instance._accountManager.getTenants().then(function (response) {
                            var res = response;
                            let cmbLob = document.getElementById('ddl_Tenant');
                            $('#ddl_Tenant').empty();
                            $('#ddl_Tenant').append('<option value=0>Select Tenant</option>');
                            for (var i = 0; i < response.result.length; i++) {
                                var data = response.result[i];
                                var opt = document.createElement("option");
                                var Name = data.tenantName;
                                var id = data.tenantId;
                                opt.text = Name;
                                opt.value = id;
                                cmbLob.append(opt);
                            }
                            if (res.result.filter(x => x.isTemplateDb == false).length == 1) {
                                var Id = $('#ddl_Tenant option[value=' + res.result.filter(x => x.isTemplateDb == false)[0].tenantId + ']');
                                Id.attr("selected", true);
                                $("#ddl_Tenant").prop('disabled', true);
                            }
                        });
                    }
                    validate() {
                        $(".lbl_Otp").text("");
                        $("#txt_Otp").val('');
                        $("#div_ValidationSummary").empty();
                        var phoneOrEmail = $("#txt_EmailorPhone").val();
                        var tenantId = $("#ddl_Tenant option:selected").val();
                        if (phoneOrEmail == "" && tenantId == 0) {
                            MessageHelper.Instance().showError("Please enter Email/Phone and select a Tenant !", "div_ValidationSummary");
                            return false;
                        }
                        if (phoneOrEmail == "") {
                            MessageHelper.Instance().showError("Email or Phone cannot be Empty!", "div_ValidationSummary");
                            return false;
                        }
                        if (tenantId == 0) {
                            MessageHelper.Instance().showError("Please select a Tenant", "div_ValidationSummary");
                            return false;
                        }
                        else {
                            var instance = this;
                            instance._accountManager.getContact(phoneOrEmail, tenantId).then(function (response) {
                                if (response.result != null) {
                                    instance.Email = response.result.emailAddress;
                                    instance.ContactNumber = response.result.phoneNumber;
                                    instance.UserName = response.result.unibaseId;
                                    instance.TenantId = response.result.tenantId;
                                    instance.ContactName = response.result.userName;
                                    $(".lbl_Otp").removeClass('text-danger text-success').text("We have sent OTP on your Mobile Number and Email !");
                                    $("#txt_Otp").val('');
                                    $("#div_ValidationSummary").empty();
                                    instance.sendOtp(0);
                                }
                                else {
                                    MessageHelper.Instance().showError(response.message, "div_ValidationSummary");
                                }
                            });
                        }
                    }
                    sendOtp(IsResend) {
                        var instance = this;
                        $(".preloader-it").fadeIn();
                        var postData = {
                            ContactOrEmail: $("#txt_EmailorPhone").val(),
                            FirstName: instance.ContactName,
                            LastName: "",
                            ContactNumber: "",
                            Email: "",
                            TenantName: "",
                            IsSignup: false,
                            IsForgotPswd: false,
                            IsRegisterUser: true,
                            UnibaseId: instance.UserName,
                            OtpId: IsResend,
                            UserOtp: ""
                        };
                        instance._accountManager.sendOtp(postData).then(function (response) {
                            if (IsResend != 0) {
                                $(".lbl_Otp").text("OTP has been Resent!").removeClass('text-danger', '').addClass('text-success', '');
                            }
                            if (response == 0) {
                                $(".preloader-it").delay(200).fadeOut("slow");
                                MessageHelper.Instance().showError("Some Error has occurred!", 'div_ValidationSummary');
                            }
                            else {
                                instance.OtpId = response;
                                $("#modal_Otp").modal("show");
                                $(".preloader-it").delay(200).fadeOut("slow");
                            }
                        }, function () {
                            $(".preloader-it").delay(200).fadeOut("slow");
                            MessageHelper.Instance().showError("Some Error has occurred!", 'div_ValidationSummary');
                        });
                    }
                    verifyOtp() {
                        var instance = this;
                        if ($("#txt_Otp").val() == "")
                            $(".lbl_Otp").text("Please Enter OTP!").addClass('text-danger', '');
                        else {
                            var postData = {
                                FirstName: "",
                                LastName: "",
                                ContactNumber: "",
                                Email: "",
                                TenantName: "",
                                ContactOrEmail: "",
                                IsForgotPswd: false,
                                IsRegisterUser: false,
                                IsSignup: true,
                                UnibaseId: "",
                                OtpId: instance.OtpId,
                                UserOtp: $("#txt_Otp").val(),
                            };
                            instance._accountManager.verifyOtp(postData).then(function (response) {
                                if (response.code.toString() == "2") {
                                    $(".preloader-it").delay(200).fadeOut("slow");
                                    $(".lbl_Otp").text("Otp Expired, Please click on Resend to get new OTP").addClass('text-danger', '');
                                    $("#txt_Otp").val('');
                                }
                                else if (response.result != null) {
                                    if (response.result.contactConfirmed == false && response.result.emailConfirmed == false) {
                                        $(".preloader-it").delay(200).fadeOut("slow");
                                        $(".lbl_Otp").text("Invalid OTP!").addClass('text-danger', '');
                                        $("#txt_Otp").text('');
                                    }
                                    else {
                                        $(".preloader-it").fadeIn();
                                        $("#div_RegisterUser").addClass('d-none');
                                        $("#modal_Otp").modal("hide");
                                        $(".preloader-it").delay(200).fadeOut("slow");
                                        $("#lbl_Email").text($("#txt_EmailorPhone").val());
                                        $("#div_CreatePswd").removeClass('d-none');
                                    }
                                }
                            });
                        }
                    }
                    createPassword() {
                        var instance = this;
                        $("#div_ValidationSummary").empty();
                        var confirmPassword = $("#txt_ConfirmPswd").val();
                        var password = $("#txt_NewPswd").val();
                        if (password.length == 0 || confirmPassword.length == 0) {
                            MessageHelper.Instance().showError("Password fields cannot be empty!", 'div_ValidationSummary');
                            return false;
                        }
                        if (password.length < 8 || confirmPassword.length < 8) {
                            MessageHelper.Instance().showError("Password must be atleast 8 characters!", 'div_ValidationSummary');
                            return false;
                        }
                        if (password != confirmPassword) {
                            MessageHelper.Instance().showError("New and Confirm Passwords doesn't match!", "div_ValidationSummary");
                            return false;
                        }
                        var password = password;
                        var decimal = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
                        var checkpassword = password.match(decimal) ? true : false;
                        if (checkpassword == false) {
                            $(".pr-password").focus();
                            MessageHelper.Instance().showError("Please Match the Password in requested Format", "div_ValidationSummary");
                            return false;
                        }
                        var postData = {
                            Password: $("#txt_NewPswd").val(),
                            UserName: instance.UserName,
                            Email: instance.Email,
                            ContactNumber: instance.ContactNumber,
                            TenantId: instance.TenantId,
                        };
                        instance._accountManager.registerUser(postData).then(function (response) {
                            if (response.errors == null) {
                                $("#div_CreatePswd").addClass('d-none');
                                $("#div_SuccessMsg").removeClass('d-none');
                                MessageHelper.Instance().showSuccess("Password Created Successfully", 'div_ValidationSummary');
                            }
                            else {
                                $(".preloader-it").delay(200).fadeOut("slow");
                                MessageHelper.Instance().showError(response.errors[0], "div_ValidationSummary");
                            }
                        });
                    }
                    submit() {
                    }
                    static Instance() {
                        return new MobilNewRegisterUser();
                    }
                }
                Components.MobilNewRegisterUser = MobilNewRegisterUser;
            })(Components = Compact.Components || (Compact.Components = {}));
        })(Compact = Themes.Compact || (Themes.Compact = {}));
    })(Themes = Unibase.Themes || (Unibase.Themes = {}));
})(Unibase || (Unibase = {}));