rust, yew, components, main

Cargo.toml

[package]
name = "yew-test"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
yew = { version = "0.20", features = ["csr"] }
web-sys = {version = "0.3", features = ["HtmlInputElement"]} # go between for web apis
gloo-console = "0.2" # adds console log function

input.rs

// example of a component
use yew::prelude::*;

#[derive(Properties, PartialEq)]
pub struct Props {
    pub label: AttrValue,
    pub input_type: AttrValue,
    pub name: AttrValue,
    pub placeholder: AttrValue,
    pub value: AttrValue,
    pub onchange: Callback<Event>,
}

#[function_component(Input)]
pub fn input(props: &Props) -> Html {
    html!{
    <div class="mb-3">
        <label for="username">{props.label.clone()}</label>
        <input name={props.name.clone()} class="form-control" id="username" 
            aria-describedby="usernameHelp" placeholder={props.placeholder.clone()} 
            required={true} type={props.input_type.clone()}
            value={props.value.clone()} 
            onchange={props.onchange.clone()}/>
    </div>

    }
}

login.rs

use yew::prelude::*;
use crate::components::login_form::*;

#[function_component(Login)]
pub fn login() -> Html {
    html!{
    <div class="container">
        <LoginForm name="Sign in" />
    </div>
    }
}

login_form.rs

use gloo_console::log;
use yew::prelude::*;
use web_sys::HtmlInputElement;
use crate::components::input::Input;
#[derive(PartialEq, Properties)]
pub struct Props{
    pub name: String,
}

#[function_component(LoginForm)]
pub fn login_form(props: &Props) -> Html {
    let username_handle = use_state(String::default);
    let username = (*username_handle).clone();
    let password_handle = use_state(String::default);
    let password = (*password_handle).clone();

    let cloned_username = username.clone();
    let cloned_password = password.clone(); 
    let onsubmit  = Callback::from(move |e: SubmitEvent | {
        e.prevent_default();
        log!("submitting form");
        log!("username: {}", cloned_username.clone());
        log!("password {}", cloned_password.clone());
    });
    
    let username_changed = Callback::from(move |e: Event| {
         let target = e.target_dyn_into::<web_sys::HtmlInputElement>();
         if let Some(input) = target {
             username_handle.set(input.value());
         }
         
        });
    let password_changed = Callback::from(move |e: Event| { 
        let target = e.target_dyn_into::<web_sys::HtmlInputElement>();
       if let Some(input) = target {
             password_handle.set(input.value());
         }
    });

 
    
    html! {
        <div class="row min-vh-100 justify-content-center align-items-center">
            <div class="col-md-4">
                <form name={props.name.clone()} onsubmit={onsubmit}>
                    <Input name="username" label="Username"
                     input_type="text" placeholder="Enter Username"
                     value={username} 
                     onchange={username_changed}
                     />

                    <Input name="password" label="Password" 
                    input_type="password" placeholder="Enter Password"
                     value={password} 
                     onchange={password_changed}
                    />

                    <button type="submit" class="btn btn-primary vw">{"Submit"}</button>
                </form>
            </div>
        </div>
    }
}

main.rs

use yew::prelude::*;

mod pages;
mod components;
#[function_component(App)]
fn app() -> Html {
    html!{
        <pages::login::Login />
    }
}
fn main() {
    yew::Renderer::<App>::new().render();

}