uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load i18n %}
{% load static %}

{% block interactive_html %}
  <div class="row container-fluid mt-2">
    <div class="col-12 col-xl-6">
      <div id="pg-database" class="row mb-3 ml-3">
        <div class="col-12">
          <h4>{% trans 'Database:' %}</h4>
        </div>
        <div class="overflow-table col-12 text-left">
          <table id="password-table">
            <tr>
              <th>
                {% trans 'User' %}
              </th>
              <th id="salt-header" class="d-none">
                {% trans 'Salt' %}
              </th>
              <th>
                {% trans 'Password Hash' %}
              </th>
            </tr>
          </table>
        </div>
      </div>
      <div id="pg-checker" class="row ml-3">
        <div class="col-12">
          <h4>{% trans 'Guesser:' %}</h4>
        </div>
        <div id="pg-guesser" class="col-12">
          <form>
            <div class="form-row">
              <div class="form-group col-12 col-sm-6">
                <label for="pg-password-guess">{% trans 'Password:' %}</label>
                <input id="pg-password-guess" type="text" class="form-control">
                <small class="form-text text-muted">{% trans '<strong>Warning:</strong> Do not enter any real password into this interactive.' %}</small>
              </div>
              <div id="salt-input" class="form-group col-12 col-sm-6 d-none">
                <label for="pg-password-salt">{% trans 'Salt:' %}</label>
                <input id="pg-password-salt" type="text" class="form-control">
              </div>
            </div>
          </form>
          <button id="pg-submit-button" class="btn btn-primary">{% trans 'Calculate Hash' %}</button>
          <small class="form-text text-muted">{% trans 'Whitespace is removed automatically' %}</small>
          <div class="form-row">
            <div class="col-12 my-2">
              <div id="pg-calculated-hash"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="pg-hints" class="col-12 col-xl-6 my-4">
      <div id="pg-clues" class="col-12">
        <details id="details" class="text-left">
          <summary>{% trans 'Clues' %}</summary>
          <br>
          {% blocktrans %}The first few passwords are in your language (we hope the translations are accurate!):{% endblocktrans %}
          <ul>
            <li>
              {% blocktrans %}Alice, Bob, Casey and Dave all chose their favourite school subjects as passwords.{% endblocktrans %}
            </li>
          </ul>
          {% blocktrans %}The remaining passwords are all in English, if applicable.
          These next few are all simple words, some of which you might find in a dictionary or <a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/List_of_the_most_common_passwords">list of the most common passwords</a>:{% endblocktrans %}
          <ul>
            <li>
              {% blocktrans %}Evelyn and Frank both chose really simple passwords.
              Without realising, they both chose the same one!{% endblocktrans %}
            </li>
            <li>
              {% blocktrans %}Grant looked down at his keyboard and picked the first thing he saw.{% endblocktrans %}
            </li>
            <li>
              {% blocktrans %}Hannah and Isabelle set up the database and chose basic passwords based on their roles; user and administrator.{% endblocktrans %}
            </li>
          </ul>
          {% blocktrans %}The next few passwords are quite a bit more difficult!
          All are 8 characters, and have at least one lower case letter, upper case letter, and digit.
          Some also have a number of symbols:{% endblocktrans %}
          <ul>
            <li>
              {% blocktrans %}Jack chose one of the most simple and popular passwords ever so he could remember it, but swapped a few characters to make it harder.
              Jack chose three digits and/or symbols as replacements that look a lot like the original letters &ndash; you can still read his password as an English word.{% endblocktrans %}
            </li>
            <li>
              {% blocktrans %}Kate chose her least favourite type of schoolwork but also made sure to use two upper case letters and two numbers.
              Again, you can still read it as if it were a full word.{% endblocktrans %}
            </li>
            <li>
              {% blocktrans %}Liam is a businessman who enjoys a strong drink to wake up in the morning and really likes hexadecimal.{% endblocktrans %}
            </li>
            <li>
              {% blocktrans %}Michaela used her name, "Michaela", but replaced four letters with two symbols and two digits.
              She chose the replacements logically but not necessarily for their appearance.{% endblocktrans %}
            </li>
            <li>
              {% blocktrans %}Nat chose the three letters of her name, "NAT", then five random characters on her keyboard; two numbers, two letters and a symbol.
              These additions were truly random, you'll have a tough time getting this one!{% endblocktrans %}
            </li>
          </ul>
          <small class="text-muted">{% trans 'These passwords are all weak compared to what you should use in practice and can be guessed relatively quickly with the aid of a computer.' %}</small>
        </details>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

{% block interactive_css %}
  <link rel="stylesheet" href="{% static 'interactives/password-guesser/css/password-guesser.css' %}">
{% endblock interactive_css %}

{% block interactive_js %}
  <script type="text/javascript" src="{% static 'interactives/password-guesser/js/password-guesser.js' %}"></script>
{% endblock interactive_js %}