{% extends '_modal.html' %}
{% load i18n %}
{% load static %}
{% block modal_id %}asset_user_auth_view{% endblock %}
{% block modal_title%}{% trans "Asset user auth" %}{% endblock %}
{% block modal_body %}
<style>
    .inmodal .modal-body {
        background: #fff;
    }
</style>
<form class="form-horizontal" action="" style="padding-top: 20px">
<div class="auth-field">
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">{% trans 'Hostname' %}</label>
        <div class="col-sm-8">
            <p class="form-control-static" id="id_hostname_view"></p>
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">{% trans 'Username' %}</label>
        <div class="col-sm-8" >
            <p class="form-control-static" id="id_username_view"></p>
        </div>
    </div>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">{% trans 'Password' %}</label>
        <div class="col-sm-8">
            <input id="id_password_view" type="password" class="form-control" value="" readonly style="border: none;padding-left: 0;background-color: #fff;width: 100%">
        </div>
        <div class="col-sm-2" style="padding-left: 2px">
            <a class="btn btn-white btn-sm btn-show-password"><i class="fa fa-eye"></i></a>
            <a class="btn btn-white btn-sm btn-copy-password"><i class="fa fa-copy"></i></a>
        </div>
    </div>
</div>
</form>
<script src="{% static "js/plugins/clipboard/clipboard.min.js" %}"></script>
<script>
var showPassword = false;

var authAssetId = "";
var authHostname = "";
var authUsername = "";
var mfaFor = "";

function initClipboard() {
    var clipboard = new Clipboard('.btn-copy-password', {
        text: function (trigger) {
            return $("#id_password_view").val()
        }
    });
    clipboard.on("success", function (e) {
        toastr.success("{% trans "Copy success" %}")
    })
}

function showAuth() {
    var url = "{% url "api-assets:asset-user-auth-info" %}?asset_id=" + authAssetId + "&username=" + authUsername;
    if (prefer) {
        url = setUrlParam(url, 'prefer', prefer)
    }
    $("#id_username_view").html(authUsername);
    $("#id_hostname_view").html(authHostname);
    var success = function (data) {
        var password = data.password;
        $("#id_password_view").val(password);
    };
    var error = function() {
        var msg = "{% trans 'Get auth info error' %}";
        toastr.error(msg)
    };
    APIUpdateAttr({
        url: url,
        method: "GET",
        success: success,
        flash_message: false,
        error: error
    })
}

$(document).ready(function () {
    initClipboard();
}).on("click", ".btn-show-password", function () {
    showPassword = !showPassword;
    if (showPassword) {
        $("#id_password_view").attr("type", "text")
    } else {
        $("#id_password_view").attr("type", "password")
    }
}).on("show.bs.modal", "#asset_user_auth_view", function () {
    showAuth();
})
</script>
{% endblock %}
{% block modal_button %}
  <button data-dismiss="modal" class="btn btn-white close_btn2" type="button">{% trans "Close" %}</button>
{% endblock %}
