mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-03 01:41:44 +00:00
123 lines
3.3 KiB
Templ
123 lines
3.3 KiB
Templ
package form
|
|
|
|
import "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) {
|
|
<form action={ templ.SafeURL(action) } method={ method }>
|
|
<sl-card class="card-form gap-4 max-w-lg">
|
|
<div slot="header">
|
|
<div class="w-full py-1">
|
|
<sl-progress-bar value={ progress }></sl-progress-bar>
|
|
</div>
|
|
</div>
|
|
{ children... }
|
|
<div slot="footer">
|
|
if enableCancel {
|
|
<sl-button href="/" outline>
|
|
<sl-icon slot="prefix" name="arrow-left" library="sonr"></sl-icon>
|
|
Cancel
|
|
</sl-button>
|
|
}
|
|
@submit
|
|
</div>
|
|
<style>
|
|
.card-form [slot='footer'] {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</sl-card>
|
|
</form>
|
|
}
|
|
|
|
templ NameInput() {
|
|
@layout.Rows() {
|
|
<sl-input name="first_name" placeholder="Steve" type="text" label="First Name" required autofocus></sl-input>
|
|
<sl-input name="last_name" placeholder="J" maxlength="1" type="text" label="Last Initial"></sl-input>
|
|
}
|
|
}
|
|
|
|
templ HandleInput() {
|
|
<sl-input name="handle" placeholder="thoughtdiff" type="text" label="Handle" minlength="4" maxlength="12" required>
|
|
<div slot="prefix">
|
|
<sl-icon name="at-sign" library="sonr"></sl-icon>
|
|
</div>
|
|
</sl-input>
|
|
}
|
|
|
|
templ CodeInput(id string) {
|
|
<sl-input id={ id } placeholder="●" type="text" maxlength="1" pill class="w-min"></sl-input>
|
|
}
|
|
|
|
script createPasskey(userId string, userHandle string, userName string, challenge string) {
|
|
const publicKey = {
|
|
challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)),
|
|
rp: {
|
|
name: "Sonr.ID",
|
|
},
|
|
user: {
|
|
// Assuming that userId is ASCII-only
|
|
id: Uint8Array.from(userId, (c) => c.charCodeAt(0)),
|
|
name: userName,
|
|
displayName: userHandle,
|
|
},
|
|
pubKeyCredParams: [
|
|
{
|
|
type: "public-key",
|
|
alg: -7, // "ES256"
|
|
},
|
|
{
|
|
type: "public-key",
|
|
alg: -257, // "RS256"
|
|
},
|
|
],
|
|
authenticatorSelection: {
|
|
userVerification: "required",
|
|
residentKey: "required",
|
|
authenticatorAttachment: "platform",
|
|
},
|
|
timeout: 60000, // 1 minute
|
|
extensions: {
|
|
payment: {
|
|
isPayment: true,
|
|
},
|
|
},
|
|
};
|
|
navigator.credentials
|
|
.create({ publicKey })
|
|
.then((newCredentialInfo) => {
|
|
console.log(newCredentialInfo);
|
|
// Send new credential info to server for verification and registration.
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
// No acceptable authenticator or user refused consent. Handle appropriately.
|
|
});
|
|
}
|
|
|
|
// Hidden input and button which calls a JavaScript function to generate a passkey
|
|
templ PasskeyInput(userId string, userHandle string, userName string, challenge string) {
|
|
@CredentialsScripts()
|
|
<sl-button pill style="width: 100%;" onclick={ createPasskey(userId, userHandle, userName, challenge) }>
|
|
<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 TurnstileWidget(sitekey string) {
|
|
if sitekey != "" {
|
|
<br/>
|
|
<div class="cf-turnstile" data-sitekey={ sitekey }></div>
|
|
}
|
|
}
|
|
|
|
templ Submit(text string) {
|
|
<sl-button type="submit">
|
|
{ text }
|
|
<sl-icon slot="suffix" name="arrow-right" library="sonr"></sl-icon>
|
|
</sl-button>
|
|
}
|