Sure, here is the HTML and JavaScript code for the frontend:

"templates/login.html"
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat App - Login</title>
  </head>
  <body>
    <h1>Login</h1>
    <form method="POST">
      <input type="text" name="username" placeholder="Enter your username" required>
      <button type="submit">Login</button>
    </form>
  </body>
</html>
```
This HTML file contains a login form with a single text input field for the username and a submit button.

"templates/index.html"

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat App - Home</title>
    <script src="{{ url_for('static', filename='index.js') }}"></script>
  </head>
  <body>
    <h1>Welcome, {{ session['username'] }}</h1>
    <button onclick="logout()">Logout</button>
    <br><br>
    <h2>Active Users:</h2>
    <ul id="user-list">
    </ul>
  </body>
</html>
```
This HTML file contains the main page of the chat app. It displays a welcome message with the user's username, a logout button, and a list of active users.

"static/index.js"
```
function logout() {
  fetch('/logout')
    .then(() => {
      window.location.href = '/login';
    });
}

fetch('/active_users')
  .then(response => response.json())
  .then(data => {
    const userList = document.getElementById('user-list');
    data.users.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user;
      userList.appendChild(li);
    });
  });
```
This JavaScript file contains a function to log out the user when the "Logout" button is clicked, and it also fetches the list of active users from the server and displays it in a list.

"templates/messages.html"
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chat App - {{ target_username }}</title>
    <script src="{{ url_for('static', filename='messages.js') }}"></script>
  </head>
  <body>
    <h1>Chat with {{ target_username }}</h1>
    <button onclick="logout()">Logout</button>
    <br><br>
    <ul id="message-list">
      {% for message in messages %}
        {% if message['src_username'] == session['username'] %}
          <li><strong>You:</strong> {{ message['message'] }}</li>
        {% else %}
          <li><strong>{{ message['src_username'] }}:</strong> {{ message['message'] }}</li>
        {% endif %}
      {% endfor %}
    </ul>
    <br>
    <form method="POST">
      <input type="text" name="message" placeholder="Type your message" required>
      <button type="submit">Send</button>
    </form>
  </body>
</html>
```
This HTML file contains the chat page of the app. It displays the username of the other user in the chat, a logout button, and a list of messages between the two users. It also includes a form to send new messages.

"static/messages.js"
```
function logout() {
  fetch('/logout')
    .then(() => {
      window.location.href = '/login';
    });
}
const message
```
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence