i18n en

resource/locales/en_US/translation.json

@@ -41,7 +41,6 @@
   "Update Page": "Update Page",
   "Warning": "Warning",
   "Sign in": "Sign in",
-  "forgot_password": "Forgot password?",
   "Sign up is here": "Sign up",
   "Sign in is here": "Sign in",
   "Sign up": "Sign up",
@@ -844,5 +843,13 @@
     "aws_region": "For the region, enter the AWS region name. ex):us-east-1",
     "aws_custom_endpoint":"For the custom endpoint, specify the URL that starts with http(s)://. Also, the trailing slash is not required.",
     "failed_to_send_a_test_email":"Failed to send a test email using SMTP. Please check your settings."
+  },
+  "forgot_password":{
+    "forgot_password": "Forgot Password?",
+    "return_to_login": "Return to login",
+    "reset_password": "Reset Password",
+    "sign_in_instead": "Sign in instead",
+    "password_reset_request_desc": "You can reset your password here.",
+    "password_reset_excecution_desc": "Enter a new password"
   }
 }

src/client/js/components/LoginForm.jsx

@@ -269,7 +269,7 @@ class LoginForm extends React.Component {
                 <div className="row">
                   <div className="col-12 text-right py-2">
                     <a href="/forgot-password" className="d-block link-switch mb-1">
-                      <i className="icon-key"></i> {t('forgot_password')}
+                      <i className="icon-key"></i> {t('forgot_password.forgot_password')}
                     </a>
                     <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
                       <i className="ti-check-box"></i> {t('Sign up is here')}

src/client/js/components/PasswordResetExecutionForm.jsx

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 
 const PasswordResetExecutionForm = (props) => {
   // TODO: apply i18n by GW-6861
-  // const { t } = props;
+  const { t } = props;
 
   return (
     <form role="form" className="form" method="post">
@@ -20,10 +20,10 @@ const PasswordResetExecutionForm = (props) => {
         </div>
       </div>
       <div className="form-group">
-        <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value="Reset Password" type="submit" />
+        <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <a href="/login">
-        <i className="icon-login mr-1"></i>Sign in instead
+        <i className="icon-login mr-1"></i>{t('forgot_password.sign_in_instead')}
       </a>
     </form>
   );

src/client/js/components/PasswordResetRequestForm.jsx

@@ -4,8 +4,7 @@ import { withTranslation } from 'react-i18next';
 
 
 const PasswordResetRequestForm = (props) => {
-  // TODO: apply i18n by GW-6861
-  // const { t } = props;
+  const { t } = props;
 
   return (
     <form role="form" className="form" method="post">
@@ -15,10 +14,10 @@ const PasswordResetRequestForm = (props) => {
         </div>
       </div>
       <div className="form-group">
-        <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value="Reset Password" type="submit" />
+        <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <a href="/login">
-        <i className="icon-login mr-1"></i>Return to login
+        <i className="icon-login mr-1"></i>{t('forgot_password.return_to_login')}
       </a>
     </form>
   );

src/server/views/forgot-password.html

@@ -32,8 +32,8 @@
           <div class="col-md-6 mt-5">
             <div class="text-center">
               <h1><i class="icon-lock large"></i></h1>
-              <h2 class="text-center">Forgot Password?</h2>
-              <p>You can reset your password here.</p>
+              <h2 class="text-center">{{ t('forgot_password.forgot_password') }}</h2>
+              <p>{{ t('forgot_password.password_reset_request_desc') }}</p>
               <div id="password-reset-request-form"></div>
             </div>
           </div>

src/server/views/reset-password.html

@@ -33,8 +33,7 @@
             <div class="text-center">
               <h1><i class="icon-lock-open large"></i></h1>
               <h2 class="text-center">Reset Password</h2>
-              <!-- TODO: show user email by GW-6778 -->
-              <p>Enter a new password for foo@example.com.</p>
+              <p>{{ t('forgot_password.password_reset_excecution_desc') }}</p>
               <div id="password-reset-execution-form"></div>
             </div>
           </div>