Merge pull request #7 from Informatik-Projekt-Kurs/IPK-32-Log-in-und-…

…Sign-up-Page Ipk 32 log in und sign up page
Informatik-Projekt-Kurs · Dec 10, 2023 · 174aea0 · 174aea0
2 parents 4d960b5 + 27c0cf3
commit 174aea0
Show file tree

Hide file tree

Showing 9 changed files with 651 additions and 53 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,25 +5,23 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "off",
     "no-unsafe-optional-chaining": "off",
     "no-useless-escape": "off",
+    "no-unused-vars": "off",
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
   },
   plugins: ["prettier"],
   overrides: [
     {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)",
-      ],
+      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
       env: {
-        jest: true,
-      },
+        jest: true
+      }
     },
     {
       files: ["**/*.ts", "**/*.tsx", "**/*.d.ts", "**/*.vue", "**/*.html"],
       parserOptions: {
-        project: "./tsconfig.json",
-      },
-    },
-  ],
+        project: "./tsconfig.json"
+      }
+    }
+  ]
 };
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.7",
-    "axios": "^1.6.2",
     "jsonwebtoken": "^9.0.2",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.49.0",
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",

diff --git a/public/g5-3-5-8-3-5-3 2.svg b/public/g5-3-5-8-3-5-3 2.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,14 +8,10 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Create Next App",
-  description: "Generated by create next app",
+  description: "Generated by create next app"
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className={inter.className}>

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -3,25 +3,84 @@ import { loggedIn, login, logout } from "@/services/authService";
 import { RootState } from "@/store/store";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useForm, SubmitHandler, get } from "react-hook-form";
+
+type loginInputs = {
+  email: string;
+  password: string;
+};
+
+type registerInputs = {
+  name: string;
+  email: string;
+  password: string;
+  password_confirmation: string;
+};
+
 const LoginForm = () => {
   const dispatch = useDispatch();
   const [user, setUser] = useState<Object | null>();
   const token = useSelector((state: RootState) => state.auth.accessToken);
+
+  const {
+    register,
+    formState: { errors },
+    handleSubmit
+  } = useForm<loginInputs>({
+    mode: "onBlur"
+  });
+
+  const {
+    register: register2,
+    formState: { errors: errors2 },
+    handleSubmit: handleSubmit2,
+    getValues
+  } = useForm<registerInputs>({
+    mode: "onBlur"
+  });
+
+  const onSubmitLogin: SubmitHandler<loginInputs> = (data) => console.log(data);
+
+  const onSubmitRegister: SubmitHandler<registerInputs> = (data) => console.log(data);
+
   useEffect(() => {
     fetchUser();
     function fetchUser() {
       const fetchedUser = loggedIn(token);
       console.log("fetchedUser", fetchedUser);
       setUser(fetchedUser);
     }
+    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");
+      });
+    };
   }, [token]);
 
   const handleLogin = async () => {
     try {
-      await login(dispatch, {
-        username: "exampleUser",
-        password: "examplePassword",
-      });
+      await login(
+        dispatch,
+        {
+          username: "exampleUser",
+          password: "examplePassword"
+        },
+        true
+      );
     } catch (error) {
       console.error(error);
       throw error;
@@ -33,17 +92,146 @@ const LoginForm = () => {
   };
 
   return (
-    <div>
-      {!user && (
-        <button className="btn btn-primary" onClick={handleLogin}>
-          Login
-        </button>
-      )}
-      {user && (
-        <button className="btn btn-error" onClick={handleLogout}>
-          Logout
-        </button>
-      )}
+    <div className="loginContainer bg-base-300 before:bg-primary">
+      <div className="forms-container">
+        <div className="signin-signup">
+          <form action="#" className="sign-in-form" onSubmit={handleSubmit(onSubmitLogin)}>
+            <h2 className="text-3xl font-semibold text-primary-content mb-2.5">Log In</h2>
+            <input
+              className={`input bg-base-300 mb-4 ${errors.email ? "input-error" : "input-primary"}`}
+              placeholder="Email"
+              {...register("email", {
+                required: "Email is required",
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+                  message: "Invalid email format"
+                }
+              })}
+            />
+            <input
+              className={`input bg-base-300 mb-4 ${errors.password ? "input-error" : "input-primary"}`}
+              placeholder="Password"
+              type="password"
+              {...register("password", {
+                required: "Password is required",
+                minLength: {
+                  value: 8,
+                  message: "Password must be at least 8 characters long"
+                }
+              })}
+            />
+            {Object.values(errors)[0] && <p className="text-error mb-3">{Object.values(errors)[0].message}</p>}
+            <input type="submit" value="Log In" className="btn btn-primary px-8" />
+            <p className="social-text">Or Sign in with social platforms</p>
+            <div className="social-media">
+              <a href="#" className="social-icon">
+                <i className="fab fa-facebook-f"></i>
+              </a>
+              <a href="#" className="social-icon">
+                <i className="fab fa-twitter"></i>
+              </a>
+              <a href="#" className="social-icon">
+                <i className="fab fa-google"></i>
+              </a>
+              <a href="#" className="social-icon">
+                <i className="fab fa-linkedin-in"></i>
+              </a>
+            </div>
+          </form>
+          <form action="#" className="sign-up-form" onSubmit={handleSubmit2(onSubmitRegister)}>
+            <h2 className="text-3xl font-semibold text-primary-content mb-2.5">Sign Up</h2>
+            <input
+              className={`input bg-base-300 mb-4 ${errors2.name ? "input-error" : "input-primary"}`}
+              type="text"
+              placeholder="Name"
+              {...register2("name", {
+                required: "Name is required",
+                maxLength: {
+                  value: 20,
+                  message: "Name must be at most 20 characters long"
+                }
+              })}
+            />
+            <input
+              className={`input bg-base-300 mb-4 ${errors2.email ? "input-error" : "input-primary"}`}
+              type="email"
+              placeholder="Email"
+              {...register2("email", {
+                required: "Email is required",
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+                  message: "Invalid email format"
+                }
+              })}
+            />
+            <input
+              className={`input bg-base-300 mb-4 ${errors2.password ? "input-error" : "input-primary"}`}
+              type="password"
+              placeholder="Password"
+              {...register2("password", {
+                required: "Password is required",
+                minLength: {
+                  value: 8,
+                  message: "Password must be at least 8 characters long"
+                }
+              })}
+            />
+            <input
+              className={`input bg-base-300 mb-4 ${errors2.password_confirmation ? "input-error" : "input-primary"}`}
+              type="password"
+              placeholder="Repeat Password"
+              {...register2("password_confirmation", {
+                required: "Password confirmation is required",
+                validate: (value) => value === getValues("password") || "Passwords do not match"
+              })}
+            />
+            {Object.values(errors2)[0] && <p className="text-error mb-3">{Object.values(errors2)[0].message}</p>}
+            <input type="submit" value="Sign Up" className="btn btn-primary px-8" />
+            <p className="social-text">Or Sign up with social platforms</p>
+            <div className="social-media">
+              <a href="#" className="social-icon">
+                <i className="fab fa-facebook-f"></i>
+              </a>
+              <a href="#" className="social-icon">
+                <i className="fab fa-twitter"></i>
+              </a>
+              <a href="#" className="social-icon">
+                <i className="fab fa-google"></i>
+              </a>
+              <a href="#" className="social-icon">
+                <i className="fab fa-linkedin-in"></i>
+              </a>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div className="panels-container">
+        <div className="panel left-panel">
+          <div className="content">
+            <h3>New here ?</h3>
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, ex ratione. Aliquid!</p>
+            <button className="btn btn-outline text-primary-content px-8" id="sign-up-btn">
+              {" "}
+              Sign up
+            </button>
+          </div>
+          <img src="" className="image" alt="" />
+        </div>
+        <div className="panel right-panel">
+          <div className="content">
+            <h3>One of us ?</h3>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum laboriosam ad deleniti.</p>
+            <button className="btn btn-outline text-primary-content px-8" id="sign-in-btn">
+              {" "}
+              Sign in
+            </button>
+          </div>
+          <img src="img/register.svg" className="image" alt="" />
+        </div>
+      </div>
     </div>
   );
 };