Added auth form. Added login and logout actions

client/src/store/action-creators/auth.ts

@@ -0,0 +1,40 @@
+import { Dispatch } from 'redux';
+import { ApiResponse } from '../../interfaces';
+import { ActionType } from '../action-types';
+import { LoginAction, LogoutAction } from '../actions/auth';
+import axios, { AxiosError } from 'axios';
+
+export const login =
+  (password: string) => async (dispatch: Dispatch<LoginAction>) => {
+    try {
+      const res = await axios.post<ApiResponse<{ token: string }>>(
+        '/api/auth',
+        { password }
+      );
+
+      localStorage.setItem('token', res.data.data.token);
+
+      dispatch({
+        type: ActionType.login,
+        payload: res.data.data.token,
+      });
+    } catch (err) {
+      const apiError = err as AxiosError;
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Error',
+          message: apiError.response?.data.error,
+        },
+      });
+    }
+  };
+
+export const logout = () => (dispatch: Dispatch<LogoutAction>) => {
+  localStorage.removeItem('token');
+
+  dispatch({
+    type: ActionType.logout,
+  });
+};

client/src/store/action-creators/index.ts

@@ -3,3 +3,4 @@ export * from './config';
 export * from './notification';
 export * from './app';
 export * from './bookmark';
+export * from './auth';

client/src/store/action-types/index.ts

@@ -37,4 +37,7 @@ export enum ActionType {
   addBookmark = 'ADD_BOOKMARK',
   deleteBookmark = 'DELETE_BOOKMARK',
   updateBookmark = 'UPDATE_BOOKMARK',
+  // AUTH
+  login = 'LOGIN',
+  logout = 'LOGOUT',
 }

client/src/store/actions/auth.ts

@@ -0,0 +1,10 @@
+import { ActionType } from '../action-types';
+
+export interface LoginAction {
+  type: ActionType.login;
+  payload: string;
+}
+
+export interface LogoutAction {
+  type: ActionType.logout;
+}

client/src/store/actions/index.ts

@@ -1,3 +1,5 @@
+import { App } from '../../interfaces';
+
 import { SetThemeAction } from './theme';
 
 import {
@@ -24,8 +26,6 @@ import {
   SortAppsAction,
 } from './app';
 
-import { App } from '../../interfaces';
-
 import {
   GetCategoriesAction,
   AddCategoryAction,
@@ -39,6 +39,8 @@ import {
   UpdateBookmarkAction,
 } from './bookmark';
 
+import { LoginAction, LogoutAction } from './auth';
+
 export type Action =
   // Theme
   | SetThemeAction
@@ -71,4 +73,7 @@ export type Action =
   // Bookmarks
   | AddBookmarkAction
   | DeleteBookmarkAction
-  | UpdateBookmarkAction;
+  | UpdateBookmarkAction
+  // Auth
+  | LoginAction
+  | LogoutAction;

client/src/store/reducers/auth.ts

@@ -0,0 +1,34 @@
+import { Action } from '../actions';
+import { ActionType } from '../action-types';
+
+interface AuthState {
+  isAuthenticated: boolean;
+  token: string | null;
+}
+
+const initialState: AuthState = {
+  isAuthenticated: false,
+  token: null,
+};
+
+export const authReducer = (
+  state: AuthState = initialState,
+  action: Action
+): AuthState => {
+  switch (action.type) {
+    case ActionType.login:
+      return {
+        ...state,
+        token: action.payload,
+        isAuthenticated: true,
+      };
+    case ActionType.logout:
+      return {
+        ...state,
+        token: null,
+        isAuthenticated: false,
+      };
+    default:
+      return state;
+  }
+};

client/src/store/reducers/index.ts

@@ -5,6 +5,7 @@ import { configReducer } from './config';
 import { notificationReducer } from './notification';
 import { appsReducer } from './app';
 import { bookmarksReducer } from './bookmark';
+import { authReducer } from './auth';
 
 export const reducers = combineReducers({
   theme: themeReducer,
@@ -12,6 +13,7 @@ export const reducers = combineReducers({
   notification: notificationReducer,
   apps: appsReducer,
   bookmarks: bookmarksReducer,
+  auth: authReducer,
 });
 
 export type State = ReturnType<typeof reducers>;