feat(registerpage): added in but hidden
This commit is contained in:
213
frontend/src/components/auth/Register.tsx
Normal file
213
frontend/src/components/auth/Register.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user