Merge pull request #17 from Informatik-Projekt-Kurs/IPK-95-Credential…

…s-passing-in-authService IPK-95 FormData Type and passing; Global Form Input Types
Informatik-Projekt-Kurs · Jan 3, 2024 · 746635a · 746635a
2 parents b7d2781 + aad5ab6
commit 746635a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 63 deletions.
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,21 +1,9 @@
 "use client";
-import { login, logout } from "@/services/authService";
+import { login, signup } from "@/services/authService";
 import Image from "next/image";
-import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useForm, SubmitHandler } from "react-hook-form";
-
-type loginInputs = {
-  email: string;
-  password: string;
-};
-
-type registerInputs = {
-  name: string;
-  email: string;
-  password: string;
-  password_confirmation: string;
-};
+import { LoginInputs, RegisterInputs } from "@/types";
 
 const LoginForm = () => {
   const dispatch = useDispatch();
@@ -24,7 +12,7 @@ const LoginForm = () => {
     register,
     formState: { errors },
     handleSubmit
-  } = useForm<loginInputs>({
+  } = useForm<LoginInputs>({
     mode: "onBlur"
   });
 
@@ -33,50 +21,27 @@ const LoginForm = () => {
     formState: { errors: errors2 },
     handleSubmit: handleSubmit2,
     getValues
-  } = useForm<registerInputs>({
+  } = useForm<RegisterInputs>({
     mode: "onBlur"
   });
 
-  const onSubmitLogin: SubmitHandler<loginInputs> = (data) => {
-    console.log(data);
-    handleLogin();
-  };
-
-  const onSubmitRegister: SubmitHandler<registerInputs> = (data) => console.log(data);
-
-  useEffect(() => {
-    const sign_in_btn = document.querySelector("#sign-in-btn");
-    const sign_up_btn = document.querySelector("#sign-up-btn");
-    const container = document.querySelector(".loginContainer");
-
-    sign_up_btn?.addEventListener("click", () => {
-      container?.classList.add("sign-up-mode");
-    });
-
-    sign_in_btn?.addEventListener("click", () => {
-      container?.classList.remove("sign-up-mode");
-    });
-    return () => {
-      sign_in_btn?.removeEventListener("click", () => {
-        container?.classList.remove("sign-up-mode");
-      });
-      sign_up_btn?.removeEventListener("click", () => {
-        container?.classList.add("sign-up-mode");
-      });
-    };
-  }, []);
-
-  const handleLogin = async () => {
+  const onSubmitLogin: SubmitHandler<LoginInputs> = async (data) => {
     try {
-      await login(dispatch, { email: "" } as unknown as FormData); // TODO
+      const result = await login(dispatch, data);
+      console.log(result);
     } catch (error) {
       console.error(error);
       throw error;
     }
   };
 
-  const handleLogout = () => {
-    logout(dispatch);
+  const onSubmitRegister: SubmitHandler<RegisterInputs> = async (data) => {
+    try {
+      await signup(data).then(() => console.log("success"));
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
   };
 
   return (

diff --git a/src/services/authService.ts b/src/services/authService.ts
@@ -1,17 +1,18 @@
 import { deleteToken, refreshAccessToken, storeToken } from "@/lib/actions";
 import { setUser } from "@/store/features/authSlice";
 import { AppDispatch } from "@/store/store";
+import { LoginInputs, RegisterInputs } from "@/types";
 
-export const login = async (dispatch: AppDispatch, credentials: FormData) => {
+export const login = async (dispatch: AppDispatch, credentials: LoginInputs) => {
   try {
     await fetch("http://localhost:8080/api/auth/signin", {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        username: credentials.get("email"),
-        password: credentials.get("password")
+        email: credentials.email,
+        password: credentials.password
       })
     })
       .then((response) => {
@@ -48,28 +49,25 @@ export const logout = async (dispatch: AppDispatch) => {
   }
 };
 
-export const signup = async (credentials: FormData) => {
+export const signup = async (credentials: RegisterInputs) => {
   try {
     await fetch("http://localhost:8080/api/auth/signup", {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
-        name: credentials.get("name"),
-        email: credentials.get("email"),
-        password: credentials.get("password")
+        name: credentials.name,
+        email: credentials.email,
+        password: credentials.password
       })
     })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Network error");
-        }
-        return response.json();
-      })
       .then((data) => {
         // Success
-        return "Account created! Please check your email for a confirmation link.";
+        if (!data.ok) {
+          throw new Error("Network error");
+        }
+        return data.text();
       })
       .catch((error) => {
         console.error("There was a problem with the Fetch operation:", error);

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -16,3 +16,15 @@ type CompanyAuthObject = {
   email: string;
   role: string;
 } | null;
+
+type LoginInputs = {
+  email: string;
+  password: string;
+};
+
+type RegisterInputs = {
+  name: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+};