@promakeai/cli 0.5.4 → 0.5.5

package/dist/registry/reset-password-page-split.json

@@ -23,7 +23,7 @@
       "path": "reset-password-page-split/reset-password-page-split.tsx",
       "type": "registry:page",
       "target": "$modules$/reset-password-page-split/reset-password-page-split.tsx",
-      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useSearchParams } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { KeyRound, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\n\r\ninterface ResetPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ResetPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ResetPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"reset-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Reset Password\") });\r\n  const navigate = useNavigate();\r\n  const [searchParams] = useSearchParams();\r\n  const { resetPassword } = useAuth();\r\n\r\n  // Get code and username from URL params\r\n  const code = searchParams.get(\"code\") || \"\";\r\n  const username = searchParams.get(\"username\") || searchParams.get(\"email\") || \"\";\r\n\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    // Validate we have required params\r\n    if (!code || !username) {\r\n      setError(t(\"invalidLink\", \"Invalid or expired reset link. Please request a new one.\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, password);\r\n\r\n      setIsSuccess(true);\r\n      toast.success(t(\"passwordResetSuccess\", \"Password reset successfully!\"));\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"resetPasswordError\", \"Failed to reset password. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state\r\n  if (isSuccess) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"passwordReset\", \"Password Reset!\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"passwordResetDescription\", \"Your password has been reset successfully. You can now log in with your new password.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/login\")} className=\"w-full\">\r\n              {t(\"goToLogin\", \"Go to Login\")}\r\n            </Button>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  // Invalid link state\r\n  if (!code || !username) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight text-red-600\">\r\n                {t(\"invalidLinkTitle\", \"Invalid Reset Link\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"invalidLinkDescription\", \"This password reset link is invalid or has expired. Please request a new one.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/forgot-password\")} className=\"w-full\">\r\n              {t(\"requestNewLink\", \"Request New Link\")}\r\n            </Button>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <KeyRound className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Reset Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your new password below\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"password\">{t(\"newPassword\", \"New Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <Label htmlFor=\"confirm-password\">{t(\"confirmPassword\", \"Confirm Password\")}</Label>\r\n              <Input\r\n                required\r\n                id=\"confirm-password\"\r\n                type=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"resetting\", \"Resetting...\")}\r\n                </>\r\n              ) : (\r\n                t(\"resetPassword\", \"Reset Password\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Reset password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ResetPasswordPageSplit;\r\n"
+      "content": "import { useState } from \"react\";\r\nimport { Link, useNavigate, useSearchParams } from \"react-router\";\r\nimport { toast } from \"sonner\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { usePageTitle } from \"@/hooks/use-page-title\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Logo } from \"@/components/Logo\";\r\nimport { KeyRound, ArrowLeft, CheckCircle } from \"lucide-react\";\r\nimport { useAuth } from \"@/modules/auth-core\";\r\nimport { getErrorMessage } from \"@/modules/api\";\r\nimport { FormField } from \"@/components/FormField\";\r\nimport { PasswordInput } from \"@/components/PasswordInput\";\r\n\r\ninterface ResetPasswordPageSplitProps {\r\n  image?: string;\r\n}\r\n\r\nexport function ResetPasswordPageSplit({\r\n  image = \"/images/placeholder.png\",\r\n}: ResetPasswordPageSplitProps) {\r\n  const { t } = useTranslation(\"reset-password-page-split\");\r\n  usePageTitle({ title: t(\"title\", \"Reset Password\") });\r\n  const navigate = useNavigate();\r\n  const [searchParams] = useSearchParams();\r\n  const { resetPassword } = useAuth();\r\n\r\n  // Get code and username from URL params\r\n  const code = searchParams.get(\"code\") || \"\";\r\n  const username = searchParams.get(\"username\") || searchParams.get(\"email\") || \"\";\r\n\r\n  const [password, setPassword] = useState(\"\");\r\n  const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n  const [isSuccess, setIsSuccess] = useState(false);\r\n\r\n  const handleSubmit = async (e: React.FormEvent) => {\r\n    e.preventDefault();\r\n    setError(null);\r\n\r\n    // Validate passwords match\r\n    if (password !== confirmPassword) {\r\n      setError(t(\"passwordMismatch\", \"Passwords do not match\"));\r\n      return;\r\n    }\r\n\r\n    // Validate we have required params\r\n    if (!code || !username) {\r\n      setError(t(\"invalidLink\", \"Invalid or expired reset link. Please request a new one.\"));\r\n      return;\r\n    }\r\n\r\n    setIsLoading(true);\r\n\r\n    try {\r\n      await resetPassword(username, code, password);\r\n\r\n      setIsSuccess(true);\r\n      toast.success(t(\"passwordResetSuccess\", \"Password reset successfully!\"));\r\n    } catch (err) {\r\n      const errorMessage = getErrorMessage(\r\n        err,\r\n        t(\"resetPasswordError\", \"Failed to reset password. Please try again.\")\r\n      );\r\n      setError(errorMessage);\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  // Success state\r\n  if (isSuccess) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div className=\"flex justify-center\">\r\n              <div className=\"w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center\">\r\n                <CheckCircle className=\"w-8 h-8 text-green-600 dark:text-green-400\" />\r\n              </div>\r\n            </div>\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight\">\r\n                {t(\"passwordReset\", \"Password Reset!\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"passwordResetDescription\", \"Your password has been reset successfully. You can now log in with your new password.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/login\")} className=\"w-full\">\r\n              {t(\"goToLogin\", \"Go to Login\")}\r\n            </Button>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  }\r\n\r\n  // Invalid link state\r\n  if (!code || !username) {\r\n    return (\r\n      <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n        <div className=\"flex items-center justify-center px-4 py-12\">\r\n          <div className=\"mx-auto grid w-full max-w-sm gap-6 text-center\">\r\n            <Logo />\r\n            <hr />\r\n\r\n            <div>\r\n              <h1 className=\"text-xl font-bold tracking-tight text-red-600\">\r\n                {t(\"invalidLinkTitle\", \"Invalid Reset Link\")}\r\n              </h1>\r\n              <p className=\"text-sm text-muted-foreground mt-2\">\r\n                {t(\"invalidLinkDescription\", \"This password reset link is invalid or has expired. Please request a new one.\")}\r\n              </p>\r\n            </div>\r\n\r\n            <Button onClick={() => navigate(\"/forgot-password\")} className=\"w-full\">\r\n              {t(\"requestNewLink\", \"Request New Link\")}\r\n            </Button>\r\n\r\n            <Link\r\n              to=\"/login\"\r\n              className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n            >\r\n              <ArrowLeft className=\"w-4 h-4\" />\r\n              {t(\"backToLogin\", \"Back to login\")}\r\n            </Link>\r\n\r\n            <hr />\r\n            <p className=\"text-sm text-muted-foreground\">\r\n              © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div className=\"hidden p-4 md:block\">\r\n          <img\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n            width=\"1920\"\r\n            height=\"1080\"\r\n            alt={t(\"imageAlt\", \"Reset password background\")}\r\n            src={image}\r\n            className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n          />\r\n        </div>\r\n      </section>\r\n    );\r\n  } \r\n\r\n  return (\r\n    <section className=\"w-full md:grid md:min-h-screen md:grid-cols-2\">\r\n      <div className=\"flex items-center justify-center px-4 py-12\">\r\n        <div className=\"mx-auto grid w-full max-w-sm gap-6\">\r\n          <Logo />\r\n          <hr />\r\n\r\n          <div className=\"flex justify-center\">\r\n            <div className=\"w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center\">\r\n              <KeyRound className=\"w-6 h-6 text-primary\" />\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"text-center\">\r\n            <h1 className=\"text-xl font-bold tracking-tight\">\r\n              {t(\"title\", \"Reset Password\")}\r\n            </h1>\r\n            <p className=\"text-sm text-muted-foreground mt-1\">\r\n              {t(\"subtitle\", \"Enter your new password below\")}\r\n            </p>\r\n          </div>\r\n\r\n          {error && (\r\n            <div className=\"p-3 text-sm text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 rounded-md\">\r\n              {error}\r\n            </div>\r\n          )}\r\n\r\n          <form onSubmit={handleSubmit} className=\"grid gap-4\">\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"newPassword\", \"New Password\")} htmlFor=\"password\" required>\r\n              <PasswordInput\r\n                required\r\n                id=\"password\"\r\n                name=\"password\"\r\n                autoComplete=\"new-password\"\r\n                placeholder=\"••••••••\"\r\n                value={password}\r\n                onChange={(e) => setPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <div className=\"grid gap-2\">\r\n              <FormField label={t(\"confirmPassword\", \"Confirm Password\")} htmlFor=\"confirm-password\" required>\r\n              <PasswordInput\r\n                required\r\n                id=\"confirm-password\"\r\n                name=\"confirm-password\"\r\n                autoComplete=\"confirm-password\"\r\n                placeholder=\"••••••••\"\r\n                value={confirmPassword}\r\n                onChange={(e) => setConfirmPassword(e.target.value)}\r\n                disabled={isLoading}\r\n                minLength={8}\r\n              />\r\n              </FormField>\r\n            </div>\r\n\r\n            <Button type=\"submit\" className=\"w-full\" disabled={isLoading}>\r\n              {isLoading ? (\r\n                <>\r\n                  <div className=\"w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2\" />\r\n                  {t(\"resetting\", \"Resetting...\")}\r\n                </>\r\n              ) : (\r\n                t(\"resetPassword\", \"Reset Password\")\r\n              )}\r\n            </Button>\r\n          </form>\r\n\r\n          <Link\r\n            to=\"/login\"\r\n            className=\"inline-flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground\"\r\n          >\r\n            <ArrowLeft className=\"w-4 h-4\" />\r\n            {t(\"backToLogin\", \"Back to login\")}\r\n          </Link>\r\n\r\n          <hr />\r\n          <p className=\"text-sm text-muted-foreground\">\r\n            © {new Date().getFullYear()} {t(\"copyright\", \"All rights reserved.\")}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div className=\"hidden p-4 md:block\">\r\n        <img\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          width=\"1920\"\r\n          height=\"1080\"\r\n          alt={t(\"imageAlt\", \"Reset password background\")}\r\n          src={image}\r\n          className=\"size-full rounded-lg border bg-muted object-cover object-center\"\r\n        />\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default ResetPasswordPageSplit;\r\n"
     },
     {
       "path": "reset-password-page-split/lang/en.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/cli",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "bin": {
     "promake": "dist/index.js" 

package/template/eslint.config.js

@@ -1,41 +1,41 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-import { defineConfig, globalIgnores } from 'eslint/config';
-import eslintConfigPrettier from 'eslint-config-prettier/flat';
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-      eslintConfigPrettier,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    rules: {
-      '@typescript-eslint/consistent-type-imports': ['warn', {
-        prefer: 'type-imports',
-        fixStyle: 'inline-type-imports',
-      }],
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-      'react-refresh/only-export-components': 'off',
-      'react-hooks/purity': 'off',
-      'react-hooks/exhaustive-deps': 'off',
-      'react-hooks/set-state-in-effect': 'off',
-      'no-unused-vars': 'off',
-      'prefer-const': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'off',
-    },
-  },
-]);
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      eslintConfigPrettier,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-imports': ['warn', {
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
+      }],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-expressions': 'off',
+      'react-refresh/only-export-components': 'off',
+      'react-hooks/purity': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'no-unused-vars': 'off',
+      'prefer-const': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'off',
+    },
+  },
+]);

package/template/src/PasswordInput.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Eye, EyeOff } from "lucide-react";
+
+interface PasswordInputProps {
+  id?: string;
+  name?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  required?: boolean;
+  autoComplete?: string;
+  className?: string;
+  disabled?: boolean;
+  minLength?: number;
+}
+
+export function PasswordInput({
+  id = "password",
+  name = "password",
+  value,
+  onChange,
+  placeholder = "Enter password",
+  required = false,
+  autoComplete = "current-password",
+  disabled = false,
+  minLength = undefined,
+  className = "",
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+      <div className="relative">
+        <Input
+          id={id}
+          name={name}
+          type={showPassword ? "text" : "password"}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          required={required}
+          className={`mt-1 pr-10 ${className}`}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          minLength={minLength}
+        />
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          aria-label={showPassword ? "Hide password" : "Show password"}
+        >
+          {showPassword ? (
+            <EyeOff className="w-4 h-4" />
+          ) : (
+            <Eye className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+  );
+}

package/template/src/components/FormField.tsx

@@ -1,15 +1,17 @@
 import { Stack } from "./Stack";
 import { Label } from "./ui/label";
 
+// FormField.tsx
 export interface FormFieldProps {
-  label: string;
+  label: React.ReactNode;
   htmlFor?: string;
   error?: string;
   required?: boolean;
   description?: string;
   children: React.ReactNode;
-  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12; // Stack gap override
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12;
   className?: string;
+  labelAction?: React.ReactNode; // YENİ
 }
 
 export function FormField({ 
@@ -21,12 +23,16 @@ export function FormField({
   description,
   gap = 2,
   className,
+  labelAction, // YENİ
 }: FormFieldProps) {
   return (
     <Stack gap={gap} className={className}>
-      <Label htmlFor={htmlFor}>
-        {label} {required && <span className="text-destructive">*</span>}
-      </Label>
+      <div className="flex items-center justify-between">
+        <Label htmlFor={htmlFor}>
+          {label} {required && <span className="text-destructive">*</span>}
+        </Label>
+        {labelAction}
+      </div>
       {children}
       {description && (
         <p className="text-sm text-muted-foreground">

package/template/src/lang/index.ts

@@ -1,90 +1,90 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-
-import constants from "@/constants/constants.json";
-
-// Auto-import translations from two locations:
-// 1. Core: @/lang/{lang}/{namespace}.json (e.g., lang/en/header.json)
-// 2. Modules: @/modules/{namespace}/lang/{lang}.json (e.g., modules/about-page/lang/en.json)
-const coreLangs = import.meta.glob("@/lang/*/*.json", { eager: true });
-const moduleLangs = import.meta.glob("@/modules/*/lang/*.json", { eager: true });
-
-// Get available languages from config
-const availableLanguages =
-  Object.keys(constants?.site?.availableLanguages || {}) || [];
-
-// Build resources object: { en: { header: {...}, about-page: {...} }, tr: {...} }
-const resources: Record<string, Record<string, any>> = {};
-
-// Process core translations: /lang/{lang}/{namespace}.json
-Object.entries(coreLangs).forEach(([path, module]) => {
-  const match = path.match(/\/lang\/([^/]+)\/([^/]+)\.json$/);
-  if (match) {
-    const [, lang, namespace] = match;
-    if (!availableLanguages.includes(lang)) return;
-    if (!resources[lang]) resources[lang] = {};
-    resources[lang][namespace] = (module as any).default || module;
-  }
-});
-
-// Process module translations: /modules/{namespace}/lang/{lang}.json
-Object.entries(moduleLangs).forEach(([path, module]) => {
-  const match = path.match(/\/modules\/([^/]+)\/lang\/([^/]+)\.json$/);
-  if (match) {
-    const [, namespace, lang] = match;
-    if (!availableLanguages.includes(lang)) return;
-    if (!resources[lang]) resources[lang] = {};
-    const moduleData = (module as any).default || module;
-    resources[lang][namespace] = {
-      ...moduleData,
-      ...resources[lang][namespace],
-    };
-  }
-});
-
-// Custom detector for cached settings
-const settingsDetector = {
-  name: "settingsDetector",
-  lookup() {
-    if (constants.site.overrideBrowserLanguage) {
-      return constants?.site?.defaultLanguage;
-    }
-    return undefined;
-  },
-  cacheUserLanguage() {
-    // Don't cache - settings detector is read-only
-  },
-};
-
-// Create detector instance and add custom detector
-const languageDetector = new LanguageDetector();
-languageDetector.addDetector(settingsDetector);
-
-i18n
-  .use(languageDetector)
-  .use(initReactI18next)
-  .init({
-    resources,
-    fallbackLng: constants?.site?.defaultLanguage || "en",
-    supportedLngs: availableLanguages,
-    detection: {
-      // Priority: localStorage > settings > browser
-      order: ["localStorage", "settingsDetector", "navigator"],
-      lookupLocalStorage: "i18nextLng",
-      caches: ["localStorage"],
-    },
-    interpolation: {
-      escapeValue: false,
-    },
-  });
-
-// Helper to change language and persist to localStorage
-export const changeLanguage = (lang: string) => {
-  if (availableLanguages.includes(lang)) {
-    i18n.changeLanguage(lang);
-  }
-};
-
-export { availableLanguages };
-export default i18n;
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+import constants from "@/constants/constants.json";
+
+// Auto-import translations from two locations:
+// 1. Core: @/lang/{lang}/{namespace}.json (e.g., lang/en/header.json)
+// 2. Modules: @/modules/{namespace}/lang/{lang}.json (e.g., modules/about-page/lang/en.json)
+const coreLangs = import.meta.glob("@/lang/*/*.json", { eager: true });
+const moduleLangs = import.meta.glob("@/modules/*/lang/*.json", { eager: true });
+
+// Get available languages from config
+const availableLanguages =
+  Object.keys(constants?.site?.availableLanguages || {}) || [];
+
+// Build resources object: { en: { header: {...}, about-page: {...} }, tr: {...} }
+const resources: Record<string, Record<string, any>> = {};
+
+// Process core translations: /lang/{lang}/{namespace}.json
+Object.entries(coreLangs).forEach(([path, module]) => {
+  const match = path.match(/\/lang\/([^/]+)\/([^/]+)\.json$/);
+  if (match) {
+    const [, lang, namespace] = match;
+    if (!availableLanguages.includes(lang)) return;
+    if (!resources[lang]) resources[lang] = {};
+    resources[lang][namespace] = (module as any).default || module;
+  }
+});
+
+// Process module translations: /modules/{namespace}/lang/{lang}.json
+Object.entries(moduleLangs).forEach(([path, module]) => {
+  const match = path.match(/\/modules\/([^/]+)\/lang\/([^/]+)\.json$/);
+  if (match) {
+    const [, namespace, lang] = match;
+    if (!availableLanguages.includes(lang)) return;
+    if (!resources[lang]) resources[lang] = {};
+    const moduleData = (module as any).default || module;
+    resources[lang][namespace] = {
+      ...moduleData,
+      ...resources[lang][namespace],
+    };
+  }
+});
+
+// Custom detector for cached settings
+const settingsDetector = {
+  name: "settingsDetector",
+  lookup() {
+    if (constants.site.overrideBrowserLanguage) {
+      return constants?.site?.defaultLanguage;
+    }
+    return undefined;
+  },
+  cacheUserLanguage() {
+    // Don't cache - settings detector is read-only
+  },
+};
+
+// Create detector instance and add custom detector
+const languageDetector = new LanguageDetector();
+languageDetector.addDetector(settingsDetector);
+
+i18n
+  .use(languageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: constants?.site?.defaultLanguage || "en",
+    supportedLngs: availableLanguages,
+    detection: {
+      // Priority: localStorage > settings > browser
+      order: ["localStorage", "settingsDetector", "navigator"],
+      lookupLocalStorage: "i18nextLng",
+      caches: ["localStorage"],
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+// Helper to change language and persist to localStorage
+export const changeLanguage = (lang: string) => {
+  if (availableLanguages.includes(lang)) {
+    i18n.changeLanguage(lang);
+  }
+};
+
+export { availableLanguages };
+export default i18n;