diff options
Diffstat (limited to 'src/routes/account')
| -rw-r--r-- | src/routes/account/account.tsx | 2 | ||||
| -rw-r--r-- | src/routes/account/edit.tsx | 40 |
2 files changed, 41 insertions, 1 deletions
diff --git a/src/routes/account/account.tsx b/src/routes/account/account.tsx index 8458285..8a04427 100644 --- a/src/routes/account/account.tsx +++ b/src/routes/account/account.tsx @@ -29,7 +29,7 @@ export default function Account() { <span className="mx-1 field_name">Correo electrónico:</span> {email} </div> <div> - <a type="button" className="button text-white hover:bg-blue-300 hover:text-gray focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" href="#"> + <a type="button" className="button text-white hover:bg-blue-300 hover:text-gray focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" href="/account/edit"> Editar </a> </div> diff --git a/src/routes/account/edit.tsx b/src/routes/account/edit.tsx new file mode 100644 index 0000000..c2dfcb5 --- /dev/null +++ b/src/routes/account/edit.tsx @@ -0,0 +1,40 @@ +import MainContentLayout from "../../components/main_content_layout"; +import Token from "../../lib/token"; +import { Form, useLoaderData } from "react-router-dom"; +import "../../components/stylesheets/shared.css"; + +export function EditAccount() { + const account = useLoaderData()[0].data.data.attributes; + const token = new Token(); + + return( + <> + <MainContentLayout> + <div className="w-4/5 my-6"> + <h1 className="my-6 text-3xl"> + Editar cuenta + </h1> + <Form method="post" id="account-form"> + <div className="mb-6"> + <label className="block mb-2 text-lg text-gray-900 dark:text-white">Correo electrónico</label> + <input type="email" id="email" name="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={account.email}/> + </div> + <div className="mb-6"> + <label className="block mb-2 text-lg text-gray-900 dark:text-white">Nombre</label> + <input type="text" id="first_name" name="first_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={account.first_name}/> + </div> + <div className="mb-6"> + <label className="block mb-2 text-lg text-gray-900 dark:text-white">Apellido</label> + <input type="text" id="last_name" name="last_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder={account.last_name}/> + </div> + <div className="mb-6"> + <label className="block mb-2 text-lg text-gray-900 dark:text-white">Contraseña</label> + <input type="password" id="password" name="password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/> + </div> + <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Enviar</button> + </Form> + </div> + </MainContentLayout> + </> + ); +}
\ No newline at end of file |