feature/#35-Create-a-first-step-to-log-in

intranet/src/core/router/app-router.component.tsx

@@ -1,6 +1,6 @@
 import { HashRouter as Router, Route, Routes } from 'react-router-dom';
 
-import { SignUpScene } from '#scenes';
+import { SignUpScene, SignInScene } from '#scenes';
 
 import { pathRoutes } from './routes';
 
@@ -9,6 +9,7 @@ export const AppRouter = () => {
  <Router>
  <Routes>
  <Route path={pathRoutes.root} element={<SignUpScene />} />
+ <Route path={pathRoutes.signIn} element={<SignInScene />} />
  </Routes>
  </Router>
  );

intranet/src/core/router/routes.ts

@@ -1,9 +1,11 @@
 interface PathRoutes {
  root: string;
+ signIn: string;
 }
 
 export const pathRoutes: PathRoutes = {
  root: '/',
+ signIn: '/sign-in',
 };
 
 interface Routes extends PathRoutes {}

intranet/src/layouts/index.ts

@@ -1 +1,3 @@
 export * from './sign-up.layout';
+export * from './sign-in/sign-in.layout';
+export * from './sign-in/sign-in.layout.styles';

intranet/src/layouts/sign-in/sign-in.layout.styles.ts

@@ -0,0 +1,15 @@
+import { css } from '@emotion/css';
+
+import { mainTheme } from '#core/theme';
+
+export const container = css`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin: 0 auto;
+ min-height: 100vh;
+ width: 90%;
+ max-width: 380px;
+ gap: ${mainTheme.spacing(2)};
+`;

intranet/src/layouts/sign-in/sign-in.layout.tsx

@@ -0,0 +1,8 @@
+import * as classes from './sign-in.layout.styles';
+
+interface Props extends React.PropsWithChildren {}
+
+export const SignInLayout: React.FC<Props> = props => {
+ const { children } = props;
+ return <div className={classes.container}>{children}</div>;
+};

intranet/src/pods/index.ts

@@ -1,2 +1,3 @@
 export * from './temporal';
 export * from './sign-up';
+export * from './sign-in';

intranet/src/pods/sign-in/index.ts

@@ -0,0 +1 @@
+export * from './sign-in.pod';

intranet/src/pods/sign-in/sign-in.component.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import { mainTheme } from '#core/theme/main.theme.js';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import FormControl from '@mui/material/FormControl';
+import Link from '@mui/material/Link';
+
+interface Props {
+ handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+}
+
+export const SignInComponent: React.FC<Props> = props => {
+ const { handleSubmit } = props;
+ const spacing = mainTheme.spacing;
+
+ return (
+ <>
+ <Box
+ sx={{
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ }}
+ >
+ <Typography
+ component="h1"
+ variant="h5"
+ sx={{
+ mb: spacing(4),
+ }}
+ >
+ Acceder
+ </Typography>
+
+ <FormControl
+ component="form"
+ onSubmit={handleSubmit}
+ noValidate
+ sx={{
+ width: '100%',
+ }}
+ >
+ <TextField
+ required
+ fullWidth
+ id="email"
+ label="Email"
+ name="email"
+ autoComplete="email"
+ autoFocus
+ sx={{
+ mb: spacing(2),
+ }}
+ />
+
+ <TextField
+ required
+ fullWidth
+ id="password"
+ label="Contraseña"
+ name="password"
+ autoComplete="current-password"
+ sx={{
+ mb: spacing(5),
+ }}
+ />
+
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ sx={{
+ mb: spacing(5),
+ }}
+ >
+ Entrar
+ </Button>
+ </FormControl>
+ <Link href="#" variant="body2">
+ ¿Olvidaste tu contraseña?
+ </Link>
+ </Box>
+ </>
+ );
+};

intranet/src/pods/sign-in/sign-in.pod.tsx

@@ -0,0 +1,14 @@
+import { SignInComponent } from './sign-in.component';
+
+export const SignInPod: React.FC = () => {
+ const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ event.preventDefault();
+ const data = new FormData(event.currentTarget);
+ console.log({
+ email: data.get('email'),
+ password: data.get('password'),
+ });
+ };
+
+ return <SignInComponent handleSubmit={handleSubmit} />;
+};

intranet/src/pods/sign-up/sign-up.component.tsx

@@ -1,4 +1,4 @@
-import { Button, Typography } from '@mui/material';
+import { Button, Typography, Link } from '@mui/material';
 
 import * as classes from './sign-up.styles';
 
@@ -15,6 +15,9 @@ export const SignUpComponent: React.FC = () => {
  </Button>
  <Button variant="contained">Siguiente</Button>
  </div>
+ <Link href="/#sign-in" variant="body2">
+ ¿Ya tienes una cuenta? Sign in
+ </Link>
  </>
  );
 };

intranet/src/scenes/index.ts

@@ -1 +1,2 @@
 export * from './sign-up.scene';
+export * from './sign-in.scene';

intranet/src/scenes/sign-in.scene.tsx

@@ -0,0 +1,10 @@
+import { SignInLayout } from '#layouts';
+import { SignInPod } from '#pods';
+
+export const SignInScene: React.FC = () => {
+ return (
+ <SignInLayout>
+ <SignInPod />
+ </SignInLayout>
+ );
+};