Merge pull request #4095 from weseek/imprv/gw6966-log-new-password

Imprv/gw6966 change password front

resource/locales/en_US/translation.json

@@ -856,6 +856,7 @@
     "confirm_new_password": "Confirm the new password",
     "email_is_required": "Email is required",
     "success_to_send_email": "Success to send email",
-    "incorrect_token_or_expired_url": "The token is incorrect or the URL has expired. Please resend a password reset request via the link below."
+    "incorrect_token_or_expired_url": "The token is incorrect or the URL has expired. Please resend a password reset request via the link below.",
+    "password_and_confirm_password_does_not_match": "Password and confirm password does not match"
   }
 }

resource/locales/ja_JP/translation.json

@@ -850,6 +850,7 @@
     "confirm_new_password": "新しいパスワードの確認",
     "email_is_required": "メールを入力してください",
     "success_to_send_email": "メールを送信しました",
-    "incorrect_token_or_expired_url":"トークンが正しくないか、URLの有効期限が切れています。 以下のリンクからパスワードリセットリクエストを再送信してください。"
+    "incorrect_token_or_expired_url":"トークンが正しくないか、URLの有効期限が切れています。 以下のリンクからパスワードリセットリクエストを再送信してください。",
+    "password_and_confirm_password_does_not_match": "パスワードと確認パスワードが一致しません"
   }
 }

resource/locales/zh_CN/translation.json

@@ -861,6 +861,7 @@
     "confirm_new_password": "确认新密码",
     "email_is_required": "电子邮件是必需的",
     "success_to_send_email": "我发了一封电子邮件",
-    "incorrect_token_or_expired_url":"令牌不正确或 URL 已过期。 请通过以下链接重新发送密码重置请求"
+    "incorrect_token_or_expired_url":"令牌不正确或 URL 已过期。 请通过以下链接重新发送密码重置请求",
+    "password_and_confirm_password_does_not_match": "密码和确认密码不匹配"
   }
 }

src/client/js/components/PasswordResetExecutionForm.jsx

@@ -1,22 +1,81 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { toastSuccess, toastError } from '../util/apiNotification';
 
 
 const PasswordResetExecutionForm = (props) => {
-  const { t } = props;
+  const { t /* appContainer, personalContainer */ } = props;
+
+  const [newPassword, setNewPassword] = useState('');
+  const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
+  const [validationErrorI18n, setValidationErrorI18n] = useState('');
+
+  // TODO: delete the following comments by GW-6778
+  // console.log(newPassword);
+  // console.log(newPasswordConfirm);
+
+  const changePassword = async(e) => {
+    e.preventDefault();
+
+    if (newPassword === '' || newPasswordConfirm === '') {
+      setValidationErrorI18n('personal_settings.password_is_not_set');
+      return;
+    }
+
+    if (newPassword !== newPasswordConfirm) {
+      setValidationErrorI18n('forgot_password.password_and_confirm_password_does_not_match');
+      return;
+    }
+
+    try {
+      /*
+      * TODO: hit an api to change password by GW-6778
+      * the following code is just a reference
+      */
+
+      // await appContainer.apiv3Put('/personal-setting/password', {
+      //   oldPassword, newPassword, newPasswordConfirm,
+      // });
+
+      setNewPassword('');
+      setNewPasswordConfirm('');
+      setValidationErrorI18n('');
+
+      toastSuccess(t('toaster.update_successed', { target: t('Password') }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  };
 
   return (
-    <form role="form" className="form" method="post">
+    <form role="form" onSubmit={changePassword}>
       <div className="form-group">
         <div className="input-group">
-          <input name="password" placeholder={t('forgot_password.new_password')} className="form-control" type="password" />
+          <input
+            name="password"
+            placeholder={t('forgot_password.new_password')}
+            className="form-control"
+            type="password"
+            onChange={e => setNewPassword(e.target.value)}
+          />
         </div>
       </div>
       <div className="form-group">
         <div className="input-group">
-          <input name="password" placeholder={t('forgot_password.confirm_new_password')} className="form-control" type="password" />
+          <input
+            name="password"
+            placeholder={t('forgot_password.confirm_new_password')}
+            className="form-control"
+            type="password"
+            onChange={e => setNewPasswordConfirm(e.target.value)}
+          />
         </div>
+        {validationErrorI18n !== '' && (
+          <p className="text-danger mt-2">{t(validationErrorI18n)}</p>
+        )}
       </div>
       <div className="form-group">
         <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />

src/client/js/components/PasswordResetRequestForm.jsx

@@ -9,7 +9,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 
 const PasswordResetRequestForm = (props) => {
   const { t, appContainer } = props;
-  const [email, setEmail] = useState();
+  const [email, setEmail] = useState('');
 
   const changeEmail = (inputValue) => {
     setEmail(inputValue);
@@ -17,7 +17,7 @@ const PasswordResetRequestForm = (props) => {
 
   const sendPasswordResetRequestMail = async(e) => {
     e.preventDefault();
-    if (email == null) {
+    if (email === '') {
       toastError('err', t('forgot_password.email_is_required'));
       return;
     }