Initial frontend for registering

app/src/lib.rs

@@ -49,6 +49,10 @@ pub enum AppRoutes {
     IssueDetail(i64),
     #[to("/add_issue")]
     IssueCreate,
+
+    #[to("/register")]
+    Register,
+
     #[not_found]
     NotFound,
 }
@@ -71,6 +75,12 @@ fn switch<G: Html>(route: ReadSignal<AppRoutes>) -> View<G> {
                     h1(class="text-align-center") { "Bugspray" }
                     IssueCreate()
                 },
+
+                AppRoutes::Register => view! {
+                    h1(class="text-align-center") { "Bugspray" }
+                    Register()
+                },
+
                 _ => view! {
                     h1(class="text-align-center") { "Bugspray" }
                     "404 Not Found"
@@ -193,6 +203,58 @@ pub fn issue_create() -> View<G> {
     }
 }
 
+#[component(Register<G>)]
+pub fn register() -> View<G> {
+    let username = Signal::new(String::new());
+    let password_raw = Signal::new(String::new());
+    let password_confirm = Signal::new(String::new());
+
+    let error_blank = Signal::new(true);
+    let error_passmatch = Signal::new(false);
+
+    let on_click = cloned!((error_blank, error_passmatch, username, password_raw, password_confirm) => move |_| {
+        let username = (*username.get()).clone();
+        let password_raw = (*password_raw.get()).clone();
+        let password_confirm = (*password_confirm.get()).clone();
+
+        error_blank.set(username == "" || password_raw == "" || password_confirm == "");
+        error_passmatch.set(password_raw != password_confirm);
+    });
+
+    view! {
+        div(class="card") {
+            label { "Username:" 
+                input(bind:value=username)
+            }
+            label { "Password"
+                input(bind:value=password_raw)
+            }
+            label { "Confirm password:"
+                input(bind:value=password_confirm)
+            }
+
+            (if *error_passmatch.get() {
+                view! {
+                    p(style="color: red") { "Passwords do not match" }
+                }
+            } else {
+                view! {}
+            })
+            (if *error_blank.get() {
+                view! {
+                    p(style="color: red") { "Invalid form input. Make sure none of the fields are empty." }
+                }
+            } else {
+                view! {}
+            })
+
+            div(style="justify-content: right") {
+                button(on:click=on_click) { "Register" }
+            }
+        }
+    }
+}
+
 #[component(IssueDetail<G>)]
 pub fn issue_detail(index: i64) -> View<G> {
     let issue: Signal<Issue> = Signal::new(Issue::default());