feat(login): add login component (#111)

Author: maximilianoforlenza

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "7.0.3",
+  "version": "7.1.0",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",
@@ -30,6 +30,7 @@
     "hooks",
     "utils",
     "assets",
+    "schemas",
     "index.js",
     "LICENSE.md",
     "README.md",
@@ -41,8 +42,10 @@
   "dependencies": {
     "autoprefixer": "^10.4.21",
     "clsx": "^2.1.1",
+    "formik": "^2.4.6",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.0",

package.json

@@ -0,0 +1,23 @@
+import {getByText} from '@testing-library/react';
+
+import Login from '../../components/Login/index.jsx';
+
+describe('<Login>', () => {
+  let props;
+  const getComponent = () => render(Login, props);
+  beforeEach(() => {
+    props = {
+      title: 'My Application'
+    }
+  })
+
+  it('should display `My Application`', () => {
+    const {container} = getComponent();
+    expect(getByText(container, 'My Application')).toBeInTheDocument();
+  });
+
+  it('should display `Login`', () => {
+    const {container} = getComponent();
+    expect(getByText(container, 'Login')).toBeInTheDocument();
+  });
+});

src/__tests__/components/Login.test.js

@@ -14,6 +14,7 @@ export default function Field({name, label, error, type = 'text', onChange, onBl
       onBlur(event);
     }
   };
+
   return (
     <div className="w-full">
       <label htmlFor={name} className="block text-[17px] text-black text-xl font-medium">
@@ -24,13 +25,13 @@ export default function Field({name, label, error, type = 'text', onChange, onBl
           id={name}
           name={name}
           aria-label={label}
+          {...rest}
           className={`w-full px-4 py-2 border-2 border-gray-400 rounded-lg bg-white focus:outline-none focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 ${
             error ? 'border-error focus:ring-error' : 'border-gray-300 focus:ring-primary'
           } ${disabled ? 'bg-gray-100 cursor-not-allowed' : ''} ${tooltip ? 'pr-10' : ''}`}
           type={type}
           onChange={onChange}
           disabled={disabled}
-          {...rest}
           onBlur={handleBlur}
         />
         {tooltip && (

src/components/Field.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {Field, Formik, Form} from 'formik';
+
+import Button from '../Button.jsx';
+import ErrorMessage from '../ErrorMessage.jsx';
+import TextField from '../Field.jsx';
+import loginSchema from '../../schemas/login';
+
+export default function LoginForm({onLogin, isLoging, error}) {
+  return (
+    <Formik initialValues={{username: '', password: ''}} validationSchema={loginSchema} onSubmit={onLogin}>
+        <Form>
+          <div className="flex flex-col gap-6">
+            <Field name="username">
+              {({field, meta}) => (
+                <TextField 
+                  {...field}
+                  label="Usuario *" 
+                  placeholder="[email protected]"
+                  error={meta.touched && meta.error ? meta.error : null}
+                />
+              )}
+            </Field>
+            <Field name="password">
+              {({field, meta}) => (
+                <TextField 
+                  {...field}
+                  type="password"
+                  label="Contraseña *" 
+                  placeholder="123456"
+                  error={meta.touched && meta.error ? meta.error : null}
+                />
+              )}
+            </Field>
+          <Button
+            type="submit"
+            data-testid="login-button"
+            disabled={isLoging}
+            label="Ingresar"
+          />
+            {error && (
+              <ErrorMessage error={error.status === 401 ? 'Credenciales incorrectas.' : 'Ha ocurrido un error.'}/>
+            )}
+          </div>
+        </Form>
+    </Formik>
+  );
+}

src/components/Login/LoginForm.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import LoginForm from './LoginForm.jsx';
+
+export default function Login({title, onLogin, isLoging, error}) {
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 h-screen">
+        <div
+          className="flex flex-col justify-center items-center text-white p-8"
+          style={{
+            backgroundColor: '#0093E9',
+            background: 'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)'
+          }}
+        >
+          <h1 className="text-5xl font-bold text-center uppercase">{title}</h1>
+        </div>
+        <div className="flex flex-col gap-3 justify-center p-3">
+          <h2 className="font-bold text-2xl">Login</h2>
+          <LoginForm isLoging={isLoging} onLogin={onLogin} error={error}/>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/Login/index.jsx

@@ -4,6 +4,7 @@ export {default as Field} from './Field.jsx';
 export {default as Footer} from './Footer.jsx';
 export {default as Header} from './Header/index.jsx';
 export {default as Loading} from './Loading.jsx';
+export {default as Login} from './Login/index.jsx';
 export {default as Modal} from './Modal/index.jsx';
 export {default as Pagination} from './Pagination.jsx';
 export {default as Select} from './Select.jsx';