Skip to content

Commit 3a2f839

Browse files
Abh1noobAbh1noob
committed
refactor: login
1 parent f5940b6 commit 3a2f839

7 files changed

Lines changed: 164 additions & 175 deletions

File tree

‎src/api/axiosConfig.ts‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,47 @@
1-
21
import { refreshTK } from "@/store/interfaces";
3-
import axios, {AxiosError, InternalAxiosRequestConfig } from "axios";
2+
import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
43
import { redirect } from "next/navigation";
54
import toast from "react-hot-toast";
65
const instance = axios.create({
7-
baseURL: process.env.NEXT_PUBLIC_BASEURL,
8-
withCredentials: true
9-
})
6+
baseURL: process.env.NEXT_PUBLIC_BASEURL,
7+
withCredentials: true,
8+
});
109
interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
11-
_retry?: boolean;
12-
}
10+
_retry?: boolean;
11+
}
1312

1413
instance.interceptors.response.use(
15-
(response) =>{
16-
// console.log(response)
17-
return response
14+
(response) => {
15+
// console.log(response)
16+
return response;
17+
},
18+
async (err) => {
19+
const error = err as AxiosError;
20+
const originalRequest = error.config as CustomAxiosRequestConfig;
21+
22+
// console.log(err.response.status)
23+
if (error.response?.status === 401 && !originalRequest._retry) {
24+
originalRequest._retry = true;
1825

19-
},
20-
async (err)=>{
21-
const error = err as AxiosError;
22-
const originalRequest = error.config as CustomAxiosRequestConfig;
26+
try {
27+
await axios.post<refreshTK>(
28+
`${process.env.NEXT_PUBLIC_BASEURL}/auth/refresh`,
29+
{},
30+
{
31+
withCredentials: true,
32+
},
33+
);
34+
return instance(originalRequest);
35+
} catch {
36+
toast.error("Session expired. Please login again.");
2337

24-
// console.log(err.response.status)
25-
if (error.response?.status === 401 && !originalRequest._retry) {
26-
originalRequest._retry = true;
27-
28-
try {
29-
await axios.post<refreshTK>(
30-
`${process.env.NEXT_PUBLIC_BASEURL}/auth/refresh`,
31-
{},
32-
{
33-
withCredentials: true,
34-
}
35-
);
36-
return instance(originalRequest);
37-
} catch {
38-
toast.error("Session expired. Please login again.");
39-
40-
setTimeout(() => {
41-
window.location.href = "/login";
42-
}, 2000);
43-
}
44-
}
45-
46-
return Promise.reject(error);
38+
setTimeout(() => {
39+
window.location.href = "/";
40+
}, 2000);
41+
}
4742
}
48-
49-
)
50-
export default instance
43+
44+
return Promise.reject(error);
45+
},
46+
);
47+
export default instance;

‎src/app/login/page.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/app/page.tsx‎

Lines changed: 89 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,96 @@
1-
import { LoginForm } from "@/components/login-form";
1+
"use client";
2+
import { login } from "@/api/auth";
3+
import DevsocText from "@/assets/images/DevsocText.svg";
4+
import { Button } from "@/components/ui/button";
5+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
6+
import { Input } from "@/components/ui/input";
7+
import { Label } from "@/components/ui/label";
8+
import { cn } from "@/lib/utils";
9+
import { Loader2 } from "lucide-react";
10+
import Image from "next/image";
11+
import { useRouter } from "next/navigation";
12+
import { useState } from "react";
13+
import toast from "react-hot-toast";
214

315
export default function HomePage() {
16+
const [email, setEmail] = useState<string>("");
17+
const [password, setPassword] = useState<string>("");
18+
const [loading, setLoading] = useState<boolean>(false);
19+
const router = useRouter();
20+
21+
const handleLogin = async (e: { preventDefault: () => void }) => {
22+
e.preventDefault();
23+
setLoading(true);
24+
try {
25+
const response = await login(email, password);
26+
if (response.status === "success") {
27+
toast.success("Login successful");
28+
router.push("/users");
29+
}
30+
} catch (err) {
31+
toast.error("Error logging you in");
32+
} finally {
33+
setLoading(false);
34+
}
35+
};
36+
437
return (
5-
<>
6-
<div className="flex h-screen items-center justify-center bg-black p-6 md:p-10">
7-
<div className="w-full max-w-sm">
8-
<LoginForm />
38+
<div className="flex h-screen items-center justify-center bg-black p-6 md:p-10">
39+
<div className="w-full max-w-sm">
40+
<div className={cn("flex flex-col gap-6")}>
41+
<Card>
42+
<CardHeader>
43+
<Image
44+
src={DevsocText as HTMLImageElement}
45+
alt="DevSOC"
46+
height={200}
47+
width={600}
48+
className="mx-auto h-auto w-full max-w-xs"
49+
/>
50+
<CardTitle className="mx-auto text-xl"> Welcome Back</CardTitle>
51+
</CardHeader>
52+
<CardContent>
53+
<form onSubmit={handleLogin}>
54+
<div className="flex flex-col gap-6">
55+
<div className="grid gap-2">
56+
<Label htmlFor="email">Email</Label>
57+
<Input
58+
value={email}
59+
id="email"
60+
type="email"
61+
placeholder="m@example.com"
62+
required
63+
onChange={(e) => setEmail(e.target.value)}
64+
/>
65+
</div>
66+
<div className="grid gap-2">
67+
<div className="flex items-center">
68+
<Label htmlFor="password">Password</Label>
69+
</div>
70+
<Input
71+
value={password}
72+
onChange={(e) => setPassword(e.target.value)}
73+
id="password"
74+
type="password"
75+
required
76+
/>
77+
</div>
78+
<Button type="submit" className="w-full" disabled={loading}>
79+
{loading ? (
80+
<>
81+
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
82+
Logging in...
83+
</>
84+
) : (
85+
"Login"
86+
)}
87+
</Button>
88+
</div>
89+
</form>
90+
</CardContent>
91+
</Card>
992
</div>
1093
</div>
11-
</>
94+
</div>
1295
);
1396
}

‎src/assets/images/DevsocText.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎src/components/login-form.tsx‎

Lines changed: 0 additions & 96 deletions
This file was deleted.

‎src/components/navbar.tsx‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
"use client"
1+
"use client";
22

33
import { logout } from "@/api/auth";
44
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -9,28 +9,24 @@ import {
99
DropdownMenuItem,
1010
DropdownMenuTrigger,
1111
} from "@/components/ui/dropdown-menu";
12-
import {
13-
Sheet,
14-
SheetContent,
15-
SheetTrigger,
16-
} from "@/components/ui/sheet";
12+
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
1713
import { LogOutIcon, MenuIcon } from "lucide-react";
1814
import { useRouter } from "next/navigation";
1915
import { Sidebar } from "./sidebar";
2016

2117
export function Navbar() {
22-
const router = useRouter();
18+
const router = useRouter();
2319

24-
const handleLogout = async ()=>{
25-
try{
26-
await logout();
27-
router.push("/login")
28-
}catch(err){
29-
console.log(err);
30-
}
31-
}
20+
const handleLogout = async () => {
21+
try {
22+
await logout();
23+
router.push("/");
24+
} catch (err) {
25+
console.log(err);
26+
}
27+
};
3228
return (
33-
<nav className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 p-4">
29+
<nav className="flex items-center justify-between border-b border-gray-200 p-4 dark:border-gray-700">
3430
<div className="block md:hidden">
3531
<Sheet>
3632
<SheetTrigger asChild>
@@ -58,13 +54,16 @@ export function Navbar() {
5854
</Button>
5955
</DropdownMenuTrigger>
6056
<DropdownMenuContent align="end">
61-
<DropdownMenuItem onClick = {()=> handleLogout()} className="flex items-center cursor-pointer">
62-
<LogOutIcon className="mr-2 h-4 w-4" />
63-
Log out
57+
<DropdownMenuItem
58+
onClick={() => handleLogout()}
59+
className="flex cursor-pointer items-center"
60+
>
61+
<LogOutIcon className="mr-2 h-4 w-4" />
62+
Log out
6463
</DropdownMenuItem>
6564
</DropdownMenuContent>
6665
</DropdownMenu>
6766
</div>
6867
</nav>
6968
);
70-
}
69+
}

‎src/components/navigation-wrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Sidebar } from "./sidebar";
77

88
export function NavigationWrapper({ children }: { children: React.ReactNode }) {
99
const pathname = usePathname();
10-
const isLoginPage = pathname === "/login" || pathname === "/";
10+
const isLoginPage = pathname === "/" || pathname === "/";
1111

1212
if (isLoginPage) {
1313
return <>{children}</>;

0 commit comments

Comments
 (0)