patternfly_yew/components/login_page/
mod.rs

1//! Login page controls
2mod footer;
3
4pub use footer::*;
5
6use crate::prelude::Title;
7use yew::{prelude::*, virtual_dom::VChild};
8
9/// Properties for [`Login`]
10#[derive(Clone, Debug, PartialEq, Properties)]
11pub struct LoginProperties {
12    #[prop_or_default]
13    pub header: Option<Html>,
14    #[prop_or_default]
15    pub children: Html,
16    #[prop_or_default]
17    pub footer: Option<Html>,
18}
19
20/// Login page component
21///
22/// > A **login page** allows a user to gain access to an application by entering their username and password or by authenticating using a social media login.
23///
24/// See: <https://www.patternfly.org/components/login-page>
25///
26/// ## Properties
27///
28/// Defined by [`LoginProperties`]
29///
30/// ## Children
31///
32/// The login page component requires a more complex structure using [`LoginMain`] components. See
33/// the Quickstart project for an example.
34#[function_component(Login)]
35pub fn login(props: &LoginProperties) -> Html {
36    html! {
37        <div class="pf-v6-c-login">
38            <div class="pf-v6-c-login__container">
39                if let Some(header) = &props.header {
40                    <header class="pf-v6-c-login__header">{ header.clone() }</header>
41                }
42                { props.children.clone() }
43                if let Some(footer) = &props.footer {
44                    <footer class="pf-v6-c-login__footer">{ footer.clone() }</footer>
45                }
46            </div>
47        </div>
48    }
49}
50
51/// Properties for [`LoginMain`]
52#[derive(Clone, Debug, PartialEq, Properties)]
53pub struct LoginMainProperties {
54    #[prop_or_default]
55    pub children: Html,
56    #[prop_or_default]
57    pub class: Classes,
58}
59
60#[function_component(LoginMain)]
61pub fn login_main(props: &LoginMainProperties) -> Html {
62    let class = classes!("pf-v6-c-login__main", props.class.clone());
63    html! { <main {class}>{ props.children.clone() }</main> }
64}
65
66/// Properties for [`LoginMainHeader`]
67#[derive(Clone, Debug, PartialEq, Properties)]
68pub struct LoginMainHeaderProperties {
69    pub title: VChild<Title>,
70    #[prop_or_default]
71    pub description: String,
72}
73
74#[function_component(LoginMainHeader)]
75pub fn login_main_header(props: &LoginMainHeaderProperties) -> Html {
76    html! {
77        <header class="pf-v6-c-login__main-header">
78            { props.title.clone() }
79            <p class="pf-v6-c-login__main-header-desc">{ &props.description }</p>
80        </header>
81    }
82}
83
84/// Properties for [`LoginMainBody`]
85#[derive(Clone, Debug, PartialEq, Properties)]
86pub struct LoginMainBodyProperties {
87    #[prop_or_default]
88    pub children: Html,
89    #[prop_or_default]
90    pub class: Classes,
91}
92
93#[function_component(LoginMainBody)]
94pub fn login_main_body(props: &LoginMainBodyProperties) -> Html {
95    let class = classes!("pf-v6-c-login__main-body", props.class.clone());
96    html! { <div {class}>{ props.children.clone() }</div> }
97}
patternfly_yew/components/login_page/mod.rs

patternfly_yew/components/login_page/
mod.rs
