Files
Tofu/ui/login.slint
T
2026-10-09 17:52:48 -04:00

133 lines
3.6 KiB
Plaintext

/// TEMPORARY AI GENERATED FRONTEND \\\
/// NOT TO BE USED IN PRODUCTION \\\
import { Theme } from "theme.slint";
import { TextField } from "components/text-field.slint";
export component LoginScreen inherits Rectangle {
in property <string> error;
in property <bool> busy;
in-out property <string> homeserver;
in-out property <string> username;
callback submit(string, string, string); // homeserver, username, password
background: Theme.rail-bg;
function try-submit() {
if (!root.busy && root.username != "" && password.text != "") {
root.submit(root.homeserver, root.username, password.text);
}
}
Rectangle {
width: min(480px, parent.width - 32px);
height: card.preferred-height + 64px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
background: Theme.chat-bg;
border-radius: 8px;
card := VerticalLayout {
padding: 32px;
spacing: 6px;
Text {
text: @tr("Welcome back!");
color: Theme.text-header;
font-size: 24px;
font-weight: 700;
horizontal-alignment: center;
}
Text {
text: @tr("Sign in with your Matrix account");
color: Theme.text-muted;
font-size: 15px;
horizontal-alignment: center;
}
Rectangle {
height: 14px;
}
Text {
text: @tr("HOMESERVER");
color: Theme.text-muted;
font-size: 12px;
font-weight: 700;
}
TextField {
placeholder: @tr("matrix.org");
text <=> root.homeserver;
}
Rectangle {
height: 6px;
}
Text {
text: @tr("USERNAME");
color: Theme.text-muted;
font-size: 12px;
font-weight: 700;
}
TextField {
placeholder: @tr("user (or @user:matrix.org)");
text <=> root.username;
}
Rectangle {
height: 6px;
}
Text {
text: @tr("PASSWORD");
color: Theme.text-muted;
font-size: 12px;
font-weight: 700;
}
password := TextField {
password: true;
accepted => {
root.try-submit();
}
}
if root.error != "": Text {
text: root.error;
color: Theme.danger;
font-size: 13px;
wrap: word-wrap;
}
Rectangle {
height: 10px;
}
Rectangle {
height: 44px;
border-radius: 4px;
background: root.busy ? Theme.accent-hover : (login-touch.has-hover ? Theme.accent-hover : Theme.accent);
Text {
text: root.busy ? @tr("Signing in…") : @tr("Log In");
color: white;
font-size: 16px;
font-weight: 600;
horizontal-alignment: center;
vertical-alignment: center;
}
login-touch := TouchArea {
mouse-cursor: pointer;
clicked => {
root.try-submit();
}
}
}
}
}
}