<html>
<head>
    <title>3DPrinterOS Client</title>
    <link rel="stylesheet" type="text/css" href="/static/styles/style.css">
    <script src="/static/scripts/jquery.js" type="text/javascript"></script>
</head>
<body bgcolor=#003333>
<div id='host_version' align='right' style='align: right; color: #006666'>!!!URL!!! !!!VERSION!!!</div>
<div class="block1">
    <div class="block2">
        3DPrinterOS Client
    </div>
    <center>
        <div class="block3" id="form-block">
            <h2>
                Change SSH password
            </h2>
            <form method="post" action="/change_ssh_password" id="change-password-form" onsubmit="return check_passwords_match()">

                <div style="column-count:2; column-gap:2px; display: inline">
                    <div>
                        <label>
                            Current password:
                        </label>
                        <input type="password"
                               name="old_password"
                               maxlength="128"
                               style="margin-left: 16px;"
                               placeholder=""
                               id="old_password"
                               class="text_field">
                    </div>
                    <div style="color: red;margin-top: -10px;margin-bottom: 15px;" id="old_password_error"></div>
                    <div>
                        <label>
                            New password:
                        </label>
                        <input type="password"
                               name="new_password"
                               id="new_password"
                               maxlength="128"
                               style="margin-left: 39px;"
                               placeholder=""
                               class="text_field">
                    </div>
                    <div style="color: red;margin-top: -10px;margin-bottom: 15px;" id="new_password_match_error"></div>
                    <div>
                        <label>
                            Confirm password:
                        </label>
                        <input type="password"
                               name="confirm_new_password"
                               id="confirm_new_password"
                               maxlength="128"
                               style="margin-left: 16px;"
                               placeholder=""
                               class="text_field">
                    </div>
                </div>
                <div>
                    <input type="button" onClick="location.href='/manage_settings'" value="Back" style="" class="big_button">

                    <input type="submit"
                           style="background: #ff9900"
                           class="big_button"
                           value="Change">
                </div>
            </form>
        </div>
    </center>
</div>
<script type="text/javascript">
    function check_passwords_match() {
         var password = document.getElementById("new_password").value;
         var confirmPassword = document.getElementById("confirm_new_password").value;
         if (password != confirmPassword) {
             $('#new_password_match_error').html('New password and do not match Confirm password')
             return false;
         }
         return true;
     }

    <!-- function toggle_password_visibility(input_id) {-->
    <!--    var x = document.getElementById($input_id);-->
    <!--    if (x.type === "password") {-->
    <!--        x.type = "text";-->
    <!--     } else {-->
    <!--        x.type = "password";-->
    <!--    }-->
    <!--} -->
</script>
</body>
</html>
