generator-kodly-react-app 1.0.15 → 1.0.16

package/generators/app/templates/src/modules/auth/components/login-form.tsx

@@ -1,16 +1,14 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { useLogin } from '@/modules/auth/hooks/use-auth-hook';
-import { zUserLoginDto } from '@/sdk/zod.gen';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import type { z } from 'zod';
-import { Link } from '@tanstack/react-router';
-import { Route as SignupRoute } from '@/routes/auth/signup';
-import { Route as ForgotPasswordRoute } from '@/routes/auth/forgot-password';
-import { loginFormDefaults } from '@/modules/auth/schemas/form-schemas';
+import { AuthForm } from "./auth-form";
+import { useLogin } from "@/modules/auth/hooks/use-auth-hook";
+import { zUserLoginDto } from "@/sdk/zod.gen";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import type { z } from "zod";
+import { Link } from "@tanstack/react-router";
+import { Route as SignupRoute } from "@/routes/auth/signup";
+import { Route as ForgotPasswordRoute } from "@/routes/auth/forgot-password";
+import { loginFormDefaults } from "@/modules/auth/schemas/form-schemas";
 
 type LoginFormData = z.infer<typeof zUserLoginDto>;
 
@@ -27,69 +25,41 @@ export function LoginForm() {
   };
 
   return (
-    <div className='flex flex-col gap-6'>
-      <h1 className='text-2xl font-semibold'>{t('auth.login.title')}</h1>
-      <Form {...form}>
-        <form
-          noValidate
-          className='flex flex-col gap-4'
-          onSubmit={form.handleSubmit(onSubmit)}>
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.login.email')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='email'
-                    placeholder={t('auth.login.emailPlaceholder')}
-                    autoComplete='email'
-                    autoFocus
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name='password'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.login.password')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='password'
-                    placeholder={t('auth.login.passwordPlaceholder')}
-                    autoComplete='current-password'
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button
-            type='submit'
-            disabled={isPending}>
-            {t('auth.login.submit')}
-          </Button>
-        </form>
-      </Form>
-      <div className='flex flex-col gap-2 text-sm text-center'>
+    <AuthForm
+      form={form}
+      title={t("auth.login.title")}
+      onSubmit={onSubmit}
+      isPending={isPending}
+      submitLabel={t("auth.login.submit")}
+      fields={[
+        {
+          name: "email",
+          label: t("auth.login.email"),
+          placeholder: t("auth.login.emailPlaceholder"),
+          type: "email",
+          autoComplete: "email",
+          autoFocus: true,
+        },
+        {
+          name: "password",
+          label: t("auth.login.password"),
+          placeholder: t("auth.login.passwordPlaceholder"),
+          type: "password",
+          autoComplete: "current-password",
+        },
+      ]}
+    >
+      <div className="flex flex-col gap-2 text-sm text-center">
         <Link
           to={ForgotPasswordRoute.to}
-          className='text-primary hover:underline'>
-          {t('auth.login.forgotPasswordLink')}
+          className="text-primary hover:underline"
+        >
+          {t("auth.login.forgotPasswordLink")}
         </Link>
-        <Link
-          to={SignupRoute.to}
-          className='text-primary hover:underline'>
-          {t('auth.login.signupLink')}
+        <Link to={SignupRoute.to} className="text-primary hover:underline">
+          {t("auth.login.signupLink")}
         </Link>
       </div>
-    </div>
+    </AuthForm>
   );
 }

package/generators/app/templates/src/modules/auth/components/login-link.tsx

@@ -0,0 +1,12 @@
+import { Link } from "@tanstack/react-router";
+import { Route as LoginRoute } from "@/routes/auth/login";
+
+export function LoginLink({ label }: { label: string }) {
+  return (
+    <div className="text-sm text-center">
+      <Link to={LoginRoute.to} className="text-primary hover:underline">
+        {label}
+      </Link>
+    </div>
+  );
+}

package/generators/app/templates/src/modules/auth/components/reset-password-form.tsx

@@ -1,27 +1,25 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { useResetPassword } from '@/modules/auth/hooks/use-auth-hook';
-import { zUserResetPasswordDto } from '@/sdk/zod.gen';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import type { z } from 'zod';
-import { Link, useSearch } from '@tanstack/react-router';
-import { Route as LoginRoute } from '@/routes/auth/login';
-import { resetPasswordFormDefaults } from '@/modules/auth/schemas/form-schemas';
+import { AuthForm } from "./auth-form";
+import { useResetPassword } from "@/modules/auth/hooks/use-auth-hook";
+import { zUserResetPasswordDto } from "@/sdk/zod.gen";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import type { z } from "zod";
+import { useSearch } from "@tanstack/react-router";
+import { LoginLink } from "./login-link";
+import { resetPasswordFormDefaults } from "@/modules/auth/schemas/form-schemas";
 
 type ResetPasswordFormData = z.infer<typeof zUserResetPasswordDto>;
 
 export function ResetPasswordForm() {
   const { t } = useTranslation();
   const { mutate, isPending } = useResetPassword();
-  const search = useSearch({ from: '/auth/reset-password' });
+  const search = useSearch({ from: "/auth/reset-password" });
   const form = useForm<ResetPasswordFormData>({
     resolver: zodResolver(zUserResetPasswordDto),
     defaultValues: {
       ...resetPasswordFormDefaults,
-      email: search.email || '',
+      email: search.email || "",
     },
   });
 
@@ -30,83 +28,39 @@ export function ResetPasswordForm() {
   };
 
   return (
-    <div className='flex flex-col gap-6'>
-      <h1 className='text-2xl font-semibold'>{t('auth.resetPassword.title')}</h1>
-      <Form {...form}>
-        <form
-          noValidate
-          className='flex flex-col gap-4'
-          onSubmit={form.handleSubmit(onSubmit)}>
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.resetPassword.email')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='email'
-                    placeholder={t('auth.resetPassword.emailPlaceholder')}
-                    autoComplete='email'
-                    readOnly
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name='otp'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.resetPassword.otp')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='text'
-                    placeholder={t('auth.resetPassword.otpPlaceholder')}
-                    autoComplete='one-time-code'
-                    autoFocus
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name='password'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.resetPassword.password')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='password'
-                    placeholder={t('auth.resetPassword.passwordPlaceholder')}
-                    autoComplete='new-password'
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button
-            type='submit'
-            disabled={isPending}>
-            {t('auth.resetPassword.submit')}
-          </Button>
-        </form>
-      </Form>
-      <div className='text-sm text-center'>
-        <Link
-          to={LoginRoute.to}
-          className='text-primary hover:underline'>
-          {t('auth.forgotPassword.loginLink')}
-        </Link>
-      </div>
-    </div>
+    <AuthForm
+      form={form}
+      title={t("auth.resetPassword.title")}
+      onSubmit={onSubmit}
+      isPending={isPending}
+      submitLabel={t("auth.resetPassword.submit")}
+      fields={[
+        {
+          name: "email",
+          label: t("auth.resetPassword.email"),
+          placeholder: t("auth.resetPassword.emailPlaceholder"),
+          type: "email",
+          autoComplete: "email",
+          readOnly: true,
+        },
+        {
+          name: "otp",
+          label: t("auth.resetPassword.otp"),
+          placeholder: t("auth.resetPassword.otpPlaceholder"),
+          type: "text",
+          autoComplete: "one-time-code",
+          autoFocus: true,
+        },
+        {
+          name: "password",
+          label: t("auth.resetPassword.password"),
+          placeholder: t("auth.resetPassword.passwordPlaceholder"),
+          type: "password",
+          autoComplete: "new-password",
+        },
+      ]}
+    >
+      <LoginLink label={t("auth.forgotPassword.loginLink")} />
+    </AuthForm>
   );
 }

package/generators/app/templates/src/modules/auth/components/signup-form.tsx

@@ -1,15 +1,12 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
-import { useSignup } from '@/modules/auth/hooks/use-auth-hook';
-import { zUserSignupDto } from '@/sdk/zod.gen';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { Link } from '@tanstack/react-router';
-import { Route as LoginRoute } from '@/routes/auth/login';
-import { z } from 'zod';
-import { signupFormDefaults } from '@/modules/auth/schemas/form-schemas';
+import { AuthForm } from "./auth-form";
+import { useSignup } from "@/modules/auth/hooks/use-auth-hook";
+import { zUserSignupDto } from "@/sdk/zod.gen";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { LoginLink } from "./login-link";
+import { z } from "zod";
+import { signupFormDefaults } from "@/modules/auth/schemas/form-schemas";
 
 type SignupFormData = z.infer<typeof zUserSignupDto>;
 
@@ -29,64 +26,31 @@ export function SignupForm() {
   };
 
   return (
-    <div className='flex flex-col gap-6'>
-      <h1 className='text-2xl font-semibold'>{t('auth.signup.title')}</h1>
-      <Form {...form}>
-        <form
-          noValidate
-          className='flex flex-col gap-4'
-          onSubmit={form.handleSubmit(onSubmit)}>
-          <FormField
-            control={form.control}
-            name='email'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.signup.email')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='email'
-                    placeholder={t('auth.signup.emailPlaceholder')}
-                    autoComplete='email'
-                    autoFocus
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name='password'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t('auth.signup.password')} *</FormLabel>
-                <FormControl>
-                  <Input
-                    type='password'
-                    placeholder={t('auth.signup.passwordPlaceholder')}
-                    autoComplete='new-password'
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button
-            type='submit'
-            disabled={isPending}>
-            {t('auth.signup.submit')}
-          </Button>
-        </form>
-      </Form>
-      <div className='text-sm text-center'>
-        <Link
-          to={LoginRoute.to}
-          className='text-primary hover:underline'>
-          {t('auth.signup.loginLink')}
-        </Link>
-      </div>
-    </div>
+    <AuthForm
+      form={form}
+      title={t("auth.signup.title")}
+      onSubmit={onSubmit}
+      isPending={isPending}
+      submitLabel={t("auth.signup.submit")}
+      fields={[
+        {
+          name: "email",
+          label: t("auth.signup.email"),
+          placeholder: t("auth.signup.emailPlaceholder"),
+          type: "email",
+          autoComplete: "email",
+          autoFocus: true,
+        },
+        {
+          name: "password",
+          label: t("auth.signup.password"),
+          placeholder: t("auth.signup.passwordPlaceholder"),
+          type: "password",
+          autoComplete: "new-password",
+        },
+      ]}
+    >
+      <LoginLink label={t("auth.signup.loginLink")} />
+    </AuthForm>
   );
 }

package/generators/app/templates/src/modules/auth/contexts/auth-context.tsx

@@ -1,11 +1,15 @@
-import { createContext } from 'react';
-import { currentUserDetailsAtom } from '@/modules/auth/hooks/use-auth-hook';
-import type { AuthResponseDtoUserDetailDto } from '@/sdk';
-import { useAtomValue } from 'jotai';
+import { createContext } from "react";
+import { currentUserDetailsAtom } from "@/modules/auth/hooks/use-auth-hook";
+import type { AuthResponseDtoUserDetailDto } from "@/sdk";
+import { useAtomValue } from "jotai";
 
-export const AuthContext = createContext<AuthResponseDtoUserDetailDto | undefined>(undefined);
+export const AuthContext = createContext<
+  AuthResponseDtoUserDetailDto | undefined
+>(undefined);
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const authData = useAtomValue(currentUserDetailsAtom);
-  return <AuthContext.Provider value={authData}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={authData}>{children}</AuthContext.Provider>
+  );
 };

package/generators/app/templates/src/modules/auth/hooks/use-auth-hook.ts

@@ -1,4 +1,4 @@
-import { Route as LoginRoute } from '@/routes/auth/login';
+import { Route as LoginRoute } from "@/routes/auth/login";
 import type {
   AuthResponseDtoUserDetailDto,
   LoginUserAuthResponse,
@@ -6,7 +6,7 @@ import type {
   ResetPasswordUserAuthResponse,
   SendOtpUserAuthResponse,
   ValidateTokenUserAuthResponse,
-} from '@/sdk';
+} from "@/sdk";
 import {
   loginUserAuthMutation,
   logoutUserAuthMutation,
@@ -14,31 +14,38 @@ import {
   resetPasswordUserAuthMutation,
   sendOtpUserAuthMutation,
   validateTokenUserAuthMutation,
-} from '@/sdk/@tanstack/react-query.gen';
-import { client } from '@/sdk/client.gen';
-import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from '@tanstack/react-router';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
-import { SupportedLanguages } from '@/lib/i18n';
-import { DEFAULT_NON_LOGGED_IN_ROUTE } from '@/lib/routes';
+} from "@/sdk/@tanstack/react-query.gen";
+import { client } from "@/sdk/client.gen";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { SupportedLanguages } from "@/lib/i18n";
+import { DEFAULT_NON_LOGGED_IN_ROUTE } from "@/lib/routes";
 
 export const HEADER_KEYS = {
-  AUTH_TOKEN: 'x-auth-token',
-  ACCEPT_LANGUAGE: 'accept-language',
+  AUTH_TOKEN: "x-auth-token",
+  ACCEPT_LANGUAGE: "accept-language",
 };
 
 export const LOCAL_STORAGE_KEYS = {
-  AUTH_TOKEN: 'authTokenAtom',
+  AUTH_TOKEN: "authTokenAtom",
 };
 
-export const authTokenAtom = atomWithStorage<string>(LOCAL_STORAGE_KEYS.AUTH_TOKEN, '', undefined, {
-  getOnInit: true,
-});
+export const authTokenAtom = atomWithStorage<string>(
+  LOCAL_STORAGE_KEYS.AUTH_TOKEN,
+  "",
+  undefined,
+  {
+    getOnInit: true,
+  },
+);
 
-export const currentUserDetailsAtom = atom<AuthResponseDtoUserDetailDto | undefined>();
+export const currentUserDetailsAtom = atom<
+  AuthResponseDtoUserDetailDto | undefined
+>();
 
 export const setTokenInClient = (token?: string | null) => {
   if (token) {
@@ -72,13 +79,13 @@ export const useLogin = () => {
     ...loginUserAuthMutation({}),
     onSuccess: (response: LoginUserAuthResponse) => {
       const authData = response.data;
-      setAuthToken(authData?.token || '');
+      setAuthToken(authData?.token || "");
       setCurrentUser(authData);
       setTokenInClient(authData?.token);
     },
     onError: (err) => {
-      console.error('Login error:', err);
-      toast.error(err.response?.data.message || t('auth.messages.loginFailed'));
+      console.error("Login error:", err);
+      toast.error(err.response?.data.message || t("auth.messages.loginFailed"));
     },
   });
 };
@@ -91,13 +98,15 @@ export const useSignup = () => {
     ...registerUserAuthMutation({}),
     onSuccess: (response: RegisterUserAuthResponse) => {
       const authData = response.data;
-      setAuthToken(authData?.token || '');
+      setAuthToken(authData?.token || "");
       setCurrentUser(authData);
       setTokenInClient(authData?.token);
     },
     onError: (err) => {
-      console.error('Signup error:', err);
-      toast.error(err.response?.data.message || t('auth.messages.signupFailed'));
+      console.error("Signup error:", err);
+      toast.error(
+        err.response?.data.message || t("auth.messages.signupFailed"),
+      );
     },
   });
 };
@@ -113,13 +122,13 @@ export const useValidateToken = () => {
     onSuccess: (response: ValidateTokenUserAuthResponse) => {
       const authData = response.data;
       setCurrentUser(authData);
-      setAuthToken(authData?.token || '');
+      setAuthToken(authData?.token || "");
       setTokenInClient(authData?.token);
     },
     onError: (err) => {
-      console.error('Validate token error:', err);
+      console.error("Validate token error:", err);
       setCurrentUser(undefined);
-      setAuthToken('');
+      setAuthToken("");
       setTokenInClient();
     },
   });
@@ -132,7 +141,7 @@ export const useLogout = () => {
   return useMutation({
     ...logoutUserAuthMutation({}),
     onSuccess: () => {
-      setAuthToken('');
+      setAuthToken("");
       setCurrentUser(undefined);
       setTokenInClient();
       navigate({ to: DEFAULT_NON_LOGGED_IN_ROUTE });
@@ -146,19 +155,21 @@ export const useSendOtp = () => {
   return useMutation({
     ...sendOtpUserAuthMutation({}),
     onSuccess: (response: SendOtpUserAuthResponse, variables) => {
-      toast.success(response.message || t('auth.messages.otpSentSuccess'));
+      toast.success(response.message || t("auth.messages.otpSentSuccess"));
       // Extract email from the mutation variables and navigate to reset-password
       const email = variables.query?.authId;
       if (email) {
         navigate({
-          to: '/auth/reset-password',
+          to: "/auth/reset-password",
           search: { email },
         });
       }
     },
     onError: (err) => {
-      console.error('Send OTP error:', err);
-      toast.error(err.response?.data.message || t('auth.messages.otpSendFailed'));
+      console.error("Send OTP error:", err);
+      toast.error(
+        err.response?.data.message || t("auth.messages.otpSendFailed"),
+      );
     },
   });
 };
@@ -169,12 +180,16 @@ export const useResetPassword = () => {
   return useMutation({
     ...resetPasswordUserAuthMutation({}),
     onSuccess: (response: ResetPasswordUserAuthResponse) => {
-      toast.success(response.message || t('auth.messages.passwordResetSuccess'));
+      toast.success(
+        response.message || t("auth.messages.passwordResetSuccess"),
+      );
       navigate({ to: LoginRoute.to });
     },
     onError: (err) => {
-      console.error('Reset password error:', err);
-      toast.error(err.response?.data.message || t('auth.messages.passwordResetFailed'));
+      console.error("Reset password error:", err);
+      toast.error(
+        err.response?.data.message || t("auth.messages.passwordResetFailed"),
+      );
     },
   });
 };