add password toggle icon for all password inputs & use share folder checkbox for remember password in login page.

frontend/src/components/ui/shared/Input.tsx

@@ -1,18 +1,63 @@
 'use client';
 
-import React, { forwardRef, useId } from 'react';
+import React, { forwardRef, useId, useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   error?: string;
   icon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  passwordToggleLabels?: {
+    show: string;
+    hide: string;
+  };
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, error, icon, className = '', id, ...props }, ref) => {
+  (
+    {
+      label,
+      error,
+      icon,
+      endIcon,
+      passwordToggleLabels,
+      className = '',
+      id,
+      type,
+      ...props
+    },
+    ref,
+  ) => {
+    const [showPassword, setShowPassword] = useState(false);
     const genId = useId();
     const inputId = id ?? genId;
 
+    const resolvedEndIcon =
+      endIcon ??
+      (passwordToggleLabels ? (
+        <button
+          type="button"
+          onClick={() => setShowPassword((visible) => !visible)}
+          className="rounded p-0.5 text-text-muted transition-colors hover:text-text-secondary"
+          aria-label={
+            showPassword ? passwordToggleLabels.hide : passwordToggleLabels.show
+          }
+        >
+          {showPassword ? (
+            <EyeOff className="h-5 w-5 icon-flat" />
+          ) : (
+            <Eye className="h-5 w-5 icon-flat" />
+          )}
+        </button>
+      ) : undefined);
+
+    const resolvedType = passwordToggleLabels
+      ? showPassword
+        ? 'text'
+        : 'password'
+      : type;
+
     return (
       <div className="w-full">
         {label && (
@@ -31,15 +76,22 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             </div>
           )}
 
+          {resolvedEndIcon && (
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-text-muted">
+              {resolvedEndIcon}
+            </div>
+          )}
+
           <input
             ref={ref}
             id={inputId}
+            type={resolvedType}
             className={`
               w-full rounded-[var(--radius-md)] border
               ${error ? 'border-red-500' : 'border-border'}
               bg-background-secondary/90 text-text-primary
 
-              ${icon ? 'pl-10' : 'pl-4'} pr-4 py-2
+              ${icon ? 'pl-10' : 'pl-4'} ${resolvedEndIcon ? 'pr-10' : 'pr-4'} py-2
 
               placeholder:text-text-muted