// Tela de login: um campo, o token de conexão (base64 de host:porta::token),
// com um select dos servidores lembrados (rótulo host:porta; escolher preenche
// o campo) e, sob o campo, para onde o token aponta.
component {
resources {
style """
.login { width: fill; height: fill; align-x: center; align-y: center; }
.login__card { width: fill; max-width: 460; align-x: start; background: var(--surface); border-radius: 4; border-width: 1; border-color: var(--border); padding: 32; spacing: 16; }
.login__head { width: fill; spacing: 14; align-y: center; }
.login__brand { width: fill; spacing: 6; align-x: start; }
.login__title { size: 30; bold: true; color: #A9C7FF; }
.login__forget-row { width: fill; align-x: end; padding: 2 0; }
.login__forget-btn { size: 11; color: var(--border); padding: 5 12; border-radius: 4; }
.login__status { spacing: 14; align-y: center; }
.login__connect { width: fill; color: var(--spin); padding: 14; text-align: center; border-radius: 3; }
"""
}
container(class = login) {
column(class = login__card) {
row(class = login__head) {
svg(
src = "assets/icons/terminal.svg",
color = #2F81F7,
width = 34,
height = 34,
)
column(class = login__brand) {
text(class = login__title, content = "Rustploy")
text(
class = page-head__subtitle,
content = "Infrastructure management for professional teams",
)
}
}
form(name = login, on_submit = connect, spacing = 16, width = fill) {
column(class = field) {
row(class = field__row) {
text(class = "field__label u-fill", content = "CONNECTION TOKEN")
text(class = field__label, content = "SECURE")
}
select(
if = @saved_servers,
not_equals = "[]",
class = form-select,
:options = saved_servers,
:value = saved_server_choice,
on_change = choose_saved_server,
placeholder = "servidores salvos",
width = fill,
)
input(
class = field__input,
:value = access_key,
on_change = access_key_input,
on_submit = connect,
placeholder = "cole o token de conexão",
width = fill,
)
text(
if = @access_key_target,
not_equals = "",
class = u-muted,
content = "→ @access_key_target",
)
text(
if = @error_access_key,
not_equals = "",
class = u-error,
content = "@error_access_key",
)
row(class = login__forget-row) {
button(
class = login__forget-btn,
on_click = forget_server,
disabled = @busy_forget_server,
text = "Esquecer este servidor",
)
}
}
button(class = login__connect, on_click = connect, disabled = @busy_connect, text = Connect)
}
text(if = @error, not_equals = "", class = u-error, content = "⚠ @error")
hr
row(class = login__status) {
text(class = u-ok, size = 10, content = "●")
text(class = u-muted, content = "@status_line")
}
}
}
}