feat: Implement <my-indie-auth> (#2)

* nfreear/elements#28
nfreear · Oct 17, 2022 · f5d31fa · f5d31fa
1 parent 54ee5e9
commit f5d31fa
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -15,7 +15,9 @@
 
 <h1>Nick&rsquo;s Notes App</h1>
 
-<form id="bookmark-form" method="POST">
+<my-indie-auth>
+
+<form id="bookmark-form" method="POST" hidden>
   <p class="status" role="alert" data-state=""></p>
   <!--
     <p class="status" role="alert" data-state="success"></p>
@@ -44,11 +46,10 @@ <h1>Nick&rsquo;s Notes App</h1>
   <p>
     <button type="submit">Add bookmark</button>
   </p>
-  <p>
-    <a href="./settings.html">Settings</a>
-  </p>
 </form>
 
+</my-indie-auth>
+
 <script type="module" src="lib/app.mjs"></script>
 
 </html>
diff --git a/docs/lib/BookmarkForm.mjs b/docs/lib/BookmarkForm.mjs
@@ -33,9 +33,9 @@ export class BookmarkForm {
     try {
       const gist = new Gist(); // this.CFG.github);
       const resp = await gist.writeJson(bookmark);
-      const { html_url } = resp.data;
+      const { html_url } = resp.data; /* eslint-disable-line camelcase */
 
-      this._showSuccess(`<a href="${html_url}">Gist created</a>`, { bookmark, resp });
+      this._showSuccess(`<a href="${html_url}">Gist created</a>`, { bookmark, resp }); /* eslint-disable-line camelcase */
     } catch (ex) {
       this._showError('problem creating Gist', { ex });
     }

diff --git a/docs/lib/SettingsForm.mjs b/docs/lib/SettingsForm.mjs
@@ -4,6 +4,8 @@
  * Store and access App. settings.
  */
 
+import 'https://nfreear.github.io/elements/src/components/MyIndieAuthElement.js';
+
 const { document, localStorage, location, navigator } = window;
 const { clipboard } = navigator;
 

diff --git a/docs/lib/app.mjs b/docs/lib/app.mjs
@@ -3,6 +3,7 @@
  */
 
 import { BookmarkForm } from './BookmarkForm.mjs';
+import 'https://nfreear.github.io/elements/src/components/MyIndieAuthElement.js';
 
 const { location, navigator } = window;
 const { serviceWorker } = navigator;

diff --git a/docs/service-worker.mjs b/docs/service-worker.mjs
@@ -16,7 +16,8 @@ const FILES = [
   `${PATH}/app.mjs`,
   `${PATH}/BookmarkForm.mjs`,
   `${PATH}/Gist.mjs`,
-  `${PATH}/settings.mjs`,
+  `${PATH}/SettingsForm.mjs`,
+  'https://nfreear.github.io/elements/src/components/MyIndieAuthElement.js',
   './settings.html',
   './style/app.css',
   './style/icon.svg'

diff --git a/docs/settings.html b/docs/settings.html
@@ -3,19 +3,22 @@
 <meta charset="utf-8"/>
 <meta name="robots" content="noindex"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<meta http-equiv="Content-Security-Policy" content=
-"default-src 'self'; script-src 'self'; object-src 'none'; font-src 'none'; frame-src 'none'; script-src-attr 'none'"
+<meta http-equiv="X-Content-Security-Policy" content=
+"default-src 'self'; script-src 'self' ; object-src 'none'; font-src 'none'; frame-src 'none'; script-src-attr 'none'"
 />
 
+<link href="manifest.webmanifest" rel="manifest" type="application/manifest+json"/>
 <link href="style/app.css" rel="stylesheet"/>
-<link href="manifest.webmanifest" rel="manifest" type="application/manifest+json" />
 <link href="style/icon.svg" rel="icon"/>
 
-<title>App Settings</title>
+<title>App Settings | Nick’s Notes App</title>
 
-<h1>App Settings</h1>
+<h1>Nick’s Notes App</h1>
 
-<form id="settings-form" method="POST">
+<my-indie-auth>
+
+<form id="settings-form" method="POST" hidden>
+  <h2>App Settings</h2>
   <p>
     <label for="gh">GitHub Key</label>
     <input id="gh" name="github" required/>
@@ -35,6 +38,8 @@ <h1>App Settings</h1>
   </p>
 </form>
 
+</my-indie-auth>
+
 <script type="module" src="lib/SettingsForm.mjs"></script>
 
 </html>