Description

This PR introduces user functionality test

Type of change

[ ] Bug fix (Non breaking change that fixes an existing issue)

[x] New Feature (Non breaking change which adds funcitonality)

[ ] Breaking change (New feature that removes or causes an existing feature not to work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

[x] Unit tests

[x] Component Tests

[x] Integration Tests

How Should This Be Manually tested:

1. Clone this repo.

2. Run yarn install

3. Run yarn dev

Checklist:

[x] My code follows all the styles and conventions outlined for this project

[x] I have linted my code before submission

[x] I have made my corresponding changes to the documentation

[x] My changes generates no new warning

[x] I have added tests that prove my feature is working or my fix is effective

[x] New and existing tests pass locally with my changes

JIRA

N/A

What this PR does (required):

• The signup page redesigned
• login page was also redesigned
• mobile first (responsive)

Screenshots / Videos (front-end only):

The Signup page

The Login page

Mobile views (Signup)

and Mobile views (Login)

Any information needed to test this feature (required):

Test via local run yarn run dev

✅ Preview Commit!

| Name | Description | | ----------- | ----------- | | Preview | https://nueno-cf0006352-nueno.vercel.app/ |

source code:

• Create Auth.module.css
• Reuse the onChange method from local state, see below

 // User state
  const [user, setUser] = useState<UserProps>({
    email: "",
    password: "",
    isSubmitting: false,
  });

  // pulling out from user state
  const { email, password, isSubmitting } = user;

  // onChange event: setting the typed char to the input
  const onChange = (e: { target: { name: string; value: string | boolean } }) =>
    setUser({ ...user, [e.target.name]: e.target.value });

and then he onChange is passed to input onChange props

• Create an Input component TextInput

import React from "react";

interface InputProps {
  name: string;
  type?: string;
  value: string;
  placeholder: string;
  autoComplete?: string;
  required: boolean;
  clasName?: string;
  onChange: (e: { target: { name: string; value: string | boolean } }) => void;
}

const TextInput: React.FC<InputProps> = ({
  name,
  type = "text",
  value,
  onChange,
  placeholder,
  autoComplete,
  required,
  clasName,
}) => {
  return (
    <input
      name={name}
      type={type}
      autoComplete={autoComplete}
      required={required}
      value={value}
      onChange={onChange}
      className={`relative block w-full h-12 px-3 py-2 my-5 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm ${clasName}`}
      placeholder={placeholder}
    />
  );
};

export default TextInput;

and use it as

    <TextInput
        name="email"
        type="email"
        value={email}
        onChange={onChange}
        placeholder="[email protected]"
        autoComplete="email"
        required={true}
      />

• Sama as Image.tsx component

Description

This branch introduces async handler and check authenticated user middleware

Type of change

[ ] Bug fix (Non breaking change that fixes an existing issue)

[x] New Feature (Non breaking change which adds funcitonality)

[ ] Breaking change (New feature that removes or causes an existing feature not to work as expected)

[ ] This change requires a documentation update

How Has This Been Tested?

[x] Unit tests

[x] Component Tests

[x] Integration Tests

How Should This Be Manually tested

• Clone this repo.

• Run yarn install

• Run yarn dev

Checklist

[x] My code follows all the styles and conventions outlined for this project

[x] I have linted my code before submission

[x] I have made my corresponding changes to the documentation

[x] My changes generates no new warning

[x] I have added tests that prove my feature is working or my fix is effective

[x] New and existing tests pass locally with my changes

JIRA

N/A

What this PR does (required):

• The signup page redesigned
• Login page redesigned
• Mobile first (responsive) approach

Screenshots / Videos (front-end only):

Login screenshot

Signup screenshot

Mobile View (Responsive)

Signup

Login

Any information needed to test this feature (required):

Test via local run yarn run dev

✅ Preview Deploy!

| Name | Description | | ----------- | ----------- | | Preview | https://nueno-git-fork-mxhdiqaim-ui-signup-sign-in-pages-nueno.vercel.app/ |

Source Enhancement

• Image Component For reusable images, Image is being created

import Image from "next/image";

interface ImageProps {
  src: string;
  width?: number;
  height?: number;
}

const ImageComponent: React.FC<ImageProps> = ({ src, width, height }) => (
  <Image src={src} className="w-auto h-12 mx-auto" width={width} height={height} />
);

export default ImageComponent;

and then use as

 <ImageComponent src={Logo} width={60} height={60} />

• TextInput component. (Same as Image component) TextInput component is a component that holds input for reusability. TextInput.tsx

import React from "react";

interface InputProps {
  name: string;
  type?: string;
  value: string;
  placeholder: string;
  autoComplete?: string;
  required: boolean;
  clasName?: string;
  onChange: (e: { target: { name: string; value: string | boolean } }) => void;
}

const TextInput: React.FC<InputProps> = ({
  name,
  type = "text",
  value,
  onChange,
  placeholder,
  autoComplete,
  required,
  clasName,
}) => {
  return (
    <input
      name={name}
      type={type}
      autoComplete={autoComplete}
      required={required}
      value={value}
      onChange={onChange}
      className={`relative block w-full h-12 px-3 py-2 my-5 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm ${clasName}`}
      placeholder={placeholder}
    />
  );
};

export default TextInput;

and use as this

 <TextInput
      name="email"
      type="email"
      value={email}
      onChange={onChange}
      placeholder="[email protected]"
      autoComplete="email"
      required={true}
    />

What does this PR do?

Test Coverage of The User

Description of Task to be completed?

• Test the route

How should this be manually tested?

• clone repo
• switch to test-coverage branch
• Run npm i to install all dependencies
• Set up .env as shown in .env.example
• Then Do npm run test:coverage to see the test coverage report.

What to expect after running the commands:

• A user test will have a 100% coverage.