diff --git a/frontend/src/components/auth/Register.tsx b/frontend/src/components/auth/Register.tsx new file mode 100644 index 0000000..85ae49a --- /dev/null +++ b/frontend/src/components/auth/Register.tsx @@ -0,0 +1,213 @@ +import { LstCard } from "../extendedUI/LstCard"; +import { CardHeader } from "../ui/card"; +import { toast } from "sonner"; + +import { Label } from "../ui/label"; +import { Input } from "../ui/input"; +import { Button } from "../ui/button"; +import { useForm } from "@tanstack/react-form"; +import { Separator } from "../ui/separator"; +import { useNavigate } from "@tanstack/react-router"; +import { useState } from "react"; +import axios from "axios"; + +export default function RegisterForm() { + const navigate = useNavigate(); + const [registering, setRegistering] = useState(false); + const form = useForm({ + defaultValues: { + username: "", + password: "", + email: "", + }, + onSubmit: async ({ value }) => { + setRegistering(true); + try { + const res = await axios.post("/api/auth/register", value); + + if (res.data.success) { + navigate({ to: "/login" }); + form.reset(); + toast.success( + `${value.username} was just created please login` + ); + setRegistering(false); + } + + if (!res.data.success) { + toast.error(res.data.message); + setRegistering(false); + } + } catch (error) { + //console.log(error); + toast.error("There was an error registering"); + setRegistering(false); + } + }, + }); + + return ( +
+ + +
+

Login to register

+
+ +
+
{ + e.preventDefault(); + e.stopPropagation(); + }} + > + + + value.length > 3 + ? undefined + : "Username must be longer than 3 letters", + }} + children={(field) => { + return ( +
+ + + field.handleChange(e.target.value) + } + /> + {field.state.meta.errors.length ? ( + + {field.state.meta.errors.join(",")} + + ) : null} +
+ ); + }} + /> + + + value.length > 3 + ? undefined + : "You must enter a valid email", + }} + children={(field) => { + return ( +
+ + + field.handleChange(e.target.value) + } + /> + {field.state.meta.errors.length ? ( + + {field.state.meta.errors.join(",")} + + ) : null} +
+ ); + }} + /> + +

+ Your password Should be your windows password, as this + is how you will interact with alplaprod +

+ { + // if ( + // window.location.pathname.includes( + // "/users" + // ) && + // value.length === 0 + // ) { + // return; + // } + if (value.length < 4) { + return "Password must be at least 4 characters long."; + } + + if (!/[A-Z]/.test(value)) { + return "Password must contain at least one uppercase letter."; + } + + if (!/[a-z]/.test(value)) { + return "Password must contain at least one lower case letter."; + } + + if (!/[0-9]/.test(value)) { + return "Password must contain at least one number."; + } + + if ( + !/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test( + value + ) + ) { + return "Password must contain at least one special character."; + } + }, + }} + children={(field) => { + return ( +
+ + + field.handleChange(e.target.value) + } + /> + {field.state.meta.errors.length ? ( + + {field.state.meta.errors.join(",")} + + ) : null} +
+ ); + }} + /> +
+ +
+ +
+
+ ); +} diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts index bb8585f..2c2b821 100644 --- a/frontend/src/routeTree.gen.ts +++ b/frontend/src/routeTree.gen.ts @@ -11,6 +11,7 @@ // Import Routes import { Route as rootRoute } from './routes/__root' +import { Route as RegisterImport } from './routes/register' import { Route as LoginImport } from './routes/login' import { Route as ChangelogImport } from './routes/changelog' import { Route as AboutImport } from './routes/about' @@ -27,6 +28,7 @@ import { Route as AdminSettingsImport } from './routes/_admin/settings' import { Route as AdminServersImport } from './routes/_admin/servers' import { Route as AdminNotificationMGTImport } from './routes/_admin/notificationMGT' import { Route as AdminModulesImport } from './routes/_admin/modules' +import { Route as userPasswordChangeImport } from './routes/(user)/passwordChange' import { Route as ocmeCyclecountIndexImport } from './routes/(ocme)/cyclecount/index' import { Route as logisticsSiloAdjustmentsIndexImport } from './routes/(logistics)/siloAdjustments/index' import { Route as logisticsOpenOrdersIndexImport } from './routes/(logistics)/openOrders/index' @@ -40,6 +42,12 @@ import { Route as logisticsSiloAdjustmentsCommentCommentImport } from './routes/ // Create/Update Routes +const RegisterRoute = RegisterImport.update({ + id: '/register', + path: '/register', + getParentRoute: () => rootRoute, +} as any) + const LoginRoute = LoginImport.update({ id: '/login', path: '/login', @@ -133,6 +141,12 @@ const AdminModulesRoute = AdminModulesImport.update({ getParentRoute: () => AdminRoute, } as any) +const userPasswordChangeRoute = userPasswordChangeImport.update({ + id: '/(user)/passwordChange', + path: '/passwordChange', + getParentRoute: () => rootRoute, +} as any) + const ocmeCyclecountIndexRoute = ocmeCyclecountIndexImport.update({ id: '/(ocme)/cyclecount/', path: '/cyclecount/', @@ -252,6 +266,20 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof LoginImport parentRoute: typeof rootRoute } + '/register': { + id: '/register' + path: '/register' + fullPath: '/register' + preLoaderRoute: typeof RegisterImport + parentRoute: typeof rootRoute + } + '/(user)/passwordChange': { + id: '/(user)/passwordChange' + path: '/passwordChange' + fullPath: '/passwordChange' + preLoaderRoute: typeof userPasswordChangeImport + parentRoute: typeof rootRoute + } '/_admin/modules': { id: '/_admin/modules' path: '/modules' @@ -438,6 +466,8 @@ export interface FileRoutesByFullPath { '/about': typeof AboutRoute '/changelog': typeof ChangelogRoute '/login': typeof LoginRoute + '/register': typeof RegisterRoute + '/passwordChange': typeof userPasswordChangeRoute '/modules': typeof AdminModulesRoute '/notificationMGT': typeof AdminNotificationMGTRoute '/servers': typeof AdminServersRoute @@ -465,6 +495,8 @@ export interface FileRoutesByTo { '/about': typeof AboutRoute '/changelog': typeof ChangelogRoute '/login': typeof LoginRoute + '/register': typeof RegisterRoute + '/passwordChange': typeof userPasswordChangeRoute '/modules': typeof AdminModulesRoute '/notificationMGT': typeof AdminNotificationMGTRoute '/servers': typeof AdminServersRoute @@ -495,6 +527,8 @@ export interface FileRoutesById { '/about': typeof AboutRoute '/changelog': typeof ChangelogRoute '/login': typeof LoginRoute + '/register': typeof RegisterRoute + '/(user)/passwordChange': typeof userPasswordChangeRoute '/_admin/modules': typeof AdminModulesRoute '/_admin/notificationMGT': typeof AdminNotificationMGTRoute '/_admin/servers': typeof AdminServersRoute @@ -524,6 +558,8 @@ export interface FileRouteTypes { | '/about' | '/changelog' | '/login' + | '/register' + | '/passwordChange' | '/modules' | '/notificationMGT' | '/servers' @@ -550,6 +586,8 @@ export interface FileRouteTypes { | '/about' | '/changelog' | '/login' + | '/register' + | '/passwordChange' | '/modules' | '/notificationMGT' | '/servers' @@ -578,6 +616,8 @@ export interface FileRouteTypes { | '/about' | '/changelog' | '/login' + | '/register' + | '/(user)/passwordChange' | '/_admin/modules' | '/_admin/notificationMGT' | '/_admin/servers' @@ -608,6 +648,8 @@ export interface RootRouteChildren { AboutRoute: typeof AboutRoute ChangelogRoute: typeof ChangelogRoute LoginRoute: typeof LoginRoute + RegisterRoute: typeof RegisterRoute + userPasswordChangeRoute: typeof userPasswordChangeRoute OcpIndexRoute: typeof OcpIndexRoute logisticsSiloAdjustmentsHistRoute: typeof logisticsSiloAdjustmentsHistRoute logisticsDmIndexRoute: typeof logisticsDmIndexRoute @@ -628,6 +670,8 @@ const rootRouteChildren: RootRouteChildren = { AboutRoute: AboutRoute, ChangelogRoute: ChangelogRoute, LoginRoute: LoginRoute, + RegisterRoute: RegisterRoute, + userPasswordChangeRoute: userPasswordChangeRoute, OcpIndexRoute: OcpIndexRoute, logisticsSiloAdjustmentsHistRoute: logisticsSiloAdjustmentsHistRoute, logisticsDmIndexRoute: logisticsDmIndexRoute, @@ -660,6 +704,8 @@ export const routeTree = rootRoute "/about", "/changelog", "/login", + "/register", + "/(user)/passwordChange", "/ocp/", "/(logistics)/siloAdjustments/$hist", "/(logistics)/dm/", @@ -708,6 +754,12 @@ export const routeTree = rootRoute "/login": { "filePath": "login.tsx" }, + "/register": { + "filePath": "register.tsx" + }, + "/(user)/passwordChange": { + "filePath": "(user)/passwordChange.tsx" + }, "/_admin/modules": { "filePath": "_admin/modules.tsx", "parent": "/_admin"