modalFormLogin.swift

public func authenticationHandler(
    request: Request,
    route: AuthenticationRoute
) async throws -> AsyncResponseEncodable {
    switch route {
            
        case .loginViaEmailGet:
            // original HTML https://stackblitz.com/edit/zbqcqg?file=index.html
            
            return modalFormLogin()
            
    }
}
import Html
func modalFormLogin() -> Node {
    Node
    .div(
        attributes: [
            .class("modal fade"),
            .id("exampleModalToggle2"),
            .ariaLabelledby("exampleModalToggleLabel2"),
            .tabindex(-1),
            .init("style", "display: none"),
            .ariaHidden(.true),
        ],
        .div(
            attributes: [.class("modal-dialog modal-dialog-centered")],
            .div(
                attributes: [.class("modal-content")],
                .div(
                    attributes: [.class("modal-header")],
                    .h1(
                        attributes: [
                            .class("modal-title fs-5"),
                            .id("exampleModalToggleLabel2"),
                        ], "OTP Verification"
                    ),
                    .button(
                        attributes: [
                            .type(.button),
                            .class("btn-close"),
                            .init("data-bs-dismiss", "modal"),
                            .ariaLabel("Close"),
                        ]
                    )
                ),
                .div(
                    attributes: [.class("modal-body")],
                    .form(
                        .div(
                            attributes: [.class("mb-3")],
                            .label(
                                attributes: [
                                    .for("otp"),
                                    .class("col-form-label"),
                                ], "Input Your One Time Passwird"
                            ),
                            .input(
                                attributes: [
                                    .type(.text),
                                    .class("form-control"),
                                    .id("otp-name"),
                                ]
                            )
                        )
                    )
                ),
                .div(
                    attributes: [.class("modal-footer")],
                    .button(
                        attributes: [
                            .class("btn btn-primary"),
                            .init("data-bs-target", ###"#exampleModalToggle"###),
                            .init("data-bs-toggle", "modal"),
                        ], "Verify"
                    )
                )
            )
        )

//        .a(
//            attributes: [
//                .class("btn btn-primary"),
//                .init("data-bs-toggle", "modal"),
//                .href(###"#exampleModalToggle"###),
//                .init("role", "button"),
//            ], "Login"
//        )
    )


}


struct WebIndex {

    var title: String
    var rootRouter: RootRouterKey.Value

    public init(
        title: String,
        rootRouter: RootRouterKey.Value
    ) {
        self.title = title
        self.rootRouter = rootRouter
    }

    func layout() -> Node {
      return [
        .doctype,
        .html(
          .head(
            .title(title),

            // You can include inline stylesheets
            .style(safe: stylesheet),

            .meta(attributes: [.charset(.init(rawValue: "utf-8"))]),
            .meta(name: "viewport", content: "width=device-width, initial-scale=1"),

            // Or link to external stylesheets
            .link(
                attributes: [
                    .href("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"),
                    .rel(.init(rawValue: "stylesheet")),
                    .init("integrity", "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"),
                    
                    .crossorigin(.anonymous),
                ]
            )
          ),
          .body(
            header(),
            main(),
            footer,
            // Load external scripts at the bottom of the document.
            .script(
                attributes: [
                    .src("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"),
                    .init("integrity", "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"),
                    .crossorigin(.anonymous),
                ]
            )
          )
        )
      ]
    }

    func main() -> Node {
        .main(
            .div(
                attributes: [.class("container mt-3")],
                .fragment(
                    [
                        
                        .h1(attributes: [.style(safe: "color: purple")],"TrustBird "),
                        .h5("Is a unique and catchy!"),
                        .hr,
                        .ul(attributes: [],
                            .li(.h5(attributes: [.style(safe: "color:red")], "Secure access for all, except for malicious actors")),
                            .li(.h5(attributes: [.style(safe: "color:blue")], "Providing secure access to everyone—except those with malicious intent.")),
                            .li(.h5(attributes: [.style(safe: "color:green")], "Universal secure access, with safeguards against bad actors.")),
                            .li(.h5(attributes: [.style(safe: "color:orange")], "Secure access designed for everyone, but fortified against malicious actors.")),
                            .li(.h5(attributes: [.style(safe: "color:purple")], "Everyone deserves secure access, except for those with harmful intentions."))
                        ),
                        .hr,
                        .h5("It combines the idea of trust (which is fundamental to authentication services) with \"bird\", suggesting freedom, agility, and possibly a bird's-eye view on security. Great choice!"),
                    ]
                )
            )
        )
    }

    func header() -> Node {
//        let dynamicLiList = WebRoute.allCases.map { route -> ChildOf<Tag.Ul> in
//            return .li(
//                .a(attributes: [Attribute<Tag.A>.href("/\(route.link)")], "\(route.rawValue.capitalized )")
//            )
//        }

        return [
            .header(
                attributes: [.class("p-3 mb-3 border-bottom")],
                .div(
                    attributes: [.class("container")],
                    .div(
                        attributes: [.class("d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start")],
                        .a(
                            attributes: [
                                .href("/home"),
                                .class("d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"),
                            ],
                            .img(
                                attributes: [
                                    .src("/images/trust_bird.jpg"),
                                    .alt("logo"),
                                    .class("bi me-2"),
                                    .width(.px(40)),
                                    .height(.px(32)),
                                ]
                            )
                        ),
                        .ul(
                            attributes: [.class("nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0")],
                            .li(
                                .a(
                                    attributes: [
                                        .href("/home"),
                                        .class("nav-link px-2 link-secondary"),
                                    ], "Trust Bird"
                                )
                            )
                        ),
                        .div(
                            attributes: [.class("dropdown text-end")],
                            .div(
                                attributes: [.class("text-end")],
                                
                                .a(
                                    attributes: [.href(rootRouter.path(for: .web(.authentication(.loginViaEmailGet))))],
                                    .button(
                                        attributes: [
                                            .class("btn btn-outline-primary me-2"),
                                            .init("data-bs-toggle", "modal"),
                                            .init("role", "button"),
                                        ], "Login")
                                ),
                                .a(
                                    attributes: [.href("/auth/register")],
                                    .button(
                                        attributes: [.class("btn btn-warning")], "Sign-up"
                                    )
                                )
                            )
                        )
                    )
                )
            )
        ]

//        return [
//            .header(
//                .h1("Trust Bird"),
//                .blockquote(
//                    "Its Open source project for make Developer live more easy buy using reusable auth featueas ",
//                    .a(
//                        attributes: [Attribute<Tag.A>.href("https:addame.com")],
//                        "Addame"
//                    )
//                ),
//                .ul(
//                    attributes: [],
//                    .li(.a(attributes: [.href("/")], "Home"))
//                )
//            )

//        ]
    }

    // A node that represents the footer to use on each page.
    let footer: Node = [
      .hr,
      .footer(
        .div(
            attributes: [.class("container mt-3")],
            .text("© 2023 Addame, Inc.")
        )
      )
    ]

}