Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add more validations

Browse Source
This commit is contained in:
Laux Dev
2026-03-05 16:03:31 +08:00
parent dae12d74ee
commit b3f7427e95
17 changed files with 590 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/package-lock.json generated
View File

@@ -10,7 +10,8 @@
"dependencies": {
"next": "16.1.6",
"react": "19.2.3",
"react-dom": "19.2.3"
"react-dom": "19.2.3",
"react-hook-form": "^7.71.2"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",
@@ -6934,6 +6935,22 @@
"react": "^19.2.3"
}
},
"node_modules/react-hook-form": {
"version": "7.71.2",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
"integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
"license": "MIT",
"engines": {
"node": ">=18.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18 || ^19"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

3
frontend/package.json
View File

@@ -11,7 +11,8 @@
"dependencies": {
"next": "16.1.6",
"react": "19.2.3",
"react-dom": "19.2.3"
"react-dom": "19.2.3",
"react-hook-form": "^7.71.2"
},
"devDependencies": {
"@svgr/webpack": "^8.1.0",

44
frontend/src/app/agents/add/page.jsx
View File

@@ -6,6 +6,8 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import globalStyle from "../../globalStyle.module.css";
import createAgentStyle from "./styles.module.css";
import Prompts from "@/app/components/prompts/Prompts";
import useAgentForm from "@/app/hooks/useAgentForm";
import Alert from "@/app/components/alerts/Alert";
const Page = () => {
const [isChecked, setIsChecked] = useState(false);
@@ -13,9 +15,24 @@ const Page = () => {
const handleCheckboxChange = (e) => {
setIsChecked(e.target.checked);
};
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
} = useAgentForm();
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Create New Agent"
/>
)}
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
@@ -28,7 +45,11 @@ const Page = () => {
{/* Create agent Container */}
<div className={createAgentStyle.createAgentContainer}>
<TopToolTip />
<form className={createAgentStyle.inputMainContainer} id="form">
<form
className={createAgentStyle.inputMainContainer}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
{/* Header */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
@@ -40,10 +61,14 @@ const Page = () => {
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Agent Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
<p className={createAgentStyle.required}>*</p>
</div>
{/* Input Field */}
<TextField placeHolder="Enter agent name" required />
<TextField
placeHolder="Enter agent name"
{...register("agentName", { required: true })}
hasError={!!errors.agentName}
/>
<Prompts show={false} />
</div>
{/* Kubernetes API input */}
@@ -51,10 +76,14 @@ const Page = () => {
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Kubernetes API Proxy Name</p>
{/* <p className={createAgentStyle.required}>*</p> */}
<p className={createAgentStyle.required}>*</p>
</div>
{/* Input Field */}
<TextField placeHolder="Enter proxy name" />
<TextField
placeHolder="Enter proxy name"
{...register("proxyName", { required: true })}
hasError={!!errors.proxyName}
/>
<Prompts show={false} />
</div>
{/* Checkbox */}
@@ -89,12 +118,13 @@ const Page = () => {
{/* Label */}
<div className={createAgentStyle.labelContainer}>
<p>Agent Endpoint</p>
{/* <p className={createAgentStyle.required}>*</p> */}
<p className={createAgentStyle.required}>*</p>
</div>
{/* Input Field */}
<TextField
placeHolder="e.g., http://agent-01.example.com:8080"
required
{...register("agentEndpoint", { required: true })}
hasError={!!errors.agentEndpoint}
/>
<Prompts show={false} />
</div>

8
frontend/src/app/components/fields/styles.module.css
View File

@@ -19,13 +19,11 @@
line-height: normal;
caret-color: #575bc7;
}
.input:focus,
.input:active {
.input:focus {
border-radius: 6px;
border: 1px solid #959aff;
background: rgba(75, 79, 109, 0.25);
}
.input:active::placeholder,
.input:focus::placeholder {
color: #4b4f6d;
font-family: Inter;
@@ -54,6 +52,8 @@
pointer-events: none;
user-select: none;
}
.input:invalid {
.error,
.error:focus,
.error:hover {
border: 1px solid #b43939;
}

35
frontend/src/app/credentials/add/page.jsx
View File

@@ -6,8 +6,18 @@ import createCredStyle from "./styles.module.css";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import Prompts from "@/app/components/prompts/Prompts";
import useRoleForm from "@/app/hooks/useRolesForm";
import Alert from "@/app/components/alerts/Alert";
const Page = () => {
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
} = useRoleForm();
const [selectedFile, setSelectedFile] = useState(null);
// Click
const handleFileChange = (e) => {
@@ -31,6 +41,13 @@ const Page = () => {
};
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Create Credential"
/>
)}
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
@@ -43,16 +60,24 @@ const Page = () => {
{/* Create Crediantial Container */}
<div className={createCredStyle.createCredContainer}>
<TopToolTip />
<div className={createCredStyle.inputFieldContainer}>
<form
className={createCredStyle.inputFieldContainer}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
{/* Project Name Input Container */}
<div className={createCredStyle.projectName}>
<div className={createCredStyle.label}>
<p className={createCredStyle.labelTxt}>Project Name</p>
{/* <p className={createCredStyle.required}>*</p> */}
<p className={createCredStyle.required}>*</p>
</div>
{/* Content */}
<div className={createCredStyle.credInputField}>
<TextField placeHolder="Enter Credential Name" />
<TextField
placeHolder="Enter Credential Name"
{...register("projectName", { required: true })}
hasError={!!errors.projectName}
/>
<Prompts show={false} />
</div>
</div>
@@ -62,7 +87,7 @@ const Page = () => {
<div className={createCredStyle.label}>
<p>Upload File</p>
{/* Optional or Required */}
{/* <p className={createCredStyle.optionalTxt}>(Optional)</p> */}{" "}
<p className={createCredStyle.optionalTxt}>(Optional)</p>{" "}
</div>
{/* Upload File */}
<label
@@ -92,7 +117,7 @@ const Page = () => {
)}
</label>
</div>
</div>
</form>
</div>
</div>
</div>

32
frontend/src/app/hooks/useAgentForm.jsx Normal file
View File

@@ -0,0 +1,32 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
const useAgentForm = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
setTriggerAlert(true);
console.log("Submitted data:", data);
};
return {
register,
handleSubmit,
watch,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
};
};
export default useAgentForm;

33
frontend/src/app/hooks/useCredentialForm.jsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
const useCredentialForm = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
setTriggerAlert(true);
console.log("Submitted data:", data);
};
return {
register,
handleSubmit,
watch,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
};
};
export default useCredentialForm;

46
frontend/src/app/hooks/useOrganizationForm.jsx Normal file
View File

@@ -0,0 +1,46 @@
"use client";
import { useState } from "react";
const useOrganizationForm = () => {
const [organizationName, setOrganizationName] = useState("");
const [error, setError] = useState(false);
const [triggerAlert, setTriggerAlert] = useState(false);
const handleChange = (e) => {
const value = e.target.value;
setOrganizationName(value);
if (value.trim() !== "") {
setError(false);
}
};
const handleValidation = (e) => {
e.preventDefault();
setError(true);
};
const handleSubmit = (e) => {
e.preventDefault();
if (!organizationName.trim()) {
setError(true);
return;
}
setTriggerAlert(true);
console.log("Submitted organization:", organizationName);
};
return {
organizationName,
error,
triggerAlert,
handleChange,
handleValidation,
handleSubmit,
setTriggerAlert,
};
};
export default useOrganizationForm;

33
frontend/src/app/hooks/useProjectForm.jsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
const useProjectForm = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
setTriggerAlert(true);
console.log("Submitted data:", data);
};
return {
register,
handleSubmit,
watch,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
};
};
export default useProjectForm;

33
frontend/src/app/hooks/useRolesForm.jsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
const useRoleForm = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
setTriggerAlert(true);
console.log("Submitted data:", data);
};
return {
register,
handleSubmit,
watch,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
};
};
export default useRoleForm;

64
frontend/src/app/hooks/useServicesForm.jsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
const useServicesForm = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const [disableScaling, setDisableScaling] = useState(true);
const [disableReadiness, setDisableReadiness] = useState(true);
const [disableLiveness, setDisableLiveness] = useState(true);
const {
register,
handleSubmit,
watch,
reset,
formState: { errors },
} = useForm({
defaultValues: {
minPods: "",
maxPods: "",
readinessPath: "",
readinessPort: "",
livenessPath: "",
livenessPort: "",
},
});
const minPods = watch("minPods");
const maxPods = watch("maxPods");
const readinessPath = watch("readinessPath");
const readinessPort = watch("readinessPort");
const livenessPath = watch("livenessPath");
const livenessPort = watch("livenessPort");
const onSubmit = (data) => {
setTriggerAlert(true);
console.log("Submitted data:", data);
};
return {
register,
handleSubmit,
watch,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
setDisableScaling,
disableScaling,
setDisableReadiness,
disableReadiness,
setDisableLiveness,
disableLiveness,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
};
};
export default useServicesForm;

33
frontend/src/app/hooks/useUserForm.jsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
const useUserForm = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const onSubmit = (data) => {
setTriggerAlert(true);
console.log("Submitted data:", data);
};
return {
register,
handleSubmit,
watch,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
};
};
export default useUserForm;

31
frontend/src/app/organization/add/page.jsx
View File

@@ -8,22 +8,17 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import Alert from "@/app/components/alerts/Alert";
import Prompts from "@/app/components/prompts/Prompts";
import useOrganizationForm from "@/app/hooks/useOrganizationForm";
const AddCredentials = () => {
const [triggerAlert, setTriggerAlert] = useState(false);
const inputRef = useRef();
const [error, setError] = useState(false);
const HandleSubmit = (e) => {
e.preventDefault();
if (!inputRef.current.value.trim()) {
setError(true);
console.log("alsdjfakjhsks"); // triggers red border
return;
}
setError(false);
setTriggerAlert(true);
};
const {
organizationName,
error,
triggerAlert,
handleChange,
handleValidation,
handleSubmit,
setTriggerAlert,
} = useOrganizationForm();
return (
<div className={globalStyle.section}>
@@ -47,7 +42,7 @@ const AddCredentials = () => {
<form
className={styles.createOrganizationFormContainer}
id="form"
onSubmit={HandleSubmit}
onSubmit={handleSubmit}
>
<div className={styles.organizationBadgeContainer}>
<div className={styles.organizationBadge}>
@@ -105,8 +100,10 @@ const AddCredentials = () => {
<TextField
placeHolder="Enter organization name"
required
ref={inputRef}
hasError={error}
value={organizationName}
onChange={handleChange}
onInvalid={handleValidation}
/>
<Prompts show={true} />
</div>

39
frontend/src/app/projects/add/page.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import React from "react";
import globalStyle from "../../globalStyle.module.css";
import TopHeader from "@/app/components/topHeader/TopHeader";
@@ -5,11 +6,27 @@ import styles from "./styles.module.css";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import WarningIcon from "@/app/components/icons/warning";
import Prompts from "@/app/components/prompts/Prompts";
import Alert from "@/app/components/alerts/Alert";
import useProjectForm from "@/app/hooks/useProjectForm";
const AddProject = () => {
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
} = useProjectForm();
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Create Organization"
/>
)}
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
@@ -21,7 +38,11 @@ const AddProject = () => {
/>
<div className={styles.contentContainer}>
<TopToolTip />
<form className={styles.createProjectFormContainer} id="form">
<form
className={styles.createProjectFormContainer}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div className={styles.inputGroup}>
<div className={styles.label}>
<p>
@@ -29,8 +50,12 @@ const AddProject = () => {
</p>
</div>
<div className={styles.inputField}>
<TextField placeHolder="Enter project name" required />
<Prompts show={true} />
<TextField
placeHolder="Enter project name"
{...register("projectName", { required: true })}
hasError={!!errors.projectName}
/>
<Prompts show={false} />
</div>
</div>
<div className={styles.inputGroup}>
@@ -40,7 +65,11 @@ const AddProject = () => {
</p>
</div>
<div className={styles.inputField}>
<TextField placeHolder="Version" required />
<TextField
placeHolder="Version"
{...register("projectVersion", { required: true })}
hasError={!!errors.projectVersion}
/>
</div>
</div>
<div className={styles.inputGroup}>

162
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -11,23 +11,44 @@ import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal"
import DeleteIcon from "@/app/components/icons/delete";
import CustomCheckbox from "@/app/components/checkbox/CheckBox";
import SelectField from "@/app/components/select/SelectField";
import useServicesForm from "@/app/hooks/useServicesForm";
import Alert from "@/app/components/alerts/Alert";
const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [disableScaling, setDisableScaling] = useState(true);
const [disableReadiness, setDisableReadiness] = useState(true);
const [disableLiveness, setDisableLiveness] = useState(true);
const [minPods, setMinPods] = useState("");
const [maxPods, setMaxPods] = useState("");
const [readinessPath, setReadinessPath] = useState("");
const [readinessPort, setReadinessPort] = useState("");
const [livenessPath, setLivenessPath] = useState("");
const [livenessPort, setLivenessPort] = useState("");
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
disableScaling,
disableReadiness,
disableLiveness,
setDisableScaling,
setDisableReadiness,
setDisableLiveness,
setTriggerAlert,
minPods,
maxPods,
readinessPath,
readinessPort,
livenessPort,
livenessPath,
} = useServicesForm();
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Add User"
/>
)}
{triggerAddVariable && (
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
)}
@@ -47,7 +68,11 @@ const AddServices = () => {
requiredButtons={["title", "save"]}
/>
<div className={styles.contentContainer}>
<form className={styles.fieldsContainerCreateNew} id="form">
<form
className={styles.fieldsContainerCreateNew}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
@@ -66,11 +91,19 @@ const AddServices = () => {
<div>
<div>
<p>Name</p>
<TextField placeHolder="Enter service name" required />
<TextField
placeHolder="Enter service name"
{...register("serviceName", { required: true })}
hasError={!!errors.serviceName}
/>
</div>
<div>
<p>Version</p>
<TextField placeHolder="Service version" required />
<TextField
placeHolder="Service version"
{...register("serviceVersion", { required: true })}
hasError={!!errors.serviceVersion}
/>
</div>
</div>
<div>
@@ -78,13 +111,21 @@ const AddServices = () => {
<p>
Image <span>(Optional)</span>
</p>
<TextField placeHolder="Enter image name" required />
<TextField
placeHolder="Enter image name"
{...register("imageName", { required: false })}
hasError={!!errors.imageName}
/>
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField placeHolder="Enter port" required />
<TextField
placeHolder="Enter port"
{...register("port", { required: true })}
hasError={!!errors.port}
/>
</div>
</div>
<div>
@@ -121,21 +162,37 @@ const AddServices = () => {
<div>
<div>
<p>CPU Request (MB)</p>
<TextField placeHolder="250" required />
<TextField
placeHolder="250"
{...register("cpuRequest", { required: true })}
hasError={!!errors.cpuRequest}
/>
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField placeHolder="250" required />
<TextField
placeHolder="250"
{...register("cpuLimit", { required: true })}
hasError={!!errors.cpuLimit}
/>
</div>
</div>
<div>
<div>
<p>Memory Request (MB)</p>
<TextField placeHolder="250" required />
<TextField
placeHolder="250"
{...register("memoryRequest", { required: true })}
hasError={!!errors.memoryRequest}
/>
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField placeHolder="500" required />
<TextField
placeHolder="500"
{...register("memoryLimit", { required: true })}
hasError={!!errors.memoryLimit}
/>
</div>
</div>
</div>
@@ -148,11 +205,7 @@ const AddServices = () => {
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => {
setDisableScaling(!disableScaling);
setMinPods("");
setMaxPods("");
}}
setChecked={() => setDisableScaling(!disableScaling)}
/>
</div>
</div>
@@ -165,19 +218,21 @@ const AddServices = () => {
<TextField
placeHolder="1"
disabled={disableScaling}
required={maxPods.trim() !== ""}
onChange={(e) => setMinPods(e.target.value)}
value={minPods}
{...register("minPods", {
required: maxPods.trim() === "" ? false : true,
})}
hasError={!!errors.minPods}
/>
</div>
<div>
<p>Maximum pods</p>
<TextField
placeHolder="1"
value={maxPods}
required={minPods.trim() !== ""}
onChange={(e) => setMaxPods(e.target.value)}
disabled={disableScaling}
{...register("maxPods", {
required: minPods.trim() === "" ? false : true,
})}
hasError={!!errors.maxPods}
/>
</div>
</div>
@@ -192,11 +247,9 @@ const AddServices = () => {
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() => {
setDisableReadiness(!disableReadiness);
setReadinessPath("");
setReadinessPort("");
}}
setChecked={() =>
setDisableReadiness(!disableReadiness)
}
/>
</div>
</div>
@@ -209,9 +262,11 @@ const AddServices = () => {
<TextField
placeHolder="Enter Readiness path"
disabled={disableReadiness}
value={readinessPath}
required={readinessPort.trim() !== ""}
onChange={(e) => setReadinessPath(e.target.value)}
{...register("readinessPath", {
required:
readinessPort.trim() === "" ? false : true,
})}
hasError={!!errors.readinessPath}
/>
</div>
<div>
@@ -219,9 +274,11 @@ const AddServices = () => {
<TextField
placeHolder="Enter Readiness port"
disabled={disableReadiness}
value={readinessPort}
required={readinessPath.trim() !== ""}
onChange={(e) => setReadinessPort(e.target.value)}
{...register("readinessPort", {
required:
readinessPath.trim() === "" ? false : true,
})}
hasError={!!errors.readinessPort}
/>
</div>
</div>
@@ -236,12 +293,9 @@ const AddServices = () => {
<p>Liveness</p>
<CustomCheckbox
id="liveNessCheckBox"
setChecked={() => {
console.log("alsdjhfkjas");
setDisableLiveness(!disableLiveness);
setLivenessPath("");
setLivenessPort("");
}}
setChecked={() =>
setDisableLiveness(!disableLiveness)
}
/>
</div>
</div>
@@ -253,9 +307,11 @@ const AddServices = () => {
<TextField
placeHolder="Enter liveness path"
disabled={disableLiveness}
value={livenessPath}
required={livenessPort.trim() !== ""}
onChange={(e) => setLivenessPath(e.target.value)}
{...register("livenessPath", {
required:
livenessPort.trim() === "" ? false : true,
})}
hasError={!!errors.livenessPath}
/>
</div>
<div>
@@ -263,9 +319,11 @@ const AddServices = () => {
<TextField
placeHolder="Enter liveness port"
disabled={disableLiveness}
value={livenessPort}
required={livenessPath.trim() !== ""}
onChange={(e) => setLivenessPort(e.target.value)}
{...register("livenessPort", {
required:
livenessPath.trim() === "" ? false : true,
})}
hasError={!!errors.livenessPort}
/>
</div>
</div>

36
frontend/src/app/roles/add/page.jsx
View File

@@ -1,13 +1,31 @@
"use client";
import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import addRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import Permissions from "@/app/components/permissions/Permissions";
import useUserForm from "@/app/hooks/useUserForm";
import Alert from "@/app/components/alerts/Alert";
const page = () => {
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
} = useUserForm();
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Add Role"
/>
)}
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
@@ -29,7 +47,11 @@ const page = () => {
</div>
</div>
{/* Input fields */}
<form className={addRoleStyle.fields}>
<form
className={addRoleStyle.fields}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
{/* Email */}
<div className={addRoleStyle.inputMainContainer}>
<div className={addRoleStyle.inputContainer}>
@@ -39,7 +61,11 @@ const page = () => {
</div>
{/* Input field */}
<div className={addRoleStyle.inputField}>
<TextField placeHolder="Enter name" />
<TextField
placeHolder="Enter name"
{...register("roleName", { required: true })}
hasError={!!errors.roleName}
/>
</div>
</div>
</div>
@@ -52,7 +78,11 @@ const page = () => {
</div>
{/* Input field */}
<div className={addRoleStyle.inputField}>
<TextField placeHolder="Enter organization ID" />
<TextField
placeHolder="Enter organization ID"
{...register("organizationID", { required: true })}
hasError={!!errors.organizationID}
/>
</div>
</div>
</div>

37
frontend/src/app/users/add/page.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
@@ -5,9 +6,27 @@ import addUserStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import Permissions from "@/app/components/permissions/Permissions";
import useUserForm from "@/app/hooks/useUserForm";
import Alert from "@/app/components/alerts/Alert";
const page = () => {
const {
register,
handleSubmit,
errors,
onSubmit,
triggerAlert,
setTriggerAlert,
} = useUserForm();
return (
<div className={globalStyle.section}>
{triggerAlert && (
<Alert
setTriggerAlert={setTriggerAlert}
onClick={() => setEditState(true)}
title="Add User"
/>
)}
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
@@ -29,7 +48,11 @@ const page = () => {
</div>
</div>
{/* Input fields */}
<form className={addUserStyle.fields}>
<form
className={addUserStyle.fields}
id="form"
onSubmit={handleSubmit(onSubmit)}
>
{/* Role and Dropdown */}
<SelectField
label="Select Role"
@@ -48,7 +71,11 @@ const page = () => {
</div>
{/* Input field */}
<div className={addUserStyle.inputField}>
<TextField placeHolder="Enter email" />
<TextField
placeHolder="Enter email"
{...register("userEmail", { required: true })}
hasError={!!errors.userEmail}
/>
</div>
</div>
</div>
@@ -61,7 +88,11 @@ const page = () => {
</div>
{/* Input field */}
<div className={addUserStyle.inputField}>
<TextField placeHolder="Enter full name" />
<TextField
placeHolder="Enter full name"
{...register("fullName", { required: true })}
hasError={!!errors.fullName}
/>
</div>
</div>
</div>