auth kinda works now

frontend/app/src/App.tsx

@@ -1,18 +1,27 @@
-import React from "react";
+import React, { createContext } from "react";
-import { ConfigProvider } from "antd";
+import { ConfigProvider, message } from "antd";
 import "./App.css";
 import HeaderComponent from "./components/HeaderComponent";
 import { theme } from "./config/style";
 import { Provider } from "react-redux";
 import { store } from "./config/store";
+import { MessageInstance } from "antd/es/message/interface";
+
+export const MessageContext = createContext({} as MessageInstance);
 
 const App = () => {
+  const [messageApi, contextHolder] = message.useMessage({
+    duration: 2,
+  });
   return (
     <Provider store={store}>
       <ConfigProvider theme={theme}>
+        <MessageContext.Provider value={messageApi}>
           <div className="content">
+            {contextHolder}
             <HeaderComponent />
           </div>
+        </MessageContext.Provider>
       </ConfigProvider>
     </Provider>
   );

frontend/app/src/components/AuthModal.tsx

@@ -1,7 +1,9 @@
-import { Form, Input, Menu, MenuProps, Modal } from "antd";
+import { Form, Input, Menu, MenuProps, Modal, Spin } from "antd";
 import "./styles.css";
 import { KeyOutlined, UserAddOutlined } from "@ant-design/icons";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
+import { useLoginMutation, useRegisterMutation } from "../slice/AuthApi";
+import { MessageContext } from "../App";
 
 const AuthModal = (props: {
   open: boolean;
@@ -11,12 +13,20 @@ const AuthModal = (props: {
   const [registerForm] = Form.useForm();
 
   const [current, setCurrent] = useState("login");
+  const messageApi = useContext(MessageContext);
 
-  const submitLoginForm = (formData: {
+  const [loginUser, { isLoading: isLoggingIn }] = useLoginMutation();
-    username: string;
+  const [registerUser, { isLoading: isRegistering }] = useRegisterMutation();
-    password: string;
+
-  }) => {
+  const submitLoginForm = (data: { username: string; password: string }) => {
-    console.log(formData);
+    const formData = new FormData();
+    formData.append("username", data.username);
+    formData.append("password", data.password);
+
+    loginUser(formData)
+      .unwrap()
+      .then(() => props.setOpen(false))
+      .catch(() => messageApi.error("Login failed!"));
   };
 
   const submitRegisterForm = (formData: {
@@ -26,6 +36,10 @@ const AuthModal = (props: {
     password2: string;
   }) => {
     console.log(formData);
+    registerUser(formData)
+      .unwrap()
+      .then(() => props.setOpen(false))
+      .catch(() => messageApi.error("Registration failed!"));
   };
 
   const items: MenuProps["items"] = [
@@ -42,6 +56,7 @@ const AuthModal = (props: {
   ];
 
   return (
+    <Spin spinning={isLoggingIn || isRegistering}>
       <Modal
         open={props.open}
         onCancel={() => props.setOpen(false)}
@@ -50,6 +65,7 @@ const AuthModal = (props: {
           current === "login" && loginForm.submit();
         }}
         okText={current === "login" ? "Log In" : "Register"}
+        confirmLoading={isLoggingIn}
       >
         <Menu
           onClick={(e) => setCurrent(e.key)}
@@ -106,7 +122,9 @@ const AuthModal = (props: {
                       return Promise.resolve();
                     }
                     return Promise.reject(
-                    new Error("The new password that you entered do not match!")
+                      new Error(
+                        "The new password that you entered do not match!"
+                      )
                     );
                   },
                 }),
@@ -149,6 +167,7 @@ const AuthModal = (props: {
           </Form>
         )}
       </Modal>
+    </Spin>
   );
 };
 

frontend/app/src/config/store.ts

@@ -1,18 +1,37 @@
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore, createAction, createReducer } from "@reduxjs/toolkit";
-import { setupListeners } from '@reduxjs/toolkit/query'
+import { setupListeners } from "@reduxjs/toolkit/query";
-import { AuthApi } from '../slice/AuthApi'
+import { AuthApi } from "../slice/AuthApi";
+
+export type authState = {
+  token: string | null;
+};
+
+const initialAuthState: authState = {
+  token: null,
+};
 
 export const store = configureStore({
   reducer: {
     // Add the generated reducer as a specific top-level slice
     [AuthApi.reducerPath]: AuthApi.reducer,
+    auth: createReducer(initialAuthState, (builder) => {
+      builder.addCase(createAction("auth/token"), (state, _) => {
+        const token: string | null = localStorage.getItem("token");
+        if (token) {
+          state.token = token;
+        }
+      });
+    }),
   },
   // Adding the api middleware enables caching, invalidation, polling,
   // and other useful features of `rtk-query`.
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(AuthApi.middleware),
-})
+});
 
 // optional, but required for refetchOnFocus/refetchOnReconnect behaviors
 // see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
-setupListeners(store.dispatch)
+setupListeners(store.dispatch);
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

frontend/app/src/config/style.ts

@@ -1,17 +1,20 @@
 export const theme = {
   components: {
     Modal: {
-            contentBg: "#001529"
+      contentBg: "#001529",
     },
     Form: {
-            labelColor: "#77828c"
+      labelColor: "#77828c",
     },
     Input: {
       activeBg: "#001c36",
     },
     Button: {
-            primaryColor: "#001529"
+      primaryColor: "#001529",
-        }
+    },
+    Message: {
+      contentBg: "#001c36",
+    },
   },
   token: {
     colorText: "#ffffff",
@@ -19,5 +22,5 @@ export const theme = {
     colorIcon: "#77828c",
     colorPrimary: "#ffffff",
     colorPrimaryHover: "#001529",
-    }
+  },
 };

frontend/app/src/slice/AuthApi.ts

@@ -1,14 +1,58 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
-import { baseUrl } from '../config/baseUrl'
+import { baseUrl } from "../config/baseUrl";
+import { RootState } from "../config/store";
+
+export interface User {
+  username: string;
+  name: string;
+}
+
+export interface UserResponse {
+  user: User;
+  token: string;
+}
+
+export interface RegisterRequest {
+  username: string;
+  name: string | undefined;
+  password: string;
+  password2: string;
+}
 
 export const AuthApi = createApi({
-  reducerPath: 'AuthApi',
+  reducerPath: "AuthApi",
-  baseQuery: fetchBaseQuery({ baseUrl: `${baseUrl}auth/` }),
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${baseUrl}auth/`,
+    prepareHeaders: (headers, { getState }) => {
+      // By default, if we have a token in the store, let's use that for authenticated requests
+      const token = (getState() as RootState).auth.token;
+      if (token) {
+        headers.set("authorization", `Bearer ${token}`);
+      }
+      return headers;
+    },
+  }),
   endpoints: (builder) => ({
     getUser: builder.query({
-      query: () => 'me/',
+      query: () => "me",
+    }),
+    login: builder.mutation({
+      query: (data: FormData) => ({
+        url: "token",
+        method: "POST",
+        body: data,
+        formData: true,
       }),
     }),
-})
+    register: builder.mutation({
+      query: (data: RegisterRequest) => ({
+        url: "register",
+        method: "POST",
+        body: data,
+      }),
+    }),
+  }),
+});
 
-export const { useGetUserQuery } = AuthApi
+export const { useGetUserQuery, useLoginMutation, useRegisterMutation } =
+  AuthApi;