Added auth headers to api requests

client/src/components/Apps/Apps.tsx

@@ -29,7 +29,10 @@ interface Props {
 }
 
 export const Apps = (props: Props): JSX.Element => {
-  const { apps, loading } = useSelector((state: State) => state.apps);
+  const {
+    apps: { apps, loading },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { getApps } = bindActionCreators(actionCreators, dispatch);
@@ -76,10 +79,12 @@ export const Apps = (props: Props): JSX.Element => {
         subtitle={<Link to="/">Go back</Link>}
       />
 
-      <div className={classes.ActionsContainer}>
-        <ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
-        <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
-      </div>
+      {isAuthenticated && (
+        <div className={classes.ActionsContainer}>
+          <ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
+          <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
+        </div>
+      )}
 
       <div className={classes.Apps}>
         {loading ? (

client/src/components/Bookmarks/Bookmarks.tsx

@@ -34,9 +34,10 @@ export enum ContentType {
 }
 
 export const Bookmarks = (props: Props): JSX.Element => {
-  const { loading, categories } = useSelector(
-    (state: State) => state.bookmarks
-  );
+  const {
+    bookmarks: { loading, categories },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { getCategories } = bindActionCreators(actionCreators, dispatch);
@@ -109,28 +110,30 @@ export const Bookmarks = (props: Props): JSX.Element => {
 
       <Headline title="All Bookmarks" subtitle={<Link to="/">Go back</Link>} />
 
-      <div className={classes.ActionsContainer}>
-        <ActionButton
-          name="Add Category"
-          icon="mdiPlusBox"
-          handler={() => addActionHandler(ContentType.category)}
-        />
-        <ActionButton
-          name="Add Bookmark"
-          icon="mdiPlusBox"
-          handler={() => addActionHandler(ContentType.bookmark)}
-        />
-        <ActionButton
-          name="Edit Categories"
-          icon="mdiPencil"
-          handler={() => editActionHandler(ContentType.category)}
-        />
-        <ActionButton
-          name="Edit Bookmarks"
-          icon="mdiPencil"
-          handler={() => editActionHandler(ContentType.bookmark)}
-        />
-      </div>
+      {isAuthenticated && (
+        <div className={classes.ActionsContainer}>
+          <ActionButton
+            name="Add Category"
+            icon="mdiPlusBox"
+            handler={() => addActionHandler(ContentType.category)}
+          />
+          <ActionButton
+            name="Add Bookmark"
+            icon="mdiPlusBox"
+            handler={() => addActionHandler(ContentType.bookmark)}
+          />
+          <ActionButton
+            name="Edit Categories"
+            icon="mdiPencil"
+            handler={() => editActionHandler(ContentType.category)}
+          />
+          <ActionButton
+            name="Edit Bookmarks"
+            icon="mdiPencil"
+            handler={() => editActionHandler(ContentType.bookmark)}
+          />
+        </div>
+      )}
 
       {loading ? (
         <Spinner />

client/src/components/Home/Home.tsx

@@ -124,7 +124,9 @@ export const Home = (): JSX.Element => {
             <BookmarkGrid
               categories={
                 !bookmarkSearchResult
-                  ? categories.filter(({ isPinned }) => isPinned)
+                  ? categories.filter(
+                      ({ isPinned, bookmarks }) => isPinned && bookmarks.length
+                    )
                   : bookmarkSearchResult
               }
               totalCategories={categories.length}

client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx

@@ -51,6 +51,7 @@ export const AuthForm = (): JSX.Element => {
               id="password"
               name="password"
               placeholder="••••••"
+              autoComplete="current-password"
               value={formData.password}
               onChange={(e) =>
                 setFormData({ ...formData, password: e.target.value })

client/src/components/Settings/StyleSettings/StyleSettings.tsx

@@ -9,8 +9,9 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { ApiResponse } from '../../../interfaces';
 
-// UI
+// Other
 import { InputGroup, Button } from '../../UI';
+import { applyAuth } from '../../../utility';
 
 export const StyleSettings = (): JSX.Element => {
   const dispatch = useDispatch();
@@ -34,7 +35,11 @@ export const StyleSettings = (): JSX.Element => {
     e.preventDefault();
 
     axios
-      .put<ApiResponse<{}>>('/api/config/0/css', { styles: customStyles })
+      .put<ApiResponse<{}>>(
+        '/api/config/0/css',
+        { styles: customStyles },
+        { headers: applyAuth() }
+      )
       .then(() => {
         createNotification({
           title: 'Success',

client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx

@@ -5,7 +5,7 @@ import axios from 'axios';
 import { useSelector } from 'react-redux';
 
 // Typescript
-import { Weather, ApiResponse, Config } from '../../../interfaces';
+import { Weather, ApiResponse } from '../../../interfaces';
 
 // CSS
 import classes from './WeatherWidget.module.css';