Skip to content

Commit 0f2a0d2

Browse files
bhagirathpaliyalyogeshpaliyal
bhagirathpaliyal
and
yogeshpaliyal
authored
user authentication with appwrite (#28)
* user authentication with appwrite * fix pr failed * fix pr fail * fix user login * minor changes (#30) --------- Co-authored-by: Yogesh Choudhary Paliyal <yogeshpaliyal.foss@gmail.com>
1 parent a85bf91 commit 0f2a0d2

File tree

8 files changed

+3146
-205
lines changed

8 files changed

+3146
-205
lines changed

‎package-lock.json

Lines changed: 2988 additions & 57 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@radix-ui/react-checkbox": "1.1.1",
1414
"@radix-ui/react-slot": "1.1.0",
1515
"@reduxjs/toolkit": "2.2.6",
16+
"appwrite": "15.0.0",
1617
"class-variance-authority": "0.7.0",
1718
"clsx": "2.1.1",
1819
"lucide-react": "0.399.0",

‎src/Pages/LandingPage.tsx

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { Button } from "@/components/ui/button";
22
import { useNavigate } from "react-router-dom";
3-
import { increment, decrement } from "../store/features/counter/counterSlice";
4-
import { useDispatch, useSelector } from "react-redux";
5-
import { RootState } from "../store/store";
3+
64

75

86
const LandingPage = () => {
@@ -18,8 +16,6 @@ const LandingPage = () => {
1816

1917

2018

21-
const count = useSelector((state: RootState) => state.counter.count);
22-
const dispatch = useDispatch();
2319

2420
return (
2521
<div className="h-[100vh] flex flex-col justify-center items-center">
@@ -29,24 +25,7 @@ const LandingPage = () => {
2925
</p>
3026

3127

32-
<div className="flex mt-[20px] gap-[10px]">
33-
<Button
34-
onClick={() => dispatch(decrement())}
35-
variant="outline"
36-
37-
>
38-
-
39-
</Button>
40-
<div className="border p-[7px] rounded-[7px]">{count}</div>
41-
<Button
42-
onClick={() => dispatch(increment())}
43-
variant="outline"
44-
45-
>
46-
+
47-
</Button>
48-
49-
</div>
28+
5029

5130

5231
<div className="flex gap-[20px] mt-[50px]">

‎src/Pages/LoginForm/LoginForm.tsx

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,78 @@
1+
import React, { useState } from 'react';
2+
import { useDispatch, useSelector } from 'react-redux';
13
import { FaUser, FaLock } from "react-icons/fa";
24
import { Input } from "@/components/ui/input";
35
import { Button } from "@/components/ui/button";
46
import { Checkbox } from "@/components/ui/checkbox";
5-
import { Link } from "react-router-dom";
7+
import { Link, useNavigate } from "react-router-dom";
68
import Quote from "@/mycomponents/Quote";
79
import { twMerge } from "tailwind-merge";
8-
import { useNavigate } from "react-router-dom";
10+
import { RootState, AppDispatch } from '../../store/store';
11+
import { login } from '../../store/features/auth/authSlice';
912
import libraryimage from "./images/library.jpg";
1013
import googleimage from "./images/Google.jpg";
14+
1115
interface LoginFormProps {
1216
up: string;
1317
}
1418

1519
const LoginForm: React.FC<LoginFormProps> = (props) => {
20+
const [email, setEmail] = useState('');
21+
const [password, setPassword] = useState('');
22+
const dispatch = useDispatch<AppDispatch>();
1623
const navigate = useNavigate();
24+
const auth = useSelector((state: RootState) => state.auth);
1725

18-
const goList = () => {
19-
if (props.up == "user") {
20-
navigate("/librarylist");
21-
} else {
22-
navigate("/users");
26+
const handleSubmit = async (e: React.FormEvent) => {
27+
e.preventDefault();
28+
try {
29+
await dispatch(login({ email, password })).unwrap();
30+
31+
if (props.up === 'user') {
32+
navigate('/librarylist');
33+
} else {
34+
navigate('/users');
35+
}
36+
} catch (error) {
37+
console.error('Failed to login:', error);
38+
2339
}
2440
};
41+
2542
return (
26-
<div
27-
className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}
28-
>
43+
<div className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}>
2944
<div className={twMerge("md:w-1/2 relative")}>
30-
<img
31-
className={twMerge("h-full w-full object-cover")}
32-
src={libraryimage}
33-
alt=""
34-
/>
45+
<img className={twMerge("h-full w-full object-cover")} src={libraryimage} alt="" />
3546
<div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white text-center">
3647
<Quote />
3748
</div>
3849
</div>
3950

4051
<div className="md:w-1/2 flex items-center justify-center">
4152
<form
42-
onSubmit={goList}
43-
className={twMerge(
44-
"border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded"
45-
)}
53+
onSubmit={handleSubmit}
54+
className={twMerge("border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded")}
4655
>
4756
<h1 className={twMerge("text-2xl text-center mb-6")}>Log In</h1>
57+
{auth.error && <div className="text-red-500 text-center mb-4">{auth.error}</div>}
4858
<div className={twMerge("flex flex-col gap-6")}>
4959
<div className={twMerge("relative")}>
50-
<Input type="email" placeholder="Email" />
51-
<FaUser
52-
className={twMerge(
53-
"absolute right-3 top-1/2 transform -translate-y-1/2"
54-
)}
60+
<Input
61+
type="email"
62+
placeholder="Email"
63+
value={email}
64+
onChange={(e) => setEmail(e.target.value)}
5565
/>
66+
<FaUser className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
5667
</div>
5768
<div className={twMerge("relative")}>
58-
<Input type="password" placeholder="Password" />
59-
<FaLock
60-
className={twMerge(
61-
"absolute right-3 top-1/2 transform -translate-y-1/2"
62-
)}
69+
<Input
70+
type="password"
71+
placeholder="Password"
72+
value={password}
73+
onChange={(e) => setPassword(e.target.value)}
6374
/>
75+
<FaLock className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
6476
</div>
6577
</div>
6678
<div className={twMerge("flex items-center gap-14 mt-4")}>
@@ -72,25 +84,14 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
7284
</Link>
7385
</div>
7486
<Button type="submit" className={twMerge("w-full mt-6")}>
75-
Login
87+
{auth.loading ? 'Logging in...' : 'Login'}
7688
</Button>
77-
<p
78-
className={twMerge(
79-
'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'
80-
)}
81-
>
89+
<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')}>
8290
Or Login with
8391
</p>
8492
<div className={twMerge("flex justify-center gap-4 mt-2")}>
85-
<Button
86-
variant="outline"
87-
className={twMerge("flex items-center gap-1")}
88-
>
89-
<img
90-
className={twMerge("h-3 w-3")}
91-
src={googleimage}
92-
alt="Google"
93-
/>
93+
<Button variant="outline" className={twMerge("flex items-center gap-1")}>
94+
<img className={twMerge("h-3 w-3")} src={googleimage} alt="Google" />
9495
Google
9596
</Button>
9697
</div>

‎src/Pages/register/Register.tsx

Lines changed: 30 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import React, { useState } from 'react';
2+
import { useDispatch, useSelector } from 'react-redux';
13
import { FaUser, FaLock } from "react-icons/fa";
24
import { Input } from "@/components/ui/input";
35
import { Button } from "@/components/ui/button";
4-
import { useState, FormEvent } from "react";
5-
import { useNavigate } from "react-router-dom";
6-
import { Link } from "react-router-dom";
6+
import { Link, useNavigate } from "react-router-dom";
77
import { twMerge } from "tailwind-merge";
8+
import { RootState, AppDispatch } from '../../store/store';
9+
import { signup } from '../../store/features/auth/authSlice';
810
import libraryimage from "./images/library.jpg";
911
import Quote from "@/mycomponents/Quote";
1012

@@ -15,53 +17,48 @@ interface InputState {
1517
}
1618

1719
function Register() {
20+
const dispatch = useDispatch<AppDispatch>();
1821
const navigate = useNavigate();
22+
const auth = useSelector((state: RootState) => state.auth);
1923

2024
const [input, setInput] = useState<InputState>({
2125
email: "",
2226
password: "",
2327
confirmpassword: "",
2428
});
25-
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
29+
30+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
2631
e.preventDefault();
27-
if (
28-
input.email == "" ||
29-
input.password == "" ||
30-
input.confirmpassword == ""
31-
) {
32-
alert("please fill the credentials");
32+
if (input.password !== input.confirmpassword) {
33+
alert("Password and confirm password do not match.");
3334
} else {
34-
if (input.password !== input.confirmpassword) {
35-
alert("password and confirm password does not match");
36-
} else {
37-
localStorage.setItem("user", JSON.stringify(input));
38-
navigate("/login");
39-
}
35+
dispatch(signup({ email: input.email, password: input.password }))
36+
.unwrap()
37+
.then(() => {
38+
navigate("/users");
39+
console.log(input)
40+
})
41+
.catch((error) => {
42+
console.error("Registration failed:", error);
43+
});
4044
}
4145
};
4246

4347
return (
44-
<div
45-
className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}
46-
>
48+
<div className={twMerge("flex flex-col md:flex-row h-screen overflow-hidden")}>
4749
<div className={twMerge("md:w-1/2 relative")}>
48-
<img
49-
className={twMerge("h-full w-full object-cover")}
50-
src={libraryimage}
51-
alt=""
52-
/>
50+
<img className={twMerge("h-full w-full object-cover")} src={libraryimage} alt="" />
5351
<div className="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center text-white text-center">
5452
<Quote />
5553
</div>
5654
</div>
5755
<div className="md:w-1/2 flex items-center justify-center">
5856
<form
5957
onSubmit={handleSubmit}
60-
className={twMerge(
61-
"border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded"
62-
)}
58+
className={twMerge("border border-gray-300 w-full md:w-3/5 h-7/10 p-6 rounded")}
6359
>
6460
<h1 className={twMerge("text-2xl text-center mb-6")}>Register</h1>
61+
{auth.error && <div className="text-red-500 text-center mb-4">{auth.error}</div>}
6562
<div className={twMerge("flex flex-col gap-6")}>
6663
<div className={twMerge("relative")}>
6764
<Input
@@ -73,11 +70,7 @@ function Register() {
7370
type="email"
7471
placeholder="Email"
7572
/>
76-
<FaUser
77-
className={twMerge(
78-
"absolute right-3 top-1/2 transform -translate-y-1/2"
79-
)}
80-
/>
73+
<FaUser className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
8174
</div>
8275
<div className={twMerge("relative")}>
8376
<Input
@@ -88,13 +81,8 @@ function Register() {
8881
}
8982
type="password"
9083
placeholder="Password"
91-
className="pwd"
92-
/>
93-
<FaLock
94-
className={twMerge(
95-
"absolute right-3 top-1/2 transform -translate-y-1/2"
96-
)}
9784
/>
85+
<FaLock className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
9886
</div>
9987
<div className={twMerge("relative")}>
10088
<Input
@@ -105,28 +93,16 @@ function Register() {
10593
}
10694
type="password"
10795
placeholder="Confirm Password"
108-
className="pwd"
109-
/>
110-
<FaLock
111-
className={twMerge(
112-
"absolute right-3 top-1/2 transform -translate-y-1/2"
113-
)}
11496
/>
97+
<FaLock className={twMerge("absolute right-3 top-1/2 transform -translate-y-1/2")} />
11598
</div>
11699
</div>
117100
<Button type="submit" className={twMerge("w-full mt-6")}>
118-
Register
101+
{auth.loading ? 'Registering...' : 'Register'}
119102
</Button>
120-
121-
<p
122-
className={twMerge(
123-
'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'
124-
)}
125-
>
126-
{" "}
127-
O r
103+
<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')}>
104+
Or
128105
</p>
129-
130106
<div className={twMerge("text-center mt-4")}>
131107
Already have an account?{" "}
132108
<Link to="/login" className={twMerge("text-blue-700")}>

0 commit comments

Comments
 (0)