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>
+  );
+};