mirror of
https://github.com/onsonr/sonr.git
synced 2025-03-11 13:29:12 +00:00
107 lines
2.9 KiB
Plaintext
107 lines
2.9 KiB
Plaintext
package forms
|
|
|
|
import (
|
|
"fmt"
|
|
"strconv"
|
|
"errors"
|
|
"github.com/onsonr/sonr/pkg/blocks/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 ValidateCreateProfileForm(formData map[string][]string) error {
|
|
// Validate ishuman slider
|
|
ishumanValues := formData["is_human"]
|
|
if len(ishumanValues) == 0 {
|
|
return errors.New("human verification is required")
|
|
}
|
|
|
|
ishumanSum, err := strconv.Atoi(ishumanValues[0])
|
|
if err != nil {
|
|
return errors.New("invalid human verification value")
|
|
}
|
|
|
|
// Get the expected sum from the form data
|
|
firstNum, _ := strconv.Atoi(formData["first_number"][0])
|
|
lastNum, _ := strconv.Atoi(formData["last_number"][0])
|
|
expectedSum := firstNum + lastNum
|
|
|
|
if ishumanSum != expectedSum {
|
|
return errors.New("incorrect sum for human verification")
|
|
}
|
|
|
|
return nil
|
|
}
|
|
|
|
// ProfileForm is a standard form styled like a card
|
|
templ CreateProfile(action string, method string, data CreateProfileData) {
|
|
<form action={ templ.SafeURL(action) } method={ method }>
|
|
<sl-card class="card-form gap-4 max-w-lg">
|
|
<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="Steve" type="text" label="First Name" required autofocus></sl-input>
|
|
<sl-input name="last_name" placeholder="J" maxlength="1" type="text" label="Last Initial"></sl-input>
|
|
}
|
|
@layout.Spacer()
|
|
<sl-input name="handle" placeholder="thoughtdiff" 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={ fmt.Sprint(data.FirstNumber + data.LastNumber) }
|
|
step="1"
|
|
onchange="validateSum(this)"
|
|
></sl-range>
|
|
<script>
|
|
function validateSum(slider) {
|
|
const expectedSum = { fmt.Sprint(data.FirstNumber + data.LastNumber) };
|
|
const value = parseInt(slider.value);
|
|
if (value !== expectedSum) {
|
|
slider.setCustomValidity("Please select the correct sum");
|
|
} else {
|
|
slider.setCustomValidity("");
|
|
}
|
|
}
|
|
</script>
|
|
<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 [slot='footer'] {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</sl-card>
|
|
</form>
|
|
}
|
|
|
|
templ isHumanSlider(targetSum string) {
|
|
}
|