Initial work on adding passkeys

Mostly starting to get some javascript set up

.editorconfig

@@ -8,6 +8,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.{js,css}]
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false
 

.eslintrc.yml

@@ -1,5 +1,6 @@
 parserOptions:
   sourceType: 'module'
+  ecmaVersion: 8
 extends: 'eslint:recommended'
 env:
   browser: true
@@ -9,7 +10,7 @@ ignorePatterns:
 rules:
   indent:
     - error
-    - 4
+    - 2
   linebreak-style:
     - error
     - unix

.stylelintrc

@@ -1,7 +1,3 @@
 {
-    "extends": ["stylelint-config-standard"],
+    "extends": ["stylelint-config-standard"]
-    "rules": {
-        "indentation": 4,
-        "import-notation": "string"
-    }
 }

resources/css/app.css

@@ -1,6 +1,6 @@
-@import "variables.css";
+@import url('variables.css');
-@import "fonts.css";
+@import url('fonts.css');
-@import "layout.css";
+@import url('layout.css');
-@import "colours.css";
+@import url('colours.css');
-@import "code.css";
+@import url('code.css');
-@import "content.css";
+@import url('content.css');

resources/css/content.css

@@ -1,5 +1,4 @@
-@import "posse.css";
+@import url('h-card.css');
-@import "h-card.css";
 
 .h-entry {
   border-inline-start: 1px solid var(--color-primary);

resources/css/posse.css

@@ -1,3 +0,0 @@
-.p-bridgy-twitter-content {
-    display: none;
-}

resources/css/variables.css

@@ -14,9 +14,9 @@
   --font-size-xxxl: 2.25rem; /* 36px */
 
   /* Colours */
-    --color-primary: oklch(36.8% 0.1 125.505);
+  --color-primary: oklch(36.8% 0.1 125.505deg);
-    --color-secondary: oklch(96.3% 0.1 125.505);
+  --color-secondary: oklch(96.3% 0.1 125.505deg);
-    --color-link: oklch(48.09% 0.146 241.41);
+  --color-link: oklch(48.09% 0.146 241.41deg);
-    --color-link-visited: oklch(70.44% 0.21 304.41);
+  --color-link-visited: oklch(70.44% 0.21 304.41deg);
-    --color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%);
+  --color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
 }

resources/js/app.js

@@ -1 +1,10 @@
 import '../css/app.css';
+
+// import { Auth } from './auth.js';
+//
+// let auth = new Auth();
+
+// auth.createCredentials().then((credentials) => {
+//   // eslint-disable-next-line no-console
+//   console.log(credentials);
+// });

resources/js/auth.js

@@ -0,0 +1,36 @@
+class Auth {
+  constructor() {}
+
+  async createCredentials() {
+    const publicKeyCredentialCreationOptions = {
+      challenge: Uint8Array.from(
+        'randomStringFromServer',
+        c => c.charCodeAt(0)
+      ),
+      rp: {
+        id: 'jonnybarnes.localhost',
+        name: 'JB',
+      },
+      user: {
+        id: Uint8Array.from(
+          'UZSL85T9AFC',
+          c => c.charCodeAt(0)
+        ),
+        name: 'jonny@jonnybarnes.uk',
+        displayName: 'Jonny',
+      },
+      pubKeyCredParams: [{alg: -7, type: 'public-key'}],
+      // authenticatorSelection: {
+      //   authenticatorAttachment: 'cross-platform',
+      // },
+      timeout: 60000,
+      attestation: 'direct'
+    };
+
+    return await navigator.credentials.create({
+      publicKey: publicKeyCredentialCreationOptions
+    });
+  }
+}
+
+export { Auth };

resources/views/admin/welcome.blade.php

@@ -51,4 +51,9 @@
     <p>
         Edit your <a href="/admin/bio">bio</a>.
     </p>
+
+    <h2>Passkeys</h2>
+    <p>
+        List passkeys here?
+    </p>
 @stop