Added http/https toggle (#462)

* Added toggle between http and https

* Added https prop to field component

* Added type fix to create monitor function

* Reverted monitor model change

* Added docs explaining prepending logic

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

@@ -19,6 +19,7 @@ import { useState } from "react";
  * @param {string} [props.type] - Type of input field (e.g., 'text', 'password').
  * @param {string} props.id - ID of the input field.
  * @param {string} [props.label] - Label for the input field.
+ * @param {boolean} [props.https] - Indicates if it should display http or https.
  * @param {boolean} [props.isRequired] - Indicates if the field is required, will display a red asterisk.
  * @param {boolean} [props.isOptional] - Indicates if the field is optional, will display optional text.
  * @param {string} [props.optionalLabel] - Optional label for the input field.
@@ -35,6 +36,7 @@ const Field = ({
   type = "text",
   id,
   label,
+  https,
   isRequired,
   isOptional,
   optionalLabel,
@@ -92,7 +94,9 @@ const Field = ({
                 borderRight: `solid 1px ${theme.palette.section.borderColor}`,
               }}
             >
-              <Typography component="h5">https://</Typography>
+              <Typography component="h5">
+                {https ? "https" : "http"}://
+              </Typography>
             </Stack>
           ),
           endAdornment:
@@ -152,6 +156,7 @@ Field.propTypes = {
   type: PropTypes.oneOf(["text", "password", "url", "email", "description"]),
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
+  https: PropTypes.bool,
   isRequired: PropTypes.bool,
   isOptional: PropTypes.bool,
   optionalLabel: PropTypes.string,

Client/src/Pages/Monitors/CreateMonitor/index.css

@@ -60,7 +60,13 @@
   gap: var(--env-var-spacing-4);
 }
 
+.create-monitor .MuiStack-root .MuiButtonGroup-root button {
+  font-size: var(--env-var-font-size-small);
+  height: 28px;
+  padding: 8px;
+}
+
 body:has(.create-monitor) .select-dropdown .MuiMenuItem-root,
 .create-monitor .select-wrapper .select-component > .MuiSelect-select {
   text-transform: lowercase;
-}
+}

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -2,7 +2,7 @@ import "./index.css";
 import React, { useState } from "react";
 import RadioButton from "../../../Components/RadioButton";
 import Button from "../../../Components/Button";
-import { Box, MenuItem, Stack, Typography } from "@mui/material";
+import { Box, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
 import { createMonitor } from "../../../Features/Monitors/monitorsSlice";
@@ -85,14 +85,17 @@ const CreateMonitor = () => {
     //obj to submit
     let monitor = {
       url:
-        checks.type === "http"
-          ? "https://" + generalSettings.url
+        //preprending protocol for url
+        checks.type === "http" || checks.type === "https"
+          ? `${checks.type}://` + generalSettings.url
           : generalSettings.url,
       name:
         generalSettings.name === ""
           ? generalSettings.url
           : generalSettings.name,
-      ...checks,
+      //there is no separate monitor type for https since the operations for the two protocols are identical
+      //however the URL does need the correct prepend hence https is still being tracked but overwritten when prepping the monitor obj
+      type: checks.type === "https" ? "http" : checks.type,
     };
 
     const { error } = monitorValidation.validate(monitor, {
@@ -167,9 +170,14 @@ const CreateMonitor = () => {
           </Box>
           <Stack gap={theme.gap.xl}>
             <Field
-              type="url"
+              type={
+                checks.type === "http" || checks.type === "https"
+                  ? "url"
+                  : "text"
+              }
               id="monitor-url"
               label="URL to monitor"
+              https={checks.type === "https"}
               placeholder="google.com"
               value={generalSettings.url}
               onChange={(event) =>
@@ -199,15 +207,47 @@ const CreateMonitor = () => {
             </Typography>
           </Box>
           <Stack gap={theme.gap.large}>
-            <RadioButton
-              id="monitor-checks-http"
-              title="HTTP/website monitoring"
-              desc="Use HTTP(s) to monitor your website or API endpoint."
-              size="small"
-              value="http"
-              checked={checks.type === "http"}
-              onChange={(event) => handleChange(event, "type", setChecks)}
-            />
+            <Stack gap={theme.gap.medium}>
+              <RadioButton
+                id="monitor-checks-http"
+                title="Website monitoring"
+                desc="Use HTTP(s) to monitor your website or API endpoint."
+                size="small"
+                value="http"
+                checked={checks.type === "http" || checks.type === "https"}
+                onChange={(event) => handleChange(event, "type", setChecks)}
+              />
+              {checks.type === "http" || checks.type === "https" ? (
+                <ButtonGroup sx={{ ml: "32px" }}>
+                  <Button
+                    level="secondary"
+                    label="HTTP"
+                    onClick={() =>
+                      setChecks((prev) => ({ ...prev, type: "http" }))
+                    }
+                    sx={{
+                      backgroundColor:
+                        checks.type === "http" &&
+                        theme.palette.otherColors.fillGray,
+                    }}
+                  />
+                  <Button
+                    level="secondary"
+                    label="HTTPS"
+                    onClick={() =>
+                      setChecks((prev) => ({ ...prev, type: "https" }))
+                    }
+                    sx={{
+                      backgroundColor:
+                        checks.type === "https" &&
+                        theme.palette.otherColors.fillGray,
+                    }}
+                  />
+                </ButtonGroup>
+              ) : (
+                ""
+              )}
+            </Stack>
             <RadioButton
               id="monitor-checks-ping"
               title="Ping monitoring"