# Login Centered sign-in card with password and social login options. - Category: Authentication - Tier: Free - Page: /blocks/login - License: MIT OR Apache-2.0 (block source) ## Source Free block source is dual licensed under MIT OR Apache-2.0. Use of the Proa framework is governed separately under AGPL-3.0-only or a commercial Proa license. ### login.rs ```rust // SPDX-FileCopyrightText: 2026 Proa Labs, Inc. // SPDX-License-Identifier: MIT OR Apache-2.0 //! Login block — centered card with email/password form, social logins use proa_core::UnsafeRaw; use proa_macros::html_sync; use proa_ui::{ Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Input, InputType, Label, Separator, }; const SOCIAL_BUTTONS: &str = r##"
"##; /// Copy-paste-ready block composition. pub struct LoginBlock; impl proa_core::WebRenderSync for LoginBlock { fn render( self, cx: &mut proa_core::WebContext, ) -> Result<(), proa_core::WriteError> { html_sync! {
{Card { class: None, children: Some(html_sync! { {CardHeader { class: Some("text-center"), children: Some(html_sync! { {CardTitle { class: Some("text-2xl"), children: Some("Login"), }} {CardDescription { class: None, children: Some("Enter your email below to login to your account"), }} }), }} {CardContent { class: None, children: Some(html_sync! {
{Label { for_id: Some("email"), text: "Email", ..Label::new() }} {Input { id: Some("email"), input_type: InputType::Email, placeholder: Some("m@example.com"), ..Input::new() }}
{Label { for_id: Some("password"), text: "Password", ..Label::new() }} "Forgot password?"
{Input { id: Some("password"), input_type: InputType::Password, placeholder: Some("Enter your password"), ..Input::new() }}
{Checkbox { id: Some("remember"), ..Checkbox::new() }} {Label { for_id: Some("remember"), text: "Remember me", class: Some("font-normal"), ..Label::new() }}
{Button { class: Some("w-full"), children: Some("Sign in"), ..Default::default() }}
{Separator::new()} "or continue with"
{UnsafeRaw(SOCIAL_BUTTONS)}
}), }} {CardFooter { class: Some("justify-center"), children: Some(html_sync! {

"Don\u{2019}t have an account? " "Sign up"

}), }} }), }}
} .render(cx) } } ```