{% extends "core.twig" %}

{% block content %}

<div class="mysettings">
    <div class="row">
        <div class="span3">
            <h2>{% trans "Reset Your Password" %}</h2>
            <p>{% trans "On this page you are able to reset your password." %}</p>
        </div>
        <div class="span9">
            <div class="form-horizontal">
                <fieldset>
                    <div class="control-group success">
                        <!--<label class="control-label" for="pwd">{% trans "Reset Code" %}</label>-->
                        <div class="controls">
                            <!--<input type="text" class="input-xlarge" id="code" value="{{ token }}" disabled="disabled">-->
                            <p class="help-block"><i class="icon icon-ok"></i> {% trans "This reset token is valid." %}</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <div class="controls">
                            <p>{% trans "Now please enter a new password." %} {% trans "The password should contain at least four characters." %}</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="pwd">{% trans "Password" %}</label>
                        <div class="controls">
                            <input type="password" class="input-xlarge" id="pwd">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="pwd2">{% trans "Password (repeat)" %}</label>
                        <div class="controls">
                            <input type="password" class="input-xlarge" id="pwd2">
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <label class="checkbox"><input type="checkbox" id="show-passwords" /> {% trans "Show password in clear text" %}</label>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button class="btn btn-primary" type="submit" id="renew-password">{% trans "Set New Password" %}</button>
                    </div>
                </fieldset>

            </div>
            <div style="display:none" class="reset-success">
                    <p>{% trans "Congrats! Your password has been changed. You can log in with your new password now." %}</p>
                    <p><a class="btn btn-primary" href="#login" data-target="/"><i class="icon-user icon-white"></i> {% trans "Login" %}</a></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

$(function() {

    // change password
    $('#renew-password').click(function(e) {
        e.preventDefault();
        var submit = $(e.target),
            parent = $('.form-horizontal'),
            pwd = $.trim($('#pwd').val()),
            pwd2 = $.trim($('#pwd2').val());

        dw.backend.clearAlerts();

        if (dw.backend.checkPassword('...', pwd, pwd2) === true) {
            // at first we req
            submit.addClass('loading');

            $.getJSON('/api/auth/salt', function(res) {
                if (res.status == 'ok') {
                    var salt = res.data.salt, time = res.data.time,
                        hmac = CryptoJS.HmacSHA256,
                        payload = {
                            token: '{{ token }}',
                            time: time,
                            pwd: CryptoJS.HmacSHA256(pwd, salt).toString()
                        };

                    $('#pwd').val('');
                    $('#pwd2').val('');

                    $.ajax({
                        url: '/api/account/reset-password',
                        type: 'PUT',
                        data: JSON.stringify(payload),
                        dataType: 'json',
                        success: function(data) {
                            submit.removeClass('loading');
                            if (data.status == 'ok') {
                                $('.reset-success').show();
                                $('.reset-success').addClass('alert alert-success');
                                $('.form-horizontal').hide();
                            } else {
                                dw.backend.logError(data.message, parent);
                            }
                        }
                    });
                }
            });
        }
    });

    // show password in clear text
    $('#show-passwords').change(function() {
        var t = $('#show-passwords').is(':checked') ? 'text': 'password';
        $('#pwd')[0].type = t;
        $('#pwd2')[0].type = t;
    });
});
</script>

{{ parent() }}
{% endblock %}