Merge pull request #147 from AppQuality/password-input

feat: Handle password input
AppQuality · Dec 19, 2023 · 4584235 · 4584235
2 parents a552e85 + 8935496
commit 4584235
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "@types/react-transition-group": "^4.4.1",
     "@types/styled-components": "^5.1.10",
     "auto": "^10.29.2",
+    "babel-loader": "^8.1.0",
     "chromatic": "^5.9.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",

diff --git a/src/stories/button/Button.tsx b/src/stories/button/Button.tsx
@@ -1,8 +1,8 @@
 import styled, { DefaultTheme } from "styled-components";
-import getButtonSize from "./getButtonSize";
-import getButtonStyle from "./getButtonStyle";
 import { ButtonComponent } from "./_component";
 import { ButtonProps } from "./_types";
+import getButtonSize from "./getButtonSize";
+import getButtonStyle from "./getButtonStyle";
 
 export const Button = styled(ButtonComponent)(
   ({
@@ -13,6 +13,7 @@ export const Button = styled(ButtonComponent)(
     flat = false,
     squared = false,
     variant = false,
+    alt,
   }: ButtonProps & { theme: DefaultTheme }) => {
     let styles = getButtonStyle(type, flat, disabled, variant, theme);
     styles += getButtonSize(size, squared, theme);

diff --git a/src/stories/button/_component.tsx b/src/stories/button/_component.tsx
@@ -13,12 +13,14 @@ export const ButtonComponent = ({
   flat,
   squared,
   variant,
+  alt,
   children,
   ...props
 }: ButtonProps) => {
   let Component = as;
   return (
     <Component
+      alt={alt}
       disabled={disabled}
       type={htmlType}
       className={className}

diff --git a/src/stories/button/_types.ts b/src/stories/button/_types.ts
@@ -47,4 +47,5 @@ export type ButtonProps = BaseProps & {
    * Optional form prop to submit a form somewhere else
    */
   form?: string;
+  alt?: string;
 };
diff --git a/src/stories/form/input/Input.stories.tsx b/src/stories/form/input/Input.stories.tsx
@@ -1,5 +1,5 @@
+import { Meta, Story } from "@storybook/react";
 import Input from "./Input";
-import { Story, Meta } from "@storybook/react";
 
 export default {
   title: "Inputs",
@@ -30,3 +30,12 @@ export const ReadonlyInput: Story = () => (
     disabled={true}
   />
 );
+
+export const PasswordInput: Story = () => (
+  <Input
+    id="input"
+    type="password"
+    placeholder="Placeholder"
+    disabled={false}
+  />
+);
diff --git a/src/stories/form/input/Input.tsx b/src/stories/form/input/Input.tsx
@@ -1,6 +1,8 @@
-import { Search } from "react-bootstrap-icons";
+import { useState } from "react";
 import styled from "styled-components";
 import { InvalidFocusStyle, InvalidInputStyle } from "../_style";
+import PasswordIcon from "./inputIcons/PasswordIcon";
+import SearchIcon from "./inputIcons/SearchIcon";
 
 const Input = ({
   id,
@@ -13,6 +15,7 @@ const Input = ({
   extra,
   onChange,
   autocomplete = true,
+  i18n,
 }: {
   id: string;
   type: string;
@@ -24,23 +27,27 @@ const Input = ({
   isInvalid?: boolean;
   extra?: any;
   onChange?: (val: string) => void;
+  i18n?: {
+    showPassword?: string;
+    hidePassword?: string;
+  };
 }) => {
+  const [currentType, setType] = useState(type);
   return (
     <StyledInput type={type} isInvalid={isInvalid} className={className}>
       <input
         id={id}
-        type={type}
+        type={currentType}
         placeholder={placeholder}
         disabled={disabled}
         value={value}
         autoComplete={autocomplete ? null : "off"}
         onChange={(e) => onChange && onChange(e.target.value)}
         {...extra}
       />
-      {type === "search" && (
-        <span className="input-group-text">
-          <Search />
-        </span>
+      {type === "search" && <SearchIcon />}
+      {type === "password" && (
+        <PasswordIcon i18n={i18n} type={currentType} setType={setType} />
       )}
     </StyledInput>
   );
@@ -52,12 +59,18 @@ export const StyledInput = styled.div<{ type: string; isInvalid?: boolean }>`
   flex-wrap: wrap;
   align-items: stretch;
   width: 100%;
-  .input-group-text {
+  .input-group-text,
+  .input-group-button {
     position: absolute;
     right: 15px;
-    top: 29%;
+    display: flex;
+    align-items: center;
+    height: 100%;
     color: ${(props) => props.theme.variants.primary};
   }
+  .input-group-text {
+    top: 29%;
+  }
   input[type="search"] {
     -webkit-appearance: none;
 

diff --git a/src/stories/form/input/inputIcons/PasswordIcon.tsx b/src/stories/form/input/inputIcons/PasswordIcon.tsx
@@ -0,0 +1,43 @@
+import { EyeFill, EyeSlash } from "react-bootstrap-icons";
+import { Button } from "../../../button/Button";
+
+const PasswordIcon = ({
+  type,
+  setType,
+  i18n,
+}: {
+  type: string;
+  setType: (value: string) => void;
+  i18n?: {
+    showPassword?: string;
+    hidePassword?: string;
+  };
+}) => {
+  return (
+    <span className={`input-group-button`}>
+      {type === "text" ? (
+        <Button
+          alt={i18n && i18n.hidePassword ? i18n.hidePassword : "Hide password"}
+          size="sm"
+          htmlType="button"
+          type="light"
+          onClick={() => setType("password")}
+        >
+          <EyeSlash />
+        </Button>
+      ) : (
+        <Button
+          alt={i18n && i18n.showPassword ? i18n.showPassword : "Show password"}
+          size="sm"
+          htmlType="button"
+          type="light"
+          onClick={() => setType("text")}
+        >
+          <EyeFill />
+        </Button>
+      )}
+    </span>
+  );
+};
+
+export default PasswordIcon;
diff --git a/src/stories/form/input/inputIcons/SearchIcon.tsx b/src/stories/form/input/inputIcons/SearchIcon.tsx
@@ -0,0 +1,11 @@
+import { Search } from "react-bootstrap-icons";
+
+const SearchIcon = () => {
+  return (
+    <span className="input-group-text">
+      <Search />
+    </span>
+  );
+};
+
+export default SearchIcon;