src/system/reset/resetPasswordTemplate.html

<!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}} - Reset Password</title>
    <link rel="stylesheet" href="script/semantic/semantic.css">
    <link rel="stylesheet" href="script/ao.css">
    <script type="application/javascript" src="script/jquery.min.js"></script>
    <script type="application/javascript" src="script/semantic/semantic.js"></script>
    <style>
        
    </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>Reset your account password on {{host_name}}</p>
            </div>
            <div class="ui divider"></div>
            <form class="ui form" onsubmit="handleFormSubmit(event, this);">
                <div class="disabled field">
                    <label>Username</label>
                    <input type="text" name="username" value="{{username}}" readonly=true>
                </div>
                <div class="disabled field">
                    <label>Password Reset Key</label>
                    <input type="text" name="rkey" value="{{rkey}}" readonly=true>
                </div>
                <div class="ui divider"></div>
                <div class="field">
                    <label>New Password</label>
                    <input id="npw" type="password" name="newpw" placeholder="New Password">
                </div>
                <div class="field">
                    <label>Confirm New Password</label>
                    <input id="cpw" type="password" name="confirmnewpw" placeholder="Confirm New Password">
                </div>
                <button id="submitbtn" class="ui green button" type="submit">Reset</button>
            </form>
            <div id="errmsg" class="ui red inverted segment" style="display:none;">
                <i class="remove icon"></i> <span id="errtext">Internal Server Error</span>
            </div>  
            <br>
            <p>Back to <a href="../index.html">Login</a></p>
        </div>
    </div>
        
    <script>
       var username = "{{username}}";
       var resetPasswordKey = "{{rkey}}";

       function handleFormSubmit(evt,obj){
        evt.preventDefault();
            var newpw = obj.newpw.value;
            var cpw = obj.confirmnewpw.value;
            $("#npw").parent().removeClass("error");
            $("#cpw").parent().removeClass("error");

            if (newpw != cpw){
                showErrorMessage("Confirm password does not match.")
                $("#cpw").parent().addClass("error");
                return
            }

            if (newpw == "" || cpw == ""){
                showErrorMessage("Password cannot be empty")
                $("#npw").parent().addClass("error");
            }

            //Should be OK now. Submit the form for reset password
            $.ajax({
                url: "system/reset/confirmPasswordReset",
                method: "POST",
                data: {username: username, rkey: resetPasswordKey, pw: newpw},
                success: function(data){
                    if (data.error !== undefined){
                        showErrorMessage(data.error);
                    }else{
                        //OK
                        window.location.href = "index.html";
                    }
                }
            })

       }

       function showErrorMessage(msg){
            $("#errtext").text(msg);
            $("#errmsg").stop().finish().slideDown("fast");
       }
    </script>
    </body>
</html>