Merge pull request #1174 from bluewave-labs/feat/fe/refactor/input

Feat/fe/refactor/input

Client/package.json

@@ -16,7 +16,7 @@
 		"@fontsource/roboto": "^5.0.13",
 		"@mui/icons-material": "^5.15.17",
 		"@mui/lab": "^5.0.0-alpha.170",
-		"@mui/material": "^5.16.7",
+		"@mui/material": "6.1.8",
 		"@mui/x-charts": "^7.5.1",
 		"@mui/x-data-grid": "7.22.3",
 		"@mui/x-date-pickers": "7.22.3",

Client/src/App.jsx

@@ -41,6 +41,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Infrastructure } from "./Pages/Infrastructure";
 import InfrastructureDetails from "./Pages/Infrastructure/Details";
+import Test from "./Pages/test";
 function App() {
 	const AdminCheckedRegister = withAdminCheck(Register);
 	const MonitorsWithAdminProp = withAdminProp(Monitors);
@@ -89,6 +90,11 @@ function App() {
 					path="/"
 					element={<HomeLayout />}
 				>
+					<Route
+						path="/test"
+						element={<Test />}
+					/>
+
 					<Route
 						exact
 						path="/"

Client/src/Components/Inputs/Field/index.css

@@ -4,6 +4,10 @@
 
 .field-infrastructure-alert{
 	max-width: var(--env-var-width-4);
+}
+
+.field-infrastructure-alert .MuiInputBase-root:has(input) {
+	/* height: var(--env-var-height-2); */
 	min-width: unset;
 }
 
@@ -20,7 +24,7 @@
 	padding-right: var(--env-var-spacing-1-minus);
 }
 .field .MuiInputBase-root:has(input) {
-	height: var(--env-var-height-2);
+	/* height: var(--env-var-height-2); */
 }
 .field .MuiInputBase-root:has(.MuiInputAdornment-root) {
 	padding-right: var(--env-var-spacing-1-minus);

Client/src/Components/Inputs/TextInput/Adornments/index.jsx

@@ -0,0 +1,60 @@
+import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Visibility from "@mui/icons-material/Visibility";
+export const HttpAdornment = ({ https }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			height="100%"
+			sx={{
+				borderRight: `solid 1px ${theme.palette.border.dark}`,
+				backgroundColor: theme.palette.background.accent,
+				pl: theme.spacing(6),
+			}}
+		>
+			<Typography
+				component="h5"
+				paddingRight={"var(--env-var-spacing-1-minus)"}
+				color={theme.palette.text.secondary}
+				sx={{ lineHeight: 1, opacity: 0.8 }}
+			>
+				{https ? "https" : "http"}://
+			</Typography>
+		</Stack>
+	);
+};
+
+export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
+	const theme = useTheme();
+	return (
+		<InputAdornment position="end">
+			<IconButton
+				aria-label="toggle password visibility"
+				onClick={() => setFieldType(fieldType === "password" ? "text" : "password")}
+				sx={{
+					color: theme.palette.border.dark,
+					padding: theme.spacing(1),
+					"&:focus-visible": {
+						outline: `2px solid ${theme.palette.primary.main}`,
+						outlineOffset: `2px`,
+					},
+					"& .MuiTouchRipple-root": {
+						pointerEvents: "none",
+						display: "none",
+					},
+				}}
+			>
+				{fieldType === "password" ? <VisibilityOff /> : <Visibility />}
+			</IconButton>
+		</InputAdornment>
+	);
+};
+
+HttpAdornment.propTypes = {
+	https: PropTypes.bool.isRequired,
+};