go/sonr
1
0
Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-08-03 09:51:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add passkey creation functionality

Browse Source
This commit is contained in:
Prad Nukala
2024-12-08 22:53:04 -05:00
parent 5c3966a9d6
commit e0ebe92361
15 changed files with 189 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/blocks/form/credentials.templ
+10 -7
View File
@@ -113,17 +113,20 @@ templ CredentialsScripts() {
.replace(/\//g, '_')
.replace(/=/g, '');
}
// Function to create a passkey
function createPasskey(button) {
const passkey = window.crypto.getRandomValues(new Uint8Array(32)).join('');
// Assuming there is a hidden input field to store the passkey
const hiddenInput = button.closest('form').querySelector('input[name="passkey"]');
if (hiddenInput) {
hiddenInput.value = passkey;
}
console.log('Passkey generated:', passkey);
}
</script>
}
}
script CreatePasskey(id string) {
function createPasskey(id) {
const passkey = document.getElementById(id);
passkey.value = window.crypto.getRandomValues(new Uint8Array(32)).join('');
}
}
// Template for creating credentials
templ CreateCredential(options *RegisterOptions) {
@CredentialsScripts()
pkg/blocks/form/credentials_templ.go
+1 -14
View File
File diff suppressed because one or more lines are too long
pkg/blocks/form/form.templ
+27 -8
View File
@@ -1,6 +1,9 @@
package form
import "github.com/onsonr/sonr/pkg/blocks/layout"
import (
"github.com/go-webauthn/webauthn/protocol"
"github.com/onsonr/sonr/pkg/blocks/layout"
)
// Form is a standard form styled like a card
templ Form(action string, method string, submit templ.Component, progress string, enableCancel bool) {
@@ -51,14 +54,30 @@ templ CodeInput(id string) {
<sl-input id={ id } placeholder="●" type="text" maxlength="1" pill class="w-min"></sl-input>
}
// Hidden input and button which calls a javascript function to generate a passkey
templ PasskeyInput(id string) {
script createPasskey(options protocol.PublicKeyCredentialCreationOptions) {
navigator.credentials.create(options).then(function(credential) {
// Dispatch event with credential data
window.dispatchEvent(new CustomEvent('credentialCreated', {
detail: credential
}));
}).catch(function(err) {
window.dispatchEvent(new CustomEvent('credentialError', {
detail: err.message
}));
});
}
// Hidden input and button which calls a JavaScript function to generate a passkey
templ PasskeyInput(options protocol.PublicKeyCredentialCreationOptions) {
@CredentialsScripts()
<sl-button type="submit" pill style="width: 100%;">
<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 20px;"></sl-icon>
Create PassKey
<sl-icon slot="suffix" name="arrow-right" library="sonr" style="font-size: 20px;"></sl-icon>
</sl-button>
<form>
<input type="hidden" name="passkey"/>
<sl-button pill style="width: 100%;" onclick="createPasskey(this)">
<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 20px;"></sl-icon>
Create PassKey
<sl-icon slot="suffix" name="arrow-right" library="sonr" style="font-size: 20px;"></sl-icon>
</sl-button>
</form>
}
templ TurnstileWidget(sitekey string) {
pkg/blocks/form/form_templ.go
+12 -9
View File
@@ -8,7 +8,10 @@ package form
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
import "github.com/onsonr/sonr/pkg/blocks/layout"
import (
"github.com/go-webauthn/webauthn/protocol"
"github.com/onsonr/sonr/pkg/blocks/layout"
)
// Form is a standard form styled like a card
func Form(action string, method string, submit templ.Component, progress string, enableCancel bool) templ.Component {
@@ -48,7 +51,7 @@ func Form(action string, method string, submit templ.Component, progress string,
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(method)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 7, Col: 55}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 10, Col: 55}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@@ -61,7 +64,7 @@ func Form(action string, method string, submit templ.Component, progress string,
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(progress)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 11, Col: 38}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 14, Col: 38}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@@ -201,7 +204,7 @@ func CodeInput(id string) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 51, Col: 18}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 54, Col: 18}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@@ -215,8 +218,8 @@ func CodeInput(id string) templ.Component {
})
}
// Hidden input and button which calls a javascript function to generate a passkey
func PasskeyInput(id string) templ.Component {
// Hidden input and button which calls a JavaScript function to generate a passkey
func PasskeyInput(options protocol.PublicKeyCredentialCreationOptions) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -241,7 +244,7 @@ func PasskeyInput(id string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-button type=\"submit\" pill style=\"width: 100%;\"><sl-icon slot=\"prefix\" name=\"passkey\" library=\"sonr\" style=\"font-size: 20px;\"></sl-icon> Create PassKey <sl-icon slot=\"suffix\" name=\"arrow-right\" library=\"sonr\" style=\"font-size: 20px;\"></sl-icon></sl-button>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form><input type=\"hidden\" name=\"passkey\"> <sl-button pill style=\"width: 100%;\" onclick=\"createPasskey(this)\"><sl-icon slot=\"prefix\" name=\"passkey\" library=\"sonr\" style=\"font-size: 20px;\"></sl-icon> Create PassKey <sl-icon slot=\"suffix\" name=\"arrow-right\" library=\"sonr\" style=\"font-size: 20px;\"></sl-icon></sl-button></form>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -278,7 +281,7 @@ func TurnstileWidget(sitekey string) templ.Component {
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(sitekey)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 67, Col: 50}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 73, Col: 50}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {
@@ -321,7 +324,7 @@ func Submit(text string) templ.Component {
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 73, Col: 8}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/blocks/form/form.templ`, Line: 79, Col: 8}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {