feat: add eye icon to show or hide password

thedevs-network · Jul 6, 2020 · 386c304 · 386c304
1 parent 9d5057f
commit 386c304
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 35 deletions.
diff --git a/source/Popup/Form.tsx b/source/Popup/Form.tsx
@@ -1,9 +1,11 @@
 import {useFormState} from 'react-use-form-state';
+import React, {useState} from 'react';
 import tw, {css} from 'twin.macro';
-import React from 'react';
 
 import {useExtensionSettings} from '../contexts/extension-settings-context';
 
+import Icon from '../components/Icon';
+
 type Props = {
   handleFormSubmit: (props: {
     domain: string;
@@ -18,6 +20,7 @@ export enum CONSTANTS {
 
 const Form: React.FC<Props> = ({handleFormSubmit}) => {
   const extensionSettingsState = useExtensionSettings()[0];
+  const [showPassword, setShowPassword] = useState<boolean>(false);
   const {
     domainOptions,
     host: {hostDomain},
@@ -166,26 +169,16 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
 
           <div tw="relative">
             <div tw="absolute top-0 right-0 flex w-10 h-full border border-transparent">
-              <div tw="z-10 flex items-center justify-center w-full h-full text-lg text-gray-600 bg-gray-100 rounded-tl rounded-bl">
-                <svg
-                  viewBox="0 0 24 24"
-                  width="24"
-                  height="24"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  fill="none"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  tw="w-5 h-5"
-                >
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                  <circle cx="12" cy="7" r="4" />
-                </svg>
-              </div>
+              <Icon
+                tw="z-10 cursor-pointer flex items-center justify-center w-full h-full text-gray-600 rounded-tl rounded-bl"
+                onClick={(): void => setShowPassword(!showPassword)}
+                name={!showPassword ? 'eye-closed' : 'eye'}
+              />
             </div>
 
             <input
               {...passwordProps('password')}
+              type={!showPassword ? 'password' : 'text'}
               onChange={({
                 target: {value},
               }: React.ChangeEvent<HTMLInputElement>): void => {
@@ -214,7 +207,7 @@ const Form: React.FC<Props> = ({handleFormSubmit}) => {
             handleFormSubmit(formState.values);
           }}
           css={[
-            tw`block w-full px-2 py-2 mb-1 text-xs font-semibold text-white bg-purple-700 rounded`,
+            tw`block w-full px-2 py-3 mb-1 text-xs font-semibold text-white bg-purple-700 rounded`,
 
             css`
               background: linear-gradient(

diff --git a/source/Popup/ResponseBody.tsx b/source/Popup/ResponseBody.tsx
@@ -12,14 +12,6 @@ export type ProcessedRequestProperties = {
   message: string;
 };
 
-const StyledH1 = styled.h1`
-  border-bottom: 1px dotted ${({theme}): string => theme.statsTotalUnderline};
-  padding-bottom: 2px;
-  color: rgb(41, 71, 86);
-
-  ${tw`hover:opacity-75 min-w-0 m-0 text-2xl font-light cursor-pointer`}
-`;
-
 const StyledPopupBody = styled.div`
   ${tw`flex justify-center px-4 pt-4 pb-0`}
 
@@ -37,6 +29,14 @@ const StyledPopupBody = styled.div`
       stroke: none;
     }
   }
+
+  h1 {
+    border-bottom: 1px dotted ${({theme}): string => theme.statsTotalUnderline};
+    padding-bottom: 2px;
+    color: rgb(41, 71, 86);
+
+    ${tw`hover:opacity-75 min-w-0 m-0 text-2xl font-light cursor-pointer`}
+  }
 `;
 
 const ResponseBody: React.FC = () => {
@@ -90,11 +90,13 @@ const ResponseBody: React.FC = () => {
                 return setCopied(true);
               }}
             >
-              <StyledH1>{removeProtocol(message)}</StyledH1>
+              <h1>{removeProtocol(message)}</h1>
             </CopyToClipboard>
           </>
         ) : (
-          <p tw="pt-1 underline text-lg">{message}</p>
+          <p tw="pt-1 text-lg text-gray-900 border-b border-gray-700 border-dotted">
+            {message}
+          </p>
         )}
       </StyledPopupBody>
 

diff --git a/source/components/Icon/Eye.tsx b/source/components/Icon/Eye.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Eye: React.FC = () => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="eye_svg__feather eye_svg__feather-eye"
+    >
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx={12} cy={12} r={3} />
+    </svg>
+  );
+};
+
+export default React.memo(Eye);
diff --git a/source/components/Icon/EyeClosed.tsx b/source/components/Icon/EyeClosed.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const EyeClosed: React.FC = () => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="eye-off_svg__feather eye-off_svg__feather-eye-off"
+    >
+      <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24M1 1l22 22" />
+    </svg>
+  );
+};
+
+export default React.memo(EyeClosed);
diff --git a/source/components/Icon/Icon.tsx b/source/components/Icon/Icon.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
 
-import Zap from './Zap';
+import ArrowLeft from './ArrowLeft';
+import EyeClosed from './EyeClosed';
+import Settings from './Settings';
+import Refresh from './Refresh';
+import Spinner from './Spinner';
+import QRCode from './QRCode';
+import Cross from './Cross';
 import Copy from './Copy';
 import Tick from './Tick';
-import Cross from './Cross';
-import QRCode from './QRCode';
-import Spinner from './Spinner';
-import Refresh from './Refresh';
-import Settings from './Settings';
-import ArrowLeft from './ArrowLeft';
+import Zap from './Zap';
+import Eye from './Eye';
 
 const icons = {
   arrowleft: ArrowLeft,
   copy: Copy,
   cross: Cross,
+  eye: Eye,
+  'eye-closed': EyeClosed,
   qrcode: QRCode,
   refresh: Refresh,
   settings: Settings,