Merge pull request #82 from KelvinTegelaar/dev

src/_nav.js

@@ -660,24 +660,29 @@ const _nav = [
     items: [
       {
         component: CNavItem,
-        name: 'Settings',
+        name: 'Application Settings',
         to: '/cipp/settings',
       },
+      {
+        component: CNavItem,
+        name: 'User Settings',
+        to: '/cipp/user-settings',
+      },
       {
         component: CNavItem,
         name: 'Scheduler',
         to: '/cipp/scheduler',
       },
       {
         component: CNavItem,
-        name: 'SAM Setup Wizard',
-        to: '/cipp/setup',
+        name: 'Logbook',
+        to: '/cipp/logs',
       },
+
       {
         component: CNavItem,
-        name: 'Documentation',
-        href: 'https://cipp.app',
-        target: '_blank',
+        name: 'SAM Setup Wizard',
+        to: '/cipp/setup',
       },
     ],
   },

src/components/layout/AppHeader.js

@@ -12,6 +12,7 @@ import {
   CImage,
   CSidebarBrand,
   CButton,
+  CFormSwitch,
 } from '@coreui/react'
 import { AppHeaderDropdown, AppHeaderSearch } from 'src/components/header'
 import { TenantSelector } from '../utilities'
@@ -20,11 +21,12 @@ import cyberdrainlogodark from 'src/assets/images/CIPP_Dark.png'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCaretSquareLeft, faCaretSquareRight } from '@fortawesome/free-solid-svg-icons'
-import { toggleSidebarShow } from 'src/store/features/app'
+import { setCurrentTheme, toggleSidebarShow } from 'src/store/features/app'
 import { useMediaPredicate } from 'react-media-hook'
 import { useLoadAlertsDashQuery } from 'src/store/api/app'
 import { Link } from 'react-router-dom'
 import { useLocation } from 'react-router-dom'
+import { RFFCFormCheck } from '../forms'
 
 const AppHeader = () => {
   const dispatch = useDispatch()
@@ -33,6 +35,19 @@ const AppHeader = () => {
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
   const { data: dashboard } = useLoadAlertsDashQuery()
+  const SwitchTheme = () => {
+    let targetTheme = preferredTheme
+    if (currentTheme === 'impact') {
+      targetTheme = 'cyberdrain'
+    } else {
+      targetTheme = 'impact'
+    }
+    document.body.classList = []
+    document.body.classList.add(`theme-${targetTheme}`)
+    document.body.dataset.theme = targetTheme
+
+    dispatch(setCurrentTheme({ theme: targetTheme }))
+  }
 
   return (
     <>
@@ -76,7 +91,28 @@ const AppHeader = () => {
             <AppHeaderSearch />
           </CNavItem>
           <CNavItem>
-            <AppHeaderDropdown />
+            <div className="custom-switch-wrapper primary">
+              <CFormSwitch
+                onChange={SwitchTheme}
+                checked={currentTheme === 'impact'}
+                size="xl"
+                style={{ width: '3.5rem', marginTop: '0.5em' }}
+              ></CFormSwitch>
+              {currentTheme === 'impact' ? (
+                <FontAwesomeIcon
+                  style={{ marginLeft: '-0.3em', marginTop: '0.3em' }}
+                  className="switch-icon"
+                  icon={'moon'}
+                />
+              ) : (
+                <FontAwesomeIcon
+                  style={{ marginLeft: '0.3em', marginTop: '0.3em' }}
+                  className="switch-icon"
+                  icon={'sun'}
+                  color="#f77f00"
+                />
+              )}
+            </div>
           </CNavItem>
         </CHeaderNav>
       </CHeader>

src/components/utilities/CippProfile.js

@@ -16,7 +16,6 @@ import TenantListSelector from './TenantListSelector'
 
 const CippProfile = () => {
   const { data: profile, isFetching, isLoading } = useLoadClientPrincipalQuery()
-
   return (
     <>
       <CRow xs={{ gutter: 3 }}>

src/components/utilities/PageSizeSwitcher.js

@@ -13,21 +13,22 @@ const PageSizeSwitcher = () => {
   }
 
   return (
-    <CCard>
-      <CCardHeader>Select Default Page Size</CCardHeader>
+    <>
+      <p>
+        <b>Default page size</b>
+      </p>
       <CButtonGroup role="group" aria-label="Page Size Switcher">
         {pageSizes.map((tablePageSize, index) => (
           <CButton
             onClick={() => SwitchPageSize(tablePageSize)}
-            active={tablePageSize === currentTablePageSize ? true : false}
-            color="secondary"
+            color={tablePageSize === currentTablePageSize ? 'primary' : 'secondary'}
             key={index}
           >
             {tablePageSize}
           </CButton>
         ))}
       </CButtonGroup>
-    </CCard>
+    </>
   )
 }
 

src/components/utilities/ReportImage.js

@@ -19,9 +19,8 @@ const ReportImage = () => {
   }
 
   return (
-    <CCard>
-      <CCardHeader>Upload a default report image</CCardHeader>
-      <CCardBody>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div>
         <input
           ref={inputRef}
           type="file"
@@ -30,21 +29,20 @@ const ReportImage = () => {
           id="contained-button-file"
           onChange={(e) => Switchusage(e)}
         />
-        <center>
-          Suggested image size: 120x100. This is a per user setting.<br></br>
-          <CButton
-            type="button"
-            name="file"
-            onClick={() => inputRef.current.click()}
-            className="me-2"
-          >
-            Upload File
-          </CButton>
-          <br></br>
-          <CImage className="card" src={ReportImage} thumbnail width={120} height={100} />
-        </center>
-      </CCardBody>
-    </CCard>
+        <p>Select a report image. This image has a size of 120x100 and can be up to 64KB.</p>
+        <CButton
+          type="button"
+          name="file"
+          onClick={() => inputRef.current.click()}
+          className="me-2"
+        >
+          Upload new image
+        </CButton>
+      </div>
+      <div style={{ marginLeft: '20px' }}>
+        <CImage rounded={true} src={ReportImage} width={120} height={100} />
+      </div>
+    </div>
   )
 }
 

src/components/utilities/TenantListSelector.js

@@ -12,25 +12,25 @@ const TenantListSelector = () => {
   }
 
   return (
-    <CCard>
-      <CCardHeader>Select default Tenant List</CCardHeader>
+    <>
+      <p>
+        <b>Tenant overview page</b>
+      </p>
       <CButtonGroup role="group" aria-label="Page Size Switcher">
         <CButton
           onClick={() => SwitchPageSize(true)}
-          active={TenantListSelector ? true : false}
-          color="secondary"
+          color={TenantListSelector ? 'primary' : 'secondary'}
         >
           Compressed
         </CButton>
         <CButton
           onClick={() => SwitchPageSize(false)}
-          active={TenantListSelector ? false : true}
-          color="secondary"
+          color={TenantListSelector ? 'secondary' : 'primary'}
         >
           Full list
         </CButton>
       </CButtonGroup>
-    </CCard>
+    </>
   )
 }
 

src/components/utilities/ThemeSwitcher.js

@@ -43,22 +43,23 @@ const ThemeSwitcher = () => {
   }
 
   return (
-    <CCard>
-      <CCardHeader>Select Theme</CCardHeader>
+    <>
+      <p>
+        <b>Theme</b>
+      </p>
       <CButtonGroup role="group" aria-label="Theme Switcher" color="secondary">
         {themes.map((theme, index) => (
           <CButton
             onClick={() => SwitchTheme(theme)}
-            active={theme === currentTheme ? true : false}
-            color="secondary"
+            color={theme === currentTheme ? 'primary' : 'secondary'}
             key={index}
             title={themeInfo(theme).description}
           >
             {themeInfo(theme).name}
           </CButton>
         ))}
       </CButtonGroup>
-    </CCard>
+    </>
   )
 }
 

src/components/utilities/UsageLocation.js

@@ -13,8 +13,10 @@ const UsageLocation = () => {
   }
 
   return (
-    <CCard>
-      <CCardHeader>Select default usage location</CCardHeader>
+    <>
+      <p>
+        <b>Default Usage Location</b>
+      </p>
       <Select
         className="react-select-container"
         classNamePrefix="react-select"
@@ -29,7 +31,7 @@ const UsageLocation = () => {
         label="Usage Location"
         onChange={(value) => Switchusage(value)}
       />
-    </CCard>
+    </>
   )
 }
 

src/data/portals.json

@@ -62,6 +62,15 @@
     "external": true,
     "icon": "shield-alt"
   },
+  {
+    "label": "Compliance Portal",
+    "name": "Compliance_Portal",
+    "url": "https://compliance.microsoft.com/?tid=customerId",
+    "variable": "customerId",
+    "target": "_blank",
+    "external": true,
+    "icon": "shield-alt"
+  },
   {
     "label": "Sharepoint Admin",
     "name": "Sharepoint_Admin",

src/routes.js

@@ -11,6 +11,8 @@ const EditUser = React.lazy(() => import('src/views/identity/administration/Edit
 const ViewUser = React.lazy(() => import('src/views/identity/administration/ViewUser'))
 const Groups = React.lazy(() => import('src/views/identity/administration/Groups'))
 const AddGroup = React.lazy(() => import('src/views/identity/administration/AddGroup'))
+const UserSettings = React.lazy(() => import('src/views/cipp/UserSettings'))
+
 const AddGroupTemplates = React.lazy(() =>
   import('src/views/identity/administration/AddGroupTemplate'),
 )
@@ -601,6 +603,8 @@ const routes = [
     component: MailboxClientAccessSettingsList,
   },
   { name: 'Message Trace', path: '/email/reports/message-trace', component: MessageTrace },
+  { path: '/cipp/user-settings', name: 'User Settings', component: UserSettings },
+
   {
     name: 'Phishing Policies',
     path: '/email/reports/phishing-policies',

src/scss/_custom.scss

@@ -1,5 +1,17 @@
 @use 'sass:color';
+.custom-switch-wrapper {
+  position: relative;
+  display: inline-block;
+}
 
+.switch-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none; /* Ensures the icon doesn't interfere with the switch toggle */
+  z-index: 1; /* Place the icon above the switch */
+}
 .sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;