Merge pull request #49 from manh-t/feature/8-integrate-sign-in-feature

[#8] [Integrate] As a user, I can see the Sign In page

package.json

@@ -3,15 +3,17 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "1.9.5",
+    "@types/lodash": "4.14.195",
     "axios": "1.4.0",
     "classnames": "2.3.2",
     "lodash": "4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-redux": "8.1.0",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
-    "sass": "1.49.11",
-    "@types/lodash": "4.14.195"
+    "sass": "1.49.11"
   },
   "scripts": {
     "start": "react-scripts -r @cypress/instrument-cra start",

src/components/Alert/index.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import Alert from '.';
+
+describe('Alert', () => {
+  const errors = ['Error 1'];
+  const dataTestId = 'alert';
+
+  it('renders an alert and its component', () => {
+    render(<Alert errors={errors} data-test-id={dataTestId} />);
+
+    const alert = screen.getByTestId(dataTestId);
+
+    expect(alert).toBeVisible();
+    expect(alert).toHaveTextContent('Error 1');
+  });
+});

src/components/Alert/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { ReactComponent as AlertIcon } from 'assets/images/icons/alert.svg';
+
+interface AlertProps {
+  errors: string[];
+  'data-test-id'?: string;
+}
+const Alert = ({ errors, ...rest }: AlertProps): JSX.Element => (
+  <div role="alert" {...rest}>
+    <div className="bg-black-raisin bg-opacity-60 rounded-xl px-4 py-4 flex flex-row">
+      <AlertIcon className="mr-[19px] text-white" />
+      <div>
+        <p className="text-small text-white font-extrabold mb-2">Error</p>
+        <ul className="list-disc list-inside text-white opacity-60 text-xSmall">
+          {errors.map((error, index) => (
+            <li key={`${index}${error}`}>{error}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  </div>
+);
+
+export default Alert;

src/components/ElevatedButton/index.tsx

@@ -7,12 +7,12 @@ interface ElevatedButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
   isFullWidth: boolean;
 }
 
-const ElevatedButton = ({ children, isFullWidth, ...attributes }: ElevatedButtonProps): JSX.Element => {
+const ElevatedButton = ({ children, isFullWidth, ...rest }: ElevatedButtonProps): JSX.Element => {
   const DEFAULT_CLASS_NAMES =
     'bg-white text-black-chinese font-bold text-regular tracking-survey-tight rounded-[10px] focus:outline-none focus:shadow-outline h-14';
 
   return (
-    <button type="button" className={classNames(DEFAULT_CLASS_NAMES, { 'w-full': isFullWidth })} {...attributes}>
+    <button type="button" className={classNames(DEFAULT_CLASS_NAMES, { 'w-full': isFullWidth })} {...rest}>
       {children}
     </button>
   );

src/components/LoadingDialog/index.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import LoadingDialog from '.';
+
+describe('LoadingDialog', () => {
+  const dataTestId = 'loading-dialog';
+
+  it('renders a loading dialog component', () => {
+    render(<LoadingDialog data-test-id={dataTestId} />);
+
+    const loadingDialog = screen.getByTestId(dataTestId);
+
+    expect(loadingDialog).toBeVisible();
+  });
+});

src/components/LoadingDialog/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface LoadingDialogProps {
+  'data-test-id'?: string;
+}
+
+const LoadingDialog = (htmlAttributes: LoadingDialogProps): JSX.Element => {
+  return (
+    <div className="w-full h-full bg-black bg-opacity-60 fixed top-0 right-0" {...htmlAttributes}>
+      <div
+        className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-white absolute z-[1000] left-1/2 top-1/2 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+        role="status"
+      >
+        <span className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]">
+          Loading...
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingDialog;

src/components/TextInput/index.tsx

@@ -11,6 +11,7 @@ type TextInputProps = {
     required?: boolean;
     placeholder?: string;
     'data-test-id'?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
   };
   className?: string;
 };
@@ -34,6 +35,7 @@ const TextInput = ({ label, labelDataTestId, inputAttributes, className }: TextI
         {...inputAttributes}
         className={classNames(DEFAULT_CLASS_NAMES, className)}
         placeholder={inputAttributes.placeholder}
+        onChange={inputAttributes.onChange}
       />
     </div>
   );