insert new alert in registerUser and modified styles b00tc4mp#99

TatiGV · Aug 17, 2024 · 8bb2fcf · 8bb2fcf
1 parent 8ccbc19
commit 8bb2fcf
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 22 deletions.
diff --git a/staff/tatiana-garcia/project/app/view/App.jsx b/staff/tatiana-garcia/project/app/view/App.jsx
@@ -1,21 +1,30 @@
+import { useState } from 'react'
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
 
 import Register from './register'
 import Login from './login/index.jsx'
 import Home from './home/index.jsx'
 import Contact from './contact/index.jsx'
+import Alert from './common/Alert.jsx'
+
+import { Context } from './context.js'
 
 import logic from '../logic/index.js'
 import Petsitters from './pettsiters/index.jsx'
 
 export default function App() {
   const navigate = useNavigate()
 
+  const [alertMessage, setAlertMessage] = useState(null)
+
   const handleLogin = () => { navigate('/') }
 
   const handleRegisterClick = () => { navigate('/register') }
 
-  const handleRegister = () => { navigate('/login') }
+  const handleRegister = () => {
+    setAlertMessage('¡Te has registrado correctamente! Ya puedes loguearte en Exoticus')
+    navigate('/login')
+  }
 
   // const handleContact = () => { navigate('/contact') }
 
@@ -27,12 +36,17 @@ export default function App() {
     navigate('/login')
   }
 
-  return <Routes>
-    <Route path='/*' element={<Home onLogout={handleLogout} />} />
-    <Route path='/login' element={logic.isUserLoggedIn() ? <Navigate to='/' /> : <Login onLogin={handleLogin} onRegisterClick={handleRegisterClick} />} />
-    <Route path='/register' element={logic.isUserLoggedIn() ? <Navigate to='/' /> : <Register onRegister={handleRegister} onLoginClick={handleLoginClick} />} />
-    <Route path='/contact' element={<Contact onRegisterPetsitterClick={handleRegisterClick} />} />
-    <Route path='/petsitters' element={<Petsitters />} />
+  const handleAlertAccept = () => setAlertMessage(null)
+
+  return <Context.Provider value={{ alert: setAlertMessage }}>
+    <Routes>
+      <Route path='/*' element={<Home onLogout={handleLogout} />} />
+      <Route path='/login' element={logic.isUserLoggedIn() ? <Navigate to='/' /> : <Login onLogin={handleLogin} onRegisterClick={handleRegisterClick} />} />
+      <Route path='/register' element={logic.isUserLoggedIn() ? <Navigate to='/' /> : <Register onRegister={handleRegister} onLoginClick={handleLoginClick} />} />
+      <Route path='/contact' element={<Contact onRegisterPetsitterClick={handleRegisterClick} />} />
+      <Route path='/petsitters' element={<Petsitters />} />
+    </Routes>
 
-  </Routes>
+    {alertMessage && <Alert message={alertMessage} onAccept={handleAlertAccept} />}
+  </Context.Provider>
 }
diff --git a/staff/tatiana-garcia/project/app/view/common/Alert.jsx b/staff/tatiana-garcia/project/app/view/common/Alert.jsx
@@ -4,14 +4,14 @@ import Paragraph from '../library/Paragraph'
 
 export default function Alert({ message, onAccept }) {
     return <>
-        <Container classname="fixed flex  w-screen h-screen bg-black opacity-50">
+        <Container className='fixed w-screen top-0 h-screen bg-black opacity-50'>
         </Container>
 
-        <Container className="fixed w-screen top-0 h-screen flex items-center justify-center">
-            <Container className="p-4 border bg-white dark:bg-black dark:text-white flex-col">
+        <Container className='fixed w-screen top-0 h-screen flex items-center justify-center'>
+            <Container className='p-4 border bg-white dark:bg-black dark:text-white flex-col'>
                 <Paragraph>{message}</Paragraph>
                 <Button onClick={onAccept}>Accept</Button>
             </Container>
-        </Container >
+        </Container>
     </>
 }
diff --git a/staff/tatiana-garcia/project/app/view/common/Confirm.jsx b/staff/tatiana-garcia/project/app/view/common/Confirm.jsx
@@ -4,10 +4,11 @@ import Paragraph from '../library/Paragraph'
 
 export default function Confirm({ message, onAccept, onCancel }) {
     return <>
-        <Container className="fixed w-screen top-0 h-screen bg-black opacity-60"></Container>
+        <Container className='fixed w-screen top-0 h-screen bg-black opacity-50'>
+        </Container>
 
-        <Container className="fixed w-screen top-0 h-screen flex items-center justify-center">
-            <Container className="p-4 border bg-white flex-col">
+        <Container className='fixed w-screen top-0 h-screen flex items-center justify-center'>
+            <Container className='p-4 border bg-white dark:bg-black dark:text-white flex-col'>
                 <Paragraph>{message}</Paragraph>
                 <Button onClick={onCancel}>Cancel</Button>
                 <Button onClick={onAccept}>Ok</Button>

diff --git a/staff/tatiana-garcia/project/app/view/login/index.jsx b/staff/tatiana-garcia/project/app/view/login/index.jsx
@@ -1,4 +1,6 @@
 import { useNavigate } from 'react-router-dom'
+import useContext from '../context.js'
+
 import logic from '../../logic/index.js'
 
 import Header from '../home/Header.jsx'
@@ -17,6 +19,7 @@ import { errors } from '../../../com/index.js'
 const { NotFoundError, CredentialsError } = errors
 
 export default function Login({ onLogin, onRegisterClick }) {
+    const { alert } = useContext()
 
     const handleLoginSubmit = event => {
         event.preventDefault()
@@ -62,23 +65,29 @@ export default function Login({ onLogin, onRegisterClick }) {
         <main className='bg-teal-100 h-screen flex flex-col items-center justify-center gap-4 text-[1.1rem]'>
 
             <Container className='p-6 bg-white rounded-[50px] shadow-md w-full max-w-sm'>
-                <Heading className='text-center text-xl font-bold mb-4'>Login</Heading>
+                <Heading className='text-center mb-6 text-2xl font-bold'>Login</Heading>
 
-                <Form onSubmit={handleLoginSubmit} className='text-lg bg-white p-3 rounded-[50px] shadow-xl text-center flex-col'>
+                <Form onSubmit={handleLoginSubmit} className='text-lg bg-white p-3 rounded-[50px] text-center flex-col'>
                     <Container className='mb-4'>
                         <Label className='block text-sm font-medium text-gray-700' htmlFor='username-input'>Nombre de usuario</Label>
-                        <Input className='mt-1 p-2 w-full border border-gray-300 rounded-md' type='text' id='username-input' name='username' placeholder='nombre de usuario' />
+                        <Input className='mt-1 p-2 w-full border border-gray-400 rounded-md' type='text' id='username-input' name='username' placeholder='nombre de usuario' />
                     </Container>
 
                     <Container className='mb-6'>
                         <Label className='block text-sm font-medium text-gray-700' htmlFor='password-input'>Contraseña</Label>
-                        <Input className='mt-1 p-2 w-full border border-gray-300 rounded-md' type='password' id='password-input' name='password' placeholder='contraseña' />
+                        <Input className='mt-1 p-2 w-full border border-gray-400 rounded-md' type='password' id='password-input' name='password' placeholder='contraseña' />
+                    </Container>
+
+                    <Container className='text-center'>
+                        <Button className='w-36 font-bold bg-green-100 text-black p-2 rounded-full hover:bg-green-200 transition duration-200' type='submit'>Login</Button>
                     </Container>
 
-                    <Button className='flex-col' type='submit'>Login</Button>
                 </Form>
 
-                <Link className='text-sm' onClick={handleRegisterClick}>¿Eres nuevo/a? Regístrate</Link>
+                <Container className='text-center  pb-4 pt-4'>
+                    <Link className='text-bold text-teal-600 hover:text-teal-900' onClick={handleRegisterClick}>¿Eres nuevo/a? Regístrate</Link>
+                </Container>
+
 
                 <Footer defaultTab={'login'} />
 

diff --git a/staff/tatiana-garcia/project/app/view/register/index.jsx b/staff/tatiana-garcia/project/app/view/register/index.jsx
@@ -8,7 +8,11 @@ import Footer from '../home/Footer'
 import Heading from '../library/Heading'
 import Header from '../home/Header'
 
+import useContext from '../context'
+
 export default function Register({ onRegister, onLoginClick }) {
+    const { alert } = useContext()
+
     const handleRegisterSubmit = event => {
         event.preventDefault()
 
@@ -36,7 +40,7 @@ export default function Register({ onRegister, onLoginClick }) {
                 .catch(error => {
                     console.error(error)
 
-                    alert(error.message)
+                    alert(message)
                 })
         } catch (error) {
             console.error(error)