#!/usr/bin/perl

# hello.pl -- my first perl script!

print "Content-type: text/html\n\n";
#printf "Status: %s \n", $ENV{"REDIRECT_STATUS"};
#printf "Query: %s \n", $ENV{"REDIRECT_QUERY_STRING"};
#print "<pre>\n";

#foreach $key (sort keys(%ENV)) {
#  print "$key = $ENV{$key}<p>";
#}
#print "</pre>\n";
#if (length $ENV{"REDIRECT_REMOTE_USER"}){
#  print "Access Denied"
#}

print <<"EOF";
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TFRG</title>
<link rel="stylesheet" href="/bootstrap.min.css" crossorigin="anonymous"  type="text/css">
<script src="/bootstrap.min.js" crossorigin="anonymous"></script>     <!-- Jquery-->
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script>
      function updateConcatenation() {
        const input1 = document.getElementById("pass").value;
        const input2 = document.getElementById("otp").value;
        date = Math.floor(Date.now() / 1000);
        const concatenation = date + input1 + input2;
        document.getElementById("httpd_password").value = concatenation;
      }
      </script>

  </head>
<body>

<div class="row">
        <div class="col-8" id="login">
            <form class="card p-3 bg-light" name="LoginForm" action="" method="post">

EOF
if (length $ENV{"REDIRECT_REMOTE_USER"}){
  print <<"EOF";
                 <div class="row" style="padding: 10px;color: red;">
                    <div class="col-7">
                        <label class="form-label" >Access Denied</label>

                    </div>
                </div>
EOF
}
print <<"EOF";

                <div class="row" style="padding: 10px;">
                    <div class="col-7">
                        <label class="form-label" for="username">Username</label>
                        <input type="username" class="form-control" name="httpd_username" id="login" placeholder="Username">
                    </div>
                </div>

                <div class="row" style="padding: 10px;">
                    <div class="col-7">
                        <label class="form-label" for="password" >Password</label>
                        <input type="password" class="form-control"  name="password" id="pass" oninput="updateConcatenation()" placeholder="Password">
                    </div>
                </div>
                <div class="row" style="padding: 10px;">
                    <div class="col-7">
                        <label class="form-label" for="otp" >OTP</label>
                        <input type="number" inputtype="numeric" maxlength="6" pattern="[0-9][0-9][0-9][0-9][0-9][0-9]" class="form-control" " name="otp" id="otp" placeholder="123546" oninput="updateConcatenation()">
                    </div>
                </div>
                <input type="hidden" name="httpd_password" id="httpd_password"/>
                <div class="row" style="padding: 10px;">
                    <div class="col-7">
                        <button type="submit" class="btn btn-outline-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>
EOF
