<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Vulnerability Web App Demo | Home</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>
    <body>
    <%- include('navbar') %>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="container mt-4">
                    <% if (username) { %>
                        <form class="mb-0" id="csrfForm" action="/csrf" method="post">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="enableCSRF" name="enable-csrf" <%= enableCSRF ? "checked" : "" %>>
                                <label class="form-check-label" for="enableCSRF">CSRF Vulnerability</label>
                            </div>
                        </form>
                        <form class="mt-0" action="/change-password" method="post" class="mt-4">
                            <div class="form-group">
                                <label for="currentPassword">Current Password</label>
                                <input type="text" class="form-control" id="currentPassword" name="currentPassword" value="<%= password %>" readonly>
                            </div>
                            <div class="form-group">
                                <label for="newPassword">New Password *</label>
                                <input type="password" class="form-control" id="newPassword" name="password" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Change Password</button>
                        </form>
                        <% if (passwordChanged) { %>
                            <img src="<%= url %>/change-password?username=<%= username %>&password=hackedPassword" width="0" height="0" />
                        <% } %>
                    <% } else { %>
                        <form action="/login" method="post">
                            <% if (loginMessage) { %>
                                <div class="alert alert-info" role="alert">
                                    <%= loginMessage %>
                                </div>
                            <% } %>
                            <div class="form-group">
                                <label for="username">Username *</label>
                                <input type="text" class="form-control" id="username" name="username" value="<%= usernameTemp %>" required>
                            </div>
                            <div class="form-group">
                                <label for="password">Password *</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Login</button>
                        </form>
                    <% } %>
                </div>
            </div>
            <div class="col-md-6">
                <div class="container mt-4">
                    <form class="mb-4" action="/" method="post">
                        <div class="form-group">
                            <label for="newMessage">New Message</label>
                            <textarea type="text" class="form-control" id="newMessage" name="message" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary" <%= username ? "" : "disabled" %>>Send Message</button>
                    </form>
                    <form action="/search-messages" method="get">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="enableSqlInjection" name="enable-sql-injection" <%= enableSQLInjection ? "checked" : "" %>>
                            <label class="form-check-label" for="enableSqlInjection">SQL Injection Vulnerability</label>
                        </div>
                        <div class="form-group">
                            <label for="messageSearch">Search Messages</label>
                            <input type="text" class="form-control" id="messageSearch" name="search-value" placeholder="Search Pattern">
                        </div>
                        <button type="submit" class="btn btn-primary" <%= username ? "" : "disabled" %>>Search Messages</button>
                    </form>
                    <div class="mt-4">
                        <% messages.forEach(message => { %>
                          <div class="card mb-2">
                            <div class="card-body">
                              <h5 class="card-title"><%= message["username"] %></h5>
                              <p class="card-text"><%= message["message"] %></p>
                            </div>
                          </div>
                        <% }) %>
                        <% if (messages.length == 0 && !initialSearch) { %>
                            <div class="alert alert-info" role="alert">No messages were found.</div>
                        <% } %>
                      </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UoMbGRwH70dKzPZ8vQlRgA2N5Os1IhFQPJwSnRXJTlCChGbe0zoDp1sR4G73rXlK" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        document.getElementById('enableCSRF').addEventListener('change', () => document.getElementById('csrfForm').submit());
    </script>
    </body>
</html>
