Fix: Add eye icon to toggle password state #248

src/pages/login/index.tsx

@@ -125,4 +125,4 @@ function LoginPage() {
   );
 }
 
-export default withAnimation(LoginPage);
+export default withAnimation(LoginPage);

src/pages/signup/index.tsx

@@ -105,4 +105,4 @@ function SignupPage() {
   );
 }
 
-export default withAnimation(SignupPage);
+export default withAnimation(SignupPage);

src/shared/components/Input/Input.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';
+import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
 
 interface InputProps {
   label?: string;
@@ -25,24 +26,37 @@ function Input({
   centeredError,
   ...props
 }: InputProps & React.HTMLProps<HTMLInputElement>) {
+  const [showPassword, setShowPassword] = useState(false);
+
   return (
     <div className="relative">
       {label && (
         <label className="block text-left font-semibold">{label}</label>
       )}
-      <input
-        type={type}
-        value={value}
-        required={required}
-        placeholder={placeholder}
-        onChange={onChange}
-        className={clsx(
-          'my-2 block w-full rounded-md border px-4 py-2 shadow focus:outline-none',
-          error ? ' border-red-400' : ' border-transparent',
-          className
+      <div className="relative">
+        <input
+          type={showPassword ? 'text' : type}
+          value={value}
+          required={required}
+          placeholder={placeholder}
+          onChange={onChange}
+          className={clsx(
+            'my-2 block w-full rounded-md border px-4 py-2 shadow focus:outline-none',
+            error ? 'border-red-400' : 'border-transparent',
+            className
+          )}
+          {...props}
+        />
+        {type === 'password' && (
+          <button
+            type="button"
+            className="absolute right-4 top-2"
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            {showPassword ? <EyeIcon className="h-6 w-6 text-gray-500" /> : <EyeOffIcon className="h-6 w-6 text-gray-500" />}
+          </button>
         )}
-        {...props}
-      />
+      </div>
       {!!error && (
         <p
           className={clsx(