Add login page

qtquick/SailfinStyle/Page.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Templates 2.12 as T
+import ".."
 
 T.Page {
 

qtquick/SailfinStyle/ToolBar.qml

@@ -2,7 +2,7 @@ import QtQuick 2.12
 import QtGraphicalEffects 1.12
 import QtQuick.Templates 2.12 as T
 
-import "."
+import ".."
 
 T.ToolBar {
     horizontalPadding: SailfinStyle.mediumPadding

qtquick/SailfinStyle/qmldir

@@ -1,4 +1,3 @@
 module SailfinStyle
 depends QtQuick.Controls 2.12
 
-singleton SailfinStyle 1.0 SailfinStyle.qml

qtquick/qml.qrc

@@ -6,9 +6,13 @@
         <file>qtquickcontrols2.conf</file>
         <file>SailfinStyle/assets/ToolBarBackground.svg</file>
         <file>SailfinStyle/qmldir</file>
-        <file>SailfinStyle/SailfinStyle.qml</file>
         <file>SailfinStyle/ToolBar.qml</file>
         <file>qml/pages/setup/ServerSelectPage.qml</file>
         <file>SailfinStyle/Page.qml</file>
+        <file>SailfinStyle.qml</file>
+        <file>qmldir</file>
+        <file>qml/components/+sailfinstyle/Background.qml</file>
+        <file>qml/components/BusyDialog.qml</file>
+        <file>qml/pages/setup/LoginPage.qml</file>
     </qresource>
 </RCC>

qtquick/qml/components/+sailfinstyle/Background.qml

@@ -0,0 +1,116 @@
+import QtQuick 2.12
+import QtQuick.Particles 2.12
+
+Rectangle {
+    id: root
+    anchors.fill: parent
+    color: "#ccc"
+
+    readonly property real normalStrength: 0.5
+
+    MouseArea {
+        anchors.fill: parent
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: {
+            if (mouse.button == Qt.LeftButton) {
+                enter();
+            } else {
+                exit();
+            }
+        }
+    }
+
+    ParticleSystem {
+        id: particleSystem
+    }
+
+    Emitter {
+        id: emitter
+        anchors.centerIn: parent
+        width: parent.width * 0.5
+        height: parent.height * 0.5
+        system: particleSystem
+        emitRate: Math.sqrt(width * height) * 30 / (lifeSpan)
+        lifeSpan: 10000
+        lifeSpanVariation: 1000
+        size: 12
+        endSize: 24
+        sizeVariation: 6
+        shape: EllipseShape {}
+    }
+
+    Attractor {
+        id: affector
+        anchors.centerIn: parent
+        width: parent.width * 2
+        height: parent.height * 2
+        affectedParameter: Attractor.Position
+        system: particleSystem
+        pointX: width / 2
+        pointY: height / 2
+        proportionalToDistance: Attractor.Linear
+        strength: -normalStrength
+    }
+
+    Wander {
+        anchors.fill: parent
+        system: particleSystem
+        pace: 300
+        affectedParameter: Wander.Velocity
+        xVariance: 1000
+        yVariance: 1000
+    }
+
+
+    ImageParticle {
+        //source: Qt.resolvedUrl("../../assets/img/particle.png")
+        source: "qrc:/particleresources/fuzzydot.png"
+        system: particleSystem
+        alpha: 0.7
+        alphaVariation: 0.3
+    }
+
+    SequentialAnimation {
+        id: enterAnimation
+        NumberAnimation {
+            target: affector
+            property: "strength"
+            from: - 5 * normalStrength
+            to: -normalStrength
+            easing.type: Easing.OutQuad
+            duration: 1000
+        }
+        ScriptAction {
+            script: emitter.burst(10)
+        }
+    }
+
+    SequentialAnimation {
+        id: exitAnimation
+        PropertyAction {
+            target: affector
+            property: "strength"
+            value: 4 * normalStrength
+        }
+        PauseAnimation {
+            duration: 500
+        }
+        NumberAnimation {
+            target: affector
+            property: "strength"
+            easing.type: Easing.InOutQuad
+            to: -normalStrength
+            duration: 500
+        }
+    }
+
+    function enter() {
+        console.log("Enter animation")
+        enterAnimation.start();
+    }
+
+    function exit() {
+        console.log("Exit animation")
+        exitAnimation.start();
+    }
+}

qtquick/qml/components/Background.qml

@@ -1,116 +1,6 @@
-import QtQuick 2.12
-import QtQuick.Particles 2.12
+import QtQuick 2.6
 
-Rectangle {
-    id: root
-    anchors.fill: parent
-    color: "#ccc"
-
-    readonly property real normalStrength: 0.5
-
-    MouseArea {
-        anchors.fill: parent
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: {
-            if (mouse.button == Qt.LeftButton) {
-                enter();
-            } else {
-                exit();
-            }
-        }
-    }
-
-    ParticleSystem {
-        id: particleSystem
-    }
-
-    Emitter {
-        id: emitter
-        anchors.centerIn: parent
-        width: parent.width * 0.5
-        height: parent.height * 0.5
-        system: particleSystem
-        emitRate: Math.sqrt(width * height) * 30 / (lifeSpan)
-        lifeSpan: 10000
-        lifeSpanVariation: 1000
-        size: 12
-        endSize: 24
-        sizeVariation: 6
-        shape: EllipseShape {}
-    }
-
-    Attractor {
-        id: affector
-        anchors.centerIn: parent
-        width: parent.width * 2
-        height: parent.height * 2
-        affectedParameter: Attractor.Position
-        system: particleSystem
-        pointX: width / 2
-        pointY: height / 2
-        proportionalToDistance: Attractor.Linear
-        strength: -normalStrength
-    }
-
-    Wander {
-        anchors.fill: parent
-        system: particleSystem
-        pace: 300
-        affectedParameter: Wander.Velocity
-        xVariance: 1000
-        yVariance: 1000
-    }
-
-
-    ImageParticle {
-        //source: Qt.resolvedUrl("../../assets/img/particle.png")
-        source: "qrc:/particleresources/fuzzydot.png"
-        system: particleSystem
-        alpha: 0.7
-        alphaVariation: 0.3
-    }
-
-    SequentialAnimation {
-        id: enterAnimation
-        NumberAnimation {
-            target: affector
-            property: "strength"
-            from: - 5 * normalStrength
-            to: -normalStrength
-            easing.type: Easing.OutQuad
-            duration: 1000
-        }
-        ScriptAction {
-            script: emitter.burst(10)
-        }
-    }
-
-    SequentialAnimation {
-        id: exitAnimation
-        PropertyAction {
-            target: affector
-            property: "strength"
-            value: 4 * normalStrength
-        }
-        PauseAnimation {
-            duration: 500
-        }
-        NumberAnimation {
-            target: affector
-            property: "strength"
-            easing.type: Easing.InOutQuad
-            to: -normalStrength
-            duration: 500
-        }
-    }
-
-    function enter() {
-        console.log("Enter animation")
-        enterAnimation.start();
-    }
-
-    function exit() {
-        console.log("Exit animation")
-        exitAnimation.start();
-    }
+Item {
+    function enter() {}
+    function exit() {}
 }

qtquick/qml/components/BusyDialog.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+Dialog {
+    modal: true
+    BusyIndicator {
+        anchors.centerIn: parent
+        running: true
+    }
+}

qtquick/qml/main.qml

@@ -6,20 +6,31 @@ import QtQuick.Window 2.12
 import nl.netsoj.chris.Jellyfin 1.0
 
 import "components"
-import "../SailfinStyle"
+import ".."
 
 ApplicationWindow {
+    id: appWindow
     width: 600
     height: 600
     visible: true
+    property int _oldDepth: 0
 
     background: Background {
+        id: background
         anchors.fill: parent
     }
 
     StackView {
         id: pageStack
         anchors.fill: parent
+        onDepthChanged: {
+            if (depth >= _oldDepth) {
+                background.enter();
+            } else {
+                background.exit();
+            }
+            _oldDepth = depth
+        }
     }
 
     Connections {

qtquick/qml/pages/setup/LoginPage.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+import "../../.."
+
+Page {
+    property string loginMessage
+    header: ToolBar {
+        Label {
+            anchors.horizontalCenter: parent.horizontalCenter
+            font.pixelSize: SailfinStyle.fontSizeLarge
+            text: qsTr("Log in")
+        }
+    }
+
+    Column {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: Math.min(80 * SailfinStyle.unit, parent.width - SailfinStyle.largePadding * 2)
+        spacing: SailfinStyle.mediumPadding
+        TextField {
+            id: usernameField
+            width: parent.width
+            EnterKey.type: Qt.EnterKeyNext
+        }
+        TextField {
+            id: passwordField
+            width: parent.width
+        }
+        Label {
+            width: parent.width
+            text: loginMessage
+            wrapMode: Text.WordWrap
+        }
+    }
+}

qtquick/qml/pages/setup/ServerSelectPage.qml

@@ -3,9 +3,12 @@ import QtQuick.Controls 2.12
 
 import nl.netsoj.chris.Jellyfin 1.0
 
-import "../../../SailfinStyle"
+import "../../components"
+import "../../.."
 
 Page {
+    property string selectedServerName
+    property StackView stackView: StackView.view
     header: ToolBar {
         Label {
             anchors.horizontalCenter: parent.horizontalCenter
@@ -13,12 +16,66 @@ Page {
             text: qsTr("Select a server")
         }
     }
-    BusyIndicator {
-        anchors.centerIn: parent
+
+    ListView {
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            bottom: parent.bottom
+        }
+        width: Math.min(80 * SailfinStyle.unit, parent.width - 2 * SailfinStyle.largePadding)
+        model: discoveryModel
+
+        header: Column {
+            width: parent.width
+            Label {
+                text: "Enter an IP address"
+                width: parent.width
+            }
+            TextField {
+                width: parent.width
+            }
+        }
+        delegate: RadioDelegate {
+            text: name
+            width: parent.width
+            onClicked: {
+                selectedServerName = name
+                ApiClient.baseUrl = address
+                ApiClient.setupConnection()
+                busyDialog.open()
+                //StackView.view.push()
+            }
+        }
+        footer: BusyIndicator {
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
     }
 
     ServerDiscoveryModel {
         id: discoveryModel
     }
 
+    StackView.onActivated: {
+        console.log("Hello")
+        discoveryModel.refresh()
+    }
+
+    BusyDialog {
+        id: busyDialog
+        anchors.centerIn: Overlay.overlay
+        title: qsTr("Connecting to %1").arg(selectedServerName)
+    }
+
+    Connections {
+        target: ApiClient
+        onConnectionSuccess: {
+            busyDialog.close()
+            stackView.push(Qt.resolvedUrl("LoginPage.qml"), {"loginMessage": loginMessage})
+        }
+        onConnectionFailed: {
+            busyDialog.close()
+        }
+    }
+
 }

qtquick/qmldir

@@ -0,0 +1 @@
+singleton SailfinStyle 1.0 SailfinStyle.qml

qtquick/qtquickcontrols2.conf

@@ -1,2 +1,3 @@
 [Controls]
 Style=SailfinStyle
+FallbackStyle=Universal