Browse Source

feat(install): add installation challenge

Josh Habdas 1 year ago
parent
commit
9b6106c59f
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 65 additions and 24 deletions
  1. 65
    24
      archetypes/post.md

+ 65
- 24
archetypes/post.md View File

@@ -11,39 +11,80 @@ images = [
11 11
 ] # overrides the site-wide open graph image
12 12
 +++
13 13
 
14
-{{< hackcss-form action="/post/coming-soon/" >}}
15
-  {{< hackcss-formgroup >}}
16
-    {{< hackcss-label for="pgp" text="64-bit PGP key:" />}}
17
-    {{< hackcss-textinput type="text" name="pgp" pattern="^(?:[A-Za-z0-9+/]{4}\s){3}(?:[A-Za-z0-9+/]{4})$" >}}
18
-    {{< hackcss-helpblock text="Submit with value: BB73 67EE 9A70 A631" />}}
19
-  {{< /hackcss-formgroup >}}
20
-{{< /hackcss-form >}}
14
+<div style="display:none">
15
+  {{< hackcss-form name="validate" action="/post/coming-soon/" >}}
16
+    {{< hackcss-formgroup name="validation" >}}
17
+      {{< hackcss-helpblock >}}
18
+        <strong>Please verify your installation to continue…</strong>
19
+      {{< /hackcss-helpblock >}}
20
+      {{< hackcss-label for="pgp" >}}
21
+        64-bit <abbr title="Pretty Good Privacy">PGP</abbr> key:
22
+      {{< /hackcss-label >}}
23
+      {{< hackcss-textinput
24
+          autofocus="true"
25
+          type="text" id="pgp" name="pgp" pattern="^(?:[A-Za-z0-9+/]{4}\s){3}(?:[A-Za-z0-9+/]{4})$" >}}
26
+      {{< hackcss-helpblock text="Challenge code: BB73 67EE 9A70 A631" />}}
27
+    {{< /hackcss-formgroup >}}
28
+  {{< /hackcss-form >}}
29
+</div>
21 30
 
22 31
 <script>
23
-  (function () {
24
-    'use strict';
25
-    const fs = document.querySelector('fieldset');
26
-    const hb = fs.querySelector('.help-block');
32
+  (function (window, document, undefined) {
33
+    "use strict";
34
+    const key = 'BB73 67EE 9A70 A631';
35
+    const wrapper = document.querySelector('[style="display:none"]')
36
+    const confirm = () => {
37
+      const form = document.forms.validate;
38
+      form.pgp.value = key;
39
+      form.pgp.type = 'password';
40
+      form.validation.classList.add('form-success');
41
+      form.validation.disabled = true;
42
+      form.querySelectorAll('.help-block').forEach(
43
+        helpblock => helpblock.remove()
44
+      );
45
+    };
27 46
     const validate = search => {
28
-      if (!search.includes('BB73+67EE+9A70+A631')) return dance();
29
-      fs.classList.add('form-success');
30
-      fs.disabled = true;
31
-      fs.querySelector('input').value = 'BB73 67EE 9A70 A631';
32
-      hb.remove();
33
-    }
34
-    const dance = () => hb.innerHTML = `<marquee>${hb.innerHTML}</marquee>`;
35
-    (document.location.search.length)
36
-      ? validate(document.location.search)
37
-      : null;
38
-  })();
47
+      search.includes(key.replace(/\s/g,'+')) ? confirm() : challenge();
48
+    };
49
+    const challenge = () => {
50
+      const body = document.body;
51
+      const forms = document.forms;
52
+      if (body.firstChild === forms.validate) return;
53
+      document.location.pathname !== '/' && (function () {
54
+        forms.validate.validation.classList.add('form-error');
55
+        document.title = "Please try again…";
56
+        forms.validate.validation.querySelectorAll('.help-block').forEach(
57
+          helpblock => {
58
+            helpblock.innerHTML = helpblock.innerHTML.replace(
59
+              key, `<mark>${key}</mark>`
60
+            );
61
+          }
62
+        );
63
+      })();
64
+      const fragment = document.createDocumentFragment();
65
+      fragment.appendChild(forms.validate);
66
+      while (body.firstChild) body.removeChild(body.firstChild);
67
+      body.appendChild(fragment);
68
+      forms.validate.addEventListener('submit', evt => {
69
+        validate(location.search);
70
+      });
71
+    };
72
+    const initialize = () => {
73
+      wrapper.style.display = 'block';
74
+      (document.location.search.replace('?pgp=','').length)
75
+        ? validate(location.search)
76
+        : challenge();
77
+    };
78
+    document.onreadystatechange = () => {
79
+      document.readyState === 'interactive' && initialize();
80
+    };
81
+  })(window, document);
39 82
 </script>
40 83
 
41 84
 <!--more-->
42 85
 
43 86
 Before you continue please take a moment to configure your archetypes. Archetypes are located in the `archetypes` directory of your site. To learn more about archetypes visit the [Archetypes](https://gohugo.io/content-management/archetypes/) page on the Hugo website. Click `Read more` to continue.
44 87
 
45
-This information appears below the [Summary Split](https://gohugo.io/content-management/summaries/).
46
-
47 88
 After Dark ships with a custom module system and provides a number of prebuilt modules. Shown here, an animation made possible by the `Fractal Forest` module:
48 89
 
49 90
 <img width="494" height="371" src="/bpg/cinemagraph-6.bpg" alt="BPG file format example">

Loading…
Cancel
Save