feat(overlays): MIN-191 add possibility to login
Short description:
Added the ability to log in via the form.
Approach:
Implemented the capability to facilitate user login through a designated form within the user overlays section in overlays. This enhancement lays the groundwork for incorporating future user overlay functionalities. Upon entering the accurate credentials, the backend system is expected to respond with a Set-Cookie header, thereby establishing the authentication token in the browser's cookies. In the event of successful validation (status code: 200), alongside storing the authentication token in cookies, the application will mark the user as logged in by setting authenticated flag to true and user login in redux store.
Upon logging in or when not logged in, a request is initiated to verify the accuracy of the session information stored in cookies. If the session is valid and the backend responds with a status code of 200, the authentication status in the Redux store is updated to true. Simultaneously, the user login name, as indicated in the backend response, is also adjusted accordingly.
How to test:
- Click the "Overlays" button in the top bar.
- Scroll in the drawer to the section: User provided overlays
- Click "Login" button
- Enter the appropriate credentials and click "Submit" button
Merge request reports
Activity
assigned to @mateusz-winiarczyk
1 import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; 2 import { useAppSelector } from '@/redux/hooks/useAppSelector'; 3 import { openLoginModal } from '@/redux/modal/modal.slice'; 4 import { authenticatedUserSelector, loadingUserSelector } from '@/redux/user/user.selectors'; 5 import { getSessionValid } from '@/redux/user/user.thunks'; 6 import { Button } from '@/shared/Button'; 7 import { useEffect } from 'react'; 8 9 export const UserOverlays = (): JSX.Element => { 10 const dispatch = useAppDispatch(); 11 const loadingUser = useAppSelector(loadingUserSelector); 12 const authenticatedUser = useAppSelector(authenticatedUserSelector); 13 useEffect(() => { 14 dispatch(getSessionValid()); changed this line in version 2 of the diff
- src/redux/user/user.thunks.ts 0 → 100644
1 import { axiosInstance } from '@/services/api/utils/axiosInstance'; 2 import { createAsyncThunk } from '@reduxjs/toolkit'; 3 import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema'; 4 import { loginSchema } from '@/models/loginSchema'; 5 import { sessionSchemaValid } from '@/models/sessionValidSchema'; 6 import { apiPath } from '../apiPath'; 7 import { closeModal } from '../modal/modal.slice'; 8 9 export const login = createAsyncThunk( 10 'user/login', 11 async (credentials: URLSearchParams, { dispatch }) => { 12 const response = await axiosInstance.post(apiPath.postLogin(), credentials); 13 const isDataValid = validateDataUsingZodSchema(response.data, loginSchema); 14 dispatch(closeModal()); 1 import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; 2 import { login } from '@/redux/user/user.thunks'; 3 import { Button } from '@/shared/Button'; 4 import Link from 'next/link'; 5 import React from 'react'; 6 7 export const LoginModal: React.FC = () => { 8 const dispatch = useAppDispatch(); 9 const [credentials, setCredentials] = React.useState({ login: '', password: '' }); 10 11 const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => { 12 const { name, value } = e.target; 13 setCredentials(prevCredentials => ({ ...prevCredentials, [name]: value })); 14 }; 15 16 const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => { 4 import Link from 'next/link'; 5 import React from 'react'; 6 7 export const LoginModal: React.FC = () => { 8 const dispatch = useAppDispatch(); 9 const [credentials, setCredentials] = React.useState({ login: '', password: '' }); 10 11 const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => { 12 const { name, value } = e.target; 13 setCredentials(prevCredentials => ({ ...prevCredentials, [name]: value })); 14 }; 15 16 const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => { 17 e.preventDefault(); 18 const formBody = new URLSearchParams(credentials); 19 dispatch(login(formBody)); changed this line in version 2 of the diff
Components logic and structure lgtm.
I suggest to cover crucial functionality logic in tests.
- When I reload the app - I'm logged out.
- User session should persist through reloading application It's RFC from my side
Edited by Tadeusz Miesiąc
1 import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; 2 import { login } from '@/redux/user/user.thunks'; 3 import { Button } from '@/shared/Button'; 4 import Link from 'next/link'; 5 import React from 'react'; 6 7 export const LoginModal: React.FC = () => { LGTM
RFC from my side: please add tests for LoginModal component
Edited by Adrian Orłówadded 1 commit
- 5c4db776 - test(overlays): add test for login component and thunk
added 12 commits
-
5c4db776...ed9523e9 - 10 commits from branch
development
- aa833bb6 - fix(overlay): fix persisting session
- 84831d9e - Merge remote-tracking branch 'origin/development' into MIN-191-add-possibility-to-login
-
5c4db776...ed9523e9 - 10 commits from branch
added 13 commits
-
84831d9e...a185dfbb - 12 commits from branch
development
- 5dbb9106 - Merge remote-tracking branch 'origin/development' into MIN-191-add-possibility-to-login
-
84831d9e...a185dfbb - 12 commits from branch
mentioned in commit eb6edcc7