{% extends "base.html" %}

{% block title %}Password tool{% endblock %}

{% block content %}

<h1>Password tool</h1>

<style type="text/css">
.hashed-password {
    font-family: "Courier New", Courier, monospace;
    padding: 1em;
    border: 2px dotted black;
    margin: 1em 0;
    line-break: anywhere;
    display: block;
    width: 100%;
    height: 6em;
    box-sizing: border-box;
}
button.copy-hashed-password {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    display: inline-block;
    margin-bottom: 3em;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
    padding: .5em 0.8em;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: .25rem;
}
</style>

<p>Create a password hash for use in your plugin configuration:</p>

{% if hashed_password %}
    <textarea class="hashed-password">{{ hashed_password }}</textarea>
{% endif %}

<form action="/-/password-tool" method="post">
    <div>
        <input type="text" name="password" style="width: 40%">
        <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
        <input type="submit" value="Create password hash">
    </div>
</form>

{% if hashed_password %}
<script>
var ta = document.querySelector(".hashed-password");
var button = document.createElement("button");
button.className = "copy-hashed-password";
button.innerHTML = "Copy to clipboard";
button.onclick = () => {
    ta.select();
    document.execCommand("copy");
};
ta.insertAdjacentElement("afterend", button);
</script>
{% endif %}

{% endblock %}
