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,50 +35,23 @@ 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
+        }
     }
-
-    Rectangle {
-        id: pinScreen
-        anchors.fill: parent
-        
-        color: PlasmaCore.ColorScope.backgroundColor
 
     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 {
@@ -85,114 +59,250 @@ PlasmaCore.ColorScope {
         modemPath: ofonoManager.modems.length > 0 ? ofonoManager.modems[0] : ""
     }
 
-        OfonoNetworkOperator {
+    Rectangle {
-            id: netop
+        id: pinScreen
-        }
+        anchors.fill: parent
 
-        MouseArea {
+        MouseArea { //Catch input
             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")
+                Label {
+                    id: simLabel
+                    visible: root.pin.length === 0
+                    anchors.centerIn: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.pointSize: 18
+                    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: return i18n("Enter Sim PUK");
+                            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);
                         }
                     }
                 }
-            PlasmaComponents.Label {
+                Label {
-                Layout.fillWidth: true
+                    anchors.left: parent.left
-                horizontalAlignment: Qt.AlignHCenter
+                    anchors.right: parent.right
-                verticalAlignment: Qt.AlignVCenter
+                    anchors.top: simLabel.bottom
-                text: simManager.pinRetries && simManager.pinRetries[simManager.pinRequired] ? i18np("%1 attempt left", "%1 attempts left", simManager.pinRetries[simManager.pinRequired]) : "";
+                    anchors.topMargin: units.gridUnit
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.pointSize: 12
+                    color: "#616161"
+                    visible: (simManager.pinRequired !== OfonoSimManager.SimPuk) || root.puk === ""
+                    text: simManager.pinRetries && simManager.pinRetries[simManager.pinRequired] ? i18np("%1 attempt left", "%1 attempts left", simManager.pinRetries[simManager.pinRequired]) : ""
                 }
 
+                // dot display and letter
                 RowLayout {
-                Layout.fillWidth: true
+                    id: dotDisplay
-                Controls.TextField {
+                    anchors.centerIn: parent
-                    id: pinLabel
+                    height: units.gridUnit * 2.5 // maintain height when letter is shown
-                    readOnly: true
+                    spacing: 6
-                    echoMode: TextInput.Password
+
-                    activeFocusOnPress: false
+                    Repeater {
-                    Layout.fillWidth: true
+                        model: root.pin.length
-                    horizontalAlignment: Qt.AlignRight
+                        delegate: Rectangle { // dot
-                    verticalAlignment: Qt.AlignVCenter
+                            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"
                         }
-                PlasmaComponents.Button {
+                    }
-                    visible: pinLabel.text != ""
+                    Label { // number/letter
-                    iconSource: "edit-clear"
+                        visible: root.lastKey !== "" // hide label if no label needed
-                    width: height
+                        Layout.alignment: Qt.AlignHCenter
-                    onClicked: {
+                        color: "#424242"
-                        pinLabel.text = pinLabel.text.substring(0, pinLabel.text.length - 1);
+                        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
 
+                Repeater {
+                    model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "R", "0", "E"]
+
+                    delegate: Item {
                         Layout.fillWidth: true
                         Layout.fillHeight: true
 
-                DialerButton { id: one; text: "1"; color: PlasmaCore.ColorScope.textColor } 
+                        Rectangle {
-                DialerButton { text: "2"; color: PlasmaCore.ColorScope.textColor }
+                            id: keyRect
-                DialerButton { text: "3"; color: PlasmaCore.ColorScope.textColor }
+                            anchors.centerIn: parent
+                            width: parent.width
+                            height: parent.height
+                            radius: 5
+                            color: "white"
+                            visible: modelData.length > 0
 
-                DialerButton { text: "4"; color: PlasmaCore.ColorScope.textColor } 
+                            MouseArea {
-                DialerButton { text: "5"; color: PlasmaCore.ColorScope.textColor }
+                                anchors.fill: parent
-                DialerButton { text: "6"; color: PlasmaCore.ColorScope.textColor }
+                                onPressed: parent.color = "#e0e0e0"
-
+                                onReleased: parent.color = "white"
-                DialerButton { text: "7"; color: PlasmaCore.ColorScope.textColor } 
-                DialerButton { text: "8"; color: PlasmaCore.ColorScope.textColor }
-                DialerButton { text: "9"; color: PlasmaCore.ColorScope.textColor }
-
-                DialerButton { text: "*"; color: PlasmaCore.ColorScope.textColor } 
-                DialerButton { text: "0"; sub: "+"; color: PlasmaCore.ColorScope.textColor }
-                DialerButton {
-                    text: "#"
-                    color: PlasmaCore.ColorScope.textColor
-                    callback: function () {
-                        simManager.enterPin(simManager.pinRequired, pinLabel.text)
-                        pinLabel.text = "";
-                    }
-                }
-            }
-            PlasmaComponents.Button {
-                anchors {
-                    top: pad.bottom
-                    horizontalCenter: parent.horizontalCenter
-                }
-                text: i18n("OK")
                                 onClicked: {
-                    simManager.enterPin(simManager.pinRequired, pinLabel.text)
+                                    if (modelData === "R") {
-                    pinLabel.text = "";
+                                        pinScreen.backspace();
+                                    } else if (modelData === "E") {
+                                        pinScreen.enter();
+                                    } else {
+                                        pinScreen.keyPress(modelData);
+                                    }
+                                }
+                                onPressAndHold: {
+                                    if (modelData === "R") {
+                                        clear();
                                     }
                                 }
                             }
                         }
+
+                        DropShadow {
+                            anchors.fill: keyRect
+                            source: keyRect
+                            cached: true
+                            horizontalOffset: 0
+                            verticalOffset: 1
+                            radius: 4
+                            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"
+                        }
+                    }
+                }
+            }
+            Item {
+                height: units.gridUnit * 0.5
+            }
+        }
+    }
 }