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

done credentials and agents mobile/responsive need review

Browse Source
This commit is contained in:
benzbarquilla
2026-03-24 17:04:16 +08:00
parent c9d5faebb0
commit cc2a18c4d7
9 changed files with 146 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/agents/[agentsId]/page.jsx
View File

@@ -9,10 +9,13 @@ import Prompts from "@/app/components/prompts/Prompts";
import useAgentForm from "@/app/hooks/useAgentForm";
import Alert from "@/app/components/alerts/Alert";
import Checkbox from "@/app/components/customCheckbox/Checkbox";
import useIsMobile from "@/app/hooks/useIsMobile";
const ViewAgentPage = () => {
const [useVpn, setUseVpn] = useState(false);
const [enableLoki, setEnableLoki] = useState(false);
const isMobile = useIsMobile();
const {
register,
handleSubmit,
@@ -50,7 +53,7 @@ const ViewAgentPage = () => {
{/* AGENT FORM */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Agent Details</p>
{isMobile ? "" : <p>Agent Details</p>}
</div>
</div>
<div className={createAgentStyle.inputContainer}>

54
frontend/src/app/agents/[agentsId]/styles.module.css
View File

@@ -6,7 +6,6 @@
flex: 1 0 0;
align-self: stretch;
}
.createAgentContainer {
display: flex;
justify-content: center;
@@ -30,7 +29,7 @@
.headerContainer {
display: flex;
align-items: flex-start;
gap: 17px;
gap: 50px;
align-self: stretch;
}
.headerContainer > div {
@@ -66,7 +65,6 @@
}
.labelContainer > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -80,9 +78,59 @@
.lokiContainer {
display: flex;
width: 100%;
width: 548px;
padding: 24px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
@media (max-width: 1024px) {
.createAgentContainer {
display: flex;
padding: 16px 16px; /*did some math 32 ang orig top*/
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 24px;
height: calc(100vh - 100px - 60px);
align-self: stretch;
}
.div {
display: none;
}
.inputMainContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0px;
/* align-self: stretch; */
}
.lokiContainer {
display: flex;
gap: 16px;
align-self: stretch;
border-radius: 8px;
width: 500px;
padding: 24px 0 0 0;
}
}
@media (max-width: 768px) {
.inputMainContainer {
align-self: stretch;
width: 100%;
}
.lokiContainer {
width: 100%;
}
.inputContainer {
width: 100%;
}
.headerTxt > p {
font-size: 16px;
font-weight: 400;
}
}

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

@@ -9,10 +9,12 @@ import Prompts from "@/app/components/prompts/Prompts";
import useAgentForm from "@/app/hooks/useAgentForm";
import Alert from "@/app/components/alerts/Alert";
import Checkbox from "@/app/components/customCheckbox/Checkbox";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddAgentPage = () => {
const [useVpn, setUseVpn] = useState(false);
const [enableLoki, setEnableLoki] = useState(false);
const isMobile = useIsMobile();
const {
register,
handleSubmit,
@@ -40,7 +42,7 @@ const AddAgentPage = () => {
state="add"
requiredButtons={["title", "save"]}
/>
<TopToolTip />
{isMobile ? "" : <TopToolTip />}
{/* Create agent Container */}
<form
className={createAgentStyle.formContainer}
@@ -52,7 +54,7 @@ const AddAgentPage = () => {
{/* AGENT FORM */}
<div className={createAgentStyle.headerContainer}>
<div className={createAgentStyle.headerTxt}>
<p>Agent Details</p>
{isMobile ? "" : <p>Agent Details</p>}
</div>
</div>
<div className={createAgentStyle.inputContainer}>

49
frontend/src/app/agents/add/styles.module.css
View File

@@ -79,3 +79,52 @@
align-items: flex-start;
gap: 24px;
}
@media (max-width: 1024px) {
.createAgentContainer {
display: flex;
padding: 16px 16px; /*did some math 32 ang orig top*/
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: calc(100vh - 100px - 5px - 50px);
gap: 24px;
align-self: stretch;
}
.div {
display: none;
}
.inputMainContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0px;
/* align-self: stretch; */
}
.lokiContainer {
display: flex;
gap: 16px;
align-self: stretch;
border-radius: 8px;
width: 500px;
padding: 24px 0 0 0;
}
}
@media (max-width: 768px) {
.inputMainContainer {
align-self: stretch;
width: 100%;
}
.lokiContainer {
width: 100%;
}
.inputContainer {
width: 100%;
}
.headerTxt > p {
font-size: 16px;
font-weight: 400;
}
}

2
frontend/src/app/components/customCheckbox/styles.module.css
View File

@@ -19,7 +19,6 @@
flex: 1 0 0;
border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
background: #1d1e2a;
background: color(display-p3 0.1137 0.1176 0.1608);
}
.check {
display: flex;
@@ -85,7 +84,6 @@
.placeholderTxt {
align-self: stretch;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;

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

@@ -8,6 +8,7 @@ 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";
import useIsMobile from "@/app/hooks/useIsMobile";
const AddCredentialPage = () => {
const {
@@ -18,7 +19,10 @@ const AddCredentialPage = () => {
triggerAlert,
setTriggerAlert,
} = useRoleForm();
const [selectedFile, setSelectedFile] = useState(null);
const isMobile = useIsMobile();
// Click
const handleFileChange = (e) => {
const file = e.target.files[0];
@@ -27,6 +31,7 @@ const AddCredentialPage = () => {
console.log(file); //send this to backend later
}
};
// Drag/Drop
const handleDrop = (e) => {
e.preventDefault();
@@ -39,6 +44,7 @@ const AddCredentialPage = () => {
const handleDragOver = (e) => {
e.preventDefault();
};
return (
<div className={globalStyle.section}>
{triggerAlert && (
@@ -59,7 +65,7 @@ const AddCredentialPage = () => {
/>
{/* Create Crediantial Container */}
<div className={createCredStyle.createCredContainer}>
<TopToolTip />
{isMobile ? "" : <TopToolTip />}
<form
className={createCredStyle.inputFieldContainer}
id="form"
@@ -81,13 +87,11 @@ const AddCredentialPage = () => {
<Prompts show={false} />
</div>
</div>
{/* Upload File */}
<div className={createCredStyle.uploadFile}>
{/* Label */}
<div className={createCredStyle.label}>
<p>Upload File</p>
<p className={createCredStyle.labelTxt}>Upload File</p>
{/* Optional or Required */}
<p className={createCredStyle.optionalTxt}>(Optional)</p>{" "}
{/* <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "} */}
</div>
{/* Upload File */}
<label

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

@@ -22,6 +22,7 @@
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.label {
display: flex;
@@ -31,7 +32,6 @@
}
.labelTxt {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -60,9 +60,8 @@
}
.label > .optionalTxt {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16 px;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
@@ -77,22 +76,18 @@
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px dashed #5980f1;
border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
border: 2px dashed #5980f1;
cursor: pointer;
}
.upload:hover {
background: rgba(129, 135, 255, 0.25);
background: color(display-p3 0.5098 0.5294 1 / 0.25);
}
.upload:hover .chooseTxt {
color: #fff;
color: color(display-p3 1 1 1);
}
.chooseTxt {
color: #5980f1;
color: color(display-p3 0.3804 0.4959 0.9137);
text-align: center;
font-family: Inter;
font-size: 16px;
@@ -104,7 +99,6 @@
.dragTxt {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
text-align: center;
font-family: Inter;
font-size: 14px;
@@ -113,3 +107,28 @@
line-height: normal;
align-self: stretch;
}
/* Mobile */
@media (max-width: 768px) {
.createCredContainer {
padding: 32px 16px 0 16px;
align-items: flex-start;
gap: 16px;
}
.inputFieldContainer {
display: flex;
align-items: flex-start;
padding: 0px;
gap: 24px;
align-self: stretch;
}
.projectName {
width: 100%;
}
.upload {
height: 100px;
}
}

2
frontend/src/app/roles/[rolesId]/styles.module.css
View File

@@ -56,7 +56,6 @@
.header > div > p {
width: 163px;
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 20px;
font-style: normal;
@@ -93,7 +92,6 @@
}
.label > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;

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

@@ -71,7 +71,7 @@ const AddRolePage = () => {
</div>
<div className={addRoleStyle.inputField}>
<TextField
placeHolder="Enter name"
placeHolder="Enter role name"
{...register("roleName", { required: true })}
hasError={!!errors.roleName}
/>