Form

text-align: center

@UnstableDefault
object LoginPanel : StackPanel() {

    //    private val formPanel: FormPanel<User>
    private val mainPanel: SimplePanel

    init {
        padding = 10.px
        height = 100.vh
        width = 100.perc

        mainPanel = simplePanel {
            add(MainPanel())
        }

        vPanel(justify = FlexJustify.CENTER, alignItems = FlexAlignItems.CENTER) {
            val loginPanel: FormPanel<User> = formPanel() {
                add(User::email, Text(label = tr("User name:")).apply { placeholder = "" })
                add(User::password, Password(label = tr("Password:")).apply { placeholder = "" })

                add(HPanel(spacing = 10) {
                    button(tr("Login"), "fas fa-lock", ButtonStyle.PRIMARY).onClick {
                        authenticate(this@formPanel)
                    }
                })
            }
        }
    }

    private fun authenticate(formPanel: FormPanel<User>) {
        val restClient = RestClient()
        val resultPromise = restClient.remoteRequest(
                "<https://api.server.com/auth>",
                JSON.stringify(formPanel.getData()),
                <http://HttpMethod.POST|HttpMethod.POST>
        )
        resultPromise.then(onFulfilled = { result: dynamic ->
            spedStore.dispatch(SpedAction.SetToken(result.jqXHR.getResponseHeader("authorization")))
            activeChild = mainPanel

        })
        resultPromise.catch(onRejected = { e ->
            val info = if (!e.message.isNullOrBlank()) {
                " (${e.message})"
            } else {
                ""
            }
            spedStore.dispatch(SpedAction.DownloadError("Service error!$info"))
        })
    }
}

width = 100.perc

root("showcase") {
            width = 100.perc
            stackPanel {
                width = 100.perc
                vPanel(justify = FlexJustify.CENTER, alignItems = FlexAlignItems.CENTER) {
                    val loginPanel: FormPanel<HbsPerson> = formPanel() {
                        add(HbsPerson::name, Text(label = tr("User name:")).apply { placeholder = "" })
                        add(HbsPerson::hometown, Password(label = tr("Password:")).apply { placeholder = "" })

                        add(HPanel(spacing = 10) {
                            button(tr("Login"), "fas fa-lock", ButtonStyle.PRIMARY).onClick {
                            }
                        })
                    }
                }
            }

editorComponentFunction