From 9fa09ef32df903397985d77ee57f110117106c67 Mon Sep 17 00:00:00 2001
From: Anas Hameed <68567262+Anas-hameed@users.noreply.github.com>
Date: Wed, 3 Jul 2024 16:48:16 +0500
Subject: [PATCH] Feat: Implement password eye icon for reset password screen
 (#553)

Co-authored-by: Anas Hameed <anas.hameed@arbisoft.com>
---
 .../components/PasswordResetInput.jsx         | 63 ++++++++++++++-----
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/lms/static/js/student_account/components/PasswordResetInput.jsx b/lms/static/js/student_account/components/PasswordResetInput.jsx
index d47584e47298..8c32b6edc8a2 100644
--- a/lms/static/js/student_account/components/PasswordResetInput.jsx
+++ b/lms/static/js/student_account/components/PasswordResetInput.jsx
@@ -1,27 +1,56 @@
 /* globals gettext */
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import PropTypes from "prop-types";
+import React from "react";
 
-import { InputText } from '@edx/paragon/static';
+import { InputText } from "@edx/paragon/static";
 
-function PasswordResetInput(props) {
-  return (
-    <div className="form-field">
-      <InputText
-        id={props.name}
-        type="password"
-        themes={['danger']}
-        dangerIconDescription={gettext('Error: ')}
-        required
-        {...props}
-      />
-    </div>
-  );
+class PasswordResetInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            inputType: "password",
+        };
+        this.setInputType = this.setInputType.bind(this);
+    }
+
+    setInputType() {
+        if (this.state.inputType === "password") {
+            this.setState({
+                inputType: "text",
+            });
+        } else {
+            this.setState({ inputType: "password" });
+        }
+    }
+
+    render() {
+        return (
+            <div className="form-field" style={{ position: "relative" }}>
+                <InputText
+                    id={this.props.name}
+                    type={this.state.inputType}
+                    themes={["danger"]}
+                    dangerIconDescription={gettext("Error: ")}
+                    required
+                    {...this.props}
+                />
+                <span
+                    style={{
+                        position: "absolute",
+                        right: "10px",
+                        top: `${this.props.isValid ? "45%" : "35%"}`,
+                    }}
+                    onClick={this.setInputType}
+                    className={`fa fa-fw field-icon ${this.state.inputType === "password" ? "fa-eye" : "fa-eye-slash"}`}
+                ></span>
+            </div>
+        );
+    }
 }
 
 PasswordResetInput.propTypes = {
-  name: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
 };
 
 export default PasswordResetInput;