user authentication with appwrite

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-checkbox": "1.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@reduxjs/toolkit": "2.2.6",
+    "appwrite": "15.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-react": "0.399.0",

src/Pages/LandingPage.tsx

@@ -1,8 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
-import { increment, decrement } from "../store/features/counter/counterSlice"; 
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../store/store"; 
+
 
 
 const LandingPage = () => {
@@ -18,8 +16,6 @@ const LandingPage = () => {
 
 
 
-  const count = useSelector((state: RootState) => state.counter.count);
-  const dispatch = useDispatch();
 
   return (
     <div className="h-[100vh] flex flex-col justify-center items-center">
@@ -29,24 +25,7 @@ const LandingPage = () => {
       </p>
 
 
-      <div className="flex mt-[20px] gap-[10px]">
-     <Button
-        onClick={() => dispatch(decrement())}
-        variant="outline"
-
-      >
-        -
-      </Button> 
-      <div className="border p-[7px] rounded-[7px]">{count}</div>
-      <Button
-        onClick={() => dispatch(increment())}
-        variant="outline"
-
-      >
-        +
-      </Button>
-
-      </div>
+
 
 
       <div className="flex gap-[20px] mt-[50px]">

src/Pages/LoginForm/LoginForm.tsx

@@ -1,66 +1,78 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { FaUser, FaLock } from "react-icons/fa";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Quote from "@/mycomponents/Quote";
 import { twMerge } from "tailwind-merge";
-import { useNavigate } from "react-router-dom";
+import { RootState, AppDispatch } from '../../store/store';
+import { login } from '../../store/features/auth/authSlice';
 import libraryimage from "./images/library.jpg";
 import googleimage from "./images/Google.jpg";
+
 interface LoginFormProps {
   up: string;
 }
 
 const LoginForm: React.FC<LoginFormProps> = (props) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
+  const auth = useSelector((state: RootState) => state.auth);
 
-  const goList = () => {
-    if (props.up == "user") {
-      navigate("/librarylist");
-    } else {
-      navigate("/users");
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await dispatch(login({ email, password })).unwrap();
+
+      if (props.up === 'user') {
+        navigate('/librarylist');
+      } else {
+        navigate('/users');
+      }
+    } catch (error) {
+      console.error('Failed to login:', error);
+
     }
   };
+
   return (
-    <div
-      className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}
-    >
+    <div className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}>
       <div className={twMerge("md:w-1/2 relative")}>
-        <img
-          className={twMerge("h-full w-full object-cover")}
-          src={libraryimage}
-          alt=""
-        />
+        <img className={twMerge("h-full w-full object-cover")} src={libraryimage} alt="" />
         <div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white text-center">
           <Quote />
         </div>
       </div>
 
       <div className="md:w-1/2 flex items-center justify-center">
         <form
-          onSubmit={goList}
-          className={twMerge(
-            "border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded"
-          )}
+          onSubmit={handleSubmit}
+          className={twMerge("border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded")}
         >
           <h1 className={twMerge("text-2xl text-center mb-6")}>Log In</h1>
+          {auth.error && <div className="text-red-500 text-center mb-4">{auth.error}</div>}
           <div className={twMerge("flex flex-col gap-6")}>
             <div className={twMerge("relative")}>
-              <Input type="email" placeholder="Email" />
-              <FaUser
-                className={twMerge(
-                  "absolute right-3 top-1/2 transform -translate-y-1/2"
-                )}
+              <Input
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
               />
+              <FaUser className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
             </div>
             <div className={twMerge("relative")}>
-              <Input type="password" placeholder="Password" />
-              <FaLock
-                className={twMerge(
-                  "absolute right-3 top-1/2 transform -translate-y-1/2"
-                )}
+              <Input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
               />
+              <FaLock className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
             </div>
           </div>
           <div className={twMerge("flex items-center gap-14 mt-4")}>
@@ -72,25 +84,14 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
             </Link>
           </div>
           <Button type="submit" className={twMerge("w-full mt-6")}>
-            Login
+            {auth.loading ? 'Logging in...' : 'Login'}
           </Button>
-          <p
-            className={twMerge(
-              'mt-6 text-center  relative flex items-center my-4 before:content-[""] before:flex-1 before:border-b before:border-black before:mx-3 after:content-[""] after:flex-1 after:border-b after:border-black after:mx-3'
-            )}
-          >
+          <p className={twMerge('mt-6 text-center  relative flex items-center my-4 before:content-[""] before:flex-1 before:border-b before:border-black before:mx-3 after:content-[""] after:flex-1 after:border-b after:border-black after:mx-3')}>
             Or Login with
           </p>
           <div className={twMerge("flex justify-center gap-4 mt-2")}>
-            <Button
-              variant="outline"
-              className={twMerge("flex items-center gap-1")}
-            >
-              <img
-                className={twMerge("h-3 w-3")}
-                src={googleimage}
-                alt="Google"
-              />
+            <Button variant="outline" className={twMerge("flex items-center gap-1")}>
+              <img className={twMerge("h-3 w-3")} src={googleimage} alt="Google" />
               Google
             </Button>
           </div>

src/Pages/register/Register.tsx

@@ -1,10 +1,12 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { FaUser, FaLock } from "react-icons/fa";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { useState, FormEvent } from "react";
-import { useNavigate } from "react-router-dom";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
+import { RootState, AppDispatch } from '../../store/store';
+import { signup } from '../../store/features/auth/authSlice'; 
 import libraryimage from "./images/library.jpg";
 import Quote from "@/mycomponents/Quote";
 
@@ -15,53 +17,48 @@ interface InputState {
 }
 
 function Register() {
+  const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
+  const auth = useSelector((state: RootState) => state.auth);
 
   const [input, setInput] = useState<InputState>({
     email: "",
     password: "",
     confirmpassword: "",
   });
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (
-      input.email == "" ||
-      input.password == "" ||
-      input.confirmpassword == ""
-    ) {
-      alert("please fill the credentials");
+    if (input.password !== input.confirmpassword) {
+      alert("Password and confirm password do not match.");
     } else {
-      if (input.password !== input.confirmpassword) {
-        alert("password and confirm password does not match");
-      } else {
-        localStorage.setItem("user", JSON.stringify(input));
-        navigate("/login");
-      }
+      dispatch(signup({ email: input.email, password: input.password }))
+        .unwrap()
+        .then(() => {
+          navigate("/users");
+          console.log(input)
+        })
+        .catch((error) => {
+          console.error("Registration failed:", error);
+        });
     }
   };
 
   return (
-    <div
-      className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}
-    >
+    <div className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}>
       <div className={twMerge("md:w-1/2 relative")}>
-        <img
-          className={twMerge("h-full w-full object-cover")}
-          src={libraryimage}
-          alt=""
-        />
+        <img className={twMerge("h-full w-full object-cover")} src={libraryimage} alt="" />
         <div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white text-center">
           <Quote />
         </div>
       </div>
       <div className="md:w-1/2 flex items-center justify-center">
         <form
           onSubmit={handleSubmit}
-          className={twMerge(
-            "border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded"
-          )}
+          className={twMerge("border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded")}
         >
           <h1 className={twMerge("text-2xl text-center mb-6")}>Register</h1>
+          {auth.error && <div className="text-red-500 text-center mb-4">{auth.error}</div>}
           <div className={twMerge("flex flex-col gap-6")}>
             <div className={twMerge("relative")}>
               <Input
@@ -73,11 +70,7 @@ function Register() {
                 type="email"
                 placeholder="Email"
               />
-              <FaUser
-                className={twMerge(
-                  "absolute right-3 top-1/2 transform -translate-y-1/2"
-                )}
-              />
+              <FaUser className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
             </div>
             <div className={twMerge("relative")}>
               <Input
@@ -88,13 +81,8 @@ function Register() {
                 }
                 type="password"
                 placeholder="Password"
-                className="pwd"
-              />
-              <FaLock
-                className={twMerge(
-                  "absolute right-3 top-1/2 transform -translate-y-1/2"
-                )}
               />
+              <FaLock className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
             </div>
             <div className={twMerge("relative")}>
               <Input
@@ -105,28 +93,16 @@ function Register() {
                 }
                 type="password"
                 placeholder="Confirm Password"
-                className="pwd"
-              />
-              <FaLock
-                className={twMerge(
-                  "absolute right-3 top-1/2 transform -translate-y-1/2"
-                )}
               />
+              <FaLock className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
             </div>
           </div>
           <Button type="submit" className={twMerge("w-full mt-6")}>
-            Register
+            {auth.loading ? 'Registering...' : 'Register'}
           </Button>
-
-          <p
-            className={twMerge(
-              'mt-6 text-center  relative flex items-center my-4 before:content-[""] before:flex-1 before:border-b before:border-black before:mx-3 after:content-[""] after:flex-1 after:border-b after:border-black after:mx-3'
-            )}
-          >
-            {" "}
-            O r
+          <p className={twMerge('mt-6 text-center relative flex items-center my-4 before:content-[""] before:flex-1 before:border-b before:border-black before:mx-3 after:content-[""] after:flex-1 after:border-b after:border-black after:mx-3')}>
+            Or
           </p>
-
           <div className={twMerge("text-center mt-4")}>
             Already have an account?{" "}
             <Link to="/login" className={twMerge("text-blue-700")}>