cowch/lst
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(front end): login fixes to account for the forced password change

Browse Source
This commit is contained in:
Blake Matthes
2025-10-21 20:27:00 -05:00
parent 43abbd53f4
commit e99c409cad
26 changed files with 10435 additions and 8732 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/navBar/Nav.tsx
View File

@@ -47,9 +47,7 @@ export default function Nav() {
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
{/* <Link to="/passwordChange">
Password Change
</Link> */}
<Link to="/user/profile">Profile</Link>
</DropdownMenuItem>
{/* <DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>

42
frontend/src/routeTree.gen.ts
View File

@@ -15,11 +15,13 @@ import { Route as AdminLayoutRouteRouteImport } from './routes/_adminLayout/rout
import { Route as IndexRouteImport } from './routes/index'
import { Route as authLoginRouteImport } from './routes/(auth)/login'
import { Route as mobileStuffMobileLayoutRouteRouteImport } from './routes/(mobileStuff)/_mobileLayout/route'
import { Route as authUserIndexRouteImport } from './routes/(auth)/user/index'
import { Route as AdminLayoutAdminSettingsRouteImport } from './routes/_adminLayout/admin/settings'
import { Route as AdminLayoutAdminServersRouteImport } from './routes/_adminLayout/admin/servers'
import { Route as logisticsLogisticsDeliveryScheduleRouteImport } from './routes/(logistics)/logistics/deliverySchedule'
import { Route as authUserSignupRouteImport } from './routes/(auth)/user/signup'
import { Route as authUserResetpasswordRouteImport } from './routes/(auth)/user/resetpassword'
import { Route as authUserProfileRouteImport } from './routes/(auth)/user/profile'
import { Route as AdminLayoutAdminUsersRouteRouteImport } from './routes/_adminLayout/admin/_users/route'
import { Route as mobileStuffMobileLayoutMIndexRouteImport } from './routes/(mobileStuff)/_mobileLayout/m/index'
import { Route as AdminLayoutAdminUsersUsersRouteImport } from './routes/_adminLayout/admin/_users/users'
@@ -59,6 +61,11 @@ const mobileStuffMobileLayoutRouteRoute =
id: '/_mobileLayout',
getParentRoute: () => mobileStuffRoute,
} as any)
const authUserIndexRoute = authUserIndexRouteImport.update({
id: '/(auth)/user/',
path: '/user/',
getParentRoute: () => rootRouteImport,
} as any)
const AdminLayoutAdminSettingsRoute =
AdminLayoutAdminSettingsRouteImport.update({
id: '/settings',
@@ -86,6 +93,11 @@ const authUserResetpasswordRoute = authUserResetpasswordRouteImport.update({
path: '/user/resetpassword',
getParentRoute: () => rootRouteImport,
} as any)
const authUserProfileRoute = authUserProfileRouteImport.update({
id: '/(auth)/user/profile',
path: '/user/profile',
getParentRoute: () => rootRouteImport,
} as any)
const AdminLayoutAdminUsersRouteRoute =
AdminLayoutAdminUsersRouteRouteImport.update({
id: '/_users',
@@ -132,11 +144,13 @@ export interface FileRoutesByFullPath {
'/': typeof mobileStuffMobileLayoutRouteRouteWithChildren
'/login': typeof authLoginRoute
'/admin': typeof AdminLayoutAdminUsersRouteRouteWithChildren
'/user/profile': typeof authUserProfileRoute
'/user/resetpassword': typeof authUserResetpasswordRoute
'/user/signup': typeof authUserSignupRoute
'/logistics/deliverySchedule': typeof logisticsLogisticsDeliveryScheduleRoute
'/admin/servers': typeof AdminLayoutAdminServersRoute
'/admin/settings': typeof AdminLayoutAdminSettingsRoute
'/user': typeof authUserIndexRoute
'/m/cyclecounts': typeof mobileStuffMobileLayoutMCyclecountsRoute
'/m/delivery': typeof mobileStuffMobileLayoutMDeliveryRoute
'/m/relocate': typeof mobileStuffMobileLayoutMRelocateRoute
@@ -148,11 +162,13 @@ export interface FileRoutesByTo {
'/': typeof mobileStuffMobileLayoutRouteRouteWithChildren
'/login': typeof authLoginRoute
'/admin': typeof AdminLayoutAdminUsersRouteRouteWithChildren
'/user/profile': typeof authUserProfileRoute
'/user/resetpassword': typeof authUserResetpasswordRoute
'/user/signup': typeof authUserSignupRoute
'/logistics/deliverySchedule': typeof logisticsLogisticsDeliveryScheduleRoute
'/admin/servers': typeof AdminLayoutAdminServersRoute
'/admin/settings': typeof AdminLayoutAdminSettingsRoute
'/user': typeof authUserIndexRoute
'/m/cyclecounts': typeof mobileStuffMobileLayoutMCyclecountsRoute
'/m/delivery': typeof mobileStuffMobileLayoutMDeliveryRoute
'/m/relocate': typeof mobileStuffMobileLayoutMRelocateRoute
@@ -169,11 +185,13 @@ export interface FileRoutesById {
'/(auth)/login': typeof authLoginRoute
'/_adminLayout/admin': typeof AdminLayoutAdminRouteWithChildren
'/_adminLayout/admin/_users': typeof AdminLayoutAdminUsersRouteRouteWithChildren
'/(auth)/user/profile': typeof authUserProfileRoute
'/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
'/(auth)/user/signup': typeof authUserSignupRoute
'/(logistics)/logistics/deliverySchedule': typeof logisticsLogisticsDeliveryScheduleRoute
'/_adminLayout/admin/servers': typeof AdminLayoutAdminServersRoute
'/_adminLayout/admin/settings': typeof AdminLayoutAdminSettingsRoute
'/(auth)/user/': typeof authUserIndexRoute
'/(mobileStuff)/_mobileLayout/m/cyclecounts': typeof mobileStuffMobileLayoutMCyclecountsRoute
'/(mobileStuff)/_mobileLayout/m/delivery': typeof mobileStuffMobileLayoutMDeliveryRoute
'/(mobileStuff)/_mobileLayout/m/relocate': typeof mobileStuffMobileLayoutMRelocateRoute
@@ -187,11 +205,13 @@ export interface FileRouteTypes {
| '/'
| '/login'
| '/admin'
| '/user/profile'
| '/user/resetpassword'
| '/user/signup'
| '/logistics/deliverySchedule'
| '/admin/servers'
| '/admin/settings'
| '/user'
| '/m/cyclecounts'
| '/m/delivery'
| '/m/relocate'
@@ -203,11 +223,13 @@ export interface FileRouteTypes {
| '/'
| '/login'
| '/admin'
| '/user/profile'
| '/user/resetpassword'
| '/user/signup'
| '/logistics/deliverySchedule'
| '/admin/servers'
| '/admin/settings'
| '/user'
| '/m/cyclecounts'
| '/m/delivery'
| '/m/relocate'
@@ -223,11 +245,13 @@ export interface FileRouteTypes {
| '/(auth)/login'
| '/_adminLayout/admin'
| '/_adminLayout/admin/_users'
| '/(auth)/user/profile'
| '/(auth)/user/resetpassword'
| '/(auth)/user/signup'
| '/(logistics)/logistics/deliverySchedule'
| '/_adminLayout/admin/servers'
| '/_adminLayout/admin/settings'
| '/(auth)/user/'
| '/(mobileStuff)/_mobileLayout/m/cyclecounts'
| '/(mobileStuff)/_mobileLayout/m/delivery'
| '/(mobileStuff)/_mobileLayout/m/relocate'
@@ -241,9 +265,11 @@ export interface RootRouteChildren {
AdminLayoutRouteRoute: typeof AdminLayoutRouteRouteWithChildren
mobileStuffRoute: typeof mobileStuffRouteWithChildren
authLoginRoute: typeof authLoginRoute
authUserProfileRoute: typeof authUserProfileRoute
authUserResetpasswordRoute: typeof authUserResetpasswordRoute
authUserSignupRoute: typeof authUserSignupRoute
logisticsLogisticsDeliveryScheduleRoute: typeof logisticsLogisticsDeliveryScheduleRoute
authUserIndexRoute: typeof authUserIndexRoute
}
declare module '@tanstack/react-router' {
@@ -290,6 +316,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof mobileStuffMobileLayoutRouteRouteImport
parentRoute: typeof mobileStuffRoute
}
'/(auth)/user/': {
id: '/(auth)/user/'
path: '/user'
fullPath: '/user'
preLoaderRoute: typeof authUserIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/_adminLayout/admin/settings': {
id: '/_adminLayout/admin/settings'
path: '/settings'
@@ -325,6 +358,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof authUserResetpasswordRouteImport
parentRoute: typeof rootRouteImport
}
'/(auth)/user/profile': {
id: '/(auth)/user/profile'
path: '/user/profile'
fullPath: '/user/profile'
preLoaderRoute: typeof authUserProfileRouteImport
parentRoute: typeof rootRouteImport
}
'/_adminLayout/admin/_users': {
id: '/_adminLayout/admin/_users'
path: '/admin'
@@ -460,10 +500,12 @@ const rootRouteChildren: RootRouteChildren = {
AdminLayoutRouteRoute: AdminLayoutRouteRouteWithChildren,
mobileStuffRoute: mobileStuffRouteWithChildren,
authLoginRoute: authLoginRoute,
authUserProfileRoute: authUserProfileRoute,
authUserResetpasswordRoute: authUserResetpasswordRoute,
authUserSignupRoute: authUserSignupRoute,
logisticsLogisticsDeliveryScheduleRoute:
logisticsLogisticsDeliveryScheduleRoute,
authUserIndexRoute: authUserIndexRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)

236
frontend/src/routes/(auth)/-components/LoginForm.tsx
View File

@@ -1,133 +1,129 @@
import { Link, useRouter, useSearch } from "@tanstack/react-router";
import {
getSession,
signin,
useAuth,
useUserRoles,
} from "../../../lib/authClient";
import { useAppForm } from "../../../lib/formStuff";
import { LstCard } from "../../../components/ui/lstCard";
import axios from "axios";
import { toast } from "sonner";
import {
CardContent,
CardDescription,
CardHeader,
CardTitle,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../../../components/ui/card";
import { LstCard } from "../../../components/ui/lstCard";
import { getSession, useAuth, useUserRoles } from "../../../lib/authClient";
import { useAppForm } from "../../../lib/formStuff";
export default function LoginForm() {
const router = useRouter();
const search = useSearch({ from: "/(auth)/login" });
const username = localStorage.getItem("username") || "";
const rememeberMe = localStorage.getItem("rememberMe") === "true";
const { setSession } = useAuth();
const { fetchRoles } = useUserRoles();
const router = useRouter();
const search = useSearch({ from: "/(auth)/login" });
const username = localStorage.getItem("username") || "";
const rememberMe = localStorage.getItem("rememberMe") === "true";
const { setSession } = useAuth();
const { fetchRoles } = useUserRoles();
const form = useAppForm({
defaultValues: {
username: username,
password: "",
rememberMe: rememeberMe,
},
onSubmit: async ({ value }) => {
if (value.rememberMe) {
localStorage.setItem("rememberMe", value.rememberMe.toString());
localStorage.setItem("username", value.username);
} else {
localStorage.removeItem("rememberMe");
localStorage.removeItem("username");
}
const form = useAppForm({
defaultValues: {
username: username,
password: "",
rememberMe: rememberMe,
},
onSubmit: async ({ value }) => {
if (value.rememberMe) {
localStorage.setItem("rememberMe", value.rememberMe.toString());
localStorage.setItem("username", value.username);
} else {
localStorage.removeItem("rememberMe");
localStorage.removeItem("username");
}
try {
await signin({
username: value.username,
password: value.password,
});
try {
await axios.post("/lst/api/user/login", {
username: value.username,
password: value.password,
});
const session = await getSession();
setSession(session);
form.reset();
fetchRoles();
const session = await getSession();
setSession(session);
form.reset();
fetchRoles();
toast.success(
`Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `
);
router.invalidate();
router.history.push(search.redirect ? search.redirect : "/");
} catch (error) {
// @ts-ignore
toast.error(error?.message);
}
},
});
return (
<div className="">
<LstCard className="p-3 w-96">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardDescription>
Enter your username and password below
</CardDescription>
</CardHeader>
<CardContent>
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<form.AppField
name="username"
children={(field) => (
<field.InputField
label="Username"
inputType="string"
required={true}
/>
)}
/>
<form.AppField
name="password"
children={(field) => (
<field.InputPasswordField
label="Password"
required={true}
/>
)}
/>
<div className="flex flex-row justify-between mt-3 mb-3">
<form.AppField
name="rememberMe"
children={(field) => (
<field.CheckboxField label="Remember me" />
)}
/>
<Link
to="/user/resetpassword"
className="inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</Link>
</div>
toast.success(
`Welcome back ${session?.user.name ? session?.user.name : session?.user.username} `,
);
router.invalidate();
router.history.push(search.redirect ? search.redirect : "/");
} catch (error) {
// @ts-ignore
if (!error.response.success) {
// @ts-ignore
toast.error(error.response.data.message);
} else {
// @ts-ignore
toast.error(error?.message);
}
}
},
});
return (
<div className="">
<LstCard className="p-3 w-96">
<CardHeader>
<CardTitle>Login to your account</CardTitle>
<CardDescription>
Enter your username and password below
</CardDescription>
</CardHeader>
<CardContent>
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<form.AppField
name="username"
children={(field) => (
<field.InputField
label="Username"
inputType="string"
required={true}
/>
)}
/>
<form.AppField
name="password"
children={(field) => (
<field.InputPasswordField label="Password" required={true} />
)}
/>
<div className="flex flex-row justify-between mt-3 mb-3">
<form.AppField
name="rememberMe"
children={(field) => (
<field.CheckboxField label="Remember me" />
)}
/>
<Link
to="/user/resetpassword"
className="inline-block text-sm underline-offset-4 hover:underline"
>
Forgot your password?
</Link>
</div>
<div className="flex justify-end mt-2">
<form.AppForm>
<form.SubmitButton>Login</form.SubmitButton>
</form.AppForm>
</div>
</form>
<div className="flex justify-end mt-2">
<form.AppForm>
<form.SubmitButton>Login</form.SubmitButton>
</form.AppForm>
</div>
</form>
<div className="mt-4 text-center text-sm">
Don&apos;t have an account?{" "}
<Link
to={"/user/signup"}
className="underline underline-offset-4"
>
Sign up
</Link>
</div>
</CardContent>
</LstCard>
</div>
);
<div className="mt-4 text-center text-sm">
Don&apos;t have an account?{" "}
<Link to={"/user/signup"} className="underline underline-offset-4">
Sign up
</Link>
</div>
</CardContent>
</LstCard>
</div>
);
}

13
frontend/src/routes/(auth)/user/index.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/(auth)/user/")({
component: RouteComponent,
});
function RouteComponent() {
return (
<div>
<span>Nothing here </span>
</div>
);
}

40
frontend/src/routes/(auth)/user/profile.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { createFileRoute, redirect } from "@tanstack/react-router";
import { authClient, useAuth } from "../../../lib/authClient";
export const Route = createFileRoute("/(auth)/user/profile")({
beforeLoad: async () => {
const result = await authClient.getSession({
query: { disableCookieCache: true }, // force DB/Server lookup
});
//console.log("session check:", result.data);
if (!result.data) {
throw redirect({
to: "/login",
search: {
redirect: location.pathname + location.search,
},
});
}
},
component: RouteComponent,
});
function RouteComponent() {
const { session } = useAuth();
return (
<div className="m-2">
<div>
<span>Things you can change</span>
<ol>
<li>Display name: {session?.user.displayUsername}</li>
<li>Name: {session?.user.name}</li>
<li>Image: To be added</li>
<li>password: **************</li>
</ol>
</div>
</div>
);
}