[FIX] Confirm password on set new password user profile

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

@@ -1768,6 +1768,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",
@@ -2701,4 +2703,4 @@
   "Your_push_was_sent_to_s_devices": "Your push was sent to %s devices",
   "Your_server_link": "Your server link",
   "Your_workspace_is_ready": "Your workspace is ready to use 🎉"
-}
+}

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

@@ -137,14 +137,22 @@
 								{{/unless}}
 							</div>
 							{{/with}}
-							<div class="rc-input rc-w50 padded">
+							<div class="rc-input {{#if confirmPasswordInvalid}}rc-input--error{{/if}} rc-w50 padded">
 								{{#with canChange=allowPasswordChange}}
 									<label class="rc-input__label">
 										<div class="rc-input__title">{{_ "New_password"}}</div>
 										<div class="rc-input__wrapper">
 											<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="confirm-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,13 @@ const validateUsername = (username) => {
 	return reg.test(username);
 };
 const validateName = (name) => name.length;
+const validatePassword = (password, confirmPassword) => {
+	if (!confirmPassword) {
+		return true;
+	}
+
+	return password === confirmPassword;
+};
 const filterNames = (old) => {
 	const reg = new RegExp(`^${ RocketChat.settings.get('UTF8_Names_Validation') }$`);
 	return [...old.replace(' ', '')].filter(f => reg.test(f)).join('');
@@ -51,6 +58,10 @@ Template.accountProfile.helpers({
 	nameInvalid() {
 		return !validateName(Template.instance().realname.get());
 	},
+	confirmPasswordInvalid() {
+		const { password, confirmPassword } = Template.instance();
+		return !validatePassword(password.get(), confirmPassword.get());
+	},
 	selectUrl() {
 		return Template.instance().url.get().trim() ? '' : 'disabled';
 	},
@@ -86,6 +97,7 @@ Template.accountProfile.helpers({
 		const realname = instance.realname.get();
 		const username = instance.username.get();
 		const password = instance.password.get();
+		const confirmPassword = instance.confirmPassword.get();
 		const email = instance.email.get();
 		const usernameAvaliable = instance.usernameAvaliable.get();
 		const avatar = instance.avatar.get();
@@ -100,7 +112,7 @@ Template.accountProfile.helpers({
 				return;
 			}
 		}
-		if (!avatar && user.name === realname && user.username === username && user.emails[0].address === email && !password) {
+		if (!avatar && user.name === realname && user.username === username && user.emails[0].address === email && (!password || password !== confirmPassword)) {
 			return ret;
 		}
 		if (!validateEmail(email) || (!validateUsername(username) || usernameAvaliable !== true) || !validateName(realname)) {
@@ -138,6 +150,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');
 	},
@@ -154,6 +170,7 @@ Template.accountProfile.onCreated(function() {
 	self.email = new ReactiveVar(user.emails[0].address);
 	self.username = new ReactiveVar(user.username);
 	self.password = new ReactiveVar;
+	self.confirmPassword = new ReactiveVar;
 	self.suggestions = new ReactiveVar;
 	self.avatar = new ReactiveVar;
 	self.url = new ReactiveVar('');
@@ -348,6 +365,9 @@ Template.accountProfile.events({
 	'input [name=password]'(e, instance) {
 		instance.password.set(e.target.value);
 	},
+	'input [name=confirm-password]'(e, instance) {
+		instance.confirmPassword.set(e.target.value);
+	},
 	'submit form'(e, instance) {
 		e.preventDefault();
 		const user = Meteor.user();