generator-kodly-react-app 1.0.7 → 1.0.11

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

@@ -0,0 +1,74 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { useSendOtp } from '@/modules/auth/hooks/use-auth-hook';
+import { z } from 'zod';
+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 { forgotPasswordFormDefaults } from '@/modules/auth/schemas/form-schemas';
+
+const zForgotPasswordDto = z.object({
+  email: z.email().min(1).max(256),
+});
+
+type ForgotPasswordFormData = z.infer<typeof zForgotPasswordDto>;
+
+export function ForgotPasswordForm() {
+  const { t } = useTranslation();
+  const { mutate, isPending } = useSendOtp();
+  const form = useForm<ForgotPasswordFormData>({
+    resolver: zodResolver(zForgotPasswordDto),
+    defaultValues: forgotPasswordFormDefaults,
+  });
+
+  const onSubmit = (data: ForgotPasswordFormData) => {
+    mutate({ query: { authId: data.email } });
+  };
+
+  return (
+    <div className='flex flex-col gap-6'>
+      <h1 className='text-2xl font-semibold'>{t('auth.forgotPassword.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.forgotPassword.email')} *</FormLabel>
+                <FormControl>
+                  <Input
+                    type='email'
+                    placeholder={t('auth.forgotPassword.emailPlaceholder')}
+                    autoComplete='email'
+                    autoFocus
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button
+            type='submit'
+            disabled={isPending}>
+            {t('auth.forgotPassword.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>
+  );
+}

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

@@ -0,0 +1,95 @@
+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';
+
+type LoginFormData = z.infer<typeof zUserLoginDto>;
+
+export function LoginForm() {
+  const { t } = useTranslation();
+  const { mutate, isPending } = useLogin();
+  const form = useForm<LoginFormData>({
+    resolver: zodResolver(zUserLoginDto),
+    defaultValues: loginFormDefaults,
+  });
+
+  const onSubmit = (data: LoginFormData) => {
+    mutate({ body: data });
+  };
+
+  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'>
+        <Link
+          to={ForgotPasswordRoute.to}
+          className='text-primary hover:underline'>
+          {t('auth.login.forgotPasswordLink')}
+        </Link>
+        <Link
+          to={SignupRoute.to}
+          className='text-primary hover:underline'>
+          {t('auth.login.signupLink')}
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,112 @@
+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';
+
+type ResetPasswordFormData = z.infer<typeof zUserResetPasswordDto>;
+
+export function ResetPasswordForm() {
+  const { t } = useTranslation();
+  const { mutate, isPending } = useResetPassword();
+  const search = useSearch({ from: '/auth/reset-password' });
+  const form = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(zUserResetPasswordDto),
+    defaultValues: {
+      ...resetPasswordFormDefaults,
+      email: search.email || '',
+    },
+  });
+
+  const onSubmit = (data: ResetPasswordFormData) => {
+    mutate({ body: data });
+  };
+
+  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>
+  );
+}

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

@@ -0,0 +1,92 @@
+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';
+
+type SignupFormData = z.infer<typeof zUserSignupDto>;
+
+export function SignupForm() {
+  const { t } = useTranslation();
+  const { mutate, isPending } = useSignup();
+  const extendedSchema = zUserSignupDto.extend({
+    password: z.string().min(6).max(32),
+  });
+  const form = useForm<SignupFormData>({
+    resolver: zodResolver(extendedSchema),
+    defaultValues: signupFormDefaults,
+  });
+
+  const onSubmit = (data: SignupFormData) => {
+    mutate({ body: data });
+  };
+
+  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>
+  );
+}

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

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

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

@@ -0,0 +1,180 @@
+import { Route as LoginRoute } from '@/routes/auth/login';
+import type {
+  AuthResponseDtoUserDetailDto,
+  LoginUserAuthResponse,
+  RegisterUserAuthResponse,
+  ResetPasswordUserAuthResponse,
+  SendOtpUserAuthResponse,
+  ValidateTokenUserAuthResponse,
+} from '@/sdk';
+import {
+  loginUserAuthMutation,
+  logoutUserAuthMutation,
+  registerUserAuthMutation,
+  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';
+
+export const HEADER_KEYS = {
+  AUTH_TOKEN: 'x-auth-token',
+  ACCEPT_LANGUAGE: 'accept-language',
+};
+
+export const LOCAL_STORAGE_KEYS = {
+  AUTH_TOKEN: 'authTokenAtom',
+};
+
+export const authTokenAtom = atomWithStorage<string>(LOCAL_STORAGE_KEYS.AUTH_TOKEN, '', undefined, {
+  getOnInit: true,
+});
+
+export const currentUserDetailsAtom = atom<AuthResponseDtoUserDetailDto | undefined>();
+
+export const setTokenInClient = (token?: string | null) => {
+  if (token) {
+    client.setConfig({
+      headers: {
+        [HEADER_KEYS.AUTH_TOKEN]: token,
+      },
+    });
+  } else {
+    client.setConfig({
+      headers: {
+        [HEADER_KEYS.AUTH_TOKEN]: undefined,
+      },
+    });
+  }
+};
+
+export const setLocaleInClient = (locale: SupportedLanguages) => {
+  client.setConfig({
+    headers: {
+      [HEADER_KEYS.ACCEPT_LANGUAGE]: locale,
+    },
+  });
+};
+
+export const useLogin = () => {
+  const { t } = useTranslation();
+  const setAuthToken = useSetAtom(authTokenAtom);
+  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
+  return useMutation({
+    ...loginUserAuthMutation({}),
+    onSuccess: (response: LoginUserAuthResponse) => {
+      const authData = response.data;
+      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'));
+    },
+  });
+};
+
+export const useSignup = () => {
+  const { t } = useTranslation();
+  const setAuthToken = useSetAtom(authTokenAtom);
+  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
+  return useMutation({
+    ...registerUserAuthMutation({}),
+    onSuccess: (response: RegisterUserAuthResponse) => {
+      const authData = response.data;
+      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'));
+    },
+  });
+};
+
+export const useValidateToken = () => {
+  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
+  const setAuthToken = useSetAtom(authTokenAtom);
+  const authToken = useAtomValue(authTokenAtom);
+  setTokenInClient(authToken);
+  return useMutation({
+    ...validateTokenUserAuthMutation({}),
+    retry: false,
+    onSuccess: (response: ValidateTokenUserAuthResponse) => {
+      const authData = response.data;
+      setCurrentUser(authData);
+      setAuthToken(authData?.token || '');
+      setTokenInClient(authData?.token);
+    },
+    onError: (err) => {
+      console.error('Validate token error:', err);
+      setCurrentUser(undefined);
+      setAuthToken('');
+      setTokenInClient();
+    },
+  });
+};
+
+export const useLogout = () => {
+  const setAuthToken = useSetAtom(authTokenAtom);
+  const setCurrentUser = useSetAtom(currentUserDetailsAtom);
+  const navigate = useNavigate();
+  return useMutation({
+    ...logoutUserAuthMutation({}),
+    onSuccess: () => {
+      setAuthToken('');
+      setCurrentUser(undefined);
+      setTokenInClient();
+      navigate({ to: DEFAULT_NON_LOGGED_IN_ROUTE });
+    },
+  });
+};
+
+export const useSendOtp = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return useMutation({
+    ...sendOtpUserAuthMutation({}),
+    onSuccess: (response: SendOtpUserAuthResponse, variables) => {
+      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',
+          search: { email },
+        });
+      }
+    },
+    onError: (err) => {
+      console.error('Send OTP error:', err);
+      toast.error(err.response?.data.message || t('auth.messages.otpSendFailed'));
+    },
+  });
+};
+
+export const useResetPassword = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  return useMutation({
+    ...resetPasswordUserAuthMutation({}),
+    onSuccess: (response: ResetPasswordUserAuthResponse) => {
+      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'));
+    },
+  });
+};

package/generators/app/templates/src/modules/auth/layouts/auth-layout.tsx

@@ -0,0 +1,28 @@
+import { LanguageSwitcher } from '@/components/layout/language-switcher';
+import { ThemeSwitcher } from '@/components/layout/theme-switcher';
+import { Button } from '@/components/ui/button';
+import { Home } from 'lucide-react';
+import { Link } from '@tanstack/react-router';
+import { DEFAULT_NON_LOGGED_IN_ROUTE } from '@/lib/routes';
+
+export function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className='flex h-screen items-center justify-center bg-background relative'>
+      <div className='absolute top-4 left-4'>
+        <Link to={DEFAULT_NON_LOGGED_IN_ROUTE}>
+          <Button
+            variant='outline'
+            size='icon'
+            aria-label='Go to home'>
+            <Home className='h-4 w-4' />
+          </Button>
+        </Link>
+      </div>
+      <div className='absolute top-4 right-4 flex gap-2'>
+        <ThemeSwitcher />
+        <LanguageSwitcher />
+      </div>
+      <div className='w-full max-w-md p-8'>{children}</div>
+    </div>
+  );
+}