feat(registerpage): added in but hidden

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 (
+        <div className="ml-[25%]">
+            <LstCard className="p-3 w-96">
+                <CardHeader>
+                    <div>
+                        <p className="text-2xl">Login to register</p>
+                    </div>
+                </CardHeader>
+                <hr className="rounded"></hr>
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }}
+                >
+                    <Separator />
+                    <form.Field
+                        name="username"
+                        validators={{
+                            // We can choose between form-wide and field-specific validators
+                            onChange: ({ value }) =>
+                                value.length > 3
+                                    ? undefined
+                                    : "Username must be longer than 3 letters",
+                        }}
+                        children={(field) => {
+                            return (
+                                <div className="m-2 min-w-48 max-w-96 p-2">
+                                    <Label htmlFor="username" className="mb-2">
+                                        Username
+                                    </Label>
+                                    <Input
+                                        name={field.name}
+                                        value={field.state.value}
+                                        onBlur={field.handleBlur}
+                                        //type="number"
+                                        onChange={(e) =>
+                                            field.handleChange(e.target.value)
+                                        }
+                                    />
+                                    {field.state.meta.errors.length ? (
+                                        <em>
+                                            {field.state.meta.errors.join(",")}
+                                        </em>
+                                    ) : null}
+                                </div>
+                            );
+                        }}
+                    />
+                    <Separator />
+                    <form.Field
+                        name="email"
+                        validators={{
+                            // We can choose between form-wide and field-specific validators
+                            onChange: ({ value }) =>
+                                value.length > 3
+                                    ? undefined
+                                    : "You must enter a valid email",
+                        }}
+                        children={(field) => {
+                            return (
+                                <div className="m-2 min-w-48 max-w-96 p-2">
+                                    <Label htmlFor="email" className="mb-2">
+                                        Alpla Email
+                                    </Label>
+                                    <Input
+                                        name={field.name}
+                                        value={field.state.value}
+                                        onBlur={field.handleBlur}
+                                        //type="number"
+                                        onChange={(e) =>
+                                            field.handleChange(e.target.value)
+                                        }
+                                    />
+                                    {field.state.meta.errors.length ? (
+                                        <em>
+                                            {field.state.meta.errors.join(",")}
+                                        </em>
+                                    ) : null}
+                                </div>
+                            );
+                        }}
+                    />
+                    <Separator className="m-2" />
+                    <p>
+                        Your password Should be your windows password, as this
+                        is how you will interact with alplaprod
+                    </p>
+                    <form.Field
+                        name="password"
+                        // We can choose between form-wide and field-specific validators
+                        validators={{
+                            onChangeAsyncDebounceMs: 500,
+                            onChangeAsync: ({ value }) => {
+                                // 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 (
+                                <div className="m-2 min-w-48 max-w-96 p-2">
+                                    <Label htmlFor="password1" className="mb-2">
+                                        Password
+                                    </Label>
+                                    <Input
+                                        name={field.name}
+                                        value={field.state.value}
+                                        onBlur={field.handleBlur}
+                                        type="password"
+                                        onChange={(e) =>
+                                            field.handleChange(e.target.value)
+                                        }
+                                    />
+                                    {field.state.meta.errors.length ? (
+                                        <em>
+                                            {field.state.meta.errors.join(",")}
+                                        </em>
+                                    ) : null}
+                                </div>
+                            );
+                        }}
+                    />
+                    <div className="mt-4 ml-4 flex justify-end">
+                        <Button
+                            type="submit"
+                            onClick={form.handleSubmit}
+                            disabled={registering}
+                        >
+                            Register
+                        </Button>
+                    </div>
+                </form>
+            </LstCard>
+        </div>
+    );
+}

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"