TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{{host_name}} - Register</title>
        <link rel="stylesheet" href="../../script/semantic/semantic.css">
        <script type="application/javascript" src="../../script/jquery.min.js"></script>
        <script type="application/javascript" src="../../script/semantic/semantic.js"></script>
    <style>
        .imageRight{
            width:100%;
        }
    </style>
    </head>
    <body>
        <br><br><br>
        <div class="ui container" align="center">
            <div class="ui basic segment" style="max-width:400px;" align="left">
                <div class="imageRight" align="center">
                    <img class="ui small image" src="data:image/png;base64, {{vendor_logo}}"></img>
                </div>
                <div class="ui divider"></div>
                <div class="ui text container">
                    <p>Register your account on {{host_name}}</p>
                </div>
                <div class="ui divider"></div>
                <form class="ui form" onsubmit="handleFormSubmit(event, this);">
                    <div class="field">
                        <label>Email</label>
                        <input id="emailfield" type="text" name="email" placeholder="Email">
                    </div>
                    <div class="field">
                        <label>Username</label>
                        <input type="text" name="username" placeholder="Username">
                    </div>
                    <div class="field">
                        <label>Password</label>
                        <input type="password" name="password" placeholder="Password">
                    </div>
                    <div id="cpw" class="field">
                        <label>Confirm Password</label>
                        <input type="password" name="confirmpw" placeholder="Confirm Password">
                        <small style="display:none; color:#b33a38;">Password does not match</small>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                        <input type="checkbox" tabindex="0" onchange="toggleSignupBox(this.checked)">
                        <label>I agree to the <a href="../../SystemAO/vendor/public/termsAndConditions.html" target="_blank">Terms and Conditions</a></label>
                        </div>
                    </div>
                    <button disabled="disabled" id="submitbtn" class="ui disabled button" type="submit">Sign Up</button>
                </form>
                <div id="errmsg" class="ui red inverted segment" style="display:none;">
                    <i class="remove icon"></i> Internal Server Error
                </div>  
                <div class="ui divider"></div>
                <p>Back to <a href="../../">Login</a></p>
            </div>
        </div>

        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="green checkmark icon"></i>
                Account Created
            </div>
            <div class="content" align="center">
                <p>You will be redirected to login interface in 3 secounds...</p>
            </div>
            <div class="actions">
                <a class="ui green ok inverted button" href="../../">
                    Redirect NOW
                </a>
            </div>
        </div>

        <script>
            //1. read the parameters from the URL
            if(get('user') != undefined){
                $("#emailfield").val(get('user'));
                $("#emailfield").attr("disabled", "disabled");
                $("input[name='username']").val(get('user'));
                $("input[name='username']").attr("disabled", "disabled");
            }

            function toggleSignupBox(toggle){
                if (toggle){
                    $("#submitbtn").removeAttr('disabled');
                    $("#submitbtn").removeClass('disabled');
                }else{
                    $("#submitbtn").attr('disabled','disabled');
                    $("#submitbtn").addClass('disabled');
                }
            }

            function handleFormSubmit(e, form){
                e.preventDefault();
                if (form.password.value != form.confirmpw.value){
                    //Password not match
                    $("#cpw").addClass("error");
                    $("#cpw").find("small").show();
                    return;
                }else{
                    $("#cpw").removeClass("error");
                    $("#cpw").find("small").hide();
                }

                //Check if the user has actually entered an emadil
                if (!ValidateEmail(form.email.value)){
                    $("#emailfield").parent().addClass("error");
                    return;
                }

                $.ajax({
                    url: "./handleRegister.system",
                    data: {
                        "email":form.email.value,
                        "username": form.username.value,
                        "password": form.password.value,
                    },
                    method: "POST",
                    success: function(data){
                        console.log(data);
                        if (data.error !== undefined){
                            $("#errmsg").html(`<i class="remove icon"></i> ${data.error}`);
                            $("#errmsg").stop().finish().slideDown("fast").delay(5000).slideUp("fast");
                        }else{
                            //Register succeed
                            $('.ui.modal').modal("show");
                            setTimeout(function(){
                                window.location.href = "../../";
                            },3000);
                            
                        }
                    },
                    error: function(xhr){
                        alert("Register failed due to Internal Server Error")
                    },
                    timeout: 15000
                })
            }

            function ValidateEmail(email){
                if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email)){
                    return true
                }else{
                    return false
                }
            }

            //https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
            function get(name){
                if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
                    return decodeURIComponent(name[1]);
            }
        </script>
    </body>
</html>