chore: created a new next.js page called login #603

[kingdanie]

Describe your changes

created a new next.js page called login and also added a simple test to the client.cy.js file.

Issue ticket number and link

closes #603

[ijemmao]

@kingdanie thanks for this change! can you please attach as many relevant screenshots of this visual change?

[ijemmao]

great start! and i'm loving the new Cypress test!

i just left comments mainly about how we want to use ChakraUI and how we want to order our constants, useEffect, and return statement

[ijemmao]

we want to start using ChakraUI for all our components (i.e. Box, Heading, Form, Button, Text to replace div, h1, h2, form, button, p, etc.)

[kingdanie]

ok, I will try to refactor the page to reflect these changes.

[kingdanie]

chrakra ui components doesn't seem to work well with tailwind classes especially for Box, and Formcontrol.
See screenshots for before I changed div and form to Box and Formcontrol respectively:

Additionally from the screenshots, you can see that the headers are also not the same. Here is a code snippet:

 <div className="w-10/12 lg:w-7/12">
            <Heading as="h1" fontSize="4xl" className="mb-6">{t('Log in.')}</Heading>
            <h1 className="text-5xl mb-6">{t('Log in.')}</h1>

            <Heading as="h2"  fontSize='md' className="text-gray-600 mb-4">{t('Log in to your Igbo API dashboard.')}</Heading>
            <h2 className="text-gray-600 font-normal mb-4">{t('Log in to your Igbo API dashboard.')}</h2>
 </div>

[kingdanie]

Current view of the login page

[ijemmao]

@kingdanie are you still working on this PR?