Aroy/Gallery-Archivist
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add: redirect back to where the user was

Browse source
This commit is contained in:
Aroy-Art 2025-02-27 22:15:43 +01:00
parent 4c094920fd
commit 6be77a6859
Signed by: Aroy
GPG key ID: 583642324A1D2070
1 changed files with 94 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
frontend/src/components/partials/LoginForm.tsx
View file

@ -1,76 +1,97 @@
import React, { useState } from "react"; import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card" import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { CircleAlert } from "lucide-react";
import { login } from "@/services/auth"; import { login } from "@/services/auth";
export function LoginForm({ export function LoginForm({
className, className,
...props ...props
}: React.ComponentProps<"div">) { }: React.ComponentProps<"div">) {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const handelSubmit = async (e) => { const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handelLogin = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
setLoading(true)
await login(username, password); await login(username, password);
window.location.href = "/";
} catch (error) { // Get the stored redirect path from localStorage
alert("Login failed!"); const redirectPath = localStorage.getItem("redirect_after_login") || "/";
localStorage.removeItem("redirect_after_login"); // clear the redirect path after use
// Redirect to the stored path
navigate(redirectPath, { replace: true });
} catch (err) {
setError("Invalid credentials. Please try again.");
console.log(err)
} finally {
setLoading(false);
} }
}; };
return ( return (
<div className={cn("flex flex-col gap-6", className)} {...props}> <div className={cn("flex flex-col gap-6", className)} {...props}>
<Card className="overflow-hidden border-2 border-fuchsia-800"> <Card className="overflow-hidden border-2 border-fuchsia-800">
<CardContent className="grid p-0 md:grid-cols-2"> <CardContent className="grid p-0 md:grid-cols-2">
<form onSubmit={handelSubmit} className="p-6 md:p-8"> <form onSubmit={handelLogin} className="p-6 md:p-8">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
<h1 className="text-2xl font-bold">Welcome back</h1> <h1 className="text-2xl font-bold">Welcome back</h1>
<p className="text-balance text-muted-foreground"> <p className="text-balance text-muted-foreground">
Login to your Gallery Archive account Login to your {__SITE_NAME__} account
</p> </p>
</div> </div>
<div className="grid gap-2"> {error && <div className="flex flex-row border-2 border-red-600 p-6 bg-red-400 bg-opacity-40 rounded-md">
<Label htmlFor="username">Username</Label> <CircleAlert />
<Input <p className="ps-4">{error}</p>
id="username" </div>}
type="text" <div className="grid gap-2">
required <Label htmlFor="username">Username</Label>
value={username} <Input
onChange={(e) => setUsername(e.target.value)} id="username"
/> type="text"
</div> required
<div className="grid gap-2"> value={username}
<div className="flex items-center"> onChange={(e) => setUsername(e.target.value)}
<Label htmlFor="password">Password</Label> />
<a </div>
href="#" <div className="grid gap-2">
className="ml-auto text-sm underline-offset-2 hover:underline" <div className="flex items-center">
> <Label htmlFor="password">Password</Label>
Forgot your password? <a
</a> href="#"
</div> className="ml-auto text-sm underline-offset-2 hover:underline"
<Input >
id="password" Forgot your password?
type="password" </a>
required </div>
value={password} <Input
onChange={(e) => setPassword(e.target.value)} id="password"
/> type="password"
</div> required
<Button type="submit" className="w-full bg-primary"> value={password}
Login onChange={(e) => setPassword(e.target.value)}
</Button> />
{/* <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"> </div>
<Button type="submit" className="w-full bg-primary">
{loading ? "Logging in..." : "Login"}
</Button>
{/* <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
<span className="relative z-10 bg-background px-2 text-muted-foreground"> <span className="relative z-10 bg-background px-2 text-muted-foreground">
Or continue with Or continue with
</span> </span>
@ -104,27 +125,27 @@ export function LoginForm({
<span className="sr-only">Login with Meta</span> <span className="sr-only">Login with Meta</span>
</Button> </Button>
</div> */} </div> */}
<div className="text-center text-sm"> <div className="text-center text-sm">
Don&apos;t have an account?{" "} Don&apos;t have an account?{" "}
<a href="/user/register" className="underline underline-offset-4"> <a href="/user/register" className="underline underline-offset-4">
Sign up Sign up
</a> </a>
</div> </div>
</div>
</form>
<div className="relative hidden bg-muted md:block bg-zinc-300 dark:bg-indigo-950">
<img
src="/images/wave.gif"
alt="Image"
className="absolute p-12 inset-0 h-full w-full object-cover dark:brightness-[0.6]"
/>
</div>
</CardContent>
</Card>
<div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
and <a href="#">Privacy Policy</a>.
</div> </div>
</form> </div>
<div className="relative hidden bg-muted md:block bg-zinc-300 dark:bg-indigo-950"> )
<img
src="/images/wave.gif"
alt="Image"
className="absolute p-12 inset-0 h-full w-full object-cover dark:brightness-[0.6]"
/>
</div>
</CardContent>
</Card>
<div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
and <a href="#">Privacy Policy</a>.
</div>
</div>
)
} }