En la Fase 1 del proyecto Heres quiero centrarme en el proceso de acceso e identificación de los usuarios.
La idea es implementar un sistema de Login que utilice JWT (JSON Web Token) y que, además, identifique el tipo de usuario que accede a la plataforma en función de su nombre de usuario.
Los types definidos son:
export enum Rol {
Profesional = "profesional",
Paciente = "paciente"
}
export enum Gender {
Masculino = "hombre",
Femenino = "mujer"
}
export type Usuario = {
username: string;
email: string;
name: string;
surname1: string;
surname2?: string;
gender: Gender;
birthDate: string;
type: Rol;
}El diseño de la página principal, por ahora, lo dejaremos lo más sencillo posible, puesto que lo que buscamos es funcionalidad en estas primeras fases del desarrollo.
Lo importante es que la propia Landing Page está definida por componentes de tal forma que tenemos, por un lado, el Header:
import { FC } from "react";
// import Link from 'next/link'
import { Center, Box, Flex, Heading, Button, Spacer } from "@chakra-ui/react";
import Logo from "../ui/Logo";
// import { MenuIcon, CloseIcon } from "../ui/Icons";
const Header: FC = (props) => {
return(
<Flex
as="nav"
align="center"
justify="space-between"
wrap="wrap"
padding="1.0rem"
bg="teal.500"
color="white"
{...props}
>
<Box p="1">
<Flex>
<Logo ></Logo>
<Center>
<Heading size="md" pl="10px">Heres I - System </Heading>
</Center>
</Flex>
</Box>
<Spacer ></Spacer>
<Box mr="10px">
<Button colorScheme="teal" mr="4" size="sm" >
Sign Up
</Button>
<Button colorScheme="teal" size="sm">Log in</Button>
</Box>
</Flex>
);
}
export default Header;Y, por otro, el contenido:
import {FC} from "react";
import { Link, Box, Button, Flex, Image, Heading, Stack, Text } from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";
interface MainProps {
title: String;
subtitle: String;
image: String;
ctaLink: String;
ctaText: String;
}
const Main: FC = ({ title, subtitle, image, ctaLink, ctaText, ...rest}) => {
const green = {
color: "#2C7A7B"
}
return(
<flex align="center" justify="{{" base:="" "center",="" md:="" "space-around",="" xl:="" "space-between"}}="" direction="{{" "column-reverse",="" md:"row"}}="" wrap="nowrap" minh="70vh" px="{8}" mb="{16}" {...rest}="">
<stack w="{{" base:="" "80%",="" md:="" "40%"}}="" align="{["center"," "center",="" "flex-start",="" "flex-start"]}="">
<heading as="h1" size="4xl" fontweight="bold" color="primary.800" textalign="{["center"," "center",="" "left",="" "left"]}="">
{title} <span style="{green}">{subtitle}</span>
</heading>
<text fontsize="3xl" fontweight="bold" opacity="0.5" color="teal.800">
Sin tener que preocuparte del cómo
</text>
<flex minh="10vh" wrap="nowrap">
<link to="{ctaLink}">
<button borderradius="8px" mt="10px" py="4" px="4" mr="10px" lineheight="1" size="md" righticon="{<ChevronRightIcon"></button>}
>
{ctaText}
<link to="#info">
<button borderradius="8px" bordercolor="teal.200" bgcolor="teal.600" color="white" mt="10px" py="4" px="4" lineheight="1" size="md" righticon="{<ChevronRightIcon"></button>}
>
Más información
</flex>
</stack>
<box w="{{" base:="" "80%",="" sm:="" "60%",="" md:="" "50%"="" }}="" mb="{{" 12,="" 1="">
<img src="{image}" size="100%">
</box>
</flex>
)
}
export default Main;He empezado a utilizar un framework de CSS que utiliza React Components y que es tremendamente sencillo de utilizar:
El siguiente devlog lo dedicaré exclusivamente al formulario de Login, que tengo que desarrollar tanto a nivel de diseño como funcional y dejar listo para cuando la base de datos esté disponible.