[gnome-shell/uajain/adapt-user-avatar-part2: 64/64] userWidget: Revamp username-based login flow

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 559d69653e94814d0654739b2b5fdfddd6897e77
Author: Umang Jain <mailumangjain gmail com>
Date:   Fri Jan 17 16:04:44 2020 +0530

    userWidget: Revamp username-based login flow
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/922

 .../gnome-shell-sass/widgets/_login-dialog.scss    | 10 ++++
 js/gdm/authPrompt.js                               | 62 +++++++++++++++++++---
 js/gdm/loginDialog.js                              |  9 ++--
 js/ui/userWidget.js                                |  8 +++
 4 files changed, 79 insertions(+), 10 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
index 53311f4f67..e32d069d39 100644
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -158,6 +158,16 @@
   height: 1.5em;
 }
 
+.login-dialog-username-entry {
+  width: 17.89em;
+  height: 1.5em;
+}
+
+.login-dialog-username-prompt-entry {
+ @extend .login-dialog-username-entry;
+ margin-left: 48px;
+}
+
 .login-dialog-prompt-label {
   color: darken($osd_fg_color, 20%);
   @include fontsize($base_font_size + 1);
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index f9c15bc693..b3704ccef3 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -126,11 +126,23 @@ var AuthPrompt = GObject.registerClass({
     }
 
     _initEntryRow() {
-        let mainBox = new St.BoxLayout({
+        this._mainBox = new St.BoxLayout({
+            style_class: 'login-dialog-button-box',
+            vertical: true,
+        });
+        this.add_child(this._mainBox);
+
+        this._mainBoxRow1 = new St.BoxLayout({
             style_class: 'login-dialog-button-box',
             vertical: false,
         });
-        this.add_child(mainBox);
+        this._mainBox.add_child(this._mainBoxRow1);
+
+        this._mainBoxRow2 = new St.BoxLayout({
+            style_class: 'login-dialog-button-box',
+            vertical: false,
+        });
+        this._mainBox.add_child(this._mainBoxRow2);
 
         this.cancelButton = new St.Button({
             style_class: 'modal-dialog-button button cancel-button',
@@ -142,7 +154,6 @@ var AuthPrompt = GObject.registerClass({
             child: new St.Icon({ icon_name: 'go-previous-symbolic' }),
         });
         this.cancelButton.connect('clicked', () => this._onCancelButtonClicked());
-        mainBox.add_child(this.cancelButton);
 
         let entryParams = {
             style_class: 'login-dialog-prompt-entry',
@@ -160,7 +171,6 @@ var AuthPrompt = GObject.registerClass({
         ShellEntry.addContextMenu(this._passwordEntry, { actionMode: Shell.ActionMode.NONE });
 
         this._entry = this._passwordEntry;
-        mainBox.add_child(this._entry);
         this._entry.grab_key_focus();
 
         this._entry.clutter_text.connect('text-changed', () => {
@@ -178,10 +188,37 @@ var AuthPrompt = GObject.registerClass({
             x_align: Clutter.ActorAlign.END,
             y_align: Clutter.ActorAlign.CENTER,
         });
-        mainBox.add_child(this._defaultButtonWell);
 
         this._spinner = new Animation.Spinner(DEFAULT_BUTTON_WELL_ICON_SIZE);
         this._defaultButtonWell.add_child(this._spinner);
+
+        this._updateRowsForLogin();
+    }
+
+    _updateRowsForLogin() {
+        this._mainBoxRow1.remove_all_children();
+        this._mainBoxRow2.remove_all_children();
+        this._mainBoxRow2.hide();
+
+        this._mainBoxRow1.add_child(this.cancelButton);
+        this._mainBoxRow1.add_child(this._entry);
+        this._entry.style_class = 'login-dialog-prompt-entry';
+        this._mainBoxRow1.add_child(this._defaultButtonWell);
+    }
+
+    _updateRowsForUsernameBasedLogin() {
+        this._mainBoxRow1.remove_all_children();
+
+        let userWidget = this._userWell.get_child();
+        this._mainBoxRow1.add_child(this.cancelButton);
+        this._mainBoxRow1.add_child(userWidget.usernameEntry);
+
+        // Make sure we always have password-entry here.
+        this._updateEntry(true);
+        this._mainBoxRow2.add_child(this._entry);
+        this._entry.style_class = 'login-dialog-username-prompt-entry';
+        this._mainBoxRow2.add_child(this._defaultButtonWell);
+        this._mainBoxRow2.show();
     }
 
     _updateEntry(secret) {
@@ -356,6 +393,12 @@ var AuthPrompt = GObject.registerClass({
         this._entry.grab_key_focus();
     }
 
+    getUsernameEntryText() {
+        let userWidget = this._userWell.get_child();
+        return userWidget.usernameEntry.get_text();
+    }
+
+
     getAnswer() {
         let text;
 
@@ -425,7 +468,7 @@ var AuthPrompt = GObject.registerClass({
         this._entry.set_text('');
     }
 
-    setUser(user) {
+    setUser(user, userNotListed = false) {
         let oldChild = this._userWell.get_child();
         if (oldChild)
             oldChild.destroy();
@@ -433,6 +476,11 @@ var AuthPrompt = GObject.registerClass({
         if (user) {
             let userWidget = new UserWidget.UserWidget(user, Clutter.Orientation.VERTICAL);
             this._userWell.set_child(userWidget);
+        } else if (!user && userNotListed) {
+            let userWidget = new UserWidget.UserWidget(null, Clutter.Orientation.VERTICAL);
+            this._userWell.set_child(userWidget);
+            this._updateRowsForUsernameBasedLogin();
+            this.verificationStatus = AuthPromptStatus.VERIFYING;
         }
     }
 
@@ -451,6 +499,8 @@ var AuthPrompt = GObject.registerClass({
         this.setUser(null);
         this.stopSpinning();
 
+        this._updateRowsForLogin();
+
         if (oldStatus == AuthPromptStatus.VERIFICATION_FAILED)
             this.emit('failed');
 
diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index aadc748646..409e8c5382 100644
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -909,7 +909,8 @@ var LoginDialog = GObject.registerClass({
     }
 
     _askForUsernameAndBeginVerification() {
-        this._authPrompt.setQuestion(_("Username: "));
+        this._user = null;
+        this._authPrompt.setUser(this._user, true);
 
         this._showRealmLoginHint(this._realmManager.loginFormat);
 
@@ -919,8 +920,8 @@ var LoginDialog = GObject.registerClass({
             () => {
                 this._authPrompt.disconnect(this._nextSignalId);
                 this._nextSignalId = 0;
-                this._authPrompt.updateSensitivity(false);
-                let answer = this._authPrompt.getAnswer();
+                this._authPrompt.updateSensitivity(true);
+                let answer = this._authPrompt.getUsernameEntryText();
                 this._user = this._userManager.get_user(answer);
                 this._authPrompt.clear();
                 this._authPrompt.startSpinning();
@@ -929,7 +930,7 @@ var LoginDialog = GObject.registerClass({
             });
         this._updateCancelButton();
 
-        this._sessionMenuButton.updateSensitivity(false);
+        this._sessionMenuButton.updateSensitivity(this._shouldShowSessionMenuButton());
         this._authPrompt.updateSensitivity(true);
         this._showPrompt();
     }
diff --git a/js/ui/userWidget.js b/js/ui/userWidget.js
index d21552555c..2c8cb1e5b0 100644
--- a/js/ui/userWidget.js
+++ b/js/ui/userWidget.js
@@ -225,6 +225,14 @@ class UserWidget extends St.BoxLayout {
 
             this._userLoadedId = this._user.connect('notify::is-loaded', this._updateUser.bind(this));
             this._userChangedId = this._user.connect('changed', this._updateUser.bind(this));
+        } else {
+            this.usernameEntry = new St.Entry({
+                style_class: 'login-dialog-username-entry',
+                can_focus: true,
+                x_expand: true,
+                x_align: Clutter.ActorAlign.CENTER,
+            });
+            this.usernameEntry.hint_text = _("Enter username…");
         }
 
         this._updateUser();