Add test creation form

src/main.rs

@@ -1,12 +1,31 @@
 #![feature(decl_macro)]
 
-use rocket::*;
+use rocket::{*, response::Redirect, form::Form};
 use rocket_dyn_templates::{Template, context};
 
 #[get("/create")]
-fn create() -> Template
+fn begin_create() -> Template
 {
-    Template::render("create", context!{})
+    Template::render("begin_create", context!{})
+}
+
+#[get("/create/<name>")]
+fn create(name: &str) -> Template
+{
+    Template::render("create", context!{
+        username: name
+    })
+}
+
+#[derive(FromForm)]
+struct UserNameData<'r> {
+    pub username: &'r str,
+}
+
+#[post("/create", data = "<name>")]
+fn create_post(name: Form<UserNameData<'_>>) -> Redirect
+{
+    Redirect::to(uri!(create(name.username)))
 }
 
 #[get("/about")]
@@ -19,11 +38,11 @@ fn about() -> Template
 fn index() -> Template
 {
     Template::render("index", context! {
-        create_uri: uri!(create())
+        create_uri: uri!(begin_create())
     })
 }
 
 #[launch]
 fn rocket() -> _ {
-    rocket::build().mount("/", routes![create, index, about]).attach(Template::fairing())
+    rocket::build().mount("/", routes![begin_create, create, create_post, index, about]).attach(Template::fairing())
 }

templates/begin_create.html.tera

@@ -0,0 +1,44 @@
+{% extends "base" %}
+{% block title %}{% endblock %}
+{% block body %}
+<div class="hero h-fit">
+    <div class="hero-content flex-col text-center mt-48">
+      <h1 class="text-5xl font-bold">Crea tu propio test</h1>
+      <form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200 mt-6" id="create-form"
+        action="/create" method="post">
+        <div class="card-body">
+          <div class="form-control">
+            <label class="label">
+              <span class="label-text">Nombre</span>
+            </label>
+            <input type="text" name="username" id="username" placeholder="Entra tu nombre..." class="input input-bordered" />
+          </div>
+          <div class="form-control mt-6">
+            <input type="submit" class="btn btn-primary btn-disabled" id="continue-btn" value="Empezar"
+              disabled>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+<script>
+    function debounce(callback, wait) {
+        let timeout;
+        return (...args) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(function () { callback.apply(this, args); }, wait);
+        };
+    }
+
+    document.querySelector("#username").onkeyup = debounce(() => {
+        if(document.querySelector("#username").value.length != 0)
+        {
+            document.querySelector("#continue-btn").classList.remove("btn-disabled");
+            document.querySelector("#continue-btn").removeAttribute("disabled");
+        } else {
+            document.querySelector("#continue-btn").classList.add("btn-disabled");
+            document.querySelector("#continue-btn").disabled = true;
+        }
+    }, 100);
+</script>
+{% endblock %}

templates/create.html.tera

@@ -3,19 +3,22 @@
 {% block body %}
 <div class="hero h-fit">
     <div class="hero-content flex-col text-center mt-48">
-      <h1 class="text-5xl font-bold">Crea tu propio test</h1>
+      <h1 class="text-5xl font-bold">¿Cuál es tu estación favorita?</h1>
-      <form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200 mt-6" id="signup-form"
+      <form class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-200" id="test-form"
-        action="/auth/register" method="post">
+        action="/finish" method="post">
         <div class="card-body">
-          <div class="form-control">
+        <input type="hidden" name="username" id="username" value="{{ username }}" />
-            <label class="label">
+          <div class="form-control mt-2">
-              <span class="label-text">Nombre</span>
+            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-0">Verano</button>
-            </label>
-            <input type="text" name="username" id="username" placeholder="Entra tu nombre..." class="input input-bordered" />
           </div>
-          <div class="form-control mt-6">
+          <div class="form-control mt-2">
-            <input type="submit" class="btn btn-primary btn-disabled" id="continue-btn" value="Empezar"
+            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-1">Primavera</button>
-              disabled>
+          </div>
+          <div class="form-control mt-2">
+            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-2">Otoño</button>
+          </div>
+          <div class="form-control mt-2">
+            <button class="btn btn-ghost normal-case text-lg bg-base-100" id="option-3">Invierno</button>
           </div>
         </div>
       </form>