feat(auth): signupm, forgot passowrd, reset password all added
This commit is contained in:
@@ -46,6 +46,7 @@ export default function LoginForm() {
|
||||
|
||||
const session = await getSession();
|
||||
setSession(session);
|
||||
form.reset();
|
||||
fetchRoles();
|
||||
|
||||
toast.success(
|
||||
@@ -54,12 +55,13 @@ export default function LoginForm() {
|
||||
router.invalidate();
|
||||
router.history.push(search.redirect ? search.redirect : "/");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
// @ts-ignore
|
||||
toast.error(error?.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="ml-[25%]">
|
||||
<div className="">
|
||||
<LstCard className="p-3 w-96">
|
||||
<CardHeader>
|
||||
<CardTitle>Login to your account</CardTitle>
|
||||
@@ -87,9 +89,8 @@ export default function LoginForm() {
|
||||
<form.AppField
|
||||
name="password"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
<field.InputPasswordField
|
||||
label="Password"
|
||||
inputType="password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
@@ -102,7 +103,7 @@ export default function LoginForm() {
|
||||
)}
|
||||
/>
|
||||
<Link
|
||||
to="/"
|
||||
to="/user/resetpassword"
|
||||
className="inline-block text-sm underline-offset-4 hover:underline"
|
||||
>
|
||||
Forgot your password?
|
||||
@@ -118,9 +119,12 @@ export default function LoginForm() {
|
||||
|
||||
<div className="mt-4 text-center text-sm">
|
||||
Don't have an account?{" "}
|
||||
<a href="#" className="underline underline-offset-4">
|
||||
<Link
|
||||
to={"/user/signup"}
|
||||
className="underline underline-offset-4"
|
||||
>
|
||||
Sign up
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import { LstCard } from "../../../components/ui/lstCard";
|
||||
import {
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../components/ui/card";
|
||||
import { useAppForm } from "../../../lib/formStuff";
|
||||
import { api } from "../../../lib/axiosAPI";
|
||||
import { toast } from "sonner";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
export default function RequestResetPassword() {
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
try {
|
||||
const res = await api.post("api/user/resetpassword", {
|
||||
email: value.email,
|
||||
});
|
||||
|
||||
console.log(res);
|
||||
|
||||
if (res.status === 200) {
|
||||
toast.success(
|
||||
res.data.message
|
||||
? res.data.message
|
||||
: "If this email exists in our system, check your email for the reset link"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<LstCard className="p-6 w-96">
|
||||
<CardHeader>
|
||||
<CardTitle>Reset your password</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email address and we’ll send you a reset link
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<form.AppField
|
||||
name="email"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Email address"
|
||||
inputType="email"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>
|
||||
Send Reset Link
|
||||
</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-gray-600">
|
||||
Remembered your password?{" "}
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary underline underline-offset-4 hover:text-primary/80"
|
||||
>
|
||||
Back to login
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
frontend/src/routes/(auth)/-components/ResetPasswordForm.tsx
Normal file
114
frontend/src/routes/(auth)/-components/ResetPasswordForm.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { useAppForm } from "../../../lib/formStuff";
|
||||
import { LstCard } from "../../../components/ui/lstCard";
|
||||
import {
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../components/ui/card";
|
||||
import { api } from "../../../lib/axiosAPI";
|
||||
import { toast } from "sonner";
|
||||
import { Link, useNavigate } from "@tanstack/react-router";
|
||||
|
||||
export default function ResetPasswordForm({ token }: { token: string }) {
|
||||
const navigate = useNavigate();
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
if (value.password != value.confirmPassword) {
|
||||
toast.error("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await api.post("/api/auth/reset-password", {
|
||||
newPassword: value.password,
|
||||
token: token,
|
||||
});
|
||||
if (res.status === 200) {
|
||||
toast.success("Password has been reset");
|
||||
form.reset();
|
||||
navigate({ to: "/login" });
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
// @ts-ignore
|
||||
toast.error(error?.response.data.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<LstCard className="p-6 w-96">
|
||||
<CardHeader>
|
||||
<CardTitle>Set a new password</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your new password below and confirm it to continue
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<form.AppField
|
||||
name="password"
|
||||
children={(field) => (
|
||||
<field.InputPasswordField
|
||||
label="New Password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<form.AppField
|
||||
name="confirmPassword"
|
||||
// validators={{
|
||||
// onChangeListenTo: ["password"],
|
||||
// onChange: ({ value, fieldApi }) => {
|
||||
// if (
|
||||
// value !==
|
||||
// fieldApi.form.getFieldValue("password")
|
||||
// ) {
|
||||
// return "Passwords do not match";
|
||||
// }
|
||||
// return undefined;
|
||||
// },
|
||||
// }}
|
||||
children={(field) => (
|
||||
<field.InputPasswordField
|
||||
label="Confirm Password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>
|
||||
Reset Password
|
||||
</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-gray-600">
|
||||
Remembered your account?{" "}
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary underline underline-offset-4 hover:text-primary/80"
|
||||
>
|
||||
Back to login
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
frontend/src/routes/(auth)/-components/SignupForm.tsx
Normal file
129
frontend/src/routes/(auth)/-components/SignupForm.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../components/ui/card";
|
||||
import { LstCard } from "../../../components/ui/lstCard";
|
||||
import { api } from "../../../lib/axiosAPI";
|
||||
import { useAppForm } from "../../../lib/formStuff";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
export default function SignupForm() {
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
if (value.password != value.confirmPassword) {
|
||||
toast.error("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await api.post("/api/user/register", {
|
||||
username: value.username,
|
||||
name: value.username,
|
||||
email: value.email,
|
||||
password: value.password,
|
||||
});
|
||||
|
||||
if (res.status === 200) {
|
||||
toast.success(`Welcome ${value.username}, to lst.`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
// @ts-ignore
|
||||
toast.error(error?.response.data.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div className="">
|
||||
<LstCard className="p-6 w-96">
|
||||
<CardHeader>
|
||||
<CardTitle>Create an account</CardTitle>
|
||||
<CardDescription>
|
||||
Fill in your details to get started
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
>
|
||||
{/* Username */}
|
||||
<form.AppField
|
||||
name="username"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Username"
|
||||
inputType="text"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Email */}
|
||||
<form.AppField
|
||||
name="email"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Email address"
|
||||
inputType="email"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Password */}
|
||||
<form.AppField
|
||||
name="password"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Password"
|
||||
inputType="password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<form.AppField
|
||||
name="confirmPassword"
|
||||
children={(field) => (
|
||||
<field.InputField
|
||||
label="Confirm Password"
|
||||
inputType="password"
|
||||
required={true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end mt-6">
|
||||
<form.AppForm>
|
||||
<form.SubmitButton>Sign Up</form.SubmitButton>
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center text-sm text-gray-600">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
to={"/login"}
|
||||
className="text-primary underline underline-offset-4 hover:text-primary/80"
|
||||
>
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -23,7 +23,7 @@ export const Route = createFileRoute("/(auth)/login")({
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="m-[25%]">
|
||||
<div className="ml-[25%] mt-[0.5%]">
|
||||
<LoginForm />
|
||||
</div>
|
||||
);
|
||||
|
||||
27
frontend/src/routes/(auth)/user/resetpassword.tsx
Normal file
27
frontend/src/routes/(auth)/user/resetpassword.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import z from "zod";
|
||||
import RequestResetPassword from "../-components/RequestResetPassword";
|
||||
import ResetPasswordForm from "../-components/ResetPasswordForm";
|
||||
|
||||
export const Route = createFileRoute("/(auth)/user/resetpassword")({
|
||||
// beforeLoad: ({ search }) => {
|
||||
// return { token: search.token };
|
||||
// },
|
||||
validateSearch: z.object({
|
||||
token: z.string().optional(),
|
||||
}),
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { token } = Route.useSearch();
|
||||
return (
|
||||
<div className="ml-[25%] mt-[0.5%]">
|
||||
{token ? (
|
||||
<ResetPasswordForm token={token} />
|
||||
) : (
|
||||
<RequestResetPassword />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
frontend/src/routes/(auth)/user/signup.tsx
Normal file
14
frontend/src/routes/(auth)/user/signup.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import SignupForm from "../-components/SignupForm";
|
||||
|
||||
export const Route = createFileRoute("/(auth)/user/signup")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="ml-[25%] mt-[0.5%]">
|
||||
<SignupForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
|
||||
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
||||
|
||||
import type { QueryClient } from "@tanstack/react-query";
|
||||
import { Toaster } from "sonner";
|
||||
import Cookies from "js-cookie";
|
||||
@@ -18,7 +18,6 @@ interface RootRouteContext {
|
||||
|
||||
const RootLayout = () => {
|
||||
//const { logout, login } = Route.useRouteContext();
|
||||
|
||||
const defaultOpen = Cookies.get("sidebar_state") === "true";
|
||||
return (
|
||||
<div>
|
||||
@@ -26,16 +25,15 @@ const RootLayout = () => {
|
||||
<ThemeProvider>
|
||||
<div className="flex flex-col h-screen overflow-hidden">
|
||||
<Nav />
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<SidebarProvider defaultOpen={defaultOpen}>
|
||||
<SideBarNav />
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="flex-2 overflow-y-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
</div>
|
||||
<Toaster expand richColors closeButton />
|
||||
<TanStackRouterDevtools />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</SessionGuard>
|
||||
|
||||
@@ -1,25 +1,13 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { useAuth } from "../lib/authClient";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: Index,
|
||||
});
|
||||
|
||||
function Index() {
|
||||
const { session } = useAuth();
|
||||
return (
|
||||
<div>
|
||||
<div className="h-screen flex flex-col items-center justify-center">
|
||||
<div>Welcome, {session ? session.user.username : "Guest"}</div>
|
||||
<div>
|
||||
<Button className="h-96 w-96">
|
||||
<a href="/lst/d" target="_blank" className="text-4xl">
|
||||
LST-DOCS
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-screen flex flex-col items-center justify-center"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user