{% extends 'vulnerabilities/levels/docker_base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block level_title %}Echoes of Time{% endblock %}

{% block level_description %}
<div>
 <p>
  As you delve deeper into the realms of CyberVault, you encounter a seemingly innocuous feature,
  a newly implemented "Time-zone Converter widget". It promises to bridge the gaps between global time zones.
 </p>
 <p>
  As you explore this seemingly innocuous tool, you sense that it holds more than just the power to shift hours. Crafted by developers more concerned with global time than data security, the widget beckons to those with a keen eye. What secrets might the simple input field reveal to an audacious explorer armed with the right commands?
 </p>
 <p>
  Recent whispers in the digital wind suggest that CyberVault’s security might not be as tight as it seems. After a series of mishaps with the login system, a new team of interns cobbled together a fix that, while functional, left gaping holes—most notably, all user passwords stored in a single plaintext file. However, while you certainly recognize this as a security issue, it isn't exploitable on it's own. Can you manipulate the flow of data to expose CyberVault's precarious security measures and uncover the secrets they believed were secure?
 </p>
</div>
{% endblock %}

{% block hint_url %}
{% url 'vulnerabilities/level/hint' level_num=7 hint_num=1 %}
{% endblock %}

{% block level_content %}
{{ block.super }}

<div class="container">
  <div class="row">
    <div class="col-md-6 border-end">
      {# Left side of the page #}
      <h2>Login</h2>
      <p>Welcome to CyberVault login page. Please enter your credentials and press Log In.</p>
      <div class="card">
        <div class="card-body">
          <h2 class="card-title text-center mb-4">Log In</h2>
          <form method="post" class="needs-validation" novalidate>
            {% csrf_token %}
            {{ form | crispy }}
            <div class="d-grid gap-2">
              <button type="submit" class="btn btn-primary">Log In</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      {# Right side of the page #}
      <h2>Time-zone converter</h2>
      <p>This is CyberVault's brand new time-zone converter widget.</p>
      <p>The developers have recently implemented it and placed it in an unrelated page to the login one.</p>
      <p>Feel free to use it if you want to know what time it is in other places around the world.</p>
      <div class="card">
        <div class="card-body">
          <h2 class="card-title text-center mb-4">Time-zone Converter</h2>
          <form id="tz-convert-form">
            <div id="tz-convert-form-errors" class="alert alert-block alert-danger" style="display: none;">
            </div>
            <div class="form-group">
              <label for="timezone-input">Choose Timezone:</label>
              <select name="timezone" id="timezone-input" class="form-control">
                <option value="Etc/UTC">UTC (Coordinated Universal Time)</option>
                <option value="Etc/GMT">GMT (Greenwich Mean Time)</option>
                <option value="America/Denver">MST (Mountain Standard Time - Denver)</option>
                <option value="America/New_York">EST (Eastern Standard Time - New York)</option>
                <option value="America/Los_Angeles">PST (Pacific Standard Time - Los Angeles)</option>
                <option value="America/Chicago">CST (Central Standard Time - Chicago)</option>
                <option value="Europe/Paris">CET (Central European Time - Paris)</option>
                <option value="Asia/Tokyo">JST (Japan Standard Time - Tokyo)</option>
                <option value="Australia/Sydney">AEST (Australian Eastern Standard Time - Sydney)</option>
              </select>
            </div>
            <div class="form-group">
              <label for="time-input">Enter UTC Time (HH:MM):</label>
              <input name="time" type="text" id="time-input" class="form-control" value="12:00">
            </div>
            <button type="submit" class="btn btn-primary">Convert Time</button>
          </form>
        </div>
        <div class="card-footer">
          <div id="tz-convert-result"></div>
        </div>
      </div>
    </div>
  </div>
</div>

{% comment %}
<h1>Time-zone Converter</h1>

<form id="form">
  <input type="text" name="message"/>
</form>

<div id="messages"></div>
{% endcomment %}
{% endblock %}

{% block extra %}
{{ block.super }}

<script src="{% static 'js/level7_docker_consumer.js' %}"></script>
{% endblock %}

{% comment %}
vi: ft=htmldjango
{% endcomment %}