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

changes in input fields

Browse Source
This commit is contained in:
benzbarquilla
2026-03-01 19:46:07 +08:00
parent d86f71ee6a
commit caf39da334
11 changed files with 129 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/agents/add/page.jsx Normal file
View File

@@ -0,0 +1,42 @@
import React from "react";
import TextField from "@/app/components/fields/textfield";
// import Prompts from "@/app/components/prompts/Prompts";
import TopHeader from "@/app/components/topHeader/TopHeader";
import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import globalStyle from "../../globalStyle.module.css";
import createAgentStyle from "./styles.module.css";
const page = () => {
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader
buttonText="Save"
cancelButtonText="Cancel"
topbarTitle="Create New Agent"
state="add"
/>
{/* Create Crediantial Container */}
<div className={createAgentStyle.createAgentContainer}>
<TopToolTip />
<div className={createAgentStyle.inputContainer}>
{/* Header */}
<div></div>
{/* Agent name input */}
<div></div>
{/* Kubernetes API input */}
<div></div>
{/* Checkbox */}
<div></div>
{/* Agent endpoint */}
<div></div>
</div>
</div>
</div>
</div>
</div>
);
};
export default page;

17
frontend/src/app/agents/add/styles.module.css Normal file
View File

@@ -0,0 +1,17 @@
.createAgentContainer {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
flex: 1 0 0;
align-self: stretch;
}
.inputContainer {
display: flex;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border-radius: 8px;
}

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

@@ -47,7 +47,7 @@ const Page = () => {
<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}>

45
frontend/src/app/credentials/add/styles.module.css
View File

@@ -50,6 +50,51 @@
gap: 8px;
align-self: stretch;
}
.credInputField > input {
display: flex;
height: 44px;
padding: 12px 16px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background: none;
gap: 10px;
align-self: stretch;
border-radius: 6px;
border: 1px solid #616583;
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
}
.credInputField > input:hover {
border: 1px solid #616583;
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
background: rgba(75, 79, 109, 0.05);
background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
}
.credInputField input:focus {
outline: none;
border-radius: 6px;
border: 1px solid #959aff;
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
background: rgba(75, 79, 109, 0.25);
background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
caret-color: #959aff;
}
.credInputField input:focus::placeholder {
color: #4b4f6d;
color: color(display-p3 0.298 0.3098 0.4196);
}
.placeholderTxt::placeholder {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.uploadFile {
display: flex;
flex-direction: column;

2
frontend/src/app/credentials/page.jsx
View File

@@ -3,6 +3,7 @@ import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import styles from "./styles.module.css";
import DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
const CredentialsPage = () => {
const sampleData = [
{
@@ -56,6 +57,7 @@ const CredentialsPage = () => {
];
return (
<div className={globalStyle.section}>
<SuccessToast message="New Credential added successfully!" />
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />

19
frontend/src/app/roles/[rolesId]/page.jsx
View File

@@ -2,6 +2,7 @@ import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import editRoleStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
const page = () => {
const sampleData = [
@@ -47,13 +48,8 @@ const page = () => {
</div>
{/* Input field */}
<div className={editRoleStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="organization-owner" //static
className={editRoleStyle.placeholderTxt}
/>
{/* Static */}
<TextField placeHolder="organization-owner" />
</div>
</div>
</div>
@@ -66,13 +62,8 @@ const page = () => {
</div>
{/* Input field */}
<div className={editRoleStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="67160a5ae69144ff19aafb86" //static
className={editRoleStyle.placeholderTxt}
/>
{/* Static */}
<TextField placeHolder="67160a5ae69144ff19aafb86" />
</div>
</div>
</div>

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

@@ -2,6 +2,7 @@ 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";
const page = () => {
return (
@@ -36,13 +37,7 @@ const page = () => {
</div>
{/* Input field */}
<div className={addRoleStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter name"
className={addRoleStyle.placeholderTxt}
/>
<TextField placeHolder="Enter name" />
</div>
</div>
</div>
@@ -55,13 +50,7 @@ const page = () => {
</div>
{/* Input field */}
<div className={addRoleStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter organization ID"
className={addRoleStyle.placeholderTxt}
/>
<TextField placeHolder="Enter organization ID" />
</div>
</div>
</div>

2
frontend/src/app/roles/page.jsx
View File

@@ -7,6 +7,7 @@ import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
import ViewIcon from "../components/icons/view";
import DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
const RolesPage = () => {
const router = useRouter();
@@ -45,6 +46,7 @@ const RolesPage = () => {
];
return (
<div className={globalStyle.section}>
<SuccessToast message="New Role added successfully!" />
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add Role" topbarTitle="Roles" />

23
frontend/src/app/users/[usersId]/page.jsx
View File

@@ -4,6 +4,7 @@ import globalStyle from "../../globalStyle.module.css";
import editUserStyle from "./styles.module.css";
import Prompts from "@/app/components/prompts/Prompts";
import { useState } from "react";
import TextField from "@/app/components/fields/textfield";
const Page = () => {
const sampleData = [
@@ -23,8 +24,6 @@ const Page = () => {
// { permission: "service.update" },
];
const [showPrompt, setShowPrompt] = useState(false);
return (
<div className={globalStyle.section}>
<div className={globalStyle.mainContainer}>
@@ -73,15 +72,11 @@ const Page = () => {
</div>
{/* Input field */}
<div className={editUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="nino.moonshot@gmail.com" //static
className={editUserStyle.placeholderTxt}
<TextField
placeHolder="nino.moonshot@gmail.com" //static
/>
</div>
<Prompts show={showPrompt} />
<Prompts show={false} />
</div>
</div>
{/* Full Name */}
@@ -94,15 +89,11 @@ const Page = () => {
</div>
{/* Input field */}
<div className={editUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Nino Paul Cervantes" //static
className={editUserStyle.placeholderTxt}
<TextField
placeHolder="Nino Paul Cervantes" //static
/>
</div>
<Prompts show={showPrompt} />
<Prompts show={false} />
</div>
</div>
</form>

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

@@ -2,6 +2,7 @@ import React from "react";
import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css";
import addUserStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield";
const page = () => {
return (
@@ -55,13 +56,7 @@ const page = () => {
</div>
{/* Input field */}
<div className={addUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter Email"
className={addUserStyle.placeholderTxt}
/>
<TextField placeHolder="Enter email" />
</div>
</div>
</div>
@@ -74,13 +69,7 @@ const page = () => {
</div>
{/* Input field */}
<div className={addUserStyle.inputField}>
<input
type="text"
name=""
id=""
placeholder="Enter full name"
className={addUserStyle.placeholderTxt}
/>
<TextField placeHolder="Enter full name" />
</div>
</div>
</div>

2
frontend/src/app/users/page.jsx
View File

@@ -6,6 +6,7 @@ import styles from "./styles.module.css";
import { useRouter } from "next/navigation";
import ViewIcon from "../components/icons/view";
import DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
const UsersPage = () => {
const router = useRouter();
@@ -32,6 +33,7 @@ const UsersPage = () => {
];
return (
<div className={globalStyle.section}>
<SuccessToast message="New User added successfully" />
<div className={globalStyle.mainContainer}>
<div className={globalStyle.container}>
<TopHeader buttonText="Add User" topbarTitle="Users" />