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

frontend/src/app/[locale]/(public)/login/page.tsx

@@ -11,6 +11,7 @@ import { Mail, Lock } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { getRememberedEmail } from '@/lib/auth/rememberMe';
 import { Button } from '@/components/ui/shared/Button';
+import { Checkbox } from '@/components/ui/shared/Checkbox';
 import { Input } from '@/components/ui/shared/Input';
 import { TopBarControls } from '@/components/ui/shared/TopBarControls';
 
@@ -48,6 +49,8 @@ export default function LoginPage() {
   const {
     register,
     handleSubmit,
+    watch,
+    setValue,
     formState: { errors },
   } = useForm<LoginForm>({
     resolver: zodResolver(loginSchema),
@@ -57,6 +60,8 @@ export default function LoginPage() {
     },
   });
 
+  const rememberMe = watch('rememberMe');
+
   const onSubmit = async (data: LoginForm) => {
     try {
       setError(null);
@@ -114,20 +119,18 @@ export default function LoginPage() {
               placeholder={t('passwordPlaceholder')}
               error={errors.password?.message}
               icon={<Lock className="h-5 w-5 icon-flat" />}
+              passwordToggleLabels={{
+                show: t('showPassword'),
+                hide: t('hidePassword'),
+              }}
             />
 
             <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <input
-                  id="remember-me"
-                  type="checkbox"
-                  className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
-                  {...register('rememberMe')}
-                />
-                <label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
-                  {t('rememberMe')}
-                </label>
-              </div>
+              <Checkbox
+                checked={rememberMe}
+                onChange={(checked) => setValue('rememberMe', checked)}
+                label={t('rememberMe')}
+              />
               <div className="text-sm">
                 <Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
                   {t('forgotPassword')}