feat: Update InputForm, Input, and auth page

- Perbaiki page login ke halaman utama backoffice
- Perbaiki component Input dan InputForm

libs/ui/src/atoms/input/input.spec.tsx

@@ -1,36 +1,15 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { Input } from "./input";
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Input } from './input';
 
-describe("Test Input Component", () => {
-  it("renders the input with placeholder text", () => {
+describe('Test Input Component', () => {
+  it('renders the input with placeholder text', () => {
     render(<Input placeholder="Placeholder" />);
-    expect(screen.getByPlaceholderText("Placeholder")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Placeholder')).toBeInTheDocument();
   });
 
-  // it("renders the input with different sizes", () => {
-  //   const sizeClasses = {
-  //     sm: "text-[10px] max-h-[28px]",
-  //     md: "text-[12px] max-h-[30px]",
-  //     lg: "text-[15px] max-h-[34px]",
-  //   };
-  //   Object.entries(sizeClasses).forEach(([size, className]) => {
-  //     render(<Input size={size} />);
-  //     expect(screen.getByRole("textbox")).toHaveClass(className);
-  //   });
-  // });
-
-  // it("renders the input with different types", () => {
-  //   const types = ["text", "password", "email", "number"];
-  //   types.forEach((type) => {
-  //     render(<Input type={type} />);
-  //     const input = screen.getByRole("textbox");
-  //     expect(input).toHaveAttribute("type", type);
-  //   });
-  // });
-
   it("disables the input field when 'disabled' prop is set", () => {
     render(<Input disabled />);
-    expect(screen.getByRole("textbox")).toBeDisabled();
+    expect(screen.getByRole('textbox')).toBeDisabled();
   });
 });

libs/ui/src/atoms/input/input.stories.tsx

@@ -4,16 +4,6 @@ import { Input } from './input';
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
   component: Input,
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'email'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
   tags: ['autodocs'],
 } satisfies Meta<typeof Input>;
 
@@ -23,6 +13,7 @@ type Story = StoryObj<typeof Input>;
 export const Large: Story = {
   args: {
     size: 'lg',
+    type: 'text',
     placeholder: 'Placeholder',
   },
 };
@@ -30,6 +21,7 @@ export const Large: Story = {
 export const Medium: Story = {
   args: {
     size: 'md',
+    type: 'text',
     placeholder: 'Placeholder',
   },
 };
@@ -37,6 +29,7 @@ export const Medium: Story = {
 export const Small: Story = {
   args: {
     size: 'sm',
+    type: 'text',
     placeholder: 'Placeholder',
   },
 };
@@ -55,6 +48,13 @@ export const EmailInput: Story = {
   },
 };
 
+export const PasswordInput: Story = {
+  args: {
+    size: 'md',
+    type: 'password',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     size: 'md',

libs/ui/src/atoms/input/input.tsx

@@ -3,10 +3,13 @@ import {
   FC,
   InputHTMLAttributes,
   ReactElement,
+  useState,
 } from 'react';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // Import Ant Design icons
 import { cn } from '@imphnen-frontend-service/utils';
+import { Button } from '../button';
 
-type TInputType = 'text' | 'email';
+type TInputType = 'text' | 'email' | 'password';
 type TInputSize = 'sm' | 'md' | 'lg';
 
 type TInputProps = Omit<
@@ -15,38 +18,70 @@ type TInputProps = Omit<
 > & {
   type?: TInputType;
   size?: TInputSize;
+  disabled?: boolean;
 };
 
-const sizeClasses: Record<TInputSize, string> = {
-  sm: 'text-[10px] max-h-[28px]',
-  md: 'text-[12px] max-h-[30px]',
-  lg: 'text-[15px] max-h-[34px]',
-};
+const sizeClasses: Record<TInputSize, { textSize: string; iconSize: string }> =
+  {
+    sm: { textSize: 'text-[10px] max-h-[28px]', iconSize: 'text-[10px]' },
+    md: { textSize: 'text-[12px] max-h-[30px]', iconSize: 'text-[12px]' },
+    lg: { textSize: 'text-[15px] max-h-[34px]', iconSize: 'text-[15px]' },
+  };
 
 const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
 
 export const Input: FC<TInputProps> = ({
-  size = 'md',
   type = 'text',
+  size = 'md',
   placeholder = 'Placeholder',
   disabled,
   className,
   ...rest
 }): ReactElement => {
+  const [showPassword, setShowPassword] = useState(false); // State for password visibility
+
+  const togglePasswordVisibility = () => {
+    if (!disabled) setShowPassword((prev) => !prev);
+  };
+
   const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
-    sizeClasses[size],
+    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree w-full',
+    sizeClasses[size].textSize,
     disabled && disabledClass,
     className
   );
 
   return (
-    <input
-      className={mergedClassName}
-      type={type}
-      disabled={disabled}
-      placeholder={placeholder}
-      {...rest}
-    />
+    <div className="relative inline-flex min-w-70 items-center">
+      <input
+        className={mergedClassName}
+        type={type === 'password' && showPassword ? 'text' : type}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...rest}
+      />
+      {type === 'password' && (
+        <div className="absolute end-0 px-[12px] h-full flex items-center">
+          <Button
+            variant="text"
+            size={size}
+            onClick={togglePasswordVisibility}
+            className={cn(
+              'relative aspect-square -me-[8px] p-[6px]',
+              sizeClasses[size].iconSize,
+              disabled && 'cursor-not-allowed'
+            )}
+          >
+            {showPassword ? (
+              <EyeInvisibleOutlined
+                style={{ color: 'var(--color-neutral-500)' }}
+              />
+            ) : (
+              <EyeOutlined style={{ color: 'var(--color-neutral-500)' }} />
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
   );
 };