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

refactor: Refactor registration forms to use UI components

Browse Source
This commit is contained in:
Prad Nukala
2024-12-10 23:41:49 -05:00
parent aa43770bf4
commit e2f24eef8e
31 changed files with 1380 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/gateway/handlers/register/inputs.templ
+41 -86
View File
@@ -1,6 +1,5 @@
package register
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>
@@ -9,49 +8,50 @@ templ passkeyDropzone(addr string, userHandle string, challenge string) {
}
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"
const publicKey = {
challenge: Uint8Array.from(challenge, (c) => c.charCodeAt(0)),
rp: {
name: "Sonr.ID",
},
{
type: "public-key",
alg: -257, // "RS256"
user: {
// Assuming that userId is ASCII-only
id: Uint8Array.from(userId, (c) => c.charCodeAt(0)),
name: userId,
displayName: userHandle,
},
],
authenticatorSelection: {
userVerification: "required",
residentKey: "required",
authenticatorAttachment: "platform",
},
timeout: 60000, // 1 minute
extensions: {
payment: {
isPayment: true,
pubKeyCredParams: [
{
type: "public-key",
alg: -7, // "ES256"
},
{
type: "public-key",
alg: -257, // "RS256"
},
],
authenticatorSelection: {
userVerification: "required",
residentKey: "required",
authenticatorAttachment: "platform",
},
},
};
// 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, '');
}
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 })
@@ -92,48 +92,3 @@ navigator.credentials
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>
}
}