<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ICNML</title>
        <meta name="description" content="International Close Non-Matches Library">
        
        {% autoescape false %}
            {{ app_files }}
        {% endautoescape %}
        
        <script type="text/javascript">
            baseurl = "{{ baseurl }}";
        </script>
    </head>
    <body>
        <div class="icnml_central">
            <h1 style="margin-bottom: 0px">ICNML</h1>
            <h4 style="margin-top: 0px">International Close Non-Matches Library</h4>
            
            <div class="ui-widget-header ui-corner-top icnml_box_top">Password reset form</div>
            <div class="ui-widget-content ui-corner-bottom icnml_box_content_central">
                <div id="icnml_box_fields" class="icnml_box_fields">
                    <div style="text-align: right;">
                        <label for="username">Username</label>
                    </div>
                    <div>
                        <input id="username" name="username" type="text" />
                    </div>
                    <div style="text-align: right;">
                        <label for="password">New password</label>
                    </div>
                    <div>
                        <input id="password" name="password" type="password" />
                    </div>
                    <div style="text-align: right;">
                        <label for="passwordconf">Confirmation</label>
                    </div>
                    <div>
                        <input id="passwordconf" name="passwordconf" type="password" />
                    </div>
                </div>
                <div id="icnml_reset_error" class="icnml_box_error"></div>
                <div class="icnml_button">
                    <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="reset_button" role="button" aria-disabled="false">
                        <span class="ui-button-text">Set new password</span>
                    </a>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var reset_form_action = async function()
            {
                var username = $( "#username" ).val();
                var password = $( "#password" ).val();
                var passwordconf = $( "#passwordconf" ).val();
                
                $( "#icnml_reset_error" ).text( "" );
                
                if( ! password )
                {
                    $( "#icnml_reset_error" )
                        .text( "The password can not be empty" );
                }
                else if( password !== passwordconf )
                {
                    $( "#icnml_reset_error" )
                        .text( "The passwords fields does not match" );
                } else {
                    password = await generateKey( password, "icnml_" + username, 20000 );
                    password = password.substring( 0, 128 );
                    password = "pbkdf2$sha512$icnml_" + username + "$20000$" + password;
                    
                    $.ajax( {
                        url:  "{{ url_for( 'login.password_reset_stage2', user_id = user_id ) }}",
                        dataType: "json",
                        method: "POST",
                        data: {
                            "username": username,
                            "password": password
                        },
                        success: function( data )
                        {
                            if( ! data.error )
                            {
                                if( data.password_updated )
                                {
                                    location.href = "{{ url_for( 'base.home' ) }}";
                                } else {
                                    if( typeof data.message !== "undefined" )
                                        $( "#icnml_login_error" ).text( data.message );
                                }
                            }
                        }
                    } );
                }
            }
            
            /* Events binding */
            $( "#username" ).on( "keyup", function( event )
            {
                if( event.keyCode == 13 )
                {
                    event.preventDefault();
                    reset_form_action();
                }
            } );
            $( "#password" ).on( "keyup", function( event )
            {
                if( event.keyCode == 13 )
                {
                    event.preventDefault();
                    reset_form_action();
                }
            } );
            $( "#passwordconf" ).on( "keyup", function( event )
            {
                if( event.keyCode == 13 )
                {
                    event.preventDefault();
                    reset_form_action();
                }
            } );
            
            $( "#reset_button" ).on( "click", reset_form_action );
            $( "#username" ).focus();
        </script>
    </body>
</html>

