Fix merge conflicts

frontend/components/basic/InputField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { memo,useState } from 'react';
 import { faCircle, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -96,6 +96,7 @@ const InputField = (
           />
           {props.label?.includes('Password') && (
             <button
+              type="button"
               onClick={() => {
                 setPasswordVisible(!passwordVisible);
               }}
@@ -139,4 +140,4 @@ const InputField = (
   }
 };
 
-export default React.memo(InputField);
+export default memo(InputField);

frontend/components/basic/Toggle.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Switch } from "@headlessui/react";
+
+
+interface OverrideProps {
+  id: string;
+  keyName: string;
+  value: string;
+  pos: number;
+  comment: string;
+}
+
+interface ToggleProps { 
+  enabled: boolean; 
+  setEnabled: (value: boolean) => void; 
+  addOverride: (value: OverrideProps) => void; 
+  keyName: string;
+  value: string;
+  pos: number;
+  id: string;
+  comment: string;
+  deleteOverride: (id: string) => void; 
+  sharedToHide: string[];
+  setSharedToHide: (values: string[]) => void;
+}
+
+/**
+ * This is a typical 'iPhone' toggle (e.g., user for overriding secrets with personal values)
+ * @param obj 
+ * @param {boolean} obj.enabled - whether the toggle is turned on or off
+ * @param {function} obj.setEnabled - change the state of the toggle
+ * @param {function} obj.addOverride - a function that adds an override to a certain secret
+ * @param {string} obj.keyName - key of a certain secret
+ * @param {string} obj.value - value of a certain secret
+ * @param {number} obj.pos - position of a certain secret
+ #TODO: make the secret id persistent?
+ * @param {string} obj.id - id of a certain secret  
+ * @param {function} obj.deleteOverride - a function that deleted an override for a certain secret
+ * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. 
+ * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually
+ * @returns 
+ */
+export default function Toggle ({ 
+  enabled, 
+  setEnabled, 
+  addOverride, 
+  keyName, 
+  value, 
+  pos, 
+  id, 
+  comment,
+  deleteOverride,
+  sharedToHide,
+  setSharedToHide
+}: ToggleProps): JSX.Element {
+  return (
+    <Switch
+      checked={enabled}
+      onChange={() => {
+        if (enabled == false) {
+          addOverride({ id, keyName, value, pos, comment });
+          setSharedToHide([
+            ...sharedToHide!,
+            id
+          ])
+        } else {
+          setSharedToHide(sharedToHide!.filter(tempId => tempId != id))
+          deleteOverride(id);
+        }
+        setEnabled(!enabled);
+      }}
+      className={`${
+        enabled ? 'bg-primary' : 'bg-bunker-400'
+      } relative inline-flex h-5 w-9 items-center rounded-full`}
+    >
+      <span className="sr-only">Enable notifications</span>
+      <span
+        className={`${
+          enabled ? 'translate-x-[1.26rem]' : 'translate-x-0.5'
+        } inline-block h-3.5 w-3.5 transform rounded-full bg-bunker-800 transition`}
+      />
+    </Switch>
+  )
+}

frontend/components/basic/buttons/Button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ButtonHTMLAttributes } from "react";
 import Image from "next/image";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
@@ -16,8 +16,9 @@ type ButtonProps = {
   size: string;
   icon?: IconProp;
   active?: boolean;
-  iconDisabled?: string;
+  iconDisabled?: IconProp;
   textDisabled?: string;
+  type?: ButtonHTMLAttributes<any>['type'];
 };
 
 /**
@@ -72,15 +73,16 @@ export default function Button(props: ButtonProps): JSX.Element {
 
     // Setting the text color for the text and icon
     props.color == "mineshaft" && "text-gray-400",
-    props.color != "mineshaft" && props.color != "red" && "text-black",
+    props.color != "mineshaft" && props.color != "red" && props.color != "none" && "text-black",
     props.color == "red" && "text-gray-200",
-    activityStatus && props.color != "red" ? "group-hover:text-black" : "",
+    props.color == "none" && "text-gray-200 text-xl",
+    activityStatus && props.color != "red" && props.color != "none" ? "group-hover:text-black" : "",
 
     props.size == "icon" && "flex items-center justify-center"
   );
 
   const textStyle = classNames(
-    "relative duration-200",
+    "relative duration-200 text-center w-full",
 
     // Show the loading sign if the loading indicator is on
     props.loading ? "opacity-0" : "opacity-100",
@@ -91,6 +93,7 @@ export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <button
       disabled={!activityStatus}
+      type={props.type}
       onClick={props.onButtonPressed}
       className={styleButton}
     >

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -209,7 +209,7 @@ const AddServiceTokenDialog = ({
                       </div>
                     </div>
                     <div className="w-full">
-                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-36">
+                      <div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-44">
                         <input
                           type="text"
                           value={serviceToken}

frontend/components/basic/popups/BottomRightPopup.tsx

@@ -3,6 +3,16 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 
+interface PopupProps {
+  buttonText: string;
+  buttonLink: string;
+  titleText: string;
+  emoji: string;
+  textLine1: string;
+  textLine2: string;
+  setCheckDocsPopUpVisible: (value: boolean) => void;
+}
+
 /**
  * This is the notification that pops up at the bottom right when a user performs a certain action
  * @param {object} org 
@@ -23,16 +33,16 @@ export default function BottonRightPopup({
   textLine1,
   textLine2,
   setCheckDocsPopUpVisible,
-}) {
+}: PopupProps): JSX.Element {
   return (
     <div
-      class="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
+      className="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-xl absolute bottom-0 right-0 mr-6 mb-6"
       role="alert"
     >
       <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
         <div className="font-bold text-xl mr-2 mt-0.5 flex flex-row">
           <div>{titleText}</div>
-          <div class="ml-2.5">{emoji}</div>
+          <div className="ml-2.5">{emoji}</div>
         </div>
         <button
           className="mt-1"
@@ -44,14 +54,14 @@ export default function BottonRightPopup({
           />
         </button>
       </div>
-      <div class="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
+      <div className="block sm:inline px-6 mt-4 mb-0.5 text-gray-300">
         {textLine1}
       </div>
-      <div class="block sm:inline mb-4 px-6">{textLine2}</div>
+      <div className="block sm:inline mb-4 px-6">{textLine2}</div>
       <div className="flex flex-row px-6 w-full">
         {/*eslint-disable-next-line react/jsx-no-target-blank */}
         <a
-          class="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
+          className="font-bold p-2 bg-white/10 rounded-md w-full hover:bg-primary duration-200 hover:text-black flex justify-center"
           href={buttonLink}
           target="_blank"
           rel="noopener"

frontend/components/basic/table/ServiceTokenTable.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 

frontend/components/basic/table/UserTable.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import { faX } from '@fortawesome/free-solid-svg-icons';