Add explanation of functionality (#9)

* Add explanation of functionality
* Update compiled assets
* Wording
* Update generated files

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/app.vue

@@ -19,6 +19,9 @@
         is-nav
       >
         <b-navbar-nav class="ml-auto">
+          <b-nav-item @click="explanationShown = !explanationShown">
+            <i class="fas fa-question" /> {{ $t('btn-show-explanation') }}
+          </b-nav-item>
           <b-nav-item @click="newSecret">
             <i class="fas fa-plus" /> {{ $t('btn-new-secret') }}
           </b-nav-item>
@@ -40,6 +43,26 @@
 
       <b-row>
         <b-col>
+          <!-- Explanation -->
+          <b-card
+            v-if="explanationShown"
+            class="mb-3"
+            border-variant="primary"
+            header-bg-variant="primary"
+            header-text-variant="white"
+          >
+            <span
+              slot="header"
+              v-html="$t('title-explanation')"
+            />
+            <ul>
+              <li v-for="explanation in $t('items-explanation')">
+                {{ explanation }}
+              </li>
+            </ul>
+          </b-card>
+
+          <!-- Creation dialog -->
           <b-card
             v-if="mode == 'create' && !secretId"
             border-variant="primary"
@@ -66,6 +89,7 @@
             </b-button>
           </b-card>
 
+          <!-- Secret created, show secret URL -->
           <b-card
             v-if="mode == 'create' && secretId"
             border-variant="success"
@@ -88,6 +112,7 @@
             <p v-html="$t('text-burn-hint')" />
           </b-card>
 
+          <!-- Display secret -->
           <b-card
             v-if="mode == 'view'"
             border-variant="primary"
@@ -141,6 +166,7 @@ export default {
   data() {
     return {
       error: '',
+      explanationShown: false,
       mode: 'create',
       secret: '',
       securePassword: '',

src/langs/de.json

@@ -4,12 +4,23 @@
   "btn-create-secret": "Secret erstellen!",
   "btn-new-secret": "Neues Secret",
   "btn-reveal-secret": "Zeig mir das Secret!",
+  "btn-show-explanation": "Wie funktioniert das?",
+  "items-explanation": [
+    "Du gibst ein Secret auf dieser Seite ein",
+    "Dein Browser verschlüsselt das Secret mit einem generierten Passwort",
+    "Nur das verschlüsselte Secret wird an den Server geschickt (das Passwort oder das Secret im Klartext werden niemals übertragen!)",
+    "Der Server speichert das verschlüsselte Secret für eine Weile",
+    "Du gibst die angezeigte URL, welche die ID und das Passwort des Secrets enthält, an den Empfänger",
+    "Der Empfänger kann das Secret einmalig abrufen: Funktioniert das nicht, könnte jemand anderes es abgerufen haben!",
+    "Wenn das verschlüsselte Secret das erste Mal abgerufen wurde, wird es automatisch vom Server gelöscht"
+  ],
   "label-secret-data": "Inhalt des Secrets:",
   "text-burn-hint": "Bitte rufe die URL nicht selbst auf, da das Secret dadurch zerstört würde. Gib sie einfach weiter!",
   "text-hint-burned": "<strong>Achtung:</strong> Du kannst das nur einmal ansehen! Sobald du die Seite neu lädst, ist das Secret verschwunden, also besser direkt kopieren und sicher abspeichern&hellip;",
   "text-powered-by": "Läuft mit",
   "text-pre-reveal-hint": "Um das Secret anzuzeigen klicke diesen Button aber denk dran, dass das Secret nur einmal angezeigt und dabei gelöscht wird.",
   "text-pre-url": "Dein Secret wurde angelegt und unter folgender URL gespeichert:",
+  "title-explanation": "So funktioniert es&hellip;",
   "title-new-secret": "Erstelle ein neues Secret",
   "title-reading-secret": "Secret auslesen&hellip;",
   "title-secret-created": "Secret erstellt!"

src/langs/en.json

@@ -4,12 +4,23 @@
   "btn-create-secret": "Create the secret!",
   "btn-new-secret": "New Secret",
   "btn-reveal-secret": "Show me the secret!",
+  "btn-show-explanation": "How does this work?",
+  "items-explanation": [
+    "You enter a secret into the field on this page",
+    "Your browser encrypts the secret using a generated password",
+    "Only the encrypted secret is sent to the server (neither the plain secret nor the password are ever sent!)",
+    "The server stores the encrypted secret for a certain time",
+    "You pass the displayed URL containing the ID and the decryption password to the recipient",
+    "The recipient can view the secret exactly once: If they can't, the secret might have been viewed by someone else!",
+    "After the encrypted secret has been retrieved once, it is deleted from the server"
+  ],
   "label-secret-data": "Secret data:",
   "text-burn-hint": "Please remember not to go to this URL yourself as that would destroy the secret. Just pass it to someone else!",
   "text-hint-burned": "<strong>Attention:</strong> You're only seeing this once. As soon as you reload the page the secret will be gone so maybe copy it now&hellip;",
   "text-powered-by": "Powered by",
   "text-pre-reveal-hint": "To reveal the secret click this button but be aware doing so will destroy the secret. You can only view it once!",
   "text-pre-url": "Your secret was created and stored using this URL:",
+  "title-explanation": "This is how it works&hellip;",
   "title-new-secret": "Create a new secret",
   "title-reading-secret": "Reading your secret&hellip;",
   "title-secret-created": "Secret created!"