{% extends "account.twig" %}

{% block account_content %}

    <div id="account-delete">
        <h2>{% trans "Delete Your Account" %}</h2>
        <div class="alert alert-danger">
            <h4 class="alert-heading">{% trans "Warning" %}</h4>
            <p>{% trans "This will remove your Datawrapper account. The charts you created so far will remain visible in places where you embedded them." %}</p>
        </div>
        <div class="form-horizontal">
             <fieldset>
                 <div class="control-group">
                    <label class="control-label" for="are-you-sure">{% trans "Are you sure?" %}</label>
                    <div class="controls">
                        <label class="checkbox" for="are-you-sure"><input type="checkbox" id="are-you-sure" /> {% trans "Yes, I really know what I'm doing" %}</label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="delete-account">{% trans "So then.." %}</label>
                    <div class="controls">
                        <button class="btn btn-danger" id="delete-account">{% trans "Delete my account!" %}</button>
                    </div>
                </div>
                <div class="modal hide" id="confirmDeletion">
                    <div class="modal-body">
                        <h2 style="margin-bottom:20px">{% trans "Account deletion" %}</h2>
                        <p>{% trans "Think about it one more time. Have you considered all the consequences of deleting your account?" %}</p>
                        <ul>
                            <li>{% trans "You cannot login and logout anymore." %}</li>
                            <li>{% trans "You cannot edit or remove your charts anymore." %}</li>
                        </ul>
                        <p>{% trans "Note that this will only delete your account. Your charts will not be removed. If you want to remove your charts, please do it manually." %}</p>
                        <div class="">
                            <p><b>{% trans "Please enter your password to confirm the deletion request:" %}</b></p>
                            <div class="control-group">
                                <input type="password" id="confirm-pwd" placeholder="{% trans "Password" %}" />
                            </div>
                            <p>{% trans "Do you still <b>really</b> want to delete your Datawrapper account?" %}</p>
                            <div class="control-group">
                                <div class="btn btn-info" data-dismiss="modal">{% trans "No, I changed my mind.." %}</div>
                                <div id="really-delete-account" class="btn btn-danger">{% trans "Yes, delete it!" %}</div>
                            </div>
                        </div>
                    </div>

                    <div class="post-delete" style="display:none">
                        <h2 style="margin-bottom:20px;text-align:center">{% trans "Your account has been deleted." %}</h2>
                        <a href="/" class="btn btn-primary btn-large">{% trans "Goodbye!" %}</a>
                    </div>
                </div>
             </fieldset>
        </div>
    </div>
    <script type="text/javascript">

        $('#delete-account').prop('disabled', true);

        $('#are-you-sure').change(function() {
            $('#delete-account').prop('disabled', !$('#are-you-sure').prop('checked'));
        });

        $('#delete-account').click(function() {
            $('#confirmDeletion').modal({
                keyboard: true
            });
        });

        $('#really-delete-account').click(function() {
            $.getJSON('/api/auth/salt', function(r) {
                if (r.status == 'ok') {
                    var cpwd = CryptoJS.HmacSHA256($('#confirm-pwd').val(), r.data.salt).toString();
                    $.ajax({
                        url: '/api/users/current?pwd='+cpwd,
                        type: 'DELETE',
                        data: JSON.stringify({
                            pwd: cpwd
                        }),
                        dataType: 'json'
                    }).done(function(res) {
                        if (res.status == 'ok') {
                            $('#confirmDeletion .modal-body').remove();
                            $('#confirmDeletion .modal-footer').remove();
                            $('#confirmDeletion .post-delete').css({
                                'text-align': 'center',
                                'padding': '30px'
                            });
                            $('#confirmDeletion .post-delete').addClass('modal-body');
                            $('#confirmDeletion .post-delete').show();
                        } else {
                            dw.backend.logError(res.message, $('#confirm-pwd').parent());
                        }
                    }).fail(function(res) {
                        dw.backend.logError('could not delete user: ' + JSON.stringify(res), $('#confirm-pwd').parent());
                    });
                } else {
                    dw.backend.logError('could not load salt', $('#confirm-pwd').parent());
                }
            });
        });
    </script>

{% endblock %}
