diff options
Diffstat (limited to 'raveos-calamares-module/raveusers/ui/raveusers.qml')
| -rw-r--r-- | raveos-calamares-module/raveusers/ui/raveusers.qml | 286 |
1 files changed, 286 insertions, 0 deletions
diff --git a/raveos-calamares-module/raveusers/ui/raveusers.qml b/raveos-calamares-module/raveusers/ui/raveusers.qml new file mode 100644 index 0000000..25e090f --- /dev/null +++ b/raveos-calamares-module/raveusers/ui/raveusers.qml @@ -0,0 +1,286 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import "." as RaveUsersModule + +Rectangle { + id: root + color: "#2B2B2B" + radius: 14 + + readonly property color cCardBg: "#20232a" + readonly property color cCardBorder: "#333947" + readonly property color cInputBg: "#303030" + readonly property color cInputBorder: "#303030" + readonly property color cAccentGreen: "#3d7839" + readonly property color cTextWhite: "#ffffff" + readonly property color cTextMuted: "#8b93a3" + readonly property color cTextFaint: "#5b6270" + readonly property color cErrorRed: "#ff6b6b" + + property bool showUserPassword: false + property bool showRootPassword: false + + function updateLanguage() { + RaveUsersModule.Translations.setLanguage(systemLocale) + } + + Component.onCompleted: { + RaveUsersModule.Translations.setLanguage(systemLocale) + } + + ColumnLayout { + anchors.fill: parent + anchors.margins: 40 + spacing: 0 + + Item { + Layout.fillWidth: true + Layout.fillHeight: true + + ColumnLayout { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 10 + width: Math.min(parent.width - 40, 540) + spacing: 16 + + Image { + source: "raveos-logo.png" + sourceSize.width: 96 + sourceSize.height: 96 + fillMode: Image.PreserveAspectFit + Layout.preferredWidth: 96 + Layout.preferredHeight: 96 + Layout.alignment: Qt.AlignHCenter + } + + Text { + text: RaveUsersModule.Translations.title + font.pixelSize: 28 + font.bold: true + color: cTextWhite + Layout.alignment: Qt.AlignHCenter + } + + Text { + text: RaveUsersModule.Translations.description + font.pixelSize: 15 + lineHeight: 1.45 + color: cTextMuted + wrapMode: Text.WordWrap + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter + } + + Item { height: 6 } + + ColumnLayout { + Layout.fillWidth: true + spacing: 6 + + Text { + text: RaveUsersModule.Translations.usernameLabel + color: "#c7ccd6" + font.pixelSize: 14 + font.weight: Font.Medium + } + + TextField { + id: usernameField + Layout.fillWidth: true + implicitHeight: 52 + leftPadding: 14 + rightPadding: 14 + text: backend.username + placeholderText: "raveuser" + color: cTextWhite + placeholderTextColor: "#5b6270" + font.pixelSize: 15 + background: Rectangle { + radius: 7 + color: cInputBg + border.color: usernameField.activeFocus ? cAccentGreen : cInputBorder + border.width: usernameField.activeFocus ? 1.5 : 1 + } + onTextEdited: backend.setUsername(text) + } + + Text { + visible: backend.usernameStatus !== "" + text: backend.usernameStatus + color: cErrorRed + font.pixelSize: 12 + } + } + + ColumnLayout { + Layout.fillWidth: true + spacing: 6 + + Text { + text: RaveUsersModule.Translations.hostnameLabel + color: "#c7ccd6" + font.pixelSize: 14 + font.weight: Font.Medium + } + + TextField { + id: hostnameField + Layout.fillWidth: true + implicitHeight: 52 + leftPadding: 14 + rightPadding: 14 + text: backend.hostname + placeholderText: "raveos-pc" + color: cTextWhite + placeholderTextColor: "#5b6270" + font.pixelSize: 15 + background: Rectangle { + radius: 7 + color: cInputBg + border.color: hostnameField.activeFocus ? cAccentGreen : cInputBorder + border.width: hostnameField.activeFocus ? 1.5 : 1 + } + onTextEdited: backend.setHostname(text) + } + + Text { + visible: backend.hostnameStatus !== "" + text: backend.hostnameStatus + color: cErrorRed + font.pixelSize: 12 + } + } + + ColumnLayout { + Layout.fillWidth: true + spacing: 6 + + Text { + text: RaveUsersModule.Translations.passwordLabel + color: "#c7ccd6" + font.pixelSize: 14 + font.weight: Font.Medium + } + + RowLayout { + Layout.fillWidth: true + spacing: 12 + + PasswordField { + Layout.fillWidth: true + reveal: showUserPassword + onRevealClicked: showUserPassword = !showUserPassword + placeholderText: RaveUsersModule.Translations.passwordPlaceholder + onTextEdited: backend.setPassword(text) + } + + PasswordField { + Layout.fillWidth: true + reveal: showUserPassword + onRevealClicked: showUserPassword = !showUserPassword + placeholderText: RaveUsersModule.Translations.passwordConfirmLabel + onTextEdited: backend.setPasswordSecondary(text) + } + } + + Text { + visible: backend.passwordStatus !== "" + text: backend.passwordStatus + color: cErrorRed + font.pixelSize: 12 + } + } + + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 2 + Layout.bottomMargin: 2 + height: 1 + color: cCardBorder + opacity: 0.6 + } + + CheckBox { + id: reuseRootCheck + Layout.fillWidth: true + visible: backend.rootReuseVisible + text: RaveUsersModule.Translations.reuseRootLabel + checked: backend.reuseRootPassword + onToggled: backend.setReuseRootPassword(checked) + + indicator: Rectangle { + implicitWidth: 20 + implicitHeight: 20 + x: reuseRootCheck.leftPadding + y: parent.height / 2 - height / 2 + radius: 4 + color: reuseRootCheck.checked ? cAccentGreen : cInputBg + border.color: reuseRootCheck.checked ? cAccentGreen : cInputBorder + border.width: 1 + + Text { + anchors.centerIn: parent + text: "\u2713" + font.pixelSize: 14 + font.bold: true + color: "#0f1713" + visible: reuseRootCheck.checked + } + } + + contentItem: Text { + text: reuseRootCheck.text + color: "#d7dbe2" + font.pixelSize: 14 + verticalAlignment: Text.AlignVCenter + leftPadding: reuseRootCheck.indicator.width + 12 + } + } + + ColumnLayout { + Layout.fillWidth: true + spacing: 6 + visible: !backend.reuseRootPassword + + Text { + text: RaveUsersModule.Translations.rootPasswordLabel + color: "#c7ccd6" + font.pixelSize: 14 + font.weight: Font.Medium + Layout.topMargin: 4 + } + + RowLayout { + Layout.fillWidth: true + spacing: 12 + + PasswordField { + Layout.fillWidth: true + reveal: showRootPassword + onRevealClicked: showRootPassword = !showRootPassword + placeholderText: RaveUsersModule.Translations.rootPasswordPlaceholder + onTextEdited: backend.setRootPasswordText(text) + } + + PasswordField { + Layout.fillWidth: true + reveal: showRootPassword + onRevealClicked: showRootPassword = !showRootPassword + placeholderText: RaveUsersModule.Translations.rootPasswordConfirmLabel + onTextEdited: backend.setRootPasswordSecondaryText(text) + } + } + + Text { + visible: backend.rootPasswordStatus !== "" + text: backend.rootPasswordStatus + color: cErrorRed + font.pixelSize: 12 + } + } + } + } + } +} |