mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-03 09:51:39 +00:00
91 lines
2.7 KiB
Templ
91 lines
2.7 KiB
Templ
package register
|
|
|
|
import (
|
|
"github.com/onsonr/sonr/internal/gateway/handlers/register/ui"
|
|
"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-6 w-full max-w-xl">
|
|
<div slot="header">
|
|
<div class="w-full py-1">
|
|
<sl-progress-bar value="50"></sl-progress-bar>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
<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>
|
|
</div>
|
|
@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-xl">
|
|
<div slot="header">
|
|
<div class="w-full py-2">
|
|
@ui.ProfileCard(data.Address, data.Name, data.Handle, data.CreationBlock)
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="space-y-2">
|
|
@ui.CreatePasskey(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>
|
|
}
|