Skip to content

Commit

Permalink
Create settings page b00tc4mp#99
Browse files Browse the repository at this point in the history
  • Loading branch information
TatiGV committed Aug 18, 2024
1 parent 8bb2fcf commit c76af83
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 6 deletions.
4 changes: 3 additions & 1 deletion staff/tatiana-garcia/project/app/view/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Context } from './context.js'

import logic from '../logic/index.js'
import Petsitters from './pettsiters/index.jsx'
import Settings from './settings/index.jsx'

export default function App() {
const navigate = useNavigate()
Expand Down Expand Up @@ -41,10 +42,11 @@ export default function App() {
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='/login' element={logic.isUserLoggedIn() ? <Navigate to='/settings' /> : <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 />} />
<Route path='/settings' element={<Settings onLogoutClick={handleLogout} />} />
</Routes>

{alertMessage && <Alert message={alertMessage} onAccept={handleAlertAccept} />}
Expand Down
4 changes: 3 additions & 1 deletion staff/tatiana-garcia/project/app/view/contact/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ export default function Contact({ onRegisterPetsitterClick }) {
Si eres una guardería y quieres ofrecer tus servicios, dale click al siguiente botón y regístrate como guardería.
</Paragraph>

<Link className='flex font-semibold border boder-[1px] border-black justify-center rounded-xl text-[length:inherit] bg-teal-100 ' onClick={handleRegisterPetsitterClick}>Regístrate como guardería</Link>
<Container className='text-center pb-8 pt-2'>
<Link className='w-36 font-bold bg-green-100 text-black p-2 rounded-full hover:bg-green-200 transition duration-200' onClick={handleRegisterPetsitterClick}>Regístrate como guardería</Link>
</Container>
</Container>
</main>

Expand Down
5 changes: 2 additions & 3 deletions staff/tatiana-garcia/project/app/view/login/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const { NotFoundError, CredentialsError } = errors

export default function Login({ onLogin, onRegisterClick }) {
const { alert } = useContext()
const navigate = useNavigate()

const handleLoginSubmit = event => {
event.preventDefault()
Expand All @@ -41,7 +42,7 @@ export default function Login({ onLogin, onRegisterClick }) {
let message = error.message

if (error instanceof NotFoundError || error instanceof CredentialsError)
message = 'incorrect username and/or password'
message = 'nombre de usuario y/o contraseña incorrectos'

alert(message)
})
Expand All @@ -58,8 +59,6 @@ export default function Login({ onLogin, onRegisterClick }) {
onRegisterClick()
}

const navigate = useNavigate()

return <>
<Header />
<main className='bg-teal-100 h-screen flex flex-col items-center justify-center gap-4 text-[1.1rem]'>
Expand Down
52 changes: 51 additions & 1 deletion staff/tatiana-garcia/project/app/view/pettsiters/index.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,63 @@
import { useNavigate } from 'react-router-dom'

import Header from '../home/Header'
import Container from '../library/Container'
import Footer from '../home/Footer'

export default function Petsitters() {

return <>
<Header />
<main className='bg-teal-100 h-screen flex flex-col items-center justify-center gap-4 text-[1.1rem]'>
<main className='bg-teal-100 h-screen flex flex-col items-center justify-start gap-4 text-[1.1rem]'>
<Container className='mt-20'>
<select name='city' id='city-input'>
<option value=''>Seleccione una ciudad</option>
<option value='madrid'>Madrid</option>
<option value='barcelona'>Barcelona</option>
<option value='valencia'>Valencia</option>
<option value='sevilla'>Sevilla</option>
<option value='zaragoza'>Zaragoza</option>
<option value='malaga'>Málaga</option>
<option value='murcia'>Murcia</option>
<option value='palma'>Palma</option>
<option value='las_palmas'>Las Palmas de Gran Canaria</option>
<option value='bilbao'>Bilbao</option>
<option value='alicante'>Alicante</option>
<option value='cordoba'>Córdoba</option>
<option value='valladolid'>Valladolid</option>
<option value='vigo'>Vigo</option>
<option value='gijon'>Gijón</option>
<option value='l_hospitalet'>L'Hospitalet de Llobregat</option>
<option value='vitoria'>Vitoria-Gasteiz</option>
<option value='la_coruna'>La Coruña</option>
<option value='granada'>Granada</option>
<option value='elche'>Elche</option>
<option value='oviedo'>Oviedo</option>
<option value='badalona'>Badalona</option>
<option value='sabadell'>Sabadell</option>
<option value='cartagena'>Cartagena</option>
<option value='terrassa'>Terrassa</option>
<option value='jerez'>Jerez de la Frontera</option>
<option value='santander'>Santander</option>
<option value='almeria'>Almería</option>
<option value='burgos'>Burgos</option>
<option value='albacete'>Albacete</option>
<option value='san_sebastian'>San Sebastián</option>
<option value='salamanca'>Salamanca</option>
<option value='logrono'>Logroño</option>
<option value='lleida'>Lleida</option>
<option value='marbella'>Marbella</option>
<option value='cadiz'>Cádiz</option>
<option value='huelva'>Huelva</option>
<option value='tarragona'>Tarragona</option>
<option value='leon'>León</option>
<option value='jaen'>Jaén</option>
<option value='ourense'>Ourense</option>
<option value='algeciras'>Algeciras</option>
<option value='gerona'>Gerona</option>
<option value='lugo'>Lugo</option>
</select>
</Container>


</main>
Expand Down
108 changes: 108 additions & 0 deletions staff/tatiana-garcia/project/app/view/settings/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import logic from '../../logic'

import Container from '../library/Container'
import Label from '../library/Label'
import Input from '../library/Input'
import Link from '../library/Link'
import Footer from '../home/Footer'
import Heading from '../library/Heading'
import Header from '../home/Header'

import useContext from '../context'

export default function Settings({ onLogoutClick }) {
const { alert } = useContext()

// const handleRegisterSubmit = event => {
// event.preventDefault()

// const form = event.target

// const imageInput = form['image-input']
// const nameInput = form['name-input']
// const surnameInput = form['surname-input']
// const emailInput = form['email-input']
// const usernameInput = form['username-input']
// const passwordInput = form['password-input']
// const passwordRepeatInput = form['password-repeat-input']

// const image = imageInput.value
// const name = nameInput.value
// const surname = surnameInput.value
// const email = emailInput.value
// const username = usernameInput.value
// const password = passwordInput.value
// const passwordRepeat = passwordRepeatInput.value

// try {
// logic.registerUser(image, name, surname, email, username, password, passwordRepeat)
// .then(() => onRegister())
// .catch(error => {
// console.error(error)

// alert(message)
// })
// } catch (error) {
// console.error(error)

// alert(error.message)
// }
// }

const handleLogoutClick = event => {
event.preventDefault()

onLogoutClick()
}

return <>
<Header />
<main className='h-screen flex flex-col mb-32'>
<Container className=' bg-teal-100 pt-8 pb-8 text-start'>
<Heading className='text-center mb-6 pt-8 text-2xl font-bold '>Editar usuario</Heading>

<form onSubmit={handleLogoutClick} className='bg-white rounded-[50px] p-6 space-y-2'>
<Container>
<Label className='block text-base font-semibold text-gray-700' htmlFor='image-input'>Imagen</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' id='image-input' type='text' placeholder='https://' />
</Container>

<Container>
<Label className='block text-base font-semibold text-gray-700' htmlFor='name-input'>Nombre</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' type='text' id='name-input' name='name' placeholder='nombre' />
</Container>

<Container>
<Label className='block text-base font-semibold text-gray-700' htmlFor='surname-input'>Apellidos</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' type='text' id='surname-input' name='surname' placeholder='apellidos' />
</Container>

<Container>
<Label className='block text-base font-semibold text-gray-700' htmlFor='email-input'>Email</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' type='email' id='email-input' name='email' placeholder='email' />
</Container>

<Container>
<Label className='block text-base font-semibold text-gray-700' htmlFor='username-input'>Nombre de usuario</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' type='text' id='username-input' name='username' placeholder='nombre de usuario' />
</Container>

<Container>
<Label className='block text-base font-semibold text-gray-700' htmlFor='password-input'>Contraseña</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' type='password' name='password' id='password-input' placeholder='contraseña' />
</Container>

<Container className='pb-2'>
<Label className='block text-base font-semibold text-gray-700' htmlFor='password-repeat-input'>Repite contraseña</Label>
<Input className='w-56 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500' type='password' id='password-repeat-input' name='password-repeat' placeholder='repite 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'>{'Guardar cambios'}</button>
</Container>
</form>
<Footer />
</Container>
</main>
</>
}

0 comments on commit c76af83

Please sign in to comment.