[gnome-shell/T29763: 178/249] eos-payg: Add prefix and sufix characters for code insert

[Matthew Leeds <mwleeds src gnome org>]

commit c990764b742485363f5591bd24b5a5bdac328d92
Author: Mazen Asef <mazen asefali gmail com>
Date:   Mon Apr 15 14:53:47 2019 -0300

    eos-payg: Add prefix and sufix characters for code insert
    
    Add a prefix and sufix characters for codes inserted on the
    payg-unlock-screen, making it more user-friendly.
    
     * 2020-04-01: Squash with b766e2eca
    
    https://phabricator.endlessm.com/T25987

 data/dbus-interfaces/com.endlessm.Payg1.xml |  2 ++
 data/theme/gnome-shell-sass/_endless.scss   | 17 ++++++++++++
 js/misc/paygManager.js                      | 19 +++++++++++--
 js/ui/payg.js                               | 34 +++++++++++++++++++----
 js/ui/paygUnlockDialog.js                   | 42 ++++++++++++++++++++++++++---
 5 files changed, 104 insertions(+), 10 deletions(-)
---
diff --git a/data/dbus-interfaces/com.endlessm.Payg1.xml b/data/dbus-interfaces/com.endlessm.Payg1.xml
index a003a69a77..842f029608 100644
--- a/data/dbus-interfaces/com.endlessm.Payg1.xml
+++ b/data/dbus-interfaces/com.endlessm.Payg1.xml
@@ -10,5 +10,7 @@
     <property name="Enabled" type="b" access="read"/>
     <property name="RateLimitEndTime" type="t" access="read"/>
     <property name="CodeFormat" type="s" access="read"/>
+    <property name="CodeFormatPrefix" type="s" access="read"/>
+    <property name="CodeFormatSuffix" type="s" access="read"/>
   </interface>
 </node>
diff --git a/data/theme/gnome-shell-sass/_endless.scss b/data/theme/gnome-shell-sass/_endless.scss
index 2a9c95e2e0..d741fccaff 100644
--- a/data/theme/gnome-shell-sass/_endless.scss
+++ b/data/theme/gnome-shell-sass/_endless.scss
@@ -715,6 +715,14 @@ $success_time_payg_color: #02b842;
           padding-top: 1em;
       }
 
+      .unlock-dialog-payg-code-entry {
+          color: darken($osd_fg_color, 20%);
+          font-size: 24px; // Consistent with .login-dialog-prompt-label
+          padding-left: 3px;
+          padding-right: 3px;
+          padding-top: 0.3em;
+      }
+
       .unlock-dialog-payg-entry {
           font-size: 24px;
           padding-left: 12px;
@@ -768,3 +776,12 @@ $success_time_payg_color: #02b842;
   letter-spacing: 6px;
   margin: 5px;
 }
+
+.notification-payg-code-entry {
+  text-align: center;
+  font-size: 20px;
+  color: darken($osd_fg_color, 20%);
+  padding-left: 12px;
+  padding-right: 12px;
+  margin-top: 6px;
+}
diff --git a/js/misc/paygManager.js b/js/misc/paygManager.js
index 58fd0e0400..3f965e0469 100644
--- a/js/misc/paygManager.js
+++ b/js/misc/paygManager.js
@@ -304,14 +304,29 @@ var PaygManager = GObject.registerClass({
             return false;
         }
 
-        let [isMatch, matchInfo] = this._codeFormatRegex.match(code, 0);
-        return isMatch || (partial && matchInfo.is_partial_match());
+        let is_match, match_info;
+
+        if (partial)
+            [is_match, match_info] = this._codeFormatRegex.match(this.codeFormatPrefix + code, 0);
+        else
+            [is_match, match_info] = this._codeFormatRegex.match(
+                this.codeFormatPrefix + code + this.codeFormatSuffix, 0);
+
+        return is_match || (partial && match_info.is_partial_match());
     }
 
     get initialized() {
         return this._initialized;
     }
 
+    get codeFormatPrefix() {
+        return this._proxy.CodeFormatPrefix;
+    }
+
+    get codeFormatSuffix() {
+        return this._proxy.CodeFormatSuffix;
+    }
+
     get enabled() {
         return this._enabled;
     }
diff --git a/js/ui/payg.js b/js/ui/payg.js
index 0773306f29..bdd9325351 100644
--- a/js/ui/payg.js
+++ b/js/ui/payg.js
@@ -78,7 +78,7 @@ var PaygUnlockUi = GObject.registerClass({
     }
 
     updateApplyButtonSensitivity() {
-        let sensitive = this.validateCurrentCode() &&
+        let sensitive = this.validateCurrentCode(false) &&
             this.verificationStatus !== UnlockStatus.VERIFYING &&
             this.verificationStatus !== UnlockStatus.SUCCEEDED &&
             this.verificationStatus !== UnlockStatus.TOO_MANY_ATTEMPTS;
@@ -198,12 +198,12 @@ var PaygUnlockUi = GObject.registerClass({
         this.updateSensitivity();
     }
 
-    validateCurrentCode() {
-        return Main.paygManager.validateCode(this.entryCode);
+    validateCurrentCode(partial=true) {
+        return Main.paygManager.validateCode(this.entryCode, partial);
     }
 
     startVerifyingCode() {
-        if (!this.validateCurrentCode())
+        if (!this.validateCurrentCode(false))
             return;
 
         this.verificationStatus = UnlockStatus.VERIFYING;
@@ -211,7 +211,12 @@ var PaygUnlockUi = GObject.registerClass({
         this.updateSensitivity();
         this.cancelled = false;
 
-        Main.paygManager.addCode(this.entryCode, error => {
+        let code = '%s%s%s'.format(
+            Main.paygManager.codeFormatPrefix,
+            this.entryCode,
+            Main.paygManager.codeFormatSuffix);
+
+        Main.paygManager.addCode(code, error => {
             // We don't care about the result if we're closing the dialog.
             if (this.cancelled) {
                 this.verificationStatus = UnlockStatus.NOT_VERIFYING;
@@ -249,9 +254,28 @@ var PaygUnlockWidget = GObject.registerClass({
             style_class: 'notification-actions',
             x_expand: false,
         });
+        if (Main.paygManager.codeFormatPrefix !== '') {
+            let prefix = new St.Label({
+                style_class: 'notification-payg-code-entry',
+                text: Main.paygManager.codeFormatPrefix,
+                x_align: Clutter.ActorAlign.CENTER,
+            });
+
+            entrySpinnerBox.add_child(prefix);
+        }
         entrySpinnerBox.add_child(this._codeEntry);
         entrySpinnerBox.add_child(this._spinner.actor);
 
+        if (Main.paygManager.codeFormatSuffix !== '') {
+            let suffix = new St.Label({
+                style_class: 'notification-payg-code-entry',
+                text: Main.paygManager.codeFormatSuffix,
+                x_align: Clutter.ActorAlign.CENTER,
+            });
+
+            entrySpinnerBox.add_child(suffix);
+        }
+
         this._buttonBox = new St.BoxLayout({
             style_class: 'notification-actions',
             x_expand: true,
diff --git a/js/ui/paygUnlockDialog.js b/js/ui/paygUnlockDialog.js
index 85edf489fe..93f0236fe9 100644
--- a/js/ui/paygUnlockDialog.js
+++ b/js/ui/paygUnlockDialog.js
@@ -58,6 +58,8 @@ var PaygUnlockCodeEntry = GObject.registerClass({
             reactive: true,
             can_focus: true,
             x_align: Clutter.ActorAlign.FILL,
+            x_expand: true,
+            y_expand: false,
         });
 
         this._code = '';
@@ -138,7 +140,9 @@ var PaygUnlockCodeEntry = GObject.registerClass({
     }
 
     addCharacter(character) {
-        if (!this._enabled || !GLib.unichar_isprint(character))
+        if (!this._enabled || !GLib.unichar_isprint(character) ||
+            character === Main.paygManager.codeFormatPrefix ||
+            character === Main.paygManager.codeFormatSuffix)
             return;
 
         let pos = this.clutter_text.get_cursor_position();
@@ -254,8 +258,8 @@ var PaygUnlockDialog = GObject.registerClass({
         promptLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         promptBox.add_child(promptLabel);
 
-        this._entry = new PaygUnlockCodeEntry();
-        promptBox.add_child(this._entry);
+        let entryBox = this._createEntryArea();
+        promptBox.add_child(entryBox);
 
         this._errorMessage = new St.Label({
             opacity: 0,
@@ -407,6 +411,38 @@ var PaygUnlockDialog = GObject.registerClass({
         return buttonsBox;
     }
 
+    _createEntryArea() {
+        let entryBox = new St.BoxLayout({
+            vertical: false,
+            x_expand: true,
+            x_align: Clutter.ActorAlign.FILL,
+        });
+
+        if (Main.paygManager.codeFormatPrefix !== '') {
+            let prefix = new St.Label({
+                style_class: 'unlock-dialog-payg-code-entry',
+                text: Main.paygManager.codeFormatPrefix,
+                x_align: Clutter.ActorAlign.CENTER,
+            });
+
+            entryBox.add_child(prefix);
+        }
+
+        this._entry = new PaygUnlockCodeEntry();
+        entryBox.add_child(this._entry);
+
+        if (Main.paygManager.codeFormatSuffix !== '') {
+            let suffix = new St.Label({
+                style_class: 'unlock-dialog-payg-code-entry',
+                text: Main.paygManager.codeFormatSuffix,
+                x_align: Clutter.ActorAlign.CENTER,
+            });
+            entryBox.add_child(suffix);
+        }
+
+        return entryBox;
+    }
+
     _createMessageBox() {
         let messageBox = new St.BoxLayout({
             vertical: true,