feat: design for forgot password and reset password

.env.development

@@ -9,3 +9,5 @@ REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 SITE_NAME=edX
 AUTHN_ALGOLIA_APP_ID=''
 AUTHN_ALGOLIA_SEARCH_API_KEY=''
+INFO_EMAIL=[email protected]
+LOGIN_ISSUE_SUPPORT_LINK='http://localhost:18000/login-issue-support-url'

src/forms/fields/email-field/index.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
 import { Form } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
-import messages from './messages';
-
 /**
  * Email field component. It accepts following handler(s)
  * - handleChange for setting value change and
@@ -14,17 +11,17 @@ import messages from './messages';
  * - setting value on change
  */
 const EmailField = (props) => {
-  const { formatMessage } = useIntl();
   const { name, value, handleChange } = props;
 
   return (
     <Form.Group controlId="email" className="w-100 mb-4">
       <Form.Control
+        className="mr-0"
         type="email"
         name={name}
         value={value}
         onChange={handleChange}
-        floatingLabel={formatMessage(messages.registrationFormEmailFieldLabel)}
+        floatingLabel={props.floatingLabel}
       />
     </Form.Group>
   );
@@ -34,6 +31,7 @@ EmailField.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
+  floatingLabel: PropTypes.func.isRequired,
 };
 
 export default EmailField;

src/forms/fields/password-field/index.jsx

@@ -29,6 +29,7 @@ const PasswordField = (props) => {
     value,
     handleChange,
     handleFocus,
+    floatingLabel,
   } = props;
 
   const [isPasswordHidden, setHiddenTrue, setHiddenFalse] = useToggle(true);
@@ -76,23 +77,24 @@ const PasswordField = (props) => {
         {props.value.length >= 8
           ? <Icon className="text-success mr-1" src={Check} />
           : <Icon className="mr-1 text-light-700" src={Remove} />}
-        {formatMessage(messages.eightCharcters)}
+        {formatMessage(messages.eightCharacters)}
       </span>
     </Tooltip>
   );
 
   return (
     <Form.Group controlId="password" className="w-100 mb-4">
-      <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show>
+      <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} hide>
         <Form.Control
           as="input"
+          className="mr-0"
           type={isPasswordHidden ? 'password' : 'text'}
           name={name}
           value={value}
           onChange={handleChange}
           onFocus={handleFocus}
           trailingElement={isPasswordHidden ? ShowButton : HideButton}
-          floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)}
+          floatingLabel={floatingLabel}
         />
       </OverlayTrigger>
       {errorMessage !== '' && (
@@ -111,11 +113,16 @@ const PasswordField = (props) => {
 };
 
 PasswordField.propTypes = {
-  errorMessage: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleFocus: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  floatingLabel: PropTypes.string.isRequired,
+};
+
+PasswordField.defaultProps = {
+  errorMessage: '',
 };
 
 export default PasswordField;

src/forms/fields/password-field/messages.jsx

@@ -1,11 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  registrationFormPasswordFieldLabel: {
-    id: 'registration.form.password.label',
-    defaultMessage: 'Password',
-    description: 'Label for password input field',
-  },
   showPasswordAlt: {
     id: 'show.password',
     defaultMessage: 'Show password',
@@ -26,7 +21,7 @@ const messages = defineMessages({
     defaultMessage: '1 number',
     description: 'password requirement to have 1 number',
   },
-  eightCharcters: {
+  eightCharacters: {
     id: 'eight.characters',
     defaultMessage: '8 characters',
     description: 'password requirement to have a minimum of 8 characters',

src/forms/fields/text-field/index.jsx

@@ -31,6 +31,7 @@ const TextField = (props) => {
       <Form.Control
         as="input"
         type="text"
+        className="mr-0"
         name={name}
         value={value}
         onChange={handleChange}

src/forms/login-popup/index.jsx

@@ -114,6 +114,7 @@ const LoginForm = () => {
           errorMessage={formErrors.password}
           handleChange={handleOnChange}
           handleFocus={handleOnFocus}
+          floatingLabel={formatMessage(messages.loginFormPasswordFieldLabel)}
         />
         {/* TODO: this destination will be replaced with actual links */}
         <Hyperlink className="hyper-link" destination="#" isInline>

src/forms/registration-popup/index.jsx

@@ -113,6 +113,7 @@ const RegistrationForm = () => {
               name="email"
               value={formFields.email}
               handleChange={handleOnChange}
+              floatingLabel={formatMessage(messages.registrationFormEmailFieldLabel)}
             />
             <MarketingEmailOptInCheckbox
               name="marketingEmailOptIn"
@@ -135,6 +136,7 @@ const RegistrationForm = () => {
               errorMessage=""
               handleChange={handleOnChange}
               handleFocus={() => { }}
+              floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)}
             />
           </Stepper.Step>
           <div className="d-flex flex-column my-4">

src/forms/registration-popup/messages.jsx

@@ -56,6 +56,16 @@ const messages = defineMessages({
     defaultMessage: 'Fill out the fields below to create your account',
     description: 'Heading that appear on the second step',
   },
+  registrationFormPasswordFieldLabel: {
+    id: 'registration.form.password.label',
+    defaultMessage: 'Password',
+    description: 'Label for password input field',
+  },
+  registrationFormEmailFieldLabel: {
+    id: 'registration.form.email.label',
+    defaultMessage: 'Enter your email',
+    description: 'Label for email input field',
+  },
 });
 
 export default messages;

src/forms/reset-password-popup/ResetPasswordHeader.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+/**
+ * Header component for the reset password form.
+ * Renders the heading for the reset password form along with a separator.
+ * @returns {JSX.Element} The rendered header component.
+ */
+const ResetPasswordHeader = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <h2 className="font-italic text-center display-1 mb-4 text-dark-500">
+        {formatMessage(messages.resetPasswordFormHeading)}
+      </h2>
+      <hr className="separator mb-3 mt-3" />
+    </>
+  );
+};
+
+export default ResetPasswordHeader;

src/forms/reset-password-popup/forgot-password/ForgotPasswordEmailSentConfirmation.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Alert } from '@openedx/paragon';
+
+import messages from '../messages';
+
+/**
+ * Component that renders the display confirmation message after sending the password reset email.
+ * @returns {JSX.Element} The rendered confirmation message component.
+ */
+const ForgotPasswordEmailSentConfirmation = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="text-gray-800 mb-5">
+      <span className="font-weight-bold mr-2 h3 text-center d-block">
+        {formatMessage(messages.emailSentMessage)}
+      </span>
+      <span>
+        <FormattedMessage
+          id="forgot.password.confirmation.message"
+          defaultMessage="We sent an email to {email} with instructions to reset your password.
+          If you do not receive a password reset message after 1 minute, verify that you entered
+          the correct email address, or check your spam folder. If you need further assistance, visit Help
+          Center contact edX support at {supportLink}."
+          description="Forgot password confirmation message"
+          values={{
+            /* TODO: this email will be replaced with actual email */
+            email: <span className="data-hj-suppress">[email protected]</span>,
+            supportLink: (
+              <Alert.Link href={getConfig().PASSWORD_RESET_SUPPORT_LINK} target="_blank">
+                {formatMessage(messages.resetPasswordFormAdditionalHelpLink)}
+              </Alert.Link>
+            ),
+          }}
+        />
+      </span>
+    </div>
+
+  );
+};
+
+export default ForgotPasswordEmailSentConfirmation;

src/forms/reset-password-popup/forgot-password/ForgotPasswordPage.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Container, Form,
+} from '@openedx/paragon';
+
+import ForgotPasswordEmailSentConfirmation from './ForgotPasswordEmailSentConfirmation';
+import { InlineLink } from '../../../common-ui';
+import EmailField from '../../fields/email-field';
+import messages from '../messages';
+import ResetPasswordHeader from '../ResetPasswordHeader';
+import '../index.scss';
+
+/**
+ * ForgotPasswordForm component for handling user password reset.
+ * This component provides a form for users to reset their password by entering their email.
+ */
+const ForgotPasswordPage = () => {
+  const { formatMessage } = useIntl();
+
+  const [formFields, setFormFields] = useState({ email: '' });
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const handleOnChange = (event) => {
+    const { name } = event.target;
+    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+    setFormFields(prevState => ({ ...prevState, [name]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setIsSuccess(true);
+  };
+
+  return (
+    <Container size="lg" className="authn__popup-container p-5 overflow-auto">
+      <ResetPasswordHeader />
+      {!isSuccess && (
+        <Form id="forgot-password-form" name="reset-password-form" className="d-flex flex-column my-4.5">
+          <EmailField
+            name="email"
+            value={formFields.email}
+            handleChange={handleOnChange}
+            floatingLabel={formatMessage(messages.forgotPasswordFormEmailFieldLabel)}
+          />
+          <Button
+            id="reset-password-user"
+            name="reset-password-user"
+            variant="primary"
+            type="submit"
+            className="align-self-end"
+            onClick={handleSubmit}
+            onMouseDown={(e) => e.preventDefault()}
+          >
+            {formatMessage(messages.resetPasswordFormSubmitButton)}
+          </Button>
+          <div>
+            <InlineLink
+              className="mb-2"
+              destination={getConfig().LOGIN_ISSUE_SUPPORT_LINK}
+              linkHelpText={formatMessage(messages.resetPasswordFormNeedHelpText)}
+              linkText={formatMessage(messages.resetPasswordFormHelpCenterLink)}
+            />
+            <InlineLink
+              className="mb-2 font-weight-normal small"
+              destination={getConfig().INFO_EMAIL}
+              linkHelpText={formatMessage(messages.resetPasswordFormAdditionalHelpText)}
+              linkText={formatMessage(messages.resetPasswordFormAdditionalHelpLink)}
+            />
+          </div>
+        </Form>
+      )}
+      {isSuccess && (
+        <ForgotPasswordEmailSentConfirmation />
+      )}
+      <form className="text-center">
+        <Button
+          id="reset-password-back-to-login"
+          name="reset-password-back-to-login"
+          variant="tertiary"
+          type="submit"
+          className="align-self-center back-to-login__button"
+          onClick={handleSubmit}
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          {formatMessage(messages.resetPasswordBackToLoginButton)}
+        </Button>
+      </form>
+    </Container>
+  );
+};
+
+export default ForgotPasswordPage;

src/forms/reset-password-popup/index.scss

@@ -0,0 +1,16 @@
+@import "~@edx/brand/paragon/variables";
+
+.separator {
+  border: 0;
+  border-top: 0.075rem solid $light-500
+}
+.back-to-login__button {
+  border-color: $primary-500;
+  border: 2px solid;
+}
+#set-reset-password-form  .pgn__form-control-floating-label-text:after {
+    content: none;
+}
+.help-text {
+   line-height: 0.5;
+}