<h3>{{ _('Access Control') }}</h3>

{% trans safe_remote_url='https://octoprint.org/blog/2018/09/03/safe-remote-access/' %}<p>
    <strong>Please read the following, it is very important for your printer's health!</strong>
</p>
<p>
    OctoPrint by default ships with Access Control enabled, meaning you won't be able to do anything with the
    printer unless you login first as a configured user. This is to <strong>prevent strangers - possibly with
    malicious intent - to gain access to your printer</strong> via an untrustworthy network
    and using it in such a way that it is damaged or worse (i.e. causes a fire).
</p>
<p>
    If you plan on accessing OctoPrint remotely over the internet, <strong>you should not only rely on the built-in
    Access Control mechanisms</strong> however -
    <a href="{{ safe_remote_url }}" target="_blank" rel="noopener noreferrer">take additional precautions</a>.
    Your OctoPrint enabled printer is a critical home appliance you really should not give anyone who happens to be
    connected to the internet access to - even read-only! <strong>An instance available publicly on the internet
    will be found, and people will try to break it open.</strong>
</p>
<p>
    It looks like you haven't configured access control yet. Please <strong>set up a username and password</strong> for the
    initial administrator account who will have full access to both the printer and OctoPrint's settings, then click
    on "Keep Access Control Enabled":
</p>{% endtrans %}
<form class="form-horizontal">
    <div class="control-group" data-bind="css: {success: validUsername()}">
        <label class="control-label" for="first_run_username">{{ _('Username') }}</label>
        <div class="controls">
            <input type="text" class="input-medium" data-bind="value: username, valueUpdate: 'afterkeydown', enable: !setup(), css: {disabled: setup()}">
        </div>
    </div>
    <div class="control-group" data-bind="css: {success: validPassword()}">
        <label class="control-label" for="first_run_username">{{ _('Password') }}</label>
        <div class="controls">
            <input type="password" class="input-medium" data-bind="value: password, valueUpdate: 'afterkeydown', enable: !setup(), css: {disabled: setup()}">
        </div>
    </div>
    <div class="control-group" data-bind="css: {error: passwordMismatch(), success: validPassword() && !passwordMismatch()}">
        <label class="control-label" for="first_run_username">{{ _('Confirm Password') }}</label>
        <div class="controls">
            <input type="password" class="input-medium" data-bind="value: confirmedPassword, valueUpdate: 'afterkeydown', enable: !setup(), css: {disabled: setup()}">
            <span class="help-inline" data-bind="visible: passwordMismatch()">{{ _('Passwords do not match') }}</span>
        </div>
    </div>
</form>
{% trans %}<p>
    <strong>Note:</strong> In case that your OctoPrint installation is only accessible from within a trustworthy local network and you don't
    need Access Control for other reasons, you may alternatively disable Access Control. You should only
    do this if you are absolutely certain that only people you know and trust will be able to connect to it.
</p>
<p>
    <strong>Do NOT underestimate the risk of access from the internet to your printer and OctoPrint instance!</strong>
</p>{% endtrans %}

<div class="row-fluid">
    <a href="#" class="btn btn-danger span6" data-bind="click: function() { if(!setup()){disableAccessControl()}}, enable: !setup(), css: {disabled: setup()}">{{ _('Disable Access Control') }}</a>
    <a href="#" class="btn btn-primary span6" data-bind="click: function() { if(!setup()){keepAccessControl()}}, enable: !setup() && validData(), css: {disabled: !validData() || setup()}">{{ _('Keep Access Control Enabled') }}</a>
</div>

<div class="acl_decision" style="display: none" data-bind="visible: setup()">
    <div class="text-center" style="display: none" data-bind="visible: decision()">{% trans %}
        Access control is <strong class="text-success">enabled</strong>.
    {% endtrans %}</div>
    <div class="text-center" style="display: none" data-bind="visible: !decision()">{% trans %}
        Access control is <strong class="text-danger">disabled</strong>.
    {% endtrans %}</div>
</div>
