{% extends 'index.html' %}




{% block content %}


<div style="margin-left: 20px;">
    <h1 class="header">Basic Settings</h1>
    {% if is_default_password %}
        <div style="padding-block: 1rem;">
            <p style="color: var(--piigab-red)">
            Please change your password. Keeping the default password is
            not secure.
            </p>
        </div>
    {% endif %}
    <div id="configurationTabs">
        <ul>
            <li {% if tab=='P' : %} class="selected" {% endif %}><a href="/administration">Administration</a></li>

            <li {% if tab=='P1' : %} class="selected" {% endif %}><a href="/basic_settings">Basic Settings</a></li>
            <li {% if tab=='P2' : %} class="selected" {% endif %}><a href="/licenses">Licenses</a></li>
        </ul>
    </div>
    <div class="subheader">&darr;&nbsp;General Basic Settings</div>
    <div classs="padding"></div>
    <div classs="padding"></div>
    <div>
        <p>Set Web Interface Identification</p>
        <p>If you encounter an error, try falling back on using english letters </p>
        <input type="text" name="identification" id="identification" />
        <button id="setId" onclick="setIdentification();">Set identity</button>
        <span id="identity-feedback"></span>
    </div>
    <br />

    <div class="subheader">&darr;&nbsp;Security - Change Password</div>
    <div style="margin: 20px 0;">
        <div class="container">
            <form id="password-form" method="post" action="">
                <div class="flow">
                    <div>
                        <div class="flex">
                        <label class="style3">Old Password:</label>
                        <input type="password" id="pass1" name="pass1" size="40" title="Enter Password" value="" />
                    </div>

                    <div class="flex">
                        <label class="style3">New Password:</label>
                        <input oninput="onPasswordChanged(this.value)" type="password" id="pass2" name="pass2" size="40" title="Enter Password" value="" />
                    </div>

                    <div class="flex">
                        <label class="style3">New Password (repeat):</label>
                        <input type="password" name="pass3" id="pass3" size="40" title="Confirm Password" value="" />
                    </div>

                    <div>
                        <p id="password-strength-feedback"></p>
                    </div>

                    <div>
                        <button type="submit">Change Password</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="subheader">&darr;&nbsp;License</div>
    <table style="vertical-align: top; margin: 20px 0;" width="650px">
        <tr>
            <td class="style15" style="width:150px;">Activated Licenses</td>
            <td class="style15">
                Loads: {{meters}}<br />
                Clients: {{clients}}<br />
                Protocols: {{protocols}}<br />
                Serial Nr: {{serialno}}
            </td>
        </tr>
    </table>
    <div>
        <div>
            <div>
                <button id="showLicenseButton" onclick="showLicenseStr();">Show License String</button>
            </div>
            <div>
                <div id="license-container" hidden="true">
                    <p style="max-width:400px; line-break: anywhere;" id="license">{{licensestring}}</p>
                    <button id="copyToClipboardButton">Copy License to clipboard</button>
                </div>
            </div>
        </div>

        <div style="padding-block: 1rem; max-width: 400px;">
            <form action="/setLicense" method="get">
                <label style="display:block;" for="licstr">Update License</label>
                <input style="min-width: 70%;" type="text" id="licstr" name="licstr" />
                <input type="submit" value="Set" />
            </form>
        </div>
    </div>
    <div class="subheader">&darr;&nbsp;Default Settings</div>
    <br />
    <div id="basic" class="subsection">
        <p id="feeback-basic-settings"></p>
        <table>
            <tr valign="top">
                <td>
                    <button  onclick="resetConfiguration('system');">System Default </button>
                </td>
                <td>
                    Sets default network time protocol. <br />
                    Sets Timezone to Stockholm.<br />
                    &nbsp;
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <button  onclick="resetConfiguration('ip');">IP Default </button>
                </td>
                <td>
                    Set Ethernet configuration to DHCP<br />
                    Enables Randomised IP<br />
                    &nbsp;
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <button  onclick="resetConfiguration('mbushub');">MBusHub Default Settings </button>
                </td>
                <td>
                    Sets default MBusHub (Port) configuration.<br />
                    Masterport to serial and all Slaveports to UDP<br />
                    &nbsp;
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <button  onclick="resetConfiguration('quickpost');">Quickpost Default Settings</button>
                </td>
                <td>
                    Default QuickPost configuration<br />
                    &nbsp;<br />
                    &nbsp;
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <button  onclick="resetConfiguration('modbus2mbus');">Modbus2MBus Default Settings</button>
                </td>
                <td>
                    Default Modbus2MBus configuration.<br />
                    The xml configuration is not removed.<br />
                    &nbsp;
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <button  onclick="resetConfiguration('wireless');">Wireless Default Settings</button>
                </td>
                <td>
                    Default Wireless configuration.<br />
                    The include/exclude and cache files are not removed.<br />
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
    <!-- Webserver settings -->
    <section class="flow" style="padding-bottom: 3rem;">
        <div class="subheader">
            &darr;&nbsp;Webserver Settings
        </div>
        {% if http_on == "checked" %}
            <div class="flow" style="
            --flow-gap: .1rem; 
            max-width: 500px; 
            line-height: 1.5; 
            padding: 1rem; margin-top:1rem; 
            border: 2px solid var(--piigab-red);
            background-color: rgba(255, 0, 0, 0.11);">
                <p style="color: var(--piigab-red);">We recommend HTTPS-ONLY over HTTP. </p>
                <p>HTTP is not secure and any interaction with the unit over HTTP is at risk of leaking credentials unless the unit is on a secure network and disconnected from the internet.</p>
            </div>
        {% endif %}
        <div style="margin-left: 20px;" class="flow">
            <div>
                <label for="httpsEN">Https only</label>
                <input type="radio" name="webserver-setting" value="https" id="httpsEN" {{https_on}} >
            </div>
            <div>
                <label for="httpEN">Http and Https (Not Secure)</label>
                <input type="radio" name="webserver-setting" value="http" id="httpEN" {{http_on}} >
            </div>
            <button onclick="setWebSecurityConfiguration();">Save Settings</button>
            <p style="max-width: 500px;" id="webserver-settings-feedback"></p>
        </div>
    </section>
</div>
{% endblock content %}


{% block scripts %}
  <script type="text/javascript" src="js/zxcbn.js"></script>
  <script src="js/basic-settings.js"></script>
{% endblock scripts %}