STCOR-728 - Forgot password and Forgot username : add placeholder to …

…input box. (#1336)

* STCOR-728 - Forgot password and Forgot username : input box requires a label

* STCOR-728 - update changelog md file

* STCOR-728 - add translations for placeholders

* STCOR-728 - correct typo in translation key

CHANGELOG.md

@@ -18,6 +18,7 @@
 * *BREAKING* bump `react` to `v18`, and dev-deps accordingly. Refs STCOR-729.
 * Added `consortiaServices` utils to hold common consortia helpers. Refs STCOR-733.
 * Bump `@formatjs/cli` to `^6.1.3`.
+* Forgot password and Forgot username : add placeholder to input box. Refs STCOR-728.
 
 ## [9.0.0](https://github.com/folio-org/stripes-core/tree/v9.0.0) (2023-01-30)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v8.3.0...v9.0.0)

src/components/ForgotPassword/ForgotPasswordForm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Field, Form } from 'react-final-form';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import {
   TextField,
@@ -20,6 +20,9 @@ class ForgotPasswordForm extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     errors: PropTypes.arrayOf(PropTypes.object),
+    intl: PropTypes.shape({
+      formatMessage: PropTypes.func.isRequired,
+    }),
   };
 
   static defaultProps = {
@@ -29,7 +32,8 @@ class ForgotPasswordForm extends Component {
   render() {
     const {
       errors,
-      onSubmit
+      onSubmit,
+      intl: { formatMessage }
     } = this.props;
 
     return (
@@ -74,6 +78,7 @@ class ForgotPasswordForm extends Component {
                     autoComplete="on"
                     autoCapitalize="none"
                     autoFocus
+                    placeholder={formatMessage({ id: 'stripes-core.placeholder.forgotPassword' })}
                   />
                 </div>
                 <Button
@@ -111,4 +116,4 @@ class ForgotPasswordForm extends Component {
   }
 }
 
-export default ForgotPasswordForm;
+export default injectIntl(ForgotPasswordForm);

src/components/ForgotUserName/ForgotUserNameForm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Field, Form } from 'react-final-form';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 
 import {
   TextField,
@@ -22,6 +22,9 @@ class ForgotUserNameForm extends Component {
     isValid: PropTypes.bool.isRequired,
     onSubmit: PropTypes.func.isRequired,
     errors: PropTypes.arrayOf(PropTypes.object),
+    intl: PropTypes.shape({
+      formatMessage: PropTypes.func.isRequired,
+    }),
   };
 
   static defaultProps = {
@@ -32,7 +35,8 @@ class ForgotUserNameForm extends Component {
     const {
       onSubmit,
       isValid,
-      errors
+      errors,
+      intl: { formatMessage },
     } = this.props;
 
     return (
@@ -77,6 +81,7 @@ class ForgotUserNameForm extends Component {
                     autoComplete="on"
                     autoCapitalize="none"
                     autoFocus
+                    placeholder={formatMessage({ id: 'stripes-core.placeholder.forgotUsername' })}
                   />
                 </div>
                 <Button
@@ -117,4 +122,4 @@ class ForgotUserNameForm extends Component {
   }
 }
 
-export default ForgotUserNameForm;
+export default injectIntl(ForgotUserNameForm);

translations/stripes-core/en.json

@@ -145,6 +145,9 @@
   "createResetPassword.confirmPassword": "Confirm Password",
   "createResetPassword.ruleTemplate": "Must {description}",
 
+  "placeholder.forgotPassword": "Enter email or phone",
+  "placeholder.forgotUsername": "Enter email or phone",
+
   "routeErrorBoundary.sub": "An error occurred on this page and it could not be loaded.",
   "routeErrorBoundary.goToAppHomeLabel": "Return to home",
   "routeErrorBoundary.goToModuleHomeLabel": "Return to {name} landing page",