summaryrefslogtreecommitdiff
path: root/raveos-calamares-module/raveusers/ui/raveusers.qml
diff options
context:
space:
mode:
Diffstat (limited to 'raveos-calamares-module/raveusers/ui/raveusers.qml')
-rw-r--r--raveos-calamares-module/raveusers/ui/raveusers.qml286
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
+ }
+ }
+ }
+ }
+ }
+}