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.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>
   );
 };