Various changes:

- Finalize the load private key functionality
- Add indicator on nav when a private key is loaded
- Remove the fire sans fonts
- Change css to use the bootstrap font stack
- Logout will clear the localstorage

Author: spapas

etsd/keys/templates/keys/load_private_key.html

@@ -19,7 +19,17 @@
         stored to your browser only</u>, i.e it will never be submited to our server.
         </p>
         <p>
-          Please be extra careful while Private Key has been loaded to your browser.
+          You need to select the private key file which must be in the ASCII armored format.
+          Then enter the private key decryption passphrase. Now you can press the
+          "validate" button to make sure that they key and passhrase are both correct. 
+          If everything is ok the Private key information section will be filled with some
+          of the key information or else you will see an error. Finally,
+          press "load" button to actually load the key to your browser and be able to use it
+          to decrypt data.
+
+        </p>
+        <p>
+          <u>Please be extra careful while Private Key has been loaded to your browser.</u>
         </p>
       {% endblocktrans %}
     </div>
@@ -61,8 +71,8 @@ <h5 class="card-title">Private key information</h5>
         </div> <!-- card -->
         <div class='row'>
           <div class="col">
-            <button  id='validateButton' type='button' class='btn btn-primary' >{% trans "Validate" %}</button>
-            <button id='submitButton'  type='button' disabled class='btn btn-success' >{% trans "Submit" %}</button>
+            <button  id='validateButton' type='button' class='btn btn-primary' >{% trans "Validate private key" %}</button>
+            <button id='submitButton'  type='button' disabled class='btn btn-warning' >{% trans "Load private key" %}</button>
             <a class='btn btn-secondary' href='{% url "home" %}'>{% trans "Return" %}</a>
           </div>
         </div>
@@ -75,19 +85,8 @@ <h5 class="card-title">Private key information</h5>
 {% endblock %}
 
 {% block extra_script %}
-<script src='{% static "openpgp/openpgp.min.js" %}'></script>
-<script>
 
-const loadPrivateKey = (async(privateKeyArmored, passphrase) => {
-    
-    let privateKey = await openpgp.decryptKey({
-      privateKey: await openpgp.readPrivateKey({ armoredKey: privateKeyArmored }),
-      passphrase
-    });
-    console.log(privateKey)
-    return privateKey
-    
-})
+<script>
 
 $(function() { 
   let privateKeyArmored = null;
@@ -109,7 +108,7 @@ <h5 class="card-title">Private key information</h5>
 
     fileReader.onload = function () {
       privateKeyArmored = fileReader.result;
-      let privateKey = loadPrivateKey(privateKeyArmored, passphrase).then( key => {        
+      loadPrivateKey(privateKeyArmored, passphrase).then( key => {        
         $('#id_fingerprint').val(key.getFingerprint())
         $('#id_user_id').val(key.getUserIDs().join(','))
         $('#id_creation_time').val(key.getCreationTime().toLocaleString('el'))

static/fonts/fira-sans-v9-greek_latin-600.eot

@@ -1,49 +1,15 @@
 
-/* fira-sans-regular - greek_latin */
-@font-face {
-    font-family: 'Fira Sans';
-    font-style: normal;
-    font-weight: 400;
-    src: url('fonts/fira-sans-v9-greek_latin-regular.eot'); /* IE9 Compat Modes */
-    src: local('Fira Sans Regular'), local('FiraSans-Regular'),
-         url('fonts/fira-sans-v9-greek_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         url('fonts/fira-sans-v9-greek_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-         url('fonts/fira-sans-v9-greek_latin-regular.woff') format('woff'), /* Modern Browsers */
-         url('fonts/fira-sans-v9-greek_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-         url('fonts/fira-sans-v9-greek_latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
-  }
-  /* fira-sans-600 - greek_latin */
-  @font-face {
-    font-family: 'Fira Sans';
-    font-style: normal;
-    font-weight: 600;
-    src: url('fonts/fira-sans-v9-greek_latin-600.eot'); /* IE9 Compat Modes */
-    src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'),
-         url('fonts/fira-sans-v9-greek_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         url('fonts/fira-sans-v9-greek_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
-         url('fonts/fira-sans-v9-greek_latin-600.woff') format('woff'), /* Modern Browsers */
-         url('fonts/fira-sans-v9-greek_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
-         url('fonts/fira-sans-v9-greek_latin-600.svg#FiraSans') format('svg'); /* Legacy iOS */
-  }
-  /* fira-sans-900 - greek_latin */
-  @font-face {
-    font-family: 'Fira Sans';
-    font-style: normal;
-    font-weight: 900;
-    src: url('fonts/fira-sans-v9-greek_latin-900.eot'); /* IE9 Compat Modes */
-    src: local('Fira Sans Black'), local('FiraSans-Black'),
-         url('fonts/fira-sans-v9-greek_latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         url('fonts/fira-sans-v9-greek_latin-900.woff2') format('woff2'), /* Super Modern Browsers */
-         url('fonts/fira-sans-v9-greek_latin-900.woff') format('woff'), /* Modern Browsers */
-         url('fonts/fira-sans-v9-greek_latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
-         url('fonts/fira-sans-v9-greek_latin-900.svg#FiraSans') format('svg'); /* Legacy iOS */
-  }
 
   body {
     color:#011f4b;
-    font-family:'Fira Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   }
 
   .main-container {
     margin-top: 5rem;
-  }
+  }
+
+  .tooltip-inner {
+    max-width: 350px;
+    /* If max-width does not work, try using width instead */
+    width: 350px; 
+}

static/fonts/fira-sans-v9-greek_latin-600.svg

@@ -0,0 +1,26 @@
+// Careful. This returns a Promise. Proper usage is:
+
+// loadPrivateKey(...).then(
+//    privateKey => console.log(privateKey) // RESOVE
+//    reason => console.log(reason) // REJECT
+//).catch(
+//    err => console.log(err)
+//)
+const loadPrivateKey = (async(privateKeyArmored, passphrase) => {
+    let privateKey = await openpgp.decryptKey({
+      privateKey: await openpgp.readPrivateKey({ armoredKey: privateKeyArmored }),
+      passphrase
+    });
+    return privateKey
+})
+
+const loadPrivateKeyLocal = async () => loadPrivateKey(
+    localStorage['privateKeyArmored'],localStorage['privateKeyPassphrase'] 
+)
+
+const enableTooltips = () => {
+    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))      
+    let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+}

static/fonts/fira-sans-v9-greek_latin-600.ttf

@@ -9,4 +9,10 @@
         <a href='{% url "home" %}' class='btn btn-primary'>Return</a>
     </div>
 </div>
+{% endblock %}
+
+{% block extra_script %}
+<script>
+localStorage.clear()
+</script>
 {% endblock %}

static/fonts/fira-sans-v9-greek_latin-600.woff

@@ -23,9 +23,23 @@
             </div>
           </li>
         </ul>
+        
         <ul class="navbar-nav ">
           <li class="nav-item">
             {% if user.is_authenticated %}
+              {% with request.session.private_key_data as pkdata %}
+                {% if pkdata %}
+                  <a class="btn btn-outline-danger btn-sm"
+                    data-bs-toggle="tooltip" 
+                    data-bs-html="true" 
+                    data-bs-placement="bottom" 
+                    title="Fingerprint: <b>{{ pkdata.fingerprint }}</b><br/>User id: <b>{{ pkdata.user_id|escape }}</b>"
+                    href='#'
+                    >
+                      <b>Private key loaded</b>
+                  </a>
+                {% endif %}
+              {% endwith %}
               <a class="btn btn-outline-info btn-sm" href="{% url 'auth_logout' %}">{{ user.get_full_name }} ({{ user.username }}) | Disconnect</a>
             {% else %}
               <a class="btn btn-outline-info btn-sm" href="{% url 'auth_login' %}">Please login</a>

static/fonts/fira-sans-v9-greek_latin-600.woff2

@@ -48,12 +48,18 @@
       <script src="{% static 'jquery-3.5.1.min.js' %}"></script>
       <script src="{% static 'jquery-ui-1.12.1.min.js' %}"></script>
       <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
+      <script src='{% static "openpgp/openpgp.min.js" %}'></script>
       <script src="{% static 'tools.js' %}"></script>
       <script src="{% static 'bootstrapalert.js' %}"></script>
       <script
         type="text/javascript"
         src="{% static 'django_tables2_column_shifter/js/django_tables2_column_shifter.min.js' %}">
     </script>
+    <script>
+      $(function() {
+        enableTooltips();
+      })
+    </script>
     {% endcompress %}
   {% endblock %}
   {% compress js %}