Merge pull request #63 from knowlyai/feature/auth

Feature/auth

Author: enzosakamoto

package-lock.json

@@ -35,6 +35,7 @@
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.5.3",
     "tailwindcss": "^4.1.5",
+    "uuidv4": "^6.2.13",
     "zod": "^3.25.28"
   },
   "devDependencies": {

package.json

@@ -28,20 +28,38 @@ import {
   Form
 } from '@/shared/components/form'
 import { Input } from '@/shared/components/input'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { containerVariants, cardVariants } from '@/shared/utils/animations'
+import { useLoginUserMutation } from '@/shared/hooks/use-user'
+import toast from 'react-hot-toast'
+import { AxiosError } from 'axios'
 
 export function LoginPage() {
   const [showPassword, setShowPassword] = useState(false)
+  const { mutateAsync: loginUser, isPending } = useLoginUserMutation()
+  const navigate = useNavigate()
 
   const form = useForm<LoginFormData>({
     resolver: zodResolver(loginFormSchema),
     defaultValues: loginFormInitialValues,
     mode: 'onBlur'
   })
 
-  const onSubmit = (values: LoginFormData) => {
-    console.log(values)
+  const onSubmit = async (values: LoginFormData) => {
+    try {
+      const response = await loginUser(values)
+      localStorage.setItem('token', response.id_token)
+      toast.success('Login realizado com sucesso!')
+      navigate('/bases', {
+        replace: true
+      })
+    } catch (err) {
+      const errorMessage =
+        err instanceof AxiosError && err.response?.data?.message
+          ? err.response.data.message
+          : 'Erro ao fazer login'
+      toast.error(errorMessage)
+    }
   }
 
   return (
@@ -116,8 +134,12 @@ export function LoginPage() {
                     )}
                   />
                   <CardFooter className="flex flex-col items-center justify-center pt-4 pb-0">
-                    <Button type="submit" className="w-full">
-                      Login
+                    <Button
+                      type="submit"
+                      className="w-full"
+                      disabled={isPending}
+                    >
+                      {isPending ? 'Entrando...' : 'Login'}
                     </Button>
                     <div className="text-foreground/70 mt-2 text-center text-sm">
                       Ainda não tem uma conta?{' '}

src/features/login/pages/login.tsx

@@ -177,7 +177,7 @@ export function PlaygroundPage() {
             </div>
 
             {/* Chat Container */}
-            <Card className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            <Card className="flex min-h-0 max-w-2xl flex-1 flex-col overflow-hidden">
               <CardHeader className="flex-shrink-0 pb-3">
                 <CardTitle className="flex items-center gap-2">
                   <Bot className="h-5 w-5" />
@@ -231,7 +231,7 @@ export function PlaygroundPage() {
                                 : 'bg-muted text-foreground'
                             }`}
                           >
-                            <p className="text-sm whitespace-pre-wrap">
+                            <p className="p-[6px] text-sm whitespace-pre-wrap">
                               {message.content}
                             </p>
                             <p className={`mt-1 text-xs opacity-70`}>

src/features/playground/pages/playground.tsx

@@ -38,10 +38,16 @@ import { motion } from 'framer-motion'
 import { Eye, EyeOff } from 'lucide-react'
 import { useState } from 'react'
 import { containerVariants, cardVariants } from '@/shared/utils/animations'
+import { useCreateUserMutation } from '@/shared/hooks/use-user'
+import { AxiosError } from 'axios'
+import { useNavigate } from 'react-router-dom'
 
 export function SignUpPage() {
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const navigate = useNavigate()
+
+  const { mutateAsync: createUser, isPending } = useCreateUserMutation()
 
   const form = useForm<SignUpFormData>({
     resolver: zodResolver(signUpFormSchema),
@@ -73,9 +79,39 @@ export function SignUpPage() {
     onChange(formattedValue)
   }
 
-  function onSubmit(values: SignUpFormData) {
-    console.log(values)
-    toast.success('Conta criada com sucesso!')
+  async function onSubmit(values: SignUpFormData) {
+    try {
+      const isIndividual = values.documentType === 'individual'
+
+      // Convert birthDate to seconds since epoch if provided
+      const birthDateSeconds = values.birthDate
+        ? Math.floor(values.birthDate.getTime() / 1000)
+        : undefined
+
+      await createUser({
+        name: values.name,
+        email: values.email,
+        password: values.password,
+        cellphone: values.phone,
+        personType: isIndividual ? 'PF' : 'PJ',
+        cpfCnpj: values.document.replace(/\D/g, ''),
+        birthDate: birthDateSeconds,
+        plan: 'Bronze'
+      })
+
+      form.reset()
+      toast.success(
+        'Conta criada! Confirme seu cadastro pelo link enviado para o seu e-mail. Você será redirecionado para a página de login.',
+        { duration: 10000 }
+      )
+      setTimeout(() => {
+        navigate('/login', { replace: true })
+      }, 10000)
+    } catch (err) {
+      const errorMessage =
+        ((err as AxiosError).response?.data as string) || 'Erro ao fazer login'
+      toast.error(errorMessage)
+    }
   }
 
   return (
@@ -326,7 +362,9 @@ export function SignUpPage() {
                   />
                 </CardContent>
                 <CardFooter className="justify-center">
-                  <Button type="submit">Criar conta</Button>
+                  <Button type="submit" disabled={isPending}>
+                    {isPending ? 'Criando...' : 'Criar conta'}
+                  </Button>
                 </CardFooter>
               </Card>
             </motion.div>

src/features/sign-up/pages/sign-up-page.tsx

@@ -35,7 +35,7 @@ export function KnowledgeBaseDetailModal({
   const getStatusColor = (status: string) => {
     switch (status.toLowerCase()) {
       case 'active':
-        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+        return 'bg-green-600'
       case 'processing':
         return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
       case 'error':

src/features/user-area/components/knowledge-base-detail-modal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import {
@@ -48,6 +48,9 @@ export function CreateBasePipeline() {
 
   const createKnowledgeBaseMutation = useCreateKnowledgeBaseMutation()
 
+  // Guard to prevent double-run under React StrictMode in development
+  const didRunRef = useRef(false)
+
   const [pipeline, setPipeline] = useState<PipelineState>({
     currentStep: 0,
     steps: [
@@ -239,6 +242,9 @@ export function CreateBasePipeline() {
   }
 
   useEffect(() => {
+    if (didRunRef.current) return
+    didRunRef.current = true
+
     if (formData) {
       executeSteps()
     } else {

src/features/user-area/pages/create-base-pipeline.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
 import { Save, ArrowLeft } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import toast from 'react-hot-toast'
-
+import { v4 as uuidv4 } from 'uuid'
 import { Background } from '@/shared/components/background'
 import { Layout } from '@/shared/components/layout'
 import { Button } from '@/shared/components/button'
@@ -64,7 +64,7 @@ export function CreateBase() {
         .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
         .replace(/[^a-z0-9\s]/g, '-')
         .replace(/\s+/g, '-')
-      data.slug = slug
+      data.slug = slug.concat('-', uuidv4().slice(0, 8)) // Append random string to ensure uniqueness
       // Navigate to pipeline page with form data
       navigate('/bases/create/pipeline', { state: { formData: data } })
     } catch (error) {