Skip to content
Snippets Groups Projects

feat(overlays): MIN-191 add possibility to login

Merged mateusz-winiarczyk requested to merge MIN-191-add-possibility-to-login into development
6 unresolved threads
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:
  1. Click the "Overlays" button in the top bar.
  2. Scroll in the drawer to the section: User provided overlays
  3. Click "Login" button
  4. Enter the appropriate credentials and click "Submit" button

log

Edited by mateusz-winiarczyk

Merge request reports

Merge request pipeline #83587 passed

Merge request pipeline passed for 5dbb9106

Test coverage 92.42% (-0.28%) from 1 job
Approval is optional

Merged by mateusz-winiarczykmateusz-winiarczyk 1 year ago (Dec 22, 2023 11:38am UTC)

Merge details

  • Changes merged into development with eb6edcc7 (commits were squashed).
  • Deleted the source branch.

Pipeline #83590 passed

Pipeline passed for eb6edcc7 on development

Test coverage 92.42% (-0.28%) from 1 job

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
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());
  • 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));
  • 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łów
  • Adrian Orłów approved this merge request

    approved this merge request

  • added 1 commit

    • 5c4db776 - test(overlays): add test for login component and thunk

    Compare with previous version

  • mateusz-winiarczyk added 12 commits

    added 12 commits

    Compare with previous version

  • Tadeusz Miesiąc approved this merge request

    approved this merge request

  • mateusz-winiarczyk added 13 commits

    added 13 commits

    Compare with previous version

  • mentioned in commit eb6edcc7

  • Please register or sign in to reply
    Loading