uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
<div class="row justify-content-center">
    <div id="password-strength-dict" class="col-12 col-sm-10 col-md-8 col-lg-6">
        <h3>
            {% trans "Dictionary Attack Password Cracking Estimate" %}
        </h3>
        <div id="password-strength-dict-content">
            <div class="alert alert-danger">
                {% trans "Please do not enter real passwords into this activity."%}
            </div>
            <form class="form-inline justify-content-center mb-3">
                <div>
                    <input type="password" placeholder="{% trans 'Password' %}"id="psw" class="form-control form-control-lg" required>
                </div>
                <div id="crackingButtonContainer">
                    <button type="button" id="crackButton" class="btn btn-lg btn-primary ml-3">{% trans "Get Cracking" %}</button>
                </div>
            </form>
            <div class="mb-3">
                {% trans "<b>Status:</b>" %} <span id="timeToCrack">{% trans "Nothing Entered" %}</span>
            </div>
            <div class="mb-3">
                {% trans "This shows how long a dictionary attack would take to crack your password!" %}
            </div>
            <div class="mb-3">
                {% blocktrans %}
                It compares your password to a dictionary of common passwords. If there is a match, your password will be cracked!
                The dictionary we use only contains 318,971 different passwords, so don't be too confident if what you enter doesn't get cracked.
                {% endblocktrans %}
            </div>
            <div class="mb-3">
                <a href="{% url 'interactives:interactive' 'password-strength-brute' %}" id="linkToBrute" class="btn btn-outline-primary btn-sm">Brute Force Variant</a>
            </div>
        </div>
    </div>
</div>
{% endblock interactive_html %}

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

{% block interactive_js %}
    <script type="text/javascript">
        var words_file_location = "{% static 'interactives/password-strength-dict/passwords.txt' %}";
    </script>
    <script type="text/javascript" src="{% static 'interactives/password-strength-dict/js/password-strength-dict.js' %}"></script>
{% endblock interactive_js %}