Feature: Adjust the UI & behavior of the login form

[nick-y-ito]

Overview

This PR adjusts the UI and the behavior of the login form. It is essentially done by overriding the styles of the third-party component using the vanilla CSS.

Changes

• Add loading spinner UI image
• Refactor the color definition.
  • Defined color variables in the globals.css
  • Called them in the tailwind.config.ts
• Move the LoginForm component to the feature/auth/components directory
• Override the styles of the login form using the CSS Modules

Notes

Related future issues:

• 284

Screen Captures

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/0bf9db0b-1463-49a6-b47f-a36ef5becb19

Assignee Checklist:

• [x] The naming convention of the PR title is correct (See the comment at the top of this template)
• [x] The base branch is correct (See: Types of Branches)
• [x] The branch name follows the Branch Naming Conventions
• [x] The correct assignees and reviewers have been designated for this PR
• [x] The coding style follows the Coding Style Guide
• [x] All the related issues are associated with this PR
• [x] All criteria in the associated issues are met (please tick the checkboxes)
• [x] My changes do not generate new warnings or errors (especially in the console)

Reviewer Checklist:

• [x] Double-check the "Assignee Checklist"
• [x] The code follows the generic best practices and our Coding Style Guide
• [x] The code is well-commented and easy to understand
• [x] The UI changes accurately reflect the provided design

[nick-y-ito]

I just realized that there was another issue, which is when an authentication has a problem, it cannot exit the loading state. I recreated the situation by commenting out the auth related environment variables.

Let me fix it in this PR. I will add a timeout and an alert.

https://github.com/nishiki-tech/nishiki-frontend/assets/99148565/846875dc-f25f-47fa-97a1-b1c88104ca67

[nick-y-ito]

@kanta1207 @ShoeheyOt Could you please check if the behavior is acceptable?

[ShoeheyOt]

@nick-y-ito Hey Nick, it is working in my local, but please let me ask you, is there any reason you set 15 seconds?? I might leave the page if loading is more than 5 seconds, my preference though.

[nick-y-ito]

@ShoeheyOt

Good question!

The "15s" timeout is not determined based on the user's patience, but rather as a fallback to provide a way to exit the loading state.

While it's unlikely, there may be cases where loading the Google authentication takes longer, especially when using a slow internet connection. In such cases, waiting for only "5s" may not be sufficient to complete the loading process. So it must be long enough, yet not too long.

[ShoeheyOt]

@nick-y-ito Thank you for explanation , I see the point the time is not preference or improving UX, but for in case like slow internet connection.

[nick-y-ito]

@ShoeheyOt Yes, but it's not only for the case of slow internet. It's just one of the possible cases.

Anyway, thank you for your review and for sharing your thoughts :)

[nick-y-ito]

@kanta1207 @ShoeheyOt cc @kotaaaa If you find any issues later on, please let me know! For now, I will merge this PR.

Thank you for your reviews!