js: Use StPasswordEntry for password entry fields

Use the new StPasswordEntry for password entry fields
and remove all direct handling of clutter text of the entry
 via clutter_text_set_password_char to show/hide the password
text. StPasswordEntry will provides a peek-password-icon which
will allow to show/hide the password present in the field to
the user in subsequent commits.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/619

js/gdm/authPrompt.js

@@ -98,14 +98,23 @@ var AuthPrompt = GObject.registerClass({
         });
 
         this.add_child(this._label);
-        this._entry = new St.Entry({
+
+        let entryParams = {
             style_class: 'login-dialog-prompt-entry',
             can_focus: true,
             x_expand: false,
             y_expand: true,
-        });
+        };
-        ShellEntry.addContextMenu(this._entry, { isPassword: true, actionMode: Shell.ActionMode.NONE });
 
+        this._entry = null;
+
+        this._textEntry = new St.Entry(entryParams);
+        ShellEntry.addContextMenu(this._textEntry, { actionMode: Shell.ActionMode.NONE });
+
+        this._passwordEntry = new St.PasswordEntry(entryParams);
+        ShellEntry.addContextMenu(this._passwordEntry, { actionMode: Shell.ActionMode.NONE });
+
+        this._entry = this._passwordEntry;
         this.add_child(this._entry);
 
         this._entry.grab_key_focus();
@@ -195,7 +204,17 @@ var AuthPrompt = GObject.registerClass({
         });
     }
 
-    _onAskQuestion(verifier, serviceName, question, passwordChar) {
+    _updateEntry(secret) {
+        if (secret && (this._entry != this._passwordEntry)) {
+            this.replace_child(this._entry, this._passwordEntry);
+            this._entry = this._passwordEntry;
+        } else if (!secret && (this._entry != this._textEntry)) {
+            this.replace_child(this._entry, this._textEntry);
+            this._entry = this._textEntry;
+        }
+    }
+
+    _onAskQuestion(verifier, serviceName, question, secret) {
         if (this._queryingService)
             this.clear();
 
@@ -205,10 +224,11 @@ var AuthPrompt = GObject.registerClass({
             this._preemptiveAnswer = null;
             return;
         }
-        this.setPasswordChar(passwordChar);
+
+        this._updateEntry(secret);
         this.setQuestion(question);
 
-        if (passwordChar) {
+        if (secret) {
             if (this._userVerifier.reauthenticating)
                 this.nextButton.label = _("Unlock");
             else
@@ -358,11 +378,6 @@ var AuthPrompt = GObject.registerClass({
         this.stopSpinning();
     }
 
-    setPasswordChar(passwordChar) {
-        this._entry.clutter_text.set_password_char(passwordChar);
-        this._entry.menu.isPassword = passwordChar != '';
-    }
-
     setQuestion(question) {
         this._label.set_text(question);
 

js/gdm/loginDialog.js

@@ -896,7 +896,6 @@ var LoginDialog = GObject.registerClass({
     }
 
     _askForUsernameAndBeginVerification() {
-        this._authPrompt.setPasswordChar('');
         this._authPrompt.setQuestion(_("Username: "));
 
         this._showRealmLoginHint(this._realmManager.loginFormat);

js/gdm/util.js

@@ -485,7 +485,7 @@ var ShellUserVerifier = class {
         if (!this.serviceIsForeground(serviceName))
             return;
 
-        this.emit('ask-question', serviceName, question, '');
+        this.emit('ask-question', serviceName, question, false);
     }
 
     _onSecretInfoQuery(client, serviceName, secretQuestion) {
@@ -498,7 +498,7 @@ var ShellUserVerifier = class {
             return;
         }
 
-        this.emit('ask-question', serviceName, secretQuestion, '\u25cf');
+        this.emit('ask-question', serviceName, secretQuestion, true);
     }
 
     _onReset() {

js/ui/components/keyring.js

@@ -70,12 +70,13 @@ class KeyringDialog extends ModalDialog.ModalDialog {
                                        y_align: Clutter.ActorAlign.CENTER });
             label.set_text(_("Password:"));
             label.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-            this._passwordEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
+            this._passwordEntry = new St.PasswordEntry({
-                                                 text: '',
+                style_class: 'prompt-dialog-password-entry',
-                                                 can_focus: true,
+                text: '',
-                                                 x_expand: true });
+                can_focus: true,
-            this._passwordEntry.clutter_text.set_password_char('\u25cf'); // ● U+25CF BLACK CIRCLE
+                x_expand: true,
-            ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
+            });
+            ShellEntry.addContextMenu(this._passwordEntry);
             this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
 
             this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
@@ -102,12 +103,13 @@ class KeyringDialog extends ModalDialog.ModalDialog {
                                        x_align: Clutter.ActorAlign.START,
                                        y_align: Clutter.ActorAlign.CENTER });
             label.set_text(_("Type again:"));
-            this._confirmEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
+            this._confirmEntry = new St.PasswordEntry({
-                                                text: '',
+                style_class: 'prompt-dialog-password-entry',
-                                                can_focus: true,
+                text: '',
-                                                x_expand: true });
+                can_focus: true,
-            this._confirmEntry.clutter_text.set_password_char('\u25cf'); // ● U+25CF BLACK CIRCLE
+                x_expand: true,
-            ShellEntry.addContextMenu(this._confirmEntry, { isPassword: true });
+            });
+            ShellEntry.addContextMenu(this._confirmEntry);
             this._confirmEntry.clutter_text.connect('activate', this._onConfirmActivate.bind(this));
             if (rtl) {
                 layout.attach(this._confirmEntry, 0, row, 1, 1);

js/ui/components/networkAgent.js

@@ -54,12 +54,18 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
 
             let reactive = secret.key != null;
 
-            secret.entry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
+            let entryParams = {
-                                          text: secret.value, can_focus: reactive,
+                style_class: 'prompt-dialog-password-entry',
-                                          reactive,
+                text: secret.value,
-                                          x_expand: true });
+                can_focus: reactive,
-            ShellEntry.addContextMenu(secret.entry,
+                reactive,
-                                      { isPassword: secret.password });
+                x_expand: true,
+            };
+            if (secret.password)
+                secret.entry = new St.PasswordEntry(entryParams);
+            else
+                secret.entry = new St.Entry(entryParams);
+            ShellEntry.addContextMenu(secret.entry);
 
             if (secret.validate)
                 secret.valid = secret.validate(secret);
@@ -93,9 +99,6 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
                 layout.attach(secret.entry, 1, pos, 1, 1);
             }
             pos++;
-
-            if (secret.password)
-                secret.entry.clutter_text.set_password_char('\u25cf');
         }
 
         contentBox.messageBox.add(secretTable);

js/ui/components/polkitAgent.js

@@ -90,13 +90,13 @@ var AuthenticationDialog = GObject.registerClass({
             y_align: Clutter.ActorAlign.CENTER,
         });
         this._passwordBox.add_child(this._passwordLabel);
-        this._passwordEntry = new St.Entry({
+        this._passwordEntry = new St.PasswordEntry({
             style_class: 'prompt-dialog-password-entry',
             text: "",
             can_focus: true,
             x_expand: true,
         });
-        ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
+        ShellEntry.addContextMenu(this._passwordEntry);
         this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
         this._passwordEntry.bind_property('reactive',
             this._passwordEntry.clutter_text, 'editable',
@@ -278,10 +278,7 @@ var AuthenticationDialog = GObject.registerClass({
         else
             this._passwordLabel.set_text(request);
 
-        if (echoOn)
+        this._passwordEntry.password_visible = echoOn;
-            this._passwordEntry.clutter_text.set_password_char('');
-        else
-            this._passwordEntry.clutter_text.set_password_char('\u25cf'); // ● U+25CF BLACK CIRCLE
 
         this._passwordBox.show();
         this._passwordEntry.set_text('');

js/ui/shellMountOperation.js

@@ -326,12 +326,13 @@ var ShellMountPasswordDialog = GObject.registerClass({
             this._pimLabel = new St.Label({ style_class: 'prompt-dialog-password-label',
                                             text: _("PIM Number"),
                                             y_align: Clutter.ActorAlign.CENTER });
-            this._pimEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
+            this._pimEntry = new St.PasswordEntry({
-                                            can_focus: true,
+                style_class: 'prompt-dialog-password-entry',
-                                            x_expand: true });
+                can_focus: true,
+                x_expand: true,
+            });
             this._pimEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
-            this._pimEntry.clutter_text.set_password_char('\u25cf'); // ● U+25CF BLACK CIRCLE
+            ShellEntry.addContextMenu(this._pimEntry);
-            ShellEntry.addContextMenu(this._pimEntry, { isPassword: true });
 
             if (rtl) {
                 layout.attach(this._pimEntry, 0, 0, 1, 1);
@@ -355,12 +356,13 @@ var ShellMountPasswordDialog = GObject.registerClass({
         this._passwordLabel = new St.Label({ style_class: 'prompt-dialog-password-label',
                                              text: _("Password"),
                                              y_align: Clutter.ActorAlign.CENTER });
-        this._passwordEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
+        this._passwordEntry = new St.PasswordEntry({
-                                             can_focus: true,
+            style_class: 'prompt-dialog-password-entry',
-                                             x_expand: true });
+            can_focus: true,
+            x_expand: true,
+        });
         this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
-        this._passwordEntry.clutter_text.set_password_char('\u25cf'); // ● U+25CF BLACK CIRCLE
+        ShellEntry.addContextMenu(this._passwordEntry);
-        ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
         this.setInitialKeyFocus(this._passwordEntry);
         this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
             animate: true,

js/ui/unlockDialog.js

@@ -41,7 +41,6 @@ var UnlockDialog = GObject.registerClass({
         this._authPrompt.connect('failed', this._fail.bind(this));
         this._authPrompt.connect('cancelled', this._fail.bind(this));
         this._authPrompt.connect('reset', this._onReset.bind(this));
-        this._authPrompt.setPasswordChar('\u25cf');
         this._authPrompt.nextButton.label = _("Unlock");
 
         this._promptBox.add_child(this._authPrompt);