[FIX] Confirm password on set new password user profile (#11095)

Related to #10730

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1782,6 +1782,8 @@
   "New_messages": "New messages",
   "New_password": "New Password",
   "New_Password_Placeholder": "Please enter new password...",
+  "Confirm_new_password": "Confirm New Password",
+  "Confirm_New_Password_Placeholder": "Please re-enter new password...",
   "New_role": "New role",
   "New_Room_Notification": "New Room Notification",
   "New_Trigger": "New Trigger",

packages/rocketchat-ui-account/client/accountProfile.html

@@ -137,7 +137,7 @@
 								{{/unless}}
 							</div>
 							{{/with}}
-							<div class="rc-input rc-w50 padded">
+							<div class="rc-input{{#if confirmationPasswordInvalid}} rc-input--error{{/if}} rc-w50 padded">
 								{{#with canChange=allowPasswordChange}}
 									<label class="rc-input__label">
 										<div class="rc-input__title">{{_ "New_password"}}</div>
@@ -145,6 +145,14 @@
 											<input name="password" type="password" class="rc-input__element" placeholder="{{_ "New_Password_Placeholder"}}"  autocomplete="new-password" {{ifThenElse canChange '' 'disabled'}}>
 										</div>
 									</label>
+									{{#if canConfirmNewPassword}}
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ "Confirm_new_password"}}</div>
+										<div class="rc-input__wrapper">
+											<input name="confirmation-password" type="password" class="rc-input__element" placeholder="{{_ "Confirm_New_Password_Placeholder"}}" autocomplete="confirm-new-password">
+										</div>
+									</label>
+									{{/if}}
 									{{# unless canChange}}
 										<div class="rc-input__description">{{_ 'Password_Change_Disabled'}}</div>
 									{{/unless}}

packages/rocketchat-ui-account/client/accountProfile.js

@@ -8,6 +8,14 @@ const validateUsername = (username) => {
 	return reg.test(username);
 };
 const validateName = (name) => name.length;
+const validatePassword = (password, confirmationPassword) => {
+	if (!confirmationPassword) {
+		return true;
+	}
+
+	return password === confirmationPassword;
+};
+
 const filterNames = (old) => {
 	const reg = new RegExp(`^${ RocketChat.settings.get('UTF8_Names_Validation') }$`);
 	return [...old.replace(' ', '')].filter(f => reg.test(f)).join('');
@@ -15,6 +23,7 @@ const filterNames = (old) => {
 const filterEmail = (old) => {
 	return old.replace(' ', '');
 };
+
 const setAvatar = function(event, template) {
 	const {blob, contentType, service} = this.suggestion;
 
@@ -53,6 +62,10 @@ Template.accountProfile.helpers({
 	nameInvalid() {
 		return !validateName(Template.instance().realname.get());
 	},
+	confirmationPasswordInvalid() {
+		const { password, confirmationPassword } = Template.instance();
+		return !validatePassword(password.get(), confirmationPassword.get());
+	},
 	selectUrl() {
 		return Template.instance().url.get().trim() ? '' : 'disabled';
 	},
@@ -88,6 +101,7 @@ Template.accountProfile.helpers({
 		const realname = instance.realname.get();
 		const username = instance.username.get();
 		const password = instance.password.get();
+		const confirmationPassword = instance.confirmationPassword.get();
 		const email = instance.email.get();
 		const usernameAvaliable = instance.usernameAvaliable.get();
 		const avatar = instance.avatar.get();
@@ -102,7 +116,7 @@ Template.accountProfile.helpers({
 				return;
 			}
 		}
-		if (!avatar && user.name === realname && user.username === username && getUserEmailAddress(user) === email && !password) {
+		if (!avatar && user.name === realname && user.username === username && getUserEmailAddress(user) === email === email && (!password || password !== confirmationPassword)) {
 			return ret;
 		}
 		if (!validateEmail(email) || (!validateUsername(username) || usernameAvaliable !== true) || !validateName(realname)) {
@@ -140,6 +154,10 @@ Template.accountProfile.helpers({
 	allowPasswordChange() {
 		return RocketChat.settings.get('Accounts_AllowPasswordChange');
 	},
+	canConfirmNewPassword() {
+		const password = Template.instance().password.get();
+		return RocketChat.settings.get('Accounts_AllowPasswordChange') && password && password !== '';
+	},
 	allowAvatarChange() {
 		return RocketChat.settings.get('Accounts_AllowUserAvatarChange');
 	},
@@ -156,6 +174,7 @@ Template.accountProfile.onCreated(function() {
 	self.email = new ReactiveVar(getUserEmailAddress(user));
 	self.username = new ReactiveVar(user.username);
 	self.password = new ReactiveVar;
+	self.confirmationPassword = new ReactiveVar;
 	self.suggestions = new ReactiveVar;
 	self.avatar = new ReactiveVar;
 	self.url = new ReactiveVar('');
@@ -349,6 +368,13 @@ Template.accountProfile.events({
 	},
 	'input [name=password]'(e, instance) {
 		instance.password.set(e.target.value);
+
+		if (e.target.value.length === 0) {
+			instance.confirmationPassword.set('');
+		}
+	},
+	'input [name=confirmation-password]'(e, instance) {
+		instance.confirmationPassword.set(e.target.value);
 	},
 	'submit form'(e, instance) {
 		e.preventDefault();