Rework the SIM PIN Screen

Update the visuals to look more like the new lockscreen pin

shell/contents/views/Pin.qml

@@ -20,8 +20,9 @@
 
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
-import QtQuick.Controls 2.5 as Controls
+import QtQuick.Controls 2.5
 import org.kde.plasma.core 2.0 as PlasmaCore
+import QtGraphicalEffects 1.12
 import org.kde.plasma.components 2.0 as PlasmaComponents
 import MeeGo.QOfono 0.2
 import "../components"
@@ -34,164 +35,273 @@ PlasmaCore.ColorScope {
     visible: simManager.pinRequired != OfonoSimManager.NoPin
     property OfonoSimManager simManager: ofonoSimManager
 
-    function addNumber(number) {
+    property string pin: ""
-        pinLabel.text = pinLabel.text + number
+    property var lastKey: ""
+
+    property var puk: ""
+    property var newPin: ""
+
+    property bool pinsNotEqual: false
+
+    Connections {
+        target: simManager
+        function onEnterPinComplete(error, errorString) {
+            if(error === 0) root.visible = false
+        }
+    }
+
+    OfonoManager {
+        id: ofonoManager
+    }
+
+    OfonoSimManager {
+        id: ofonoSimManager
+        modemPath: ofonoManager.modems.length > 0 ? ofonoManager.modems[0] : ""
     }
 
     Rectangle {
         id: pinScreen
         anchors.fill: parent
 
-        color: PlasmaCore.ColorScope.backgroundColor
+        MouseArea { //Catch input
-
-        OfonoManager {
-            id: ofonoManager
-            onAvailableChanged: {
-            console.log("Ofono is " + available)
-            }
-            onModemAdded: {
-                console.log("modem added " + modem)
-            }
-            onModemRemoved: console.log("modem removed")
-        }
-
-        OfonoConnMan {
-            id: ofono1
-            Component.onCompleted: {
-                console.log(ofonoManager.modems)
-            }
-            modemPath: ofonoManager.modems.length > 0 ? ofonoManager.modems[0] : ""
-        }
-
-        OfonoModem {
-            id: modem1
-            modemPath: ofonoManager.modems.length > 0 ? ofonoManager.modems[0] : ""
-
-        }
-
-        OfonoContextConnection {
-            id: context1
-            contextPath : ofono1.contexts.length > 0 ? ofono1.contexts[0] : ""
-            Component.onCompleted: {
-                print("Context Active: " + context1.active)
-            }
-            onActiveChanged: {
-                print("Context Active: " + context1.active)
-            }
-        }
-
-        OfonoSimManager {
-            id: ofonoSimManager
-            modemPath: ofonoManager.modems.length > 0 ? ofonoManager.modems[0] : ""
-        }
-
-        OfonoNetworkOperator {
-            id: netop
-        }
-
-        MouseArea {
             anchors.fill: parent
         }
 
-        Connections {
+        color: Qt.rgba(250, 250, 250, 0.85)
-            target: simManager
+
-            onEnterPinComplete: {
+        function backspace() {
-                print("Enter Pin complete: " + error + " " + errorString)
+            root.lastKey = ""
+            root.pin = root.pin.substr(0, root.pin.length - 1)
+        }
+
+        function clear() {
+            root.lastKey = ""
+            root.pin = ""
+        }
+
+        function enter() {
+            lastKey = ""
+            pinsNotEqual = false
+            if(simManager.pinRequired === 9) {
+                if(puk === "") {
+                    root.puk = root.pin
+                    root.pin = ""
+                    return
+                } else if(root.newPin !== "") {
+                    if(root.newPin === root.pin) {
+                        simManager.resetPin(simManager.pinRequired, root.puk, root.pin)
+                        clear()
+                        root.puk = ""
+                        root.newPin = ""
+                    } else {
+                        root.newPin = ""
+                        pinsNotEqual = true
+                    }
+                } else {
+                    root.newPin = root.pin
+                    root.pin = ""
+                    return
+                }
+            }
+            simManager.enterPin(simManager.pinRequired, root.pin);
+            clear()
+        }
+
+        function keyPress(data) {
+            root.lastKey = data;
+            root.pin += data
+
+            letterTimer.restart();
+        }
+
+        Keys.onPressed: {
+            if (event.modifiers === Qt.NoModifier) {
+                if (event.key === Qt.Key_Backspace) {
+                    pinScreen.backspace();
+                } else if (event.key === Qt.Key_Return) {
+                    pinScreen.enter();
+                } else if("0123456789".includes(event.text)) {
+                    pinScreen.keyPress(event.text);
+                }
+            }
+        }
+
+        // trigger turning letter into dot after 500 milliseconds
+        Timer {
+            id: letterTimer
+            interval: 500
+            running: false
+            repeat: false
+            onTriggered: {
+                root.lastKey = "";
             }
         }
 
         ColumnLayout {
-            id: dialPadArea
+            anchors.fill: parent
+            anchors.topMargin: 2*units.gridUnit
+            anchors.bottomMargin: units.gridUnit
+            spacing: units.gridUnit
 
-            anchors {
+            // pin dot display
-                fill: parent
+            Item {
-                margins: 20
+                Layout.alignment: Qt.AlignCenter
-            }
-            PlasmaComponents.Label {
                 Layout.fillWidth: true
-                horizontalAlignment: Qt.AlignHCenter
+
-                verticalAlignment: Qt.AlignVCenter
+                // label ("wrong pin", "enter pin")
-                text: {
+                Label {
-                    switch (simManager.pinRequired) {
+                    id: simLabel
-                    case OfonoSimManager.NoPin: return i18n("No pin (error)");
+                    visible: root.pin.length === 0
-                    case OfonoSimManager.SimPin: return i18n("Enter Sim PIN");
+                    anchors.centerIn: parent
-                    case OfonoSimManager.SimPin2: return i18n("Enter Sim PIN 2");
+                    horizontalAlignment: Text.AlignHCenter
-                    case OfonoSimManager.SimPuk: return i18n("Enter Sim PUK");
+                    verticalAlignment: Text.AlignVCenter
-                    case OfonoSimManager.SimPuk2: return i18n("Enter Sim PUK 2");
+                    font.pointSize: 18
-                    default: return i18n("Unknown PIN type: %1", simManager.pinRequired);
+                    color: "#616161"
+                    text: {
+                        switch (simManager.pinRequired) {
+                            case OfonoSimManager.NoPin: return i18n("No pin (error)");
+                            case OfonoSimManager.SimPin: return i18n("Enter Sim PIN");
+                            case OfonoSimManager.SimPin2: return i18n("Enter Sim PIN 2");
+                            case OfonoSimManager.SimPuk: {
+                                if(root.puk === "") return i18n("Enter Sim PUK");
+                                else if(pinsNotEqual) return i18n("Pins don't match. Try again");
+                                else if(root.newPin === "") return i18n("Choose new Pin");
+                                else return i18n("Confirm new Pin");
+                            }
+                            case OfonoSimManager.SimPuk2: return i18n("Enter Sim PUK 2");
+                            default: return i18n("Unknown PIN type: %1", simManager.pinRequired);
+                        }
                     }
                 }
-            }
+                Label {
-            PlasmaComponents.Label {
+                    anchors.left: parent.left
-                Layout.fillWidth: true
+                    anchors.right: parent.right
-                horizontalAlignment: Qt.AlignHCenter
+                    anchors.top: simLabel.bottom
-                verticalAlignment: Qt.AlignVCenter
+                    anchors.topMargin: units.gridUnit
-                text: simManager.pinRetries && simManager.pinRetries[simManager.pinRequired] ? i18np("%1 attempt left", "%1 attempts left", simManager.pinRetries[simManager.pinRequired]) : "";
+                    horizontalAlignment: Text.AlignHCenter
-            }
+                    verticalAlignment: Text.AlignVCenter
-
+                    font.pointSize: 12
-            RowLayout {
+                    color: "#616161"
-                Layout.fillWidth: true
+                    visible: (simManager.pinRequired !== OfonoSimManager.SimPuk) || root.puk === ""
-                Controls.TextField {
+                    text: simManager.pinRetries && simManager.pinRetries[simManager.pinRequired] ? i18np("%1 attempt left", "%1 attempts left", simManager.pinRetries[simManager.pinRequired]) : ""
-                    id: pinLabel
-                    readOnly: true
-                    echoMode: TextInput.Password
-                    activeFocusOnPress: false
-                    Layout.fillWidth: true
-                    horizontalAlignment: Qt.AlignRight
-                    verticalAlignment: Qt.AlignVCenter
                 }
-                PlasmaComponents.Button {
+
-                    visible: pinLabel.text != ""
+                // dot display and letter
-                    iconSource: "edit-clear"
+                RowLayout {
-                    width: height
+                    id: dotDisplay
-                    onClicked: {
+                    anchors.centerIn: parent
-                        pinLabel.text = pinLabel.text.substring(0, pinLabel.text.length - 1);
+                    height: units.gridUnit * 2.5 // maintain height when letter is shown
+                    spacing: 6
+
+                    Repeater {
+                        model: root.pin.length
+                        delegate: Rectangle { // dot
+                            visible: index !== root.pin.length-1 || root.lastKey === "" // hide dot if number is shown
+                            Layout.preferredWidth: units.gridUnit * 0.5
+                            Layout.preferredHeight: Layout.preferredWidth
+                            Layout.alignment: Qt.AlignVCenter
+                            radius: width
+                            color: "#424242"
+                        }
+                    }
+                    Label { // number/letter
+                        visible: root.lastKey !== "" // hide label if no label needed
+                        Layout.alignment: Qt.AlignHCenter
+                        color: "#424242"
+                        text: root.lastKey
+                        font.pointSize: 20
                     }
                 }
             }
 
-            Grid {
+            // separator
-                id: pad
+            Rectangle {
+                Layout.fillWidth: true
+                height: 1
+                color: "#eeeeee"
+            }
+
+            // number keys
+            GridLayout {
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                Layout.leftMargin: units.gridUnit * 0.5
+                Layout.rightMargin: units.gridUnit * 0.5
+                Layout.maximumWidth: units.gridUnit * 22
+                Layout.maximumHeight: (root.height > root.width) ? units.gridUnit * 17.5 : units.gridUnit * 12.5
                 columns: 3
-                spacing: 0
-                property int buttonHeight: height / 5
 
-                Layout.fillWidth: true
+                Repeater {
-                Layout.fillHeight: true
+                    model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "R", "0", "E"]
 
-                DialerButton { id: one; text: "1"; color: PlasmaCore.ColorScope.textColor } 
+                    delegate: Item {
-                DialerButton { text: "2"; color: PlasmaCore.ColorScope.textColor }
+                        Layout.fillWidth: true
-                DialerButton { text: "3"; color: PlasmaCore.ColorScope.textColor }
+                        Layout.fillHeight: true
 
-                DialerButton { text: "4"; color: PlasmaCore.ColorScope.textColor } 
+                        Rectangle {
-                DialerButton { text: "5"; color: PlasmaCore.ColorScope.textColor }
+                            id: keyRect
-                DialerButton { text: "6"; color: PlasmaCore.ColorScope.textColor }
+                            anchors.centerIn: parent
+                            width: parent.width
+                            height: parent.height
+                            radius: 5
+                            color: "white"
+                            visible: modelData.length > 0
 
-                DialerButton { text: "7"; color: PlasmaCore.ColorScope.textColor } 
+                            MouseArea {
-                DialerButton { text: "8"; color: PlasmaCore.ColorScope.textColor }
+                                anchors.fill: parent
-                DialerButton { text: "9"; color: PlasmaCore.ColorScope.textColor }
+                                onPressed: parent.color = "#e0e0e0"
+                                onReleased: parent.color = "white"
+                                onClicked: {
+                                    if (modelData === "R") {
+                                        pinScreen.backspace();
+                                    } else if (modelData === "E") {
+                                        pinScreen.enter();
+                                    } else {
+                                        pinScreen.keyPress(modelData);
+                                    }
+                                }
+                                onPressAndHold: {
+                                    if (modelData === "R") {
+                                        clear();
+                                    }
+                                }
+                            }
+                        }
 
-                DialerButton { text: "*"; color: PlasmaCore.ColorScope.textColor } 
+                        DropShadow {
-                DialerButton { text: "0"; sub: "+"; color: PlasmaCore.ColorScope.textColor }
+                            anchors.fill: keyRect
-                DialerButton {
+                            source: keyRect
-                    text: "#"
+                            cached: true
-                    color: PlasmaCore.ColorScope.textColor
+                            horizontalOffset: 0
-                    callback: function () {
+                            verticalOffset: 1
-                        simManager.enterPin(simManager.pinRequired, pinLabel.text)
+                            radius: 4
-                        pinLabel.text = "";
+                            samples: 6
+                            color: "#e0e0e0"
+                        }
+
+                        PlasmaComponents.Label {
+                            visible: modelData !== "R" && modelData !== "E"
+                            text: modelData
+                            anchors.centerIn: parent
+                            font.pointSize: 18
+                            color: "#424242"
+                        }
+
+                        PlasmaCore.IconItem {
+                            visible: modelData === "R"
+                            anchors.centerIn: parent
+                            source: "edit-clear"
+                        }
+
+                        PlasmaCore.IconItem {
+                            visible: modelData === "E"
+                            anchors.centerIn: parent
+                            source: "go-next"
+                        }
                     }
                 }
             }
-            PlasmaComponents.Button {
+            Item {
-                anchors {
+                height: units.gridUnit * 0.5
-                    top: pad.bottom
-                    horizontalCenter: parent.horizontalCenter
-                }
-                text: i18n("OK")
-                onClicked: {
-                    simManager.enterPin(simManager.pinRequired, pinLabel.text)
-                    pinLabel.text = "";
-                }
             }
         }
     }