Saltar al contenido
MDG devlog
Developing since 2020

Etiqueta: Framework

Categorías
Temporada 1

Log 1.2: Creando usuarios y diseñando la página principal

  • Autor de la entrada Por mdgdev
  • Fecha de la entrada 16 de noviembre de 2020
  • No hay comentarios en Log 1.2: Creando usuarios y diseñando la página principal

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:

https://chakra-ui.com/

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.

  • Etiquetas Chakra, CSS, devlog, diseño, Framework, frontend, header, logo, main, React, temporada 1, Type, TypeScript

Entradas recientes

  • SleepTracker 0.1-b
  • SleepTracker 0.1-a
  • RecipeApp: Log 1
  • Trabajando en miniproyectos
  • Client-side rendering vs Server-side rendering

Categorías

  • Desarrollo web
  • DSM5Tool
  • General
  • Heres I
  • Temporada 0
  • Temporada 1
  • Temporada 2

Archivos

  • diciembre 2021
  • noviembre 2021
  • mayo 2021
  • marzo 2021
  • febrero 2021
  • enero 2021
  • noviembre 2020
  • octubre 2020

Meta

  • Acceder
  • Feed de entradas
  • Feed de comentarios
  • WordPress.org

© 2022 MDG devlog

Funciona con WordPress

Ir arriba ↑ Subir ↑