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-v5-c-login">
38            <div class="pf-v5-c-login__container">
39                if let Some(header) = &props.header {
40                    <header class="pf-v5-c-login__header">{ header.clone() }</header>
41                }
42                { props.children.clone() }
43                if let Some(footer) = &props.footer {
44                    <footer class="pf-v5-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-v5-c-login__main", props.class.clone());
63    html! {
64        <main {class}>
65            { props.children.clone() }
66        </main>
67    }
68}
69
70/// Properties for [`LoginMainHeader`]
71#[derive(Clone, Debug, PartialEq, Properties)]
72pub struct LoginMainHeaderProperties {
73    pub title: VChild<Title>,
74    #[prop_or_default]
75    pub description: String,
76}
77
78#[function_component(LoginMainHeader)]
79pub fn login_main_header(props: &LoginMainHeaderProperties) -> Html {
80    html! {
81        <header class="pf-v5-c-login__main-header">
82            { props.title.clone() }
83            <p class="pf-v5-c-login__main-header-desc">
84                {&props.description}
85            </p>
86        </header>
87    }
88}
89
90/// Properties for [`LoginMainBody`]
91#[derive(Clone, Debug, PartialEq, Properties)]
92pub struct LoginMainBodyProperties {
93    #[prop_or_default]
94    pub children: Html,
95    #[prop_or_default]
96    pub class: Classes,
97}
98
99#[function_component(LoginMainBody)]
100pub fn login_main_body(props: &LoginMainBodyProperties) -> Html {
101    let class = classes!("pf-v5-c-login__main-body", props.class.clone());
102    html! {
103        <div {class}>
104            { props.children.clone() }
105        </div>
106    }
107}
patternfly_yew/components/login_page/mod.rs

patternfly_yew/components/login_page/
mod.rs
