mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-02 17:31:39 +00:00
refactor: Move registration form components to dedicated directory
This commit is contained in:
Prad Nukala
@@ -0,0 +1,218 @@
|
||||
package register
|
||||
|
||||
type RegisterPasskeyData struct {
|
||||
Address string
|
||||
Handle string
|
||||
Name string
|
||||
Challenge string
|
||||
CreationBlock string
|
||||
}
|
||||
|
||||
templ formRegisterPasskey(action, method string, data RegisterPasskeyData) {
|
||||
<form action={ templ.SafeURL(action) } method={ method } id="passkey-form">
|
||||
<input type="hidden" name="credential" id="credential-data" required/>
|
||||
<sl-card class="card-form gap-4 max-w-lg">
|
||||
<div slot="header">
|
||||
<div class="w-full py-2">
|
||||
@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
|
||||
</div>
|
||||
</div>
|
||||
<sl-select
|
||||
label="Accounts"
|
||||
value="SNR BTC ETH"
|
||||
help-text="Select Blockchains to connect with your Vault"
|
||||
multiple
|
||||
class="custom-tag py-2"
|
||||
>
|
||||
@cryptoWalletOption("SNR", "Sonr", true)
|
||||
@cryptoWalletOption("BTC", "Bitcoin", true)
|
||||
@cryptoWalletOption("ETH", "Ethereum", true)
|
||||
@cryptoWalletOption("SOL", "Solana", false)
|
||||
@cryptoWalletOption("LTC", "Litecoin", false)
|
||||
@cryptoWalletOption("DOGE", "Dogecoin", false)
|
||||
@cryptoWalletOption("XRP", "Ripple", false)
|
||||
@cryptoWalletOption("OSMO", "Osmosis", false)
|
||||
@cryptoWalletOption("ATOM", "Cosmos", false)
|
||||
@cryptoWalletOption("STARZ", "Stargaze", false)
|
||||
@cryptoWalletOption("AKT", "Akash", false)
|
||||
@cryptoWalletOption("EVMOS", "Evmos", false)
|
||||
@cryptoWalletOption("FIL", "Filecoin", false)
|
||||
@cryptoWalletOption("AXL", "Axelar", false)
|
||||
</sl-select>
|
||||
<script type="module">
|
||||
const select = document.querySelector('.custom-tag');
|
||||
|
||||
select.getTag = (option, index) => {
|
||||
// Use the same icon used in the <sl-option>
|
||||
const name = option.querySelector('sl-icon[slot="prefix"]').name;
|
||||
|
||||
// You can return a string, a Lit Template, or an HTMLElement here
|
||||
return `
|
||||
<sl-tag removable>
|
||||
<sl-icon name="${name}" library="crypto" style="padding-inline-end: .5rem;"></sl-icon>
|
||||
${option.getTextLabel()}
|
||||
</sl-tag>
|
||||
`;
|
||||
};
|
||||
</script>
|
||||
<div slot="footer" class="space-y-2">
|
||||
@passkeyDropzone(data.Address, data.Handle, data.Challenge)
|
||||
<sl-button href="/" style="width: 100%;" outline>
|
||||
<sl-icon slot="prefix" name="x-lg"></sl-icon>
|
||||
Cancel
|
||||
</sl-button>
|
||||
</div>
|
||||
<style>
|
||||
.card-form [slot='footer'] {
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</sl-card>
|
||||
</form>
|
||||
}
|
||||
|
||||
templ passkeyDropzone(addr string, userHandle string, challenge string) {
|
||||
<sl-button style="width: 100%;" onclick={ createPasskey(addr, userHandle, challenge) }>
|
||||
<sl-icon slot="prefix" name="passkey" library="sonr" style="font-size: 24px;" class="text-neutral-500"></sl-icon>
|
||||
Register Passkey
|
||||
</sl-button>
|
||||
}
|
||||
|
||||
script createPasskey(userId string, userHandle 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: userId,
|
||||
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,
|
||||
},
|
||||
},
|
||||
};
|
||||
// Helper function to convert ArrayBuffer to Base64URL string
|
||||
function arrayBufferToBase64URL(buffer) {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let str = '';
|
||||
bytes.forEach(byte => { str += String.fromCharCode(byte) });
|
||||
return btoa(str)
|
||||
.replace(/\+/g, '-')
|
||||
.replace(/\//g, '_')
|
||||
.replace(/=/g, '');
|
||||
}
|
||||
|
||||
navigator.credentials
|
||||
.create({ publicKey })
|
||||
.then((newCredentialInfo) => {
|
||||
if (!(newCredentialInfo instanceof PublicKeyCredential)) {
|
||||
throw new Error('Received credential is not a PublicKeyCredential');
|
||||
}
|
||||
|
||||
const response = newCredentialInfo.response;
|
||||
if (!(response instanceof AuthenticatorAttestationResponse)) {
|
||||
throw new Error('Response is not an AuthenticatorAttestationResponse');
|
||||
}
|
||||
|
||||
// Convert the credential data to a cross-platform compatible format
|
||||
const credentialJSON = {
|
||||
id: newCredentialInfo.id,
|
||||
rawId: arrayBufferToBase64URL(newCredentialInfo.rawId),
|
||||
type: newCredentialInfo.type,
|
||||
authenticatorAttachment: newCredentialInfo.authenticatorAttachment || null,
|
||||
transports: Array.isArray(response.getTransports) ? response.getTransports() : [],
|
||||
clientExtensionResults: newCredentialInfo.getClientExtensionResults(),
|
||||
response: {
|
||||
attestationObject: arrayBufferToBase64URL(response.attestationObject),
|
||||
clientDataJSON: arrayBufferToBase64URL(response.clientDataJSON)
|
||||
}
|
||||
};
|
||||
|
||||
// Set the form value with the stringified credential data
|
||||
const credentialInput = document.getElementById('credential-data');
|
||||
credentialInput.value = JSON.stringify(credentialJSON);
|
||||
|
||||
// Submit the form
|
||||
const form = document.getElementById('passkey-form');
|
||||
form.submit();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Passkey creation failed:', err);
|
||||
alert(`Failed to create passkey: ${err.message || 'Unknown error'}`);
|
||||
});
|
||||
}
|
||||
|
||||
templ sonrProfile(addr string, name string, handle string, creationBlock string) {
|
||||
<div class="profile-card min-w-[320px]">
|
||||
<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-700 to-cyan-300 p-4 py-5 px-5 rounded-xl">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<h2>sonr-testnet-1</h2>
|
||||
<p class="text-2xl font-bold">{ handle }</p>
|
||||
</div>
|
||||
<div class="flex items-center opacity-60">
|
||||
<sl-icon style="font-size: 52px;" library="sonr" name="sonr-fill"></sl-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 flex justify-between items-center w-52">
|
||||
<span class="text-lg font-mono">{ shortenAddress(addr) }</span>
|
||||
</div>
|
||||
<div class="flex justify-between mt-5 w-48 ">
|
||||
<div>
|
||||
<h3 class="text-xs">Block Created </h3>
|
||||
<p class="font-bold"><span>#</span>{ creationBlock }</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xs">Issued to</h3>
|
||||
<p class="font-bold">{ name }</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ cryptoWalletOption(ticker string, name string, isDefault bool) {
|
||||
if isDefault {
|
||||
<sl-option value={ ticker } selected disabled>
|
||||
<sl-icon slot="prefix" name={ ticker } library="crypto"></sl-icon>
|
||||
{ name }
|
||||
</sl-option>
|
||||
<sl-divider></sl-divider>
|
||||
} else {
|
||||
<sl-option value={ ticker }>
|
||||
<sl-icon slot="prefix" name={ ticker } library="crypto"></sl-icon>
|
||||
{ name }
|
||||
</sl-option>
|
||||
<sl-divider></sl-divider>
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to shorten address
|
||||
func shortenAddress(address string) string {
|
||||
if len(address) <= 20 {
|
||||
return address
|
||||
}
|
||||
return address[:16] + "..." + address[len(address)-4:]
|
||||
}
|
||||
@@ -0,0 +1,482 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.793
|
||||
package register
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
type RegisterPasskeyData struct {
|
||||
Address string
|
||||
Handle string
|
||||
Name string
|
||||
Challenge string
|
||||
CreationBlock string
|
||||
}
|
||||
|
||||
func formRegisterPasskey(action, method string, data RegisterPasskeyData) 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 {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form action=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 templ.SafeURL = templ.SafeURL(action)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" method=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
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: `app/gateway/internal/pages/register/creds.templ`, Line: 12, Col: 55}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" id=\"passkey-form\"><input type=\"hidden\" name=\"credential\" id=\"credential-data\" required> <sl-card class=\"card-form gap-4 max-w-lg\"><div slot=\"header\"><div class=\"w-full py-2\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><sl-select label=\"Accounts\" value=\"SNR BTC ETH\" help-text=\"Select Blockchains to connect with your Vault\" multiple class=\"custom-tag py-2\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("SNR", "Sonr", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("BTC", "Bitcoin", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("ETH", "Ethereum", true).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("SOL", "Solana", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("LTC", "Litecoin", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("DOGE", "Dogecoin", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("XRP", "Ripple", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("OSMO", "Osmosis", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("ATOM", "Cosmos", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("STARZ", "Stargaze", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("AKT", "Akash", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("EVMOS", "Evmos", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("FIL", "Filecoin", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = cryptoWalletOption("AXL", "Axelar", false).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</sl-select><script type=\"module\">\n const select = document.querySelector('.custom-tag');\n\n select.getTag = (option, index) => {\n // Use the same icon used in the <sl-option>\n const name = option.querySelector('sl-icon[slot=\"prefix\"]').name;\n\n // You can return a string, a Lit Template, or an HTMLElement here\n return `\n <sl-tag removable>\n <sl-icon name=\"${name}\" library=\"crypto\" style=\"padding-inline-end: .5rem;\"></sl-icon>\n ${option.getTextLabel()}\n </sl-tag>\n `;\n };\n </script><div slot=\"footer\" class=\"space-y-2\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = passkeyDropzone(data.Address, data.Handle, data.Challenge).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-button href=\"/\" style=\"width: 100%;\" outline><sl-icon slot=\"prefix\" name=\"x-lg\"></sl-icon> Cancel</sl-button></div><style>\n \t\t.card-form [slot='footer'] {\n \t\tjustify-content: space-evenly;\n \t\talign-items: center;\n \t\t}\n\t\t</style></sl-card></form>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func passkeyDropzone(addr string, userHandle string, challenge string) 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 {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var4 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var4 == nil {
|
||||
templ_7745c5c3_Var4 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, createPasskey(addr, userHandle, challenge))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-button style=\"width: 100%;\" onclick=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var5 templ.ComponentScript = createPasskey(addr, userHandle, challenge)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var5.Call)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><sl-icon slot=\"prefix\" name=\"passkey\" library=\"sonr\" style=\"font-size: 24px;\" class=\"text-neutral-500\"></sl-icon> Register Passkey</sl-button>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func createPasskey(userId string, userHandle string, challenge string) templ.ComponentScript {
|
||||
return templ.ComponentScript{
|
||||
Name: `__templ_createPasskey_fc87`,
|
||||
Function: `function __templ_createPasskey_fc87(userId, userHandle, challenge){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: userId,
|
||||
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,
|
||||
},
|
||||
},
|
||||
};
|
||||
// Helper function to convert ArrayBuffer to Base64URL string
|
||||
function arrayBufferToBase64URL(buffer) {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let str = '';
|
||||
bytes.forEach(byte => { str += String.fromCharCode(byte) });
|
||||
return btoa(str)
|
||||
.replace(/\+/g, '-')
|
||||
.replace(/\//g, '_')
|
||||
.replace(/=/g, '');
|
||||
}
|
||||
|
||||
navigator.credentials
|
||||
.create({ publicKey })
|
||||
.then((newCredentialInfo) => {
|
||||
if (!(newCredentialInfo instanceof PublicKeyCredential)) {
|
||||
throw new Error('Received credential is not a PublicKeyCredential');
|
||||
}
|
||||
|
||||
const response = newCredentialInfo.response;
|
||||
if (!(response instanceof AuthenticatorAttestationResponse)) {
|
||||
throw new Error('Response is not an AuthenticatorAttestationResponse');
|
||||
}
|
||||
|
||||
// Convert the credential data to a cross-platform compatible format
|
||||
const credentialJSON = {
|
||||
id: newCredentialInfo.id,
|
||||
rawId: arrayBufferToBase64URL(newCredentialInfo.rawId),
|
||||
type: newCredentialInfo.type,
|
||||
authenticatorAttachment: newCredentialInfo.authenticatorAttachment || null,
|
||||
transports: Array.isArray(response.getTransports) ? response.getTransports() : [],
|
||||
clientExtensionResults: newCredentialInfo.getClientExtensionResults(),
|
||||
response: {
|
||||
attestationObject: arrayBufferToBase64URL(response.attestationObject),
|
||||
clientDataJSON: arrayBufferToBase64URL(response.clientDataJSON)
|
||||
}
|
||||
};
|
||||
|
||||
// Set the form value with the stringified credential data
|
||||
const credentialInput = document.getElementById('credential-data');
|
||||
credentialInput.value = JSON.stringify(credentialJSON);
|
||||
|
||||
// Submit the form
|
||||
const form = document.getElementById('passkey-form');
|
||||
form.submit();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Passkey creation failed:', err);
|
||||
alert(` + "`" + `Failed to create passkey: ${err.message || 'Unknown error'}` + "`" + `);
|
||||
});
|
||||
}`,
|
||||
Call: templ.SafeScript(`__templ_createPasskey_fc87`, userId, userHandle, challenge),
|
||||
CallInline: templ.SafeScriptInline(`__templ_createPasskey_fc87`, userId, userHandle, challenge),
|
||||
}
|
||||
}
|
||||
|
||||
func sonrProfile(addr string, name string, handle string, creationBlock string) 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 {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var6 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var6 == nil {
|
||||
templ_7745c5c3_Var6 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"profile-card min-w-[320px]\"><div class=\"text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-700 to-cyan-300 p-4 py-5 px-5 rounded-xl\"><div class=\"flex justify-between\"><div><h2>sonr-testnet-1</h2><p class=\"text-2xl font-bold\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var7 string
|
||||
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(handle)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 173, Col: 43}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"flex items-center opacity-60\"><sl-icon style=\"font-size: 52px;\" library=\"sonr\" name=\"sonr-fill\"></sl-icon></div></div><div class=\"mt-5 flex justify-between items-center w-52\"><span class=\"text-lg font-mono\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var8 string
|
||||
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(shortenAddress(addr))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 180, Col: 58}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span></div><div class=\"flex justify-between mt-5 w-48 \"><div><h3 class=\"text-xs\">Block Created </h3><p class=\"font-bold\"><span>#</span>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var9 string
|
||||
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(creationBlock)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 185, Col: 55}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div><h3 class=\"text-xs\">Issued to</h3><p class=\"font-bold\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var10 string
|
||||
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 189, Col: 32}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div></div></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func cryptoWalletOption(ticker string, name string, isDefault bool) 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 {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var11 == nil {
|
||||
templ_7745c5c3_Var11 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
if isDefault {
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-option value=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var12 string
|
||||
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(ticker)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 198, Col: 27}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" selected disabled><sl-icon slot=\"prefix\" name=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var13 string
|
||||
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(ticker)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 199, Col: 39}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" library=\"crypto\"></sl-icon> ")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var14 string
|
||||
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 200, Col: 9}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</sl-option> <sl-divider></sl-divider>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
} else {
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-option value=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var15 string
|
||||
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(ticker)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 204, Col: 27}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><sl-icon slot=\"prefix\" name=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var16 string
|
||||
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(ticker)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 205, Col: 39}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" library=\"crypto\"></sl-icon> ")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var17 string
|
||||
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(name)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/creds.templ`, Line: 206, Col: 9}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</sl-option> <sl-divider></sl-divider>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
// Helper function to shorten address
|
||||
func shortenAddress(address string) string {
|
||||
if len(address) <= 20 {
|
||||
return address
|
||||
}
|
||||
return address[:16] + "..." + address[len(address)-4:]
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -1,25 +1,24 @@
|
||||
package register
|
||||
|
||||
import (
|
||||
"github.com/onsonr/sonr/pkg/common/styles/forms"
|
||||
"github.com/onsonr/sonr/pkg/common/styles/layout"
|
||||
"github.com/onsonr/sonr/pkg/common/styles/text"
|
||||
)
|
||||
|
||||
templ ProfileFormView(data forms.CreateProfileData) {
|
||||
@layout.Root("New Profile | Sonr.ID") {
|
||||
templ ProfileFormView(data CreateProfileData) {
|
||||
@layout.Root("Create Profile | Sonr.ID") {
|
||||
@layout.Container() {
|
||||
@text.Header("Create a Profile", "Enter some basic information about yourself.")
|
||||
@forms.CreateProfile("/register/start", "POST", data)
|
||||
@text.Header("Basic Info", "Tell us a little about yourself.")
|
||||
@formCreateProfile("/register/start", "POST", data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
templ LinkCredentialView(data forms.RegisterPasskeyData) {
|
||||
templ LinkCredentialView(data RegisterPasskeyData) {
|
||||
@layout.Root("Register | Sonr.ID") {
|
||||
@layout.Container() {
|
||||
@text.Header("Link a PassKey", "This will be used to login to your vault.")
|
||||
@forms.RegisterPasskey("/register/finish", "POST", data)
|
||||
@formRegisterPasskey("/register/finish", "POST", data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,12 +9,11 @@ import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
import (
|
||||
"github.com/onsonr/sonr/pkg/common/styles/forms"
|
||||
"github.com/onsonr/sonr/pkg/common/styles/layout"
|
||||
"github.com/onsonr/sonr/pkg/common/styles/text"
|
||||
)
|
||||
|
||||
func ProfileFormView(data forms.CreateProfileData) templ.Component {
|
||||
func ProfileFormView(data CreateProfileData) 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 {
|
||||
@@ -59,7 +58,7 @@ func ProfileFormView(data forms.CreateProfileData) templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Err = text.Header("Create a Profile", "Enter some basic information about yourself.").Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = text.Header("Basic Info", "Tell us a little about yourself.").Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -67,7 +66,7 @@ func ProfileFormView(data forms.CreateProfileData) templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = forms.CreateProfile("/register/start", "POST", data).Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = formCreateProfile("/register/start", "POST", data).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -79,7 +78,7 @@ func ProfileFormView(data forms.CreateProfileData) templ.Component {
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
templ_7745c5c3_Err = layout.Root("New Profile | Sonr.ID").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = layout.Root("Create Profile | Sonr.ID").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -87,7 +86,7 @@ func ProfileFormView(data forms.CreateProfileData) templ.Component {
|
||||
})
|
||||
}
|
||||
|
||||
func LinkCredentialView(data forms.RegisterPasskeyData) templ.Component {
|
||||
func LinkCredentialView(data RegisterPasskeyData) 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 {
|
||||
@@ -140,7 +139,7 @@ func LinkCredentialView(data forms.RegisterPasskeyData) templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = forms.RegisterPasskey("/register/finish", "POST", data).Render(ctx, templ_7745c5c3_Buffer)
|
||||
templ_7745c5c3_Err = formRegisterPasskey("/register/finish", "POST", data).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
package register
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"github.com/onsonr/sonr/pkg/common/styles/layout"
|
||||
)
|
||||
|
||||
type CreateProfileData struct {
|
||||
TurnstileSiteKey string
|
||||
FirstNumber int
|
||||
LastNumber int
|
||||
}
|
||||
|
||||
func (d CreateProfileData) IsHumanLabel() string {
|
||||
return fmt.Sprintf("What is %d + %d?", d.FirstNumber, d.LastNumber)
|
||||
}
|
||||
|
||||
templ formCreateProfile(action string, method string, data CreateProfileData) {
|
||||
<form action={ templ.SafeURL(action) } method={ method }>
|
||||
<sl-card class="card-form gap-4 w-full max-w-lg mx-auto px-4 sm:px-6">
|
||||
<div slot="header">
|
||||
<div class="w-full py-1">
|
||||
<sl-progress-bar value="50"></sl-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
@layout.Rows() {
|
||||
<sl-input name="first_name" placeholder="Satoshi" type="text" label="First Name" required autofocus></sl-input>
|
||||
<sl-input name="last_name" placeholder="N" maxlength="1" type="text" label="Last Initial"></sl-input>
|
||||
}
|
||||
@layout.Spacer()
|
||||
<sl-input name="handle" placeholder="digitalgold" type="text" label="Handle" minlength="4" maxlength="12" required>
|
||||
<div slot="prefix">
|
||||
<sl-icon name="at-sign" library="sonr"></sl-icon>
|
||||
</div>
|
||||
</sl-input>
|
||||
@layout.Spacer()
|
||||
<sl-range name="is_human" label={ data.IsHumanLabel() } help-text="Prove you are a human." min="0" max="9" step="1"></sl-range>
|
||||
<div slot="footer">
|
||||
<sl-button href="/" outline>
|
||||
<sl-icon slot="prefix" name="arrow-left" library="sonr"></sl-icon>
|
||||
Cancel
|
||||
</sl-button>
|
||||
<sl-button type="submit">
|
||||
Next
|
||||
<sl-icon slot="suffix" name="arrow-right" library="sonr"></sl-icon>
|
||||
</sl-button>
|
||||
</div>
|
||||
<style>
|
||||
.card-form {
|
||||
margin: 1rem;
|
||||
}
|
||||
.card-form [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.card-form {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.card-form [slot='footer'] {
|
||||
flex-direction: column-reverse;
|
||||
width: 100%;
|
||||
}
|
||||
.card-form [slot='footer'] sl-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</sl-card>
|
||||
</form>
|
||||
}
|
||||
|
||||
// ╭──────────────────────────────────────────────────────╮
|
||||
// │ Passkey Components │
|
||||
// ╰──────────────────────────────────────────────────────╯
|
||||
@@ -0,0 +1,131 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.793
|
||||
package register
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"github.com/onsonr/sonr/pkg/common/styles/layout"
|
||||
)
|
||||
|
||||
type CreateProfileData struct {
|
||||
TurnstileSiteKey string
|
||||
FirstNumber int
|
||||
LastNumber int
|
||||
}
|
||||
|
||||
func (d CreateProfileData) IsHumanLabel() string {
|
||||
return fmt.Sprintf("What is %d + %d?", d.FirstNumber, d.LastNumber)
|
||||
}
|
||||
|
||||
func formCreateProfile(action string, method string, data CreateProfileData) 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 {
|
||||
return templ_7745c5c3_CtxErr
|
||||
}
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form action=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 templ.SafeURL = templ.SafeURL(action)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var2)))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" method=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
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: `app/gateway/internal/pages/register/profile.templ`, Line: 19, Col: 55}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><sl-card class=\"card-form gap-4 w-full max-w-lg mx-auto px-4 sm:px-6\"><div slot=\"header\"><div class=\"w-full py-1\"><sl-progress-bar value=\"50\"></sl-progress-bar></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Var4 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
||||
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
||||
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
defer func() {
|
||||
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err == nil {
|
||||
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
||||
}
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-input name=\"first_name\" placeholder=\"Satoshi\" type=\"text\" label=\"First Name\" required autofocus></sl-input> <sl-input name=\"last_name\" placeholder=\"N\" maxlength=\"1\" type=\"text\" label=\"Last Initial\"></sl-input>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
templ_7745c5c3_Err = layout.Rows().Render(templ.WithChildren(ctx, templ_7745c5c3_Var4), templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = layout.Spacer().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-input name=\"handle\" placeholder=\"digitalgold\" type=\"text\" label=\"Handle\" minlength=\"4\" maxlength=\"12\" required><div slot=\"prefix\"><sl-icon name=\"at-sign\" library=\"sonr\"></sl-icon></div></sl-input>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = layout.Spacer().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<sl-range name=\"is_human\" label=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var5 string
|
||||
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(data.IsHumanLabel())
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `app/gateway/internal/pages/register/profile.templ`, Line: 37, Col: 56}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" help-text=\"Prove you are a human.\" min=\"0\" max=\"9\" step=\"1\"></sl-range><div slot=\"footer\"><sl-button href=\"/\" outline><sl-icon slot=\"prefix\" name=\"arrow-left\" library=\"sonr\"></sl-icon> Cancel</sl-button> <sl-button type=\"submit\">Next <sl-icon slot=\"suffix\" name=\"arrow-right\" library=\"sonr\"></sl-icon></sl-button></div><style>\n\t\t\t\t.card-form {\n\t\t\t\t\tmargin: 1rem;\n\t\t\t\t}\n\t\t\t\t.card-form [slot='footer'] {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tflex-wrap: wrap;\n\t\t\t\t\tgap: 1rem;\n\t\t\t\t}\n\t\t\t\t@media (max-width: 640px) {\n\t\t\t\t\t.card-form {\n\t\t\t\t\t\tmargin: 0.5rem;\n\t\t\t\t\t}\n\t\t\t\t\t.card-form [slot='footer'] {\n\t\t\t\t\t\tflex-direction: column-reverse;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t\t.card-form [slot='footer'] sl-button {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</style></sl-card></form>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
// ╭──────────────────────────────────────────────────────╮
|
||||
// │ Passkey Components │
|
||||
// ╰──────────────────────────────────────────────────────╯
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
Reference in New Issue
Block a user