sonr/pkg/blocks/forms/register_passkey.templ

package forms

type RegisterPasskeyData struct {
	Address       string
	Handle        string
	Name          string
	Challenge     string
	CreationBlock string
}

templ RegisterPasskey(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-1">
					@sonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
				</div>
			</div>
			@passkeyDropzone(data.Address, data.Handle, data.Challenge)
			<div slot="footer">
				<sl-button type="submit" pill style="width: 100%;" variant="primary">
					<sl-icon slot="prefix" name="shield-fill-check"></sl-icon>
					Register Vault
					<sl-icon slot="suffix" name="arrow-outbound" library="sonr"></sl-icon>
				</sl-button>
			</div>
			<style>
  		.card-form [slot='footer'] {
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
  		}
		</style>
		</sl-card>
	</form>
}

templ passkeyDropzone(addr string, userHandle string, challenge string) {
	<sl-button pill 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,
    },
  },
};
navigator.credentials
  .create({ publicKey })
  .then((newCredentialInfo) => {
    // Convert credential to base64 string
    // Convert the credential data to a proper format
    const credentialJSON = JSON.stringify({
      id: base64URLEncode(newCredentialInfo.rawId),
      type: newCredentialInfo.type,
      authenticatorAttachment: newCredentialInfo.authenticatorAttachment,
      clientExtensionResults: newCredentialInfo.getClientExtensionResults(),
      response: {
        attestationObject: base64URLEncode(newCredentialInfo.response.attestationObject),
        clientDataJSON: base64URLEncode(newCredentialInfo.response.clientDataJSON)
      }
    });
    document.getElementById('credential-data').value = btoa(credentialJSON);
    document.getElementById('passkey-form').submit();
  })
  .catch((err) => {
    console.error(err);
    alert('Failed to create passkey. Please try again.');
  });
}

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>
}

// Helper function to shorten address
func shortenAddress(address string) string {
	if len(address) <= 20 {
		return address
	}
	return address[:16] + "..." + address[len(address)-4:]
}