halfway done with the registration form
This commit is contained in:
parent
303b0063c8
commit
85962a8ff2
7 changed files with 202 additions and 14 deletions
|
|
@ -17,3 +17,7 @@ a profile is
|
|||
- behaviour
|
||||
- microchipped
|
||||
- and whatever else i think of
|
||||
|
||||
# TODOs
|
||||
|
||||
- privacy policy and GDPR notice
|
||||
|
|
|
|||
|
|
@ -32,24 +32,112 @@
|
|||
background-color: var(--clr-surface-tonal-a0);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
h1>a {
|
||||
text-decoration: none;
|
||||
color: var(--clr-txt-on-dark);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
button,
|
||||
a.btn {
|
||||
border: 2pt solid var(--clr-surface-tonal-a50);
|
||||
border-radius: 4pt;
|
||||
padding: 4pt 8pt;
|
||||
color: var(--clr-txt-on-dark);
|
||||
background-color: var(--clr-surface-tonal-a10);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input:hover,
|
||||
select:hover,
|
||||
button:hover {
|
||||
button:hover,
|
||||
a.btn:hover {
|
||||
border-color: var(--clr-primary-a0);
|
||||
}
|
||||
|
||||
header,
|
||||
main {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.split {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.split>* {
|
||||
flex: 1;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
.split>*:not(:first-child) {
|
||||
border-left: 2pt solid var(--clr-primary-a0);
|
||||
}
|
||||
|
||||
.raised {
|
||||
background-color: var(--clr-surface-tonal-a10);
|
||||
padding: 1em;
|
||||
border-radius: 4pt;
|
||||
}
|
||||
|
||||
.fields>*:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.fields>*>* {
|
||||
display: block;
|
||||
width: 100%
|
||||
}
|
||||
.fields label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4pt;
|
||||
}
|
||||
|
||||
p.note {
|
||||
margin: 2pt 0 0 0;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
#stray-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
#stray-form>h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
input#ident {
|
||||
font-family: monospace;
|
||||
width: 7ch;
|
||||
font-size: 1.4em;
|
||||
width: 6ch;
|
||||
font-size: 1.6em;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
#pregen_ids>button {
|
||||
font-family: monospace;
|
||||
font-size: 1.6em;
|
||||
margin: 2pt;
|
||||
}
|
||||
#stray-form>button {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
|
|||
17
src/main.rs
17
src/main.rs
|
|
@ -8,10 +8,25 @@ fn index() -> Template {
|
|||
Template::render("index", context! {})
|
||||
}
|
||||
|
||||
#[get("/register")]
|
||||
fn show_register() -> Template {
|
||||
Template::render("register", context! {})
|
||||
}
|
||||
|
||||
#[get("/profile?<ident>")]
|
||||
fn show_profile(ident: &str) -> Template {
|
||||
Template::render(
|
||||
"show_profile",
|
||||
context! {
|
||||
ident,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
#[launch]
|
||||
fn rocket() -> _ {
|
||||
rocket::build()
|
||||
.attach(Template::fairing())
|
||||
.mount("/assets", FileServer::from(relative!("/assets")))
|
||||
.mount("/", routes![index])
|
||||
.mount("/", routes![index, show_profile, show_register])
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Doll.Tags</h1>
|
||||
<h1><a href="/">Doll.Tags</a></h1>
|
||||
|
||||
<nav>
|
||||
<p><a class="btn" href="/register">New tag</a></p>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
{% extends "base" %}
|
||||
{% block title %}Found a stray? - {% endblock title %}
|
||||
{% block main %}
|
||||
<div id="stray-form">
|
||||
<form action="/profile" id="stray-form">
|
||||
<h2>Found a stray?</h2>
|
||||
<label for="ident">Enter the 6-digit ID you found:</label>
|
||||
<input type="text" inputmode="numeric" pattern="\d{6}" id="ident" name="ident" required size="6" placeholder="000000" autofocus />
|
||||
|
||||
<form>
|
||||
<label for="ident">Enter the 6-digit ID you found:</label>
|
||||
<input type="text" inputmode="numeric" pattern="\d{3}-?\d{3}" id="ident" name="ident" required minlength="6" maxlength="7" placeholder="000-000" />
|
||||
|
||||
<button type="submit">Search the database</button>
|
||||
</form>
|
||||
</div>
|
||||
<button type="submit">Search the database</button>
|
||||
</form>
|
||||
{% endblock main %}
|
||||
|
|
|
|||
77
templates/register.html.tera
Normal file
77
templates/register.html.tera
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
{% extends "base" %}
|
||||
{% block title %}Register a new tag - {% endblock title %}
|
||||
{% block main %}
|
||||
<h2>Register a new tag</h2>
|
||||
|
||||
<aside>
|
||||
<h3>A foreword</h3>
|
||||
<p>
|
||||
Registering a tag for your entity can be a pretty fun and intimate moment,
|
||||
but remember that this current version of <code>Doll.Tags</code> doesn't offer any private field.<br/>
|
||||
<b>Anynull guessing your tag or finding it by mistake will have access to the info you enter.</b><br/>
|
||||
In that sense, we recommend you to avoid entering personally identifiable information.
|
||||
</p>
|
||||
</aside>
|
||||
|
||||
<section>
|
||||
<h3>Now, to the registration!</h3>
|
||||
|
||||
<form method="POST">
|
||||
<section>
|
||||
<h4>Firstly, the tag's ID</h4>
|
||||
<p>
|
||||
You may enter your own, but in case of collision it will not be usable.<br/>
|
||||
To that end, here's a few free ones you may also pick from.
|
||||
</p>
|
||||
|
||||
<div class="split raised">
|
||||
<div>
|
||||
<p><label for="ident">Enter your ID</label></p>
|
||||
<input type="text" inputmode="numeric" pattern="\d{6}" id="ident" name="ident" required size="6" placeholder="000000" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Or pick one of those pre-generated ones</p>
|
||||
|
||||
<div id="pregen_ids">
|
||||
<button type="button">720-812</button>
|
||||
<button type="button">423-158</button>
|
||||
<button type="button">863-633</button>
|
||||
<button type="button">139-317</button>
|
||||
<button type="button">848-339</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Names and contact info</h4>
|
||||
|
||||
<div class="fields raised">
|
||||
<div>
|
||||
<label for="name">The entity's name (required)</label>
|
||||
<input type="text" name="name" id="name" required />
|
||||
<p class="note">Remember: names only mean what you want them to!</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="handler_name">The handler's name (required)</label>
|
||||
<input type="text" name="handler_name" id="handler_name" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="handler_link">A contact link to the handler (optional)</label>
|
||||
<input type="url" name="handler_link" id="handler_link" placeholder="E-mails can be entered using the syntax mailto:your@email.address" />
|
||||
<p class="note">Optional, will make the handler's name clickable.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Entity description and notable features</h4>
|
||||
</section>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const $ident = document.getElementById("ident");
|
||||
const $pregen_ids = document.getElementById("pregen_ids");
|
||||
$pregen_ids.addEventListener("click", ev => $ident.value = ev.target.innerText.split("-").join(""));
|
||||
</script>
|
||||
{% endblock main %}
|
||||
3
templates/show_profile.html.tera
Normal file
3
templates/show_profile.html.tera
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{% extends "base" %}
|
||||
{% block main %}
|
||||
{% endblock main %}
|
||||
Loading…
Add table
Reference in a new issue