uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="container my-3">
    <div class="row" id="interactive-rsa-key-generator">
      <div class="col s12">
        <h3>{% trans "RSA Key Generator" %}</h3>

        <div class="row text-left">
          <div class="col-5 col-sm-3">
            <h5>{% trans "Key Size" %}</h5>
          </div>
          <div class="col-7 col-sm-5">
            <h5>{% trans "Format Scheme" %}</h5>
          </div>
        </div>
        <div class="row mb-2 text-left">
          <div class="col-5 col-sm-3">
            <select id="interactive-rsa-key-generator-key-size" class="browser-default form-control">
              <option value="256">{% trans "256 bits" %}</option>
              <option value="512" selected>{% trans "512 bits" %}</option>
              <option value="1024">{% trans "1024 bits" %}</option>
              <option value="2048">{% trans "2048 bits" %}</option>
            </select>
          </div>
          <div class="col-7 col-sm-5">
            <select id="interactive-rsa-key-generator-key-format" class="browser-default form-control">
              <option value="pkcs1">{% trans "PKCS #1 (base64)" %}</option>
              <option value="pkcs8">{% trans "PKCS #8 (base64)" %}</option>
              <option value="components" selected>{% trans "Components (base16)" %}</option>
            </select>
          </div>
          <div class="col-12 col-sm-4">
            <button id="interactive-rsa-key-generator-generate" class="btn btn-primary my-2 my-sm-0">{% trans "Generate" %}</button>
          </div>
        </div>

        <div class="row text-left">
          <div class="col-12">
            <p class="text-muted"><em>{% trans "<strong>Warning:</strong> Keys larger than 512 bits may take longer than a second to create." %}</em></p>
          </div>
        </div>

        <div class="row text-left">
          <div class="col-12 col-sm-6 col-lg-8">
              <h5>{% trans "Public Key:" %}</h5>
          </div>
          <div class="col-12 col-sm-6 col-lg-4 pb-1">
            <button class="btn btn-primary interactive-rsa-key-generator-button disabled" type="button" data-toggle="tooltip" data-placement="bottom" id="interactive-rsa-key-generator-copy-public" title="{% trans 'Copy to clipboard' %}" disabled="true" aria-disabled="true">
                {% trans "Copy Public Key" %}
            </button>
          </div>
        </div>
        <div class="row mb-2 text-left">
          <div class="col-12">
            <textarea id="interactive-rsa-key-generator-public-key" class="form-control" rows="8" readonly></textarea>
          </div>
        </div>


        <div class="row text-left">
          <div class="col-12 col-sm-6 col-lg-8">
              <h5>{% trans "Private Key:" %}</h5>
          </div>
          <div class="col-12 col-sm-6 col-lg-4 pb-1">
            <button class="btn btn-primary interactive-rsa-key-generator-button disabled" type="button" data-toggle="tooltip" data-placement="bottom"  id="interactive-rsa-key-generator-copy-private" title="{% trans 'Copy to clipboard' %}" disabled="true" aria-disabled="true">
                {% trans "Copy Private Key" %}
               </button>
          </div>
        </div>
        <div class="row mb-2 text-left">
          <div class="col-12">
            <textarea id="interactive-rsa-key-generator-private-key" class="form-control" rows="12" readonly></textarea>
          </div>
        </div>

      </div>
    </div>
  </div>
{% endblock interactive_html %}

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

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