sonr/internal/gateway/handlers/register/forms.templ

package register

import "github.com/onsonr/sonr/pkg/common/styles/layout"

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

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