Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement User Login Feature with Redux Toolkit #24

Merged
merged 1 commit into from
Jun 27, 2024
Merged

Implement User Login Feature with Redux Toolkit #24

merged 1 commit into from
Jun 27, 2024

Conversation

wayneleon1
Copy link
Contributor

@wayneleon1 wayneleon1 commented Jun 18, 2024 •
edited
Loading

What does this PR do?

This pull request implements a secure login feature using Redux Toolkit for state management and TailwindCSS for styling.

Completed Tasks:

Login Form:

  • Developed a login form with email and password fields .
  • Styled the form using TailwindCSS for responsiveness and user-friendliness .
  • Implemented client-side validation for email and password (.
  • Displayed clear error messages for invalid input .

State Management:

  • Utilized Redux Toolkit to manage login form state and authentication status.
  • Created actions and reducers for handling login requests, success, and failure .
  • Implemented secure storage of user authentication tokens.

API Integration:

  • Integrated with the backend API for user authentication .
  • Handled both successful and error responses from the API .

User Feedback:

  • Displayed loading indicators during login requests .
  • Provided success messages upon successful login.
  • Displayed error messages for incorrect login credentials .

Redirect:

  • Redirected authenticated users to the appropriate dashboard or home page .

Testing:

Please manually test the login functionality to ensure:

  • The login form displays correctly and accepts email and password input.
  • Validation works for email format and password length.
  • Appropriate error messages are displayed for invalid input.
  • Loading indicators appear during login requests.
  • Success and error messages are shown based on API responses.
  • Users are redirected to the expected page upon successful login.

@wayneleon1 wayneleon1 self-assigned this Jun 18, 2024
@wayneleon1 wayneleon1 linked an issue Jun 18, 2024 that may be closed by this pull request
Feature: Implement the Login page #23
Closed
13 tasks
@codecov-commenter
Copy link

codecov-commenter commented Jun 21, 2024 •
edited
Loading

Codecov Report

Attention: Patch coverage is 94.20290% with 24 lines in your changes missing coverage. Please review.

Project coverage is 88.52%. Comparing base (4c0c5b6) to head (49b422a).

Files Patch % Lines
src/components/form/HSInput.tsx 80.55% 14 Missing ⚠️
src/pages/SignIn.tsx 96.08% 7 Missing ⚠️
src/features/Auth/SignInSlice.ts 98.30% 2 Missing ⚠️
src/pages/SignUp.tsx 66.66% 1 Missing ⚠️
Additional details and impacted files 
@@             Coverage Diff             @@
##           develop      #24      +/-   ##
===========================================
+ Coverage    85.02%   88.52%   +3.49%     
===========================================
  Files           15       19       +4     
  Lines          828     1237     +409     
  Branches        61       89      +28     
===========================================
+ Hits           704     1095     +391     
- Misses         119      138      +19     
+ Partials         5        4       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@wayneleon1 wayneleon1 added ready for review The PR is ready for review to be mergrd and removed Ready for TTL Review the PR is ready to be reviewed by the TTL/Manager labels Jun 27, 2024
ambroisegithub
ambroisegithub approved these changes Jun 27, 2024
View reviewed changes
Copy link
Collaborator

@ambroisegithub ambroisegithub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks good for merge!!!

@wayneleon1
setup envirnoment
49b422a 
implement HSButton

implement HSInput

mend

implement login design

resolve eslint errors

rebase from develop

fix hovering styles  button

rebase form develop

set up formik

implement stage 1 of valifation usin formik

Reducing boilerplate

reduce duplicate codes

rebase from develop

complete form validatio

remove eslint error & initials unit tests

abort all written tests

working on lints

update eslint file

fix test errors

rebase from develop

implement Login component

resolve mismatch uri
@dushimeemma dushimeemma merged commit b9b7d7f into develop Jun 27, 2024
8 checks passed
niyibi250 pushed a commit that referenced this pull request Jun 27, 2024
@wayneleon1 @niyibi250
setup envirnoment (#24)
4bc33a2 
implement HSButton

implement HSInput

mend

implement login design

resolve eslint errors

rebase from develop

fix hovering styles  button

rebase form develop

set up formik

implement stage 1 of valifation usin formik

Reducing boilerplate

reduce duplicate codes

rebase from develop

complete form validatio

remove eslint error & initials unit tests

abort all written tests

working on lints

update eslint file

fix test errors

rebase from develop

implement Login component

resolve mismatch uri
niyibi250 pushed a commit that referenced this pull request Jul 2, 2024
@jkarenzi @niyibi250
feat(navbar): implement navbar (#44)
f1e1468 
-implement reusable navbar component

[Delivers #21]

Hello section (#47)

[Delivers #21]

Co-authored-by: Joslyn Manzi Karenzi <j.karenzi@alustudent.com>

implementation of signup page and functionality (#50)

setup envirnoment (#24)

implement HSButton

implement HSInput

mend

implement login design

resolve eslint errors

rebase from develop

fix hovering styles  button

rebase form develop

set up formik

implement stage 1 of valifation usin formik

Reducing boilerplate

reduce duplicate codes

rebase from develop

complete form validatio

remove eslint error & initials unit tests

abort all written tests

working on lints

update eslint file

fix test errors

rebase from develop

implement Login component

resolve mismatch uri

28 implement UI for landing page categories section (#48)

* created categories section

Hello section (#47)

[Delivers #21]

Co-authored-by: Joslyn Manzi Karenzi <j.karenzi@alustudent.com>

created categories section

feat: update search button background color in CategoriesSection

chore: update npm dependencies

feat: Add lazy loading for images in product list

- Implement lazy loading for images in the product list to improve page load performance
- Update ProductSlice.ts to fetch product data from the API
- Update productList.tsx to display only the first 3 products
- Update Category.tsx to add cursor pointer to category component
- Update productCard.test.tsx to fix the calculation of star icons
- Update categories.tsx to style the search input and search button

feat: Implement lazy loading for images in product list

removed console.log

adding dynamism in categories

created categories section

chore: update npm dependencies

feat: Add lazy loading for images in product list

- Implement lazy loading for images in the product list to improve page load performance
- Update ProductSlice.ts to fetch product data from the API
- Update productList.tsx to display only the first 3 products
- Update Category.tsx to add cursor pointer to category component
- Update productCard.test.tsx to fix the calculation of star icons
- Update categories.tsx to style the search input and search button

feat: Implement lazy loading for images in product list

removed console.log

created categories section

done

feat: Update CategoriesSection to fetch products and categories on component mount

- Add useEffect hook to CategoriesSection component to fetch products and categories on component mount
- Update categories.tsx to import fetchProducts and fetchCategories from ProductSlice and categorySlice respectively
- Remove duplicate import statement for useAppSelector from '@/app/hooks'

feat: Add MemoryRouter to App.test.tsx for testing Home component

- Import MemoryRouter from 'react-router-dom' to wrap the Home component in the App.test.tsx file
- This allows testing the Home component within the context of a router

* finished

feat(navbar): implement navbar (#44) (#39)

-implement reusable navbar component

[Delivers #21]

Co-authored-by: Joslyn Manzi Karenzi <j.karenzi@alustudent.com>

fix(navbar): fix bug in navbar (#54)

- make sure that navbar shows login button when user is not authenticated

[Fixes #53]

fix(frontend): write  test for the availableproduct slice

fix(frontend): write  test for the availableproduct slice

fix testing

fix remaining test

fix lint errors

build  errors

build  errors

build  errors
@atlp-rwanda atlp-rwanda deleted a comment from vercel bot Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dushimeemma dushimeemma dushimeemma approved these changes

@13XAVI 13XAVI 13XAVI approved these changes

@ambroisegithub ambroisegithub ambroisegithub approved these changes

@jkarenzi jkarenzi jkarenzi approved these changes

@EddyShimwa EddyShimwa Awaiting requested review from EddyShimwa

Assignees

@wayneleon1 wayneleon1

Labels
Front-End ready for review The PR is ready for review to be mergrd
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Feature: Implement the Login page
6 participants
@wayneleon1 @codecov-commenter @dushimeemma @13XAVI @ambroisegithub @jkarenzi