Provide feedback while waiting for the server to set the password

Due to its special nature the password is not stored in an attribute of
the model. Nevertheless, a "changed:password" (always with an empty
value) was triggered as soon as the password was submited. However, as
there is no password attribute that event is not taken into account
anywhere and the UI was not updated until the server response was
received (with further updates once the rooms are fetched again). To
provide feedback to the user that the password is being set now the
confirm button is replaced by a working icon while waiting for the
answer. In a similar way the input is also disabled to prevent further
requests while the previous one is ongoing.

Note that due to the aforementioned behaviour it is not really necessary
to wait for the server response to update the model with the new
password (as it will not be updated anyway), but it is done for
consistency with other requests.

Signed-off-by: Daniel Calviño Sánchez <[email protected]>

css/style.scss

@@ -83,6 +83,9 @@
  * It is assumed that the icon will have the standard width for buttons in
  * inputs of 34px. However, further adjustments may be needed for the input and
  * the padding depending on the context where they are used.
+ *
+ * The confirm icon can have a sibling loading icon to switch to (by hiding one
+ * icon and showing the other) while the operation is in progress.
  */
 input[type="text"],
 input[type="password"] {
@@ -114,6 +117,32 @@ input[type="password"] {
 		&:active:not(:disabled) {
 			opacity: 1;
 		}
+
+		+ .icon-loading-small {
+			/* Mimic size set in server for confirm button. */
+			width: 34px;
+			height: 34px;
+			padding: 7px 6px;
+			margin-top: 3px;
+			margin-bottom: 3px;
+
+			position: absolute;
+			top: 0;
+			right: 3px;
+		}
+	}
+}
+
+.menuitem input[type="text"],
+.menuitem input[type="password"] {
+	& + .icon-confirm + .icon-loading-small {
+		/* Mimic size set in server for inputs in menu items. */
+		min-width: 44px;
+		max-height: 40px;
+		margin: 2px 0;
+
+		/* Override padding set in server for icons in menu items. */
+		padding: 7px 6px;
 	}
 }
 
@@ -953,11 +982,14 @@ input[type="password"] {
 				.password-form {
 					position: relative;
 
-					.password-confirm {
+					.password-confirm,
+					.password-loading {
 						/* Inputs in menu items do not have a right margin, so
 						 * it does not need to be compensated. */
 						right: 0;
+					}
 
+					.password-confirm {
 						/* Needed to override an important rule set in the
 						 * server. */
 						background-color: transparent !important;

js/views/callinfoview.js

@@ -75,6 +75,7 @@
 			'passwordOption': '.password-option',
 			'passwordInput': '.password-input',
 			'passwordConfirm': '.password-confirm',
+			'passwordLoading': '.password-loading',
 
 			'menu': '.password-menu',
 		},
@@ -273,14 +274,28 @@
 
 			var newPassword = this.ui.passwordInput.val().trim();
 
+			this.ui.passwordInput.prop('disabled', true);
+			this.ui.passwordConfirm.addClass('hidden');
+			this.ui.passwordLoading.removeClass('hidden');
+
+			var restoreState = function() {
+				this.ui.passwordInput.prop('disabled', false);
+				this.ui.passwordConfirm.removeClass('hidden');
+				this.ui.passwordLoading.addClass('hidden');
+			}.bind(this);
+
 			this.model.setPassword(newPassword, {
+				wait: true,
 				success: function() {
 					this.ui.passwordInput.val('');
+					restoreState();
 					OC.hideMenus();
 				}.bind(this),
 				error: function() {
+					restoreState();
+
 					OC.Notification.show(t('spreed', 'Error occurred while setting password'), {type: 'error'});
-				}
+				}.bind(this)
 			});
 		},
 

js/views/templates.js

@@ -73,7 +73,7 @@ templates['callinfoview'] = template({"1":function(container,depth0,helpers,part
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.hasPassword : depth0),{"name":"if","hash":{},"fn":container.program(8, data, 0),"inverse":container.program(10, data, 0),"data":data})) != null ? stack1 : "")
     + " password-option\">\n							<form class=\"password-form\">\n								<input class=\"password-input\" required maxlength=\"200\" type=\"password\"\n									placeholder=\""
     + container.escapeExpression(((helper = (helper = helpers.passwordInputPlaceholder || (depth0 != null ? depth0.passwordInputPlaceholder : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"passwordInputPlaceholder","hash":{},"data":data}) : helper)))
-    + "\">\n								<input type=\"submit\" value=\"\" autocomplete=\"new-password\" class=\"icon icon-confirm password-confirm\"></input>\n							</form>\n						</span>\n					</li>\n				</ul>\n			</div>\n		</div>\n";
+    + "\">\n								<input type=\"submit\" value=\"\" autocomplete=\"new-password\" class=\"icon icon-confirm password-confirm\"></input>\n								<span class=\"icon icon-loading-small password-loading hidden\"/>\n							</form>\n						</span>\n					</li>\n				</ul>\n			</div>\n		</div>\n";
 },"8":function(container,depth0,helpers,partials,data) {
     return "icon-password";
 },"10":function(container,depth0,helpers,partials,data) {

js/views/templates/callinfoview.handlebars

@@ -26,6 +26,7 @@
 								<input class="password-input" required maxlength="200" type="password"
 									placeholder="{{passwordInputPlaceholder}}">
 								<input type="submit" value="" autocomplete="new-password" class="icon icon-confirm password-confirm"></input>
+								<span class="icon icon-loading-small password-loading hidden"/>
 							</form>
 						</span>
 					</li>