From 1900917011a6e4fd42bfd2d807be8c0140e98d37 Mon Sep 17 00:00:00 2001
From: arjunanand23 <arjanand@umich.edu>
Date: Fri, 21 Apr 2023 19:48:19 -0400
Subject: [PATCH 1/2] Fixing Issue: 1086 - Image editor

---
 .../ImageEditor/ImageEditor.component.js      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Board/ImageEditor/ImageEditor.component.js b/src/components/Board/ImageEditor/ImageEditor.component.js
index 7756d3255..e35b11f7a 100644
--- a/src/components/Board/ImageEditor/ImageEditor.component.js
+++ b/src/components/Board/ImageEditor/ImageEditor.component.js
@@ -112,21 +112,6 @@ class ImageEditor extends PureComponent {
             </div>
           </DialogTitle>
           <DialogContent>
-            <Cropper
-              style={this.state.style}
-              zoomTo={0}
-              src={srcImage}
-              viewMode={0}
-              background={true}
-              responsive={true}
-              checkOrientation={false}
-              guides={true}
-              dragMode="move"
-              autoCrop={false}
-              onInitialized={instance => {
-                this.setState({ cropper: instance });
-              }}
-            />
             <div className="ImageEditor__actionBar">
               <IconButton
                 label={intl.formatMessage(messages.rotateRight)}
@@ -172,6 +157,21 @@ class ImageEditor extends PureComponent {
                 <ZoomOutIcon />
               </IconButton>
             </div>
+            <Cropper
+              style={this.state.style}
+              zoomTo={0}
+              src={srcImage}
+              viewMode={0}
+              background={true}
+              responsive={true}
+              checkOrientation={false}
+              guides={true}
+              dragMode="move"
+              autoCrop={false}
+              onInitialized={instance => {
+                this.setState({ cropper: instance });
+              }}
+            />
           </DialogContent>
           <DialogActions>
             <IconButton

From 3c380525fb3d68a499fc2e83486442c89f868c87 Mon Sep 17 00:00:00 2001
From: arjunanand23 <arjanand@umich.edu>
Date: Fri, 21 Apr 2023 20:06:17 -0400
Subject: [PATCH 2/2] Tried fixing show password feature

---
 .../Account/Login/Login.component.js          | 26 ++++++++++++++--
 .../ImageEditor/ImageEditor.component.js      | 30 +++++++++----------
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/Account/Login/Login.component.js b/src/components/Account/Login/Login.component.js
index 9ff63b578..5786583ff 100644
--- a/src/components/Account/Login/Login.component.js
+++ b/src/components/Account/Login/Login.component.js
@@ -17,6 +17,11 @@ import { login } from './Login.actions';
 import messages from './Login.messages';
 import './Login.css';
 
+import InputAdornment from '@material-ui/core/InputAdornment';
+import IconButton from '@material-ui/core/IconButton';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
 export class Login extends Component {
   static propTypes = {
     intl: intlShape.isRequired,
@@ -30,6 +35,11 @@ export class Login extends Component {
     loginStatus: {}
   };
 
+  passState = {
+    password: '',
+    showPassword: false,
+  };
+
   handleSubmit = values => {
     const { login } = this.props;
 
@@ -49,6 +59,8 @@ export class Login extends Component {
 
     const isButtonDisabled = isLogging || !!loginStatus.success;
 
+    var showPassword = false;
+
     return (
       <Dialog open={isDialogOpen} onClose={onClose} aria-labelledby="login">
         <DialogTitle id="login">
@@ -78,9 +90,19 @@ export class Login extends Component {
                 <TextField
                   error={errors.password}
                   label={intl.formatMessage(messages.password)}
-                  type="password"
+                  type={showPassword ? "text" : "password"}
                   name="password"
-                  onChange={handleChange}
+                  onChange={handleChange('password')}
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">
+                      <IconButton
+                        aria-label="toggle password visibility"
+                        onClick={() => { showPassword = !showPassword; }}
+                      >
+                        {showPassword ? <Visibility /> : <VisibilityOff />}
+                      </IconButton>
+                    </InputAdornment>,
+                  }}
                 />
                 <DialogActions>
                   <Button
diff --git a/src/components/Board/ImageEditor/ImageEditor.component.js b/src/components/Board/ImageEditor/ImageEditor.component.js
index e35b11f7a..7756d3255 100644
--- a/src/components/Board/ImageEditor/ImageEditor.component.js
+++ b/src/components/Board/ImageEditor/ImageEditor.component.js
@@ -112,6 +112,21 @@ class ImageEditor extends PureComponent {
             </div>
           </DialogTitle>
           <DialogContent>
+            <Cropper
+              style={this.state.style}
+              zoomTo={0}
+              src={srcImage}
+              viewMode={0}
+              background={true}
+              responsive={true}
+              checkOrientation={false}
+              guides={true}
+              dragMode="move"
+              autoCrop={false}
+              onInitialized={instance => {
+                this.setState({ cropper: instance });
+              }}
+            />
             <div className="ImageEditor__actionBar">
               <IconButton
                 label={intl.formatMessage(messages.rotateRight)}
@@ -157,21 +172,6 @@ class ImageEditor extends PureComponent {
                 <ZoomOutIcon />
               </IconButton>
             </div>
-            <Cropper
-              style={this.state.style}
-              zoomTo={0}
-              src={srcImage}
-              viewMode={0}
-              background={true}
-              responsive={true}
-              checkOrientation={false}
-              guides={true}
-              dragMode="move"
-              autoCrop={false}
-              onInitialized={instance => {
-                this.setState({ cropper: instance });
-              }}
-            />
           </DialogContent>
           <DialogActions>
             <IconButton