PasswordField component

src/components/common/inputs/PasswordField.js

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import {
+  InputAdornment,
+  TextField,
+  makeStyles,
+  IconButton
+} from "@material-ui/core";
+import { Visibility, VisibilityOff, LockOutlined } from "@material-ui/icons";
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  }
+}));
+
+const PasswordField = ({ label, ...rest }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const classes = useStyles();
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  return (
+    <TextField
+      className={classes.margin}
+      label={label || "Password"}
+      {...rest}
+      type={showPassword ? "text" : "password"}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <LockOutlined />
+          </InputAdornment>
+        ),
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton
+              aria-label="toggle password visibility"
+              onClick={handleClickShowPassword}
+              onMouseDown={handleMouseDownPassword}
+            >
+              {showPassword ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        )
+      }}
+    />
+  );
+};
+
+export default PasswordField;

src/constants/steps.js

@@ -1,4 +1,4 @@
-import { GroupAdd, VpnKey, Settings } from "@material-ui/icons";
+import { Router, VpnKey, Settings } from "@material-ui/icons";
 
 const steps = [
   {
@@ -10,10 +10,10 @@ const steps = [
   },
   {
     id: 1,
-    title: "About",
+    title: "Network",
     route: "/about",
     disabled: false,
-    icon: <GroupAdd />
+    icon: <Router />
   },
   {
     id: 2,

src/features/login/components/LoginComponent.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { TextField, InputAdornment } from "@material-ui/core";
-import { AccountCircleOutlined, LockOutlined } from "@material-ui/icons";
+import { AccountCircleOutlined } from "@material-ui/icons";
+import PasswordField from "../../../components/common/inputs/PasswordField";
 
 const useStyles = makeStyles(theme => ({
-  margin: {
-    margin: theme.spacing(1)
+  field: {
+    margin: theme.spacing(1),
+    width: "20ch"
   }
 }));
 
@@ -14,7 +16,7 @@ const LoginComponent = () => {
   return (
     <div>
       <TextField
-        className={classes.margin}
+        className={classes.field}
         id="username"
         label="Username"
         InputProps={{
@@ -26,18 +28,7 @@ const LoginComponent = () => {
         }}
       />
       <br />
-      <TextField
-        className={classes.margin}
-        id="password"
-        label="Password"
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <LockOutlined />
-            </InputAdornment>
-          )
-        }}
-      />
+      <PasswordField id="password" label="Password" className={classes.field} />
     </div>
   );
 };