Implement Sign In page

client-mvp-04/src/components/common/button/button.js

@@ -1,9 +1,23 @@
 import React from 'react';
 import './button.scss';
 
-const Button = ({ content, className }) => {
+const Button = ({
+  content,
+  className,
+  disabled,
+  onClick,
+  type,
+  dataTestid,
+}) => {
+  if (!dataTestid) dataTestid = 'button';
   return (
-    <button data-testid="button" className={className}>
+    <button
+      data-testid={dataTestid}
+      className={className}
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+    >
       {content}
     </button>
   );

client-mvp-04/src/components/common/errorMessage/errorMessage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ErrorMessage = ({ content }) => {
+  return (
+    <p data-testid="error-message" className="error-message">
+      {content}
+    </p>
+  );
+};
+
+export default ErrorMessage;

client-mvp-04/src/components/common/errorMessage/errorMessage.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ErrorMessage from './errorMessage';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('Error Message', () => {
+  test('Should render with text content and className', () => {
+    render(<ErrorMessage content={'Test content'} />, {
+      wrapper: BrowserRouter,
+    });
+    expect(screen.getByTestId('error-message')).toBeInTheDocument();
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+    expect(screen.getByTestId('error-message')).toHaveClass('error-message');
+  });
+});

client-mvp-04/src/components/common/input/input.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Input = ({ placeholder, type, onChange, autoComplete, dataTestid }) => {
+  if (!dataTestid) dataTestid = 'default-input';
+  return (
+    <div className="text-field-container">
+      <input
+        data-testid={dataTestid}
+        type={type}
+        name="default-input"
+        placeholder={placeholder}
+        onChange={onChange}
+        autoComplete={autoComplete}
+      />
+    </div>
+  );
+};
+
+export default Input;

client-mvp-04/src/components/common/input/input.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Input from './input';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('DefaultInput', () => {
+  test('Should render with props', () => {
+    const { getByTestId } = render(
+      <Input type="text" placeholder="Some text" />,
+      { wrapper: BrowserRouter }
+    );
+
+    expect(screen.getByTestId('default-input')).toBeInTheDocument();
+    expect(getByTestId('default-input')).toHaveAttribute('type', 'text');
+    expect(getByTestId('default-input')).toHaveAttribute(
+      'name',
+      'default-input'
+    );
+    expect(getByTestId('default-input')).toHaveAttribute(
+      'placeholder',
+      'Some text'
+    );
+  });
+});

client-mvp-04/src/components/common/title/title.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './title.scss';
+
+const Title = () => {
+  return (
+    <div data-testid="title" className="title-container">
+      <h1 className="title-short">VRMS</h1>
+      <h2 className="title-long">Volunteer Relationship Management System</h2>
+    </div>
+  );
+};
+
+export default Title;

client-mvp-04/src/components/common/title/title.scss

@@ -0,0 +1,39 @@
+@import "../../../sass/variables";
+
+.title-container {
+  margin-left: 35px;
+  text-align: left;
+  text-transform: uppercase;
+
+  .title-short {
+    font-size: 72px;
+  }
+
+  .title-long {
+    margin-top: 26px;
+    line-height: 27px;
+    font-weight: $font-regular;
+  }
+}
+
+@media (max-width: 400px) {
+  .title-container {
+    .title-long {
+      margin-top: 18px;
+    }
+
+    .title-short {
+      font-size: 68px;
+    }
+  }
+}
+
+@media (max-width: 350px) {
+  .title-container {
+    margin-left: 25px;
+
+    .title-long {
+      margin: 15px;
+    }
+  }
+}

client-mvp-04/src/components/common/title/title.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import Title from './title';
+
+describe('ProjectTitle', () => {
+  test('Should render component with name of project', () => {
+    render(<Title />, { wrapper: BrowserRouter });
+    expect(screen.getByTestId('title')).toBeInTheDocument();
+    const h1 = screen.getByText(/VRMS/i);
+    const h2 = screen.getByText(/Volunteer Relationship Management System/i);
+    expect(h1).toBeInTheDocument();
+    expect(h2).toBeInTheDocument();
+  });
+});

client-mvp-04/src/components/home/home.js

@@ -2,15 +2,15 @@ import React from 'react';
 import './home.scss';
 import Button from '../common/button/button';
 import RedirectLink from '../common/link/link';
+import Title from '../common/title/title';
 
 const Home = () => {
   return (
     <section data-testid="home" className="home-container">
-      <h1 className="home-name">VRMS</h1>
-      <h2 className="home-title">Volunteer Relationship Management System</h2>
+      <Title />
 
       <RedirectLink
-        path={'/page'}
+        path={'/login'}
         content={<Button content={`Sign in`} className={`home-button`} />}
         linkKey={'sign-in-link'}
       />

client-mvp-04/src/components/home/home.scss

@@ -1,53 +1,42 @@
 @import "../../sass/variables";
 
 .home-container {
-  padding: 40px 90px;
-
-  .home-name {
-    font-size: 72px;
-  }
-
-  .home-title {
-    margin: 26px 0 83px;
-    line-height: 27px;
-    font-weight: $font-regular;
-    text-align: left;
-    text-transform: uppercase;
-  }
+  padding: 40px 60px;
 
   .home-button {
     padding: 6px 40px;
+    margin-top: 83px;
   }
+}
 
-  .home-text {
-    display: flex;
-    justify-content: center;
-    font-size: 15px;
-    font-weight: $font-bold;
+@media (max-height: 896px) {
+  .home-container {
+    height: calc(100vh - 160px);
   }
 }
 
 @media (max-width: 400px) {
   .home-container {
-    padding: 40px 70px;
-  }
+    padding: 25px 52px;
 
-  .home-container .home-title {
-    margin: 18px 0 40px;
+    .home-button {
+      margin-top: 60px;
+    }
   }
+}
 
-  .home-container .home-name {
-    font-size: 68px;
-    text-align: left;
+@media (max-width: 374px) {
+  .home-container {
+    height: calc(100vh - 180px);
   }
 }
 
 @media (max-width: 350px) {
   .home-container {
-    padding: 15px 52px;
-  }
+    padding: 15px 25px;
 
-  .home-container .home-title {
-    margin: 15px 0 35px;
+    .home-button {
+      margin-top: 35px;
+    }
   }
 }

client-mvp-04/src/components/home/home.test.js

@@ -31,9 +31,9 @@ describe('Home', () => {
       </Router>
     );
     expect(screen.getByText('Sign in')).toBeInTheDocument();
-    expect(screen.getAllByTestId('link')[0]).toHaveAttribute('href', '/page');
+    expect(screen.getAllByTestId('link')[0]).toHaveAttribute('href', '/login');
     fireEvent.click(screen.getAllByTestId('link')[0]);
-    expect(history.location.pathname).toBe('/page');
+    expect(history.location.pathname).toBe('/login');
   });
 
   test('Should navigate to dummy page after click on `Create account` button', () => {

client-mvp-04/src/components/login/login.scss

@@ -0,0 +1,67 @@
+@import "../../sass/variables";
+
+.login-container {
+  padding: 40px 60px;
+
+  .text-field-container {
+    margin-top: 76px;
+  }
+
+  .login-button {
+    margin: 50px 10px 20px auto;
+  }
+
+  .error-message {
+    margin: 25px 10px 10px;
+
+    .redirect-link {
+      color: $link-accent-color;
+    }
+  }
+}
+
+@media (max-height: 896px) {
+  .login-container {
+    height: calc(100vh - 160px);
+  }
+}
+
+@media (max-width: 400px) {
+  .login-container {
+    padding: 25px 52px;
+
+    .login-button {
+      margin: 40px 0 20px auto;
+    }
+
+    .error-message {
+      margin: 25px 0 10px;
+    }
+
+    .text-field-container {
+      margin-top: 55px;
+    }
+  }
+}
+
+@media (max-width: 374px) {
+  .login-container {
+    height: calc(100vh - 180px);
+  }
+}
+
+@media (max-width: 350px) {
+  .login-container {
+    padding: 15px 25px;
+
+    .text-field-container {
+      margin-top: 25px;
+    }
+    .login-button {
+      margin: 15px 0 10px auto;
+    }
+    .error-message {
+      margin: 20px 0 5px;
+    }
+  }
+}