enigmatic 0.21.7 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/components.js +5 -13
- package/enigmatic.js +1 -1
- package/index.html +72 -29
- package/package.json +1 -1
- package/authn.mjs +0 -123
package/README.md
CHANGED
|
@@ -61,7 +61,7 @@ The code creates a global object `w` that holds all the utility functions and st
|
|
|
61
61
|
To use Enigmatic.js, include the script in your HTML file and call its functions as needed. For example:
|
|
62
62
|
|
|
63
63
|
```html
|
|
64
|
-
<script src="
|
|
64
|
+
<script src="unpkg.com/enigmatic"></script>
|
|
65
65
|
<script>
|
|
66
66
|
// Perform custom element registration
|
|
67
67
|
w.element('custom-element', {
|
package/components.js
CHANGED
|
@@ -1,16 +1,8 @@
|
|
|
1
1
|
window.components = {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
'random-users': {
|
|
8
|
-
template: 'Hello Random user: {results[0].name.first} {results[0].name.last}',
|
|
9
|
-
onMount: e => console.log('Mounted', e.tagName, e.props),
|
|
10
|
-
beforeData: x => x.results[0].name.first = 'John'
|
|
11
|
-
},
|
|
12
|
-
'tailwind-example': {
|
|
13
|
-
template: '<div class="bg-blue-300 text-white font-bold py-2 px-4 rounded">I am Tailwind</div>',
|
|
14
|
-
onMount: async e => await loadCSS('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css')
|
|
2
|
+
"markdown-block": {
|
|
3
|
+
async init() {
|
|
4
|
+
await loadJS('https://cdn.jsdelivr.net/npm/marked/marked.min.js')
|
|
5
|
+
this.innerHTML = marked.parse(this.innerText)
|
|
6
|
+
}
|
|
15
7
|
}
|
|
16
8
|
}
|
package/enigmatic.js
CHANGED
|
@@ -111,7 +111,7 @@ w.element = (
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
if (window.components) {
|
|
114
|
-
for (let name in window.components) w.
|
|
114
|
+
for (let name in window.components) w.e(name, window.components[name], window.components[name]?.style)
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
w.state = new Proxy({}, {
|
package/index.html
CHANGED
|
@@ -1,33 +1,76 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
<link rel=stylesheet href=enigmatic.css>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
4
3
|
|
|
5
|
-
<
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Enigmatic Library</title>
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
font-family: Arial, sans-serif;
|
|
11
|
+
background-color: #f4f4f4;
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
6
15
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
16
|
+
.header {
|
|
17
|
+
background-color: #333;
|
|
18
|
+
color: #fff;
|
|
19
|
+
text-align: center;
|
|
20
|
+
padding: 1rem;
|
|
21
|
+
}
|
|
11
22
|
|
|
23
|
+
.container {
|
|
24
|
+
max-width: 800px;
|
|
25
|
+
margin: auto;
|
|
26
|
+
padding: 2rem;
|
|
27
|
+
background-color: #fff;
|
|
28
|
+
border-radius: 5px;
|
|
29
|
+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.description {
|
|
33
|
+
margin-top: 1rem;
|
|
34
|
+
font-size: 1.2rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.install {
|
|
38
|
+
margin-top: 2rem;
|
|
39
|
+
text-align: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.install-code {
|
|
43
|
+
background-color: #f0f0f0;
|
|
44
|
+
padding: 1rem;
|
|
45
|
+
border-radius: 5px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.footer {
|
|
49
|
+
text-align: center;
|
|
50
|
+
padding: 1rem;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
</head>
|
|
54
|
+
|
|
55
|
+
<body>
|
|
56
|
+
<div class="header">
|
|
57
|
+
<h1>Enigmatic</h1>
|
|
58
|
+
<p>Simpler front-end JS</p>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="container">
|
|
61
|
+
<h2>What is Enigmatic?</h2>
|
|
62
|
+
<p class="description">
|
|
63
|
+
Enigmatic is a powerful JavaScript library designed to solve complex problems with ease.
|
|
64
|
+
</p>
|
|
65
|
+
<h2>Getting Started</h2>
|
|
66
|
+
<div class="install">
|
|
67
|
+
<p>To start using Enigmatic in your projects, simply include the following script tag:</p>
|
|
68
|
+
<pre class="install-code"><code><script src="https://unpkg.com/enigmatic"></script></code></pre>
|
|
69
|
+
</div>
|
|
12
70
|
</div>
|
|
13
|
-
<div class="
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<div class="bg-white"></div>
|
|
20
|
-
<div class="bg-white"></div>
|
|
21
|
-
<div class="bg-white"></div>
|
|
22
|
-
<div class="bg-white"></div>
|
|
23
|
-
<div class="bg-white"></div>
|
|
24
|
-
<div class="bg-white"></div>
|
|
25
|
-
<div class="bg-green"></div>
|
|
26
|
-
</section>
|
|
27
|
-
<div class="bg-white"></div>
|
|
28
|
-
|
|
29
|
-
<div class="bg-yellow"></div>
|
|
30
|
-
<div class="bg-yellow"></div>
|
|
31
|
-
<div class="bg-yellow"></div>
|
|
32
|
-
|
|
33
|
-
</body>
|
|
71
|
+
<div class="footer">
|
|
72
|
+
<p>© 2023 Enigmatic. All rights reserved.</p>
|
|
73
|
+
</div>
|
|
74
|
+
</body>
|
|
75
|
+
|
|
76
|
+
</html>
|
package/package.json
CHANGED
package/authn.mjs
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
ArrayBuffer.from = (string) => Uint8Array.from(string.split('').map(e => e.charCodeAt(0))).buffer
|
|
2
|
-
|
|
3
|
-
const webauthn = async () => {
|
|
4
|
-
const op = {}
|
|
5
|
-
op.attestation = 'direct'
|
|
6
|
-
op.authenticatorSelection = {
|
|
7
|
-
authenticatorAttachment: 'platform',
|
|
8
|
-
requireResidentKey: false,
|
|
9
|
-
userVerification: 'discouraged'
|
|
10
|
-
}
|
|
11
|
-
op.challenge = ArrayBuffer.from('challenge')
|
|
12
|
-
op.pubKeyCredParams = []
|
|
13
|
-
op.rp = { id: location.hostname, name: location.hostname }
|
|
14
|
-
op.timeout = 60000,
|
|
15
|
-
op.user = { name: 'cb', displayName: 'cb', id: ArrayBuffer.from('cb') }
|
|
16
|
-
|
|
17
|
-
return {
|
|
18
|
-
async makeCredential() {
|
|
19
|
-
return await navigator.credentials.create({ publicKey: op })
|
|
20
|
-
},
|
|
21
|
-
async getAssertion() {
|
|
22
|
-
return await navigator.credentials.get({ publicKey: op })
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
const w = await webauthn()
|
|
28
|
-
const credential = await w.makeCredential()
|
|
29
|
-
const decodedClientData = JSON.parse(new TextDecoder('utf-8').decode(credential.response.clientDataJSON))
|
|
30
|
-
console.log(decodedClientData)
|
|
31
|
-
// decode credential.response.attestationObject
|
|
32
|
-
|
|
33
|
-
//
|
|
34
|
-
// w.getAssertion()
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
/*
|
|
38
|
-
const credential = await navigator.credentials.create({
|
|
39
|
-
publicKey: {
|
|
40
|
-
challenge: Uint8Array.from(
|
|
41
|
-
'xxxxxx', c => c.charCodeAt(0)),
|
|
42
|
-
rp: {
|
|
43
|
-
name: "Test",
|
|
44
|
-
id: "localhost",
|
|
45
|
-
},
|
|
46
|
-
user: {
|
|
47
|
-
id: Uint8Array.from(
|
|
48
|
-
"UZSL85T9AFC", c => c.charCodeAt(0)),
|
|
49
|
-
name: "lee@webauthn.guide",
|
|
50
|
-
displayName: "Lee",
|
|
51
|
-
},
|
|
52
|
-
pubKeyCredParams: [{ alg: -7, type: "public-key" }],
|
|
53
|
-
authenticatorSelection: {
|
|
54
|
-
authenticatorAttachment: "cross-platform",
|
|
55
|
-
},
|
|
56
|
-
timeout: 60000,
|
|
57
|
-
attestation: "direct"
|
|
58
|
-
}
|
|
59
|
-
})
|
|
60
|
-
|
|
61
|
-
console.log(credential)
|
|
62
|
-
|
|
63
|
-
// Auth
|
|
64
|
-
const publicKeyCredentialRequestOptions = {
|
|
65
|
-
challenge: Uint8Array.from(
|
|
66
|
-
randomStringFromServer, c => c.charCodeAt(0)),
|
|
67
|
-
allowCredentials: [{
|
|
68
|
-
id: Uint8Array.from(
|
|
69
|
-
credentialId, c => c.charCodeAt(0)),
|
|
70
|
-
type: 'public-key',
|
|
71
|
-
transports: ['usb', 'ble', 'nfc'],
|
|
72
|
-
}],
|
|
73
|
-
timeout: 60000,
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
const assertion = await navigator.credentials.get({
|
|
77
|
-
publicKey: publicKeyCredentialRequestOptions
|
|
78
|
-
})
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
ArrayBuffer.from = (string) => Uint8Array.from(string.split('').map(e => e.charCodeAt(0))).buffer
|
|
82
|
-
|
|
83
|
-
const webauthn = async () => {
|
|
84
|
-
//if(!await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable())
|
|
85
|
-
// return false
|
|
86
|
-
const op = {}
|
|
87
|
-
op.attestation = 'direct'
|
|
88
|
-
op.authenticatorSelection = {
|
|
89
|
-
authenticatorAttachment: 'platform',
|
|
90
|
-
requireResidentKey: false,
|
|
91
|
-
userVerification: 'discouraged'
|
|
92
|
-
}
|
|
93
|
-
op.challenge = ArrayBuffer.from('challenge')
|
|
94
|
-
op.pubKeyCredParams = [{ alg: -7, type: 'public-key' }]
|
|
95
|
-
op.rp = { id: 'localhost', name: 'localhost' }
|
|
96
|
-
op.timeout = 60000,
|
|
97
|
-
op.user = { name: 'cb', displayName: 'cb', id: ArrayBuffer.from('cb') }
|
|
98
|
-
|
|
99
|
-
return {
|
|
100
|
-
async makeCredential() {
|
|
101
|
-
const cred = await navigator.credentials.create({ publicKey: op })
|
|
102
|
-
return cred
|
|
103
|
-
},
|
|
104
|
-
async getAssertion() {
|
|
105
|
-
const cred = await navigator.credentials.get({ publicKey: op })
|
|
106
|
-
return cred
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
const w = await webauthn()
|
|
112
|
-
w.makeCredential().then(e => console.log(e))
|
|
113
|
-
//w.getAssertion().then(e => console.log(e))
|
|
114
|
-
|
|
115
|
-
/*
|
|
116
|
-
send to server
|
|
117
|
-
{
|
|
118
|
-
credential: {type: 'FIDO', id: attestation.id},
|
|
119
|
-
clientData: attestation.signature.clientData,
|
|
120
|
-
authnrData: attestation.signature.authnrData,
|
|
121
|
-
signature: attestation.signature.signature
|
|
122
|
-
}
|
|
123
|
-
*/
|