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-brute" class="col-12 col-sm-10 col-md-8 col-lg-6">
        <h3>
            {% trans "Brute Force Password Cracking Estimate" %}
        </h3>
        <div class="alert alert-danger">
            {% trans "Please do not enter real passwords into this activity."%}
        </div>
        <div id="password-strength-brute-content">
            <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 d-flex justify-content-between align-items-center">
                <button type="button" id="half" class="btn btn-secondary">{% trans "Halve Power" %}</button>
                <div>
                    <span id="compPower"> 100,000 </span> guesses per second
                </div>
                <button type="button" id="double" class="btn btn-secondary">{% trans "Double Power" %}</button>
            </div>
            <div class="mb-3">
                {% trans "<b>Max Time to Crack:</b>" %} <span id="timeToCrack">{% trans "Nothing Entered" %}</span>
            </div>
            <div class="mb-3">
                {% blocktrans %}
                This shows how long a brute force attack, trying every possible combination, would take to crack your password.
                It estimates the time based on how long your password is, and what sort of characters are in it.
                Note that brute force attacks are not the most common password attack vector.
                {% endblocktrans %}
            </div>
            <div class="mb-3">
                <a href="{% url 'interactives:interactive' 'password-strength-dict' %}" id="linkToDict" class="btn btn-outline-primary btn-sm">Dictionary Attack Variant</a>
            </div>
        </div>
    </div>
</div>
{% endblock interactive_html %}

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

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