<style type="text/css">
.edit-account {
  margin-bottom: 20px;
  margin-top: 20px;
}

.edit-account-confirm td, .edit-account td {
  padding: 10px;
  font-size: 18px;
}

.edit-account-confirm td button, .edit-account td button {
  font-size: 16px;
  padding: 8px 10px;
}

.edit-account td #input-email,
.edit-account td #input-password {
  margin-bottom: 0px;
}

#delete-account-2 button,
#delete-account button, 
.edit-account-confirm .btn-save, 
.edit-account .btn-save {
  border: none;
  background-image: none;
  text-transform: uppercase;
  text-shadow: none !important;
  box-shadow: none;
  padding: 10px 18px;
  letter-spacing: 0.05em;
  font-weight: 300;
  border-radius: 0px !important;
}

.edit-account-confirm {
  width: 100%;
}

.edit-account-confirm .button-holder {
  text-align: center;
  margin-top: 20px;
}

#delete-account-2, #delete-account, #edit-account-email, #edit-account-password {
  display: none;
}

#delete-account-2 .iconholder, #delete-account .iconholder {
  color: #f00;
  text-align: center;
  display: block;
  font-size: 48px;
  height: 55px;
}

</style>

<div class="row">
    <div class="span10 offset1">
        <h1>{% trans "Edit Profile" %}</h1>
        <h2>{% trans "Change the e-mail address or password you use to log into Datawrapper." %}</h2>
    </div>
</div>
<div class="row edit-account">
    <div class="span6 offset3">
        <table>
          <tr>
            <td>{% trans "E-Mail" %}:</td>
            <td><input id="input-email" disabled value="{{ user.email }}" type="text"/></td>
            <td><button id="edit-account-change-email" class="btn btn-save btn-default">{% trans "Change E-Mail" %}</button></td>
          </tr>
          <tr>
            <td>{% trans "Password" %}:</td>
            <td><input id="input-password" disabled value="abcdefgh" type="password"/></td>
            <td><button id="edit-account-change-password" class="btn btn-save btn-default">{% trans "Change Password" %}</button></td>
          </tr>
          <tr>
            <td></td>
            <td style="text-align:center;">
              {% trans "or" %} <a id="edit-account-delete" href="#">{% trans "delete your account" %}</a>.
            </td>
          </tr>
        </table>
    </div>
</div>

<div class="row" id="edit-account-email">
    <div class="span6 offset3">
        <div class="form-horizontal edit-account-confirm">
            <h2>{% trans "Change E-Mail" %}</h2>
            <p>{% trans "Please enter your desired new e-mail address. You will be sent a new confirmation link to activate your updated e-mail address." %}</p>
            <fieldset>
                <div class="control-group">
                    <label class="control-label" for="email">{% trans "New E-Mail" %}</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="email">
                    </div>
                </div>
               <div class="">
                    <button class="btn btn-save btn-default btn-back">{% trans "Back" %}</button>
                    <button class="btn btn-save btn-primary" type="submit" id="save-profile" style="float:right">{% trans "Change E-Mail" %}</button>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<div class="row" id="edit-account-password" style="margin-top:20px">
    <div class="span6 offset3">
        <div class="form-horizontal edit-account-confirm">
            <h2>{% trans "Change password" %}</h2>
            <p>{% trans "For security reasons we ask you to provide your current password. Please make sure you use a strong password." %}</p>
            <fieldset>
                <div class="control-group">
                    <label class="control-label" for="cur-pwd">{% trans "Current Password" %}</label>
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="cur-pwd">
                        <p class="help-block">{% trans "For security reasons, please provide your current password." %}</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="pwd">{% trans "New 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 "(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="">
                    <button class="btn btn-save btn-default btn-back">{% trans "Back" %}</button>
                    <button class="btn btn-save btn-primary" type="submit" id="change-password" style="float:right">{% trans "Change Password" %}</button>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<div class="row" id="delete-account">
    <div class="span6 offset3" style="text-align:center">
        <div class="iconholder">
            <i class="fa fa-times"></i>
        </div>
        <h2 style="margin-bottom:20px">{% trans "Are you sure you want to delete your account?" %}</h2>

        <button class="btn btn-back btn-primary"><i class="fa fa-chevron-left"></i> &nbsp; {% trans "No, go back" %}</button>
        <div style="display:block; margin:10px 0px">{% trans "or" %}</div>
        <button id="btn-delete" class="btn btn-default"><i class="fa fa-times"></i> &nbsp; {% trans "Yes, 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>


<script type="text/javascript">
    $(document).ready(function() {
        $('#edit-account-change-email').click(function() {
            $('.edit-account').hide();
            $('#edit-account-email').show();
        });

        $('#edit-account-change-password').click(function() {
            $('.edit-account').hide();
            $('#edit-account-password').show();
        });

        $('#edit-account-delete').click(function() {
            $('.edit-account').hide();
            $('#delete-account').show();
            return false;
        });

        $('#delete-account #btn-delete').click(function() {
            $('#confirmDeletion').modal('show');
        });

        $('#delete-account .btn-back, #delete-account-2 .btn-back, .edit-account-confirm .btn-back').click(function() {
            $('#delete-account, #delete-account-2, #edit-account-email, #edit-account-password').hide();
            $('.edit-account').show();
        });

        $('#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());
                }
            });
        });

        // change password
        $('#change-password').click(function(e) {
            var submit = $(e.target),
                parent = $($('.settings.password .control-group')[0]),
                curPwd = $.trim($('#cur-pwd').val()),
                pwd = $.trim($('#pwd').val()),
                pwd2 = $.trim($('#pwd2').val()),
                check;

            dw.backend.clearAlerts()

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

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

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

                        $.ajax({
                            url: '/api/users/{{ user.id }}',
                            type: 'PUT',
                            data: JSON.stringify(payload),
                            dataType: 'json',
                            success: function(data) {
                                submit.removeClass('loading');
                                if (data.status == 'ok') {
                                    _.each(data.data.messages, function(msg) {
                                        dw.backend.logMessage(msg, $('#edit-account-password .control-group')[0], 'info');
                                    });
                                    _.each(data.data.errors, function(msg) {
                                        dw.backend.logMessage(msg, $('#edit-account-password .control-group')[0], 'warning');
                                    });
                                    if (!data.data.errors.length) {
                                        dw.backend.logMessage('{% trans "Congrats! Your password has been changed." %}', $('#edit-account-password .control-group')[0]);
                                    }
                                }
                            }
                        });
                    }
                });
            }
        });

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

    });

    // save profile
    $('#save-profile').click(function(e) {
        var submit = $(e.target),
        payload = {
            email: $('#email').val(),
        };
        submit.addClass('loading');
        $.ajax({
            url: '/api/users/{{ user.id }}',
            type: 'PUT',
            dataType: 'json',
            data: JSON.stringify(payload),
            success: function(data) {
                submit.removeClass('loading');
                if (data.status == 'ok') {
                    _.each(data.data.messages, function(msg) {
                        dw.backend.logMessage(msg, $('#edit-account-email .control-group')[0], 'info');
                    });
                    _.each(data.data.errors, function(msg) {
                        dw.backend.logMessage(msg, $('#edit-account-email .control-group')[0], 'warning');
                    });
                    $('.profile .reset').prop('disabled', true);
                } else {
                    dw.backend.logError(data.message, $('#edit-account-email .control-group')[0]);
                }
            }
         });
    });



</script>
