Struct Input

Source

pub struct Input { /* private fields */ }

Expand description

custom_input_component A custom input component that handles user input and validation.

§Arguments

props - The properties of the component.
- input_valid_handle - A handle to track the validity of the input.
- aria_invalid - A string representing the ‘aria-invalid’ attribute value for accessibility. Defaults to “true”.
- aria_required - A string representing the ‘aria-required’ attribute value for accessibility. Defaults to “true”.
- input_type - The type of the input element. Defaults to “text”.
- input_ref - A reference to the input element.
- input_handle - A handle to set the value of the input.
- validate_function - A callback function to validate the input value.

§Returns

(Html): An HTML representation of the input component.

§Examples

// Example of using the custom_input_component
use regex::Regex;
use serde::{Deserialize, Serialize};
use input_yew::CustomInput;
use yew::prelude::*;

#[derive(Debug, Default, Clone, Serialize, Deserialize)]
struct LoginUserSchema {
    email: String,
    password: String,
}

fn validate_email(email: String) -> bool {
    let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
    pattern.is_match(&email)
}

fn validate_password(password: String) -> bool {
    !&password.is_empty()
}

#[function_component(LoginFormOne)]
pub fn login_form_one() -> Html {
    let error_handle = use_state(String::default);
    let error = (*error_handle).clone();;

    let email_valid_handle = use_state(|| true);
    let email_valid = (*email_valid_handle).clone();;

    let password_valid_handle = use_state(|| true);
    let password_valid = (*password_valid_handle).clone();;

    let input_email_ref = use_node_ref();
    let input_email_handle = use_state(String::default);
    let input_email = (*input_email_handle).clone();;

    let input_password_ref = use_node_ref();
    let input_password_handle = use_state(String::default);
    let input_password = (*input_password_handle).clone();;

    let onsubmit = Callback::from(move |event: SubmitEvent| {
        event.prevent_default();

        let email_ref = input_password.clone();
        let password_ref = input_password.clone();
        let error_handle = error_handle.clone();

        // Custom logic for your endpoint goes here: `spawn_local`
    });

    html! {
        <div class="form-one-content" role="main" aria-label="Sign In Form">
          <div class="text">
            <h2>{"Sign In"}</h2>
            if !error.is_empty() {
              <div class="error">{error}</div>
            }
          </div>
          <form action="#" aria-label="Sign In Form" onsubmit={onsubmit}>
              <CustomInput
                input_type={"text"}
                input_handle={input_email_handle}
                name={"email"}
                input_ref={input_email_ref}
                input_placeholder={"Email"}
                icon_class={"fas fa-user"}
                error_message={"Enter a valid email address"}
                form_input_field_class={"form-one-field"}
                form_input_error_class={"error-txt"}
                required={true}
                input_valid_handle={email_valid_handle}
                validate_function={validate_email}
              />
              <CustomInput
                input_type={"password"}
                input_handle={input_password_handle}
                name={"password"}
                input_ref={input_password_ref}
                input_placeholder={"Password"}
                icon_class={"fas fa-lock"}
                error_message={"Password can't be blank!"}
                form_input_field_class={"form-one-field"}
                form_input_error_class={"error-txt"}
                required={true}
                input_valid_handle={password_valid_handle}
                validate_function={validate_password}
                eye_active={"fa fa-eye"}
                eye_disabled={"fa fa-eye-slash"}
              />
            <div class="form-one-forgot-pass">
              <a href="#" aria-label="Forgot Password?">{"Forgot Password?"}</a>
            </div>
            <button type="submit">{"Sign in"}</button>
            <div class="sign-up">
              {"Not a member?"}
              <a href="#" aria-label="Sign up now">{"Sign up now"}</a>
            </div>
          </form>
        </div>
    }
}