Merge pull request #312 from pawelmalak/feature

Version 2.2.2

.dev/build_latest.sh

@@ -0,0 +1,2 @@
+docker build -t pawelmalak/flame -t "pawelmalak/flame:$1" -f .docker/Dockerfile "$2" \
+  && docker push pawelmalak/flame && docker push "pawelmalak/flame:$1"

.dev/build_multiarch.sh

@@ -0,0 +1,6 @@
+docker buildx build \
+  --platform linux/arm/v7,linux/arm64,linux/amd64 \
+  -f .docker/Dockerfile.multiarch \
+  -t pawelmalak/flame:multiarch \
+  -t "pawelmalak/flame:multiarch$1" \
+  --push "$2"

.docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14 as builder
+FROM node:16 as builder
 
 WORKDIR /app
 
@@ -16,7 +16,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:14-alpine
+FROM node:16-alpine
 
 COPY --from=builder /app /app
 
@@ -27,4 +27,4 @@ EXPOSE 5005
 ENV NODE_ENV=production
 ENV PASSWORD=flame_password
 
-CMD ["node", "server.js"]
+CMD ["sh", "-c", "chown -R node /app/data && node server.js"]

.docker/Dockerfile.multiarch

@@ -1,10 +1,10 @@
-FROM node:14-alpine3.11 as builder
+FROM node:16-alpine3.11 as builder
 
 WORKDIR /app
 
 COPY package*.json ./
 
-RUN apk --no-cache --virtual build-dependencies add python make g++ \
+RUN apk --no-cache --virtual build-dependencies add python python3 make g++ \
     && npm install --production
 
 COPY . .    
@@ -17,7 +17,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:14-alpine3.11
+FROM node:16-alpine3.11
 
 COPY --from=builder /app /app
 
@@ -28,4 +28,4 @@ EXPOSE 5005
 ENV NODE_ENV=production
 ENV PASSWORD=flame_password
 
-CMD ["node", "server.js"]
+CMD ["sh", "-c", "chown -R node /app/data && node server.js"]

.docker/docker-compose.yml

@@ -1,12 +1,22 @@
-version: '3'
+version: '3.6'
+
 services:
   flame:
     image: pawelmalak/flame
     container_name: flame
     volumes:
-      - /path/to/data:/app/data
+      - /path/to/host/data:/app/data
+      # - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
     ports:
       - 5005:5005
+    # secrets:
+    #   - password # optional but required for (1)
     environment:
       - PASSWORD=flame_password
+      # - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
     restart: unless-stopped
+    
+# optional but required for Docker secrets (1)
+# secrets:
+#   password:
+#     file: /path/to/secrets/password

.dockerignore

@@ -2,4 +2,5 @@ node_modules
 .github
 public
 k8s
-skaffold.yaml
+skaffold.yaml
+data

.env

@@ -1,5 +1,5 @@
 PORT=5005
 NODE_ENV=development
-VERSION=2.1.0
+VERSION=2.2.2
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 data
 public
-!client/public
+!client/public
-build.sh

.prettierignore

@@ -1 +1,2 @@
-*.md
+*.md
+docker-compose.yml

CHANGELOG.md

@@ -1,3 +1,23 @@
+### v2.2.2 (2022-03-21)
+- Added option to get user location directly from the app ([#287](https://github.com/pawelmalak/flame/issues/287))
+- Fixed bug with local search not working when using prefix ([#289](https://github.com/pawelmalak/flame/issues/289))
+- Fixed bug with app description not updating when using custom icon ([#310](https://github.com/pawelmalak/flame/issues/310))
+- Changed permissions to some files and directories created by Flame
+- Changed some of the settings tabs
+
+### v2.2.1 (2022-01-08)
+- Local search will now include app descriptions ([#266](https://github.com/pawelmalak/flame/issues/266))
+- Fixed bug with unsupported characters in local search [#279](https://github.com/pawelmalak/flame/issues/279))
+- Background tasks optimization ([#283](https://github.com/pawelmalak/flame/issues/283))
+
+### v2.2.0 (2021-12-17)
+- Added option to set custom description for apps ([#201](https://github.com/pawelmalak/flame/issues/201))
+- Fixed fatal error while deploying Flame to cluster ([#242](https://github.com/pawelmalak/flame/issues/242))
+
+### v2.1.1 (2021-12-02)
+- Added support for Docker secrets ([#189](https://github.com/pawelmalak/flame/issues/189))
+- Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))
+
 ### v2.1.0 (2021-11-26)
 - Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
 - Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))

README.md

@@ -35,7 +35,7 @@ docker pull pawelmalak/flame:2.0.0
 
 ```sh
 # run container
-docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password flame
+docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password pawelmalak/flame
 ```
 
 #### Building images
@@ -55,19 +55,42 @@ docker buildx build \
 #### Docker-Compose
 
 ```yaml
-version: '2.1'
+version: '3.6'
+
 services:
   flame:
-    image: pawelmalak/flame:latest
+    image: pawelmalak/flame
     container_name: flame
     volumes:
-      - <host_dir>:/app/data
+      - /path/to/host/data:/app/data
-      - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration feature
+      - /var/run/docker.sock:/var/run/docker.sock # optional but required for Docker integration
     ports:
       - 5005:5005
+    secrets:
+      - password # optional but required for (1)
     environment:
       - PASSWORD=flame_password
+      - PASSWORD_FILE=/run/secrets/password # optional but required for (1)
     restart: unless-stopped
+
+# optional but required for Docker secrets (1)
+secrets:
+  password:
+    file: /path/to/secrets/password
+```
+
+##### Docker Secrets
+
+All environment variables can be overwritten by appending `_FILE` to the variable value. For example, you can use `PASSWORD_FILE` to pass through a docker secret instead of `PASSWORD`. If both `PASSWORD` and `PASSWORD_FILE` are set, the docker secret will take precedent.
+
+```bash
+# ./secrets/flame_password
+my_custom_secret_password_123
+
+# ./docker-compose.yml
+secrets:
+  password:
+    file: ./secrets/flame_password
 ```
 
 #### Skaffold
@@ -212,7 +235,7 @@ metadata:
 - Backup your `db.sqlite` before running script!
 - Known Issues:
   - generated icons are sometimes incorrect
-  
+
 ```bash
 pip3 install Pillow, beautifulsoup4
 

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.1.0
+REACT_APP_VERSION=2.2.2

client/package.json

@@ -11,7 +11,6 @@
     "@types/jest": "^27.0.2",
     "@types/node": "^16.11.6",
     "@types/react": "^17.0.34",
-    "@types/react-autosuggest": "^10.1.5",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.11",
     "@types/react-redux": "^7.1.20",
@@ -21,7 +20,6 @@
     "http-proxy-middleware": "^2.0.1",
     "jwt-decode": "^3.1.2",
     "react": "^17.0.2",
-    "react-autosuggest": "^10.1.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",

client/src/components/Apps/AppCard/AppCard.tsx

@@ -8,16 +8,15 @@ import { State } from '../../../store/reducers';
 
 interface Props {
   app: App;
-  pinHandler?: Function;
 }
 
-export const AppCard = (props: Props): JSX.Element => {
+export const AppCard = ({ app }: Props): JSX.Element => {
   const { config } = useSelector((state: State) => state.config);
 
-  const [displayUrl, redirectUrl] = urlParser(props.app.url);
+  const [displayUrl, redirectUrl] = urlParser(app.url);
 
   let iconEl: JSX.Element;
-  const { icon } = props.app;
+  const { icon } = app;
 
   if (isImage(icon)) {
     const source = isUrl(icon) ? icon : `/uploads/${icon}`;
@@ -25,7 +24,7 @@ export const AppCard = (props: Props): JSX.Element => {
     iconEl = (
       <img
         src={source}
-        alt={`${props.app.name} icon`}
+        alt={`${app.name} icon`}
         className={classes.CustomIcon}
       />
     );
@@ -54,8 +53,8 @@ export const AppCard = (props: Props): JSX.Element => {
     >
       <div className={classes.AppCardIcon}>{iconEl}</div>
       <div className={classes.AppCardDetails}>
-        <h5>{props.app.name}</h5>
+        <h5>{app.name}</h5>
-        <span>{displayUrl}</span>
+        <span>{!app.description.length ? displayUrl : app.description}</span>
       </div>
     </a>
   );

client/src/components/Apps/AppForm/AppForm.tsx

@@ -64,7 +64,9 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
       if (customIcon) {
         data.append('icon', customIcon);
       }
+
       data.append('name', formData.name);
+      data.append('description', formData.description);
       data.append('url', formData.url);
       data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
 
@@ -96,7 +98,7 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
     <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
       {/* NAME */}
       <InputGroup>
-        <label htmlFor="name">App Name</label>
+        <label htmlFor="name">App name</label>
         <input
           type="text"
           name="name"
@@ -122,11 +124,27 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
         />
       </InputGroup>
 
+      {/* DESCRIPTION */}
+      <InputGroup>
+        <label htmlFor="description">App description</label>
+        <input
+          type="text"
+          name="description"
+          id="description"
+          placeholder="My self-hosted app"
+          value={formData.description}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>
+          Optional - If description is not set, app URL will be displayed
+        </span>
+      </InputGroup>
+
       {/* ICON */}
       {!useCustomIcon ? (
         // use mdi icon
         <InputGroup>
-          <label htmlFor="icon">App Icon</label>
+          <label htmlFor="icon">App icon</label>
           <input
             type="text"
             name="icon"

client/src/components/Apps/AppTable/AppTable.module.css

@@ -1,29 +0,0 @@
-.TableActions {
-  display: flex;
-  align-items: center;
-}
-
-.TableAction {
-  width: 22px;
-}
-
-.TableAction:hover {
-  cursor: pointer;
-}
-
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}

client/src/components/Apps/AppTable/AppTable.tsx

@@ -17,8 +17,7 @@ import { actionCreators } from '../../../store';
 import { App } from '../../../interfaces';
 
 // Other
-import classes from './AppTable.module.css';
+import { Message, Table } from '../../UI';
-import { Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 
 interface Props {
@@ -89,16 +88,16 @@ export const AppTable = (props: Props): JSX.Element => {
 
   return (
     <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
         {config.useOrdering === 'orderId' ? (
           <p>You can drag and drop single rows to reorder application</p>
         ) : (
           <p>
             Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/interface">settings</Link>
+            <Link to="/settings/general">settings</Link>
           </p>
         )}
-      </div>
+      </Message>
 
       <DragDropContext onDragEnd={dragEndHanlder}>
         <Droppable droppableId="apps">

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -22,7 +22,10 @@ interface Props {
 export const BookmarkCard = (props: Props): JSX.Element => {
   const { category, fromHomepage = false } = props;
 
-  const { config } = useSelector((state: State) => state.config);
+  const {
+    config: { config },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
   const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
@@ -30,9 +33,11 @@ export const BookmarkCard = (props: Props): JSX.Element => {
   return (
     <div className={classes.BookmarkCard}>
       <h3
-        className={fromHomepage ? '' : classes.BookmarkHeader}
+        className={
+          fromHomepage || !isAuthenticated ? '' : classes.BookmarkHeader
+        }
         onClick={() => {
-          if (!fromHomepage) {
+          if (!fromHomepage && isAuthenticated) {
             setEditCategory(category);
           }
         }}

client/src/components/Bookmarks/Bookmarks.tsx

@@ -14,7 +14,14 @@ import { Category, Bookmark } from '../../interfaces';
 import classes from './Bookmarks.module.css';
 
 // UI
-import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
+import {
+  Container,
+  Headline,
+  ActionButton,
+  Spinner,
+  Modal,
+  Message,
+} from '../UI';
 
 // Components
 import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
@@ -121,6 +128,11 @@ export const Bookmarks = (props: Props): JSX.Element => {
     }
   };
 
+  const finishEditing = () => {
+    setShowTable(false);
+    setEditCategory(null);
+  };
+
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
@@ -150,14 +162,24 @@ export const Bookmarks = (props: Props): JSX.Element => {
             icon="mdiPencil"
             handler={() => showTableForEditing(ContentType.category)}
           />
-          <ActionButton
+          {showTable && tableContentType === ContentType.bookmark && (
-            name="Edit Bookmarks"
+            <ActionButton
-            icon="mdiPencil"
+              name="Finish Editing"
-            handler={() => showTableForEditing(ContentType.bookmark)}
+              icon="mdiPencil"
-          />
+              handler={finishEditing}
+            />
+          )}
         </div>
       )}
 
+      {categories.length && isAuthenticated && !showTable ? (
+        <Message isPrimary={false}>
+          Click on category name to edit its bookmarks
+        </Message>
+      ) : (
+        <></>
+      )}
+
       {loading ? (
         <Spinner />
       ) : !showTable ? (

client/src/components/Bookmarks/Table/BookmarksTable.tsx

@@ -15,11 +15,8 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { Bookmark, Category } from '../../../interfaces';
 
-// CSS
-import classes from './Table.module.css';
-
 // UI
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 import { bookmarkTemplate } from '../../../utility';
 
@@ -108,18 +105,14 @@ export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
   return (
     <Fragment>
       {!categoryInEdit ? (
-        <div className={classes.Message}>
+        <Message isPrimary={false}>
-          <p>
+          Switch to grid view and click on the name of category you want to edit
-            Switch to grid view and click on the name of category you want to
+        </Message>
-            edit
-          </p>
-        </div>
       ) : (
-        <div className={classes.Message}>
+        <Message isPrimary={false}>
-          <p>
+          Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
-            Editing bookmarks from <span>{categoryInEdit.name}</span> category
+          &nbsp;category
-          </p>
+        </Message>
-        </div>
       )}
 
       {categoryInEdit && (

client/src/components/Bookmarks/Table/CategoryTable.tsx

@@ -16,11 +16,8 @@ import { actionCreators } from '../../../store';
 // Typescript
 import { Bookmark, Category } from '../../../interfaces';
 
-// CSS
-import classes from './Table.module.css';
-
 // UI
-import { Table } from '../../UI';
+import { Message, Table } from '../../UI';
 import { TableActions } from '../../Actions/TableActions';
 
 interface Props {
@@ -99,16 +96,16 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
 
   return (
     <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
         {config.useOrdering === 'orderId' ? (
           <p>You can drag and drop single rows to reorder categories</p>
         ) : (
           <p>
             Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/interface">settings</Link>
+            <Link to="/settings/general">settings</Link>
           </p>
         )}
-      </div>
+      </Message>
 
       <DragDropContext onDragEnd={dragEndHanlder}>
         <Droppable droppableId="categories">

client/src/components/Bookmarks/Table/Table.module.css

@@ -1,17 +0,0 @@
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a,
-.Message span {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}

client/src/components/Home/Home.tsx

@@ -64,8 +64,10 @@ export const Home = (): JSX.Element => {
     if (localSearch) {
       // Search through apps
       setAppSearchResult([
-        ...apps.filter(({ name }) =>
+        ...apps.filter(({ name, description }) =>
-          new RegExp(escapeRegex(localSearch), 'i').test(name)
+          new RegExp(escapeRegex(localSearch), 'i').test(
+            `${name} ${description}`
+          )
         ),
       ]);
 

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

@@ -1,43 +1,57 @@
 import { Fragment } from 'react';
+
+// UI
 import { Button, SettingsHeadline } from '../../UI';
-import classes from './AppDetails.module.css';
-import { checkVersion } from '../../../utility';
 import { AuthForm } from './AuthForm/AuthForm';
+import classes from './AppDetails.module.css';
+
+// Store
+import { useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+
+// Other
+import { checkVersion } from '../../../utility';
 
 export const AppDetails = (): JSX.Element => {
+  const { isAuthenticated } = useSelector((state: State) => state.auth);
+
   return (
     <Fragment>
       <SettingsHeadline text="Authentication" />
       <AuthForm />
 
-      <hr className={classes.separator} />
+      {isAuthenticated && (
+        <Fragment>
+          <hr className={classes.separator} />
 
-      <div>
+          <div>
-        <SettingsHeadline text="App version" />
+            <SettingsHeadline text="App version" />
-        <p className={classes.text}>
+            <p className={classes.text}>
-          <a
+              <a
-            href="https://github.com/pawelmalak/flame"
+                href="https://github.com/pawelmalak/flame"
-            target="_blank"
+                target="_blank"
-            rel="noreferrer"
+                rel="noreferrer"
-          >
+              >
-            Flame
+                Flame
-          </a>{' '}
+              </a>{' '}
-          version {process.env.REACT_APP_VERSION}
+              version {process.env.REACT_APP_VERSION}
-        </p>
+            </p>
 
-        <p className={classes.text}>
+            <p className={classes.text}>
-          See changelog{' '}
+              See changelog{' '}
-          <a
+              <a
-            href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
+                href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
-            target="_blank"
+                target="_blank"
-            rel="noreferrer"
+                rel="noreferrer"
-          >
+              >
-            here
+                here
-          </a>
+              </a>
-        </p>
+            </p>
 
-        <Button click={() => checkVersion(true)}>Check for updates</Button>
+            <Button click={() => checkVersion(true)}>Check for updates</Button>
-      </div>
+          </div>
+        </Fragment>
+      )}
     </Fragment>
   );
 };

client/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, FormEvent, ChangeEvent, Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 // Typescript
-import { Query, SearchForm } from '../../../interfaces';
+import { Query, GeneralForm } from '../../../interfaces';
 
 // Components
 import { CustomQueries } from './CustomQueries/CustomQueries';
@@ -12,7 +12,7 @@ import { CustomQueries } from './CustomQueries/CustomQueries';
 import { Button, SettingsHeadline, InputGroup } from '../../UI';
 
 // Utils
-import { inputHandler, searchSettingsTemplate } from '../../../utility';
+import { inputHandler, generalSettingsTemplate } from '../../../utility';
 
 // Data
 import { queries } from '../../../utility/searchQueries.json';
@@ -22,16 +22,20 @@ import { State } from '../../../store/reducers';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
 
-export const SearchSettings = (): JSX.Element => {
+export const GeneralSettings = (): JSX.Element => {
-  const { loading, customQueries, config } = useSelector(
+  const {
-    (state: State) => state.config
+    config: { loading, customQueries, config },
-  );
+    bookmarks: { categories },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
+  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
+    bindActionCreators(actionCreators, dispatch);
 
   // Initial state
-  const [formData, setFormData] = useState<SearchForm>(searchSettingsTemplate);
+  const [formData, setFormData] = useState<GeneralForm>(
+    generalSettingsTemplate
+  );
 
   // Get config
   useEffect(() => {
@@ -46,6 +50,16 @@ export const SearchSettings = (): JSX.Element => {
 
     // Save settings
     await updateConfig(formData);
+
+    // Sort entities with new settings
+    if (formData.useOrdering !== config.useOrdering) {
+      sortApps();
+      sortCategories();
+
+      for (let { id } of categories) {
+        sortBookmarks(id);
+      }
+    }
   };
 
   // Input handler
@@ -53,7 +67,7 @@ export const SearchSettings = (): JSX.Element => {
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
     options?: { isNumber?: boolean; isBool?: boolean }
   ) => {
-    inputHandler<SearchForm>({
+    inputHandler<GeneralForm>({
       e,
       options,
       setStateHandler: setFormData,
@@ -63,12 +77,95 @@ export const SearchSettings = (): JSX.Element => {
 
   return (
     <Fragment>
-      {/* GENERAL SETTINGS */}
       <form
         onSubmit={(e) => formSubmitHandler(e)}
         style={{ marginBottom: '30px' }}
       >
+        {/* === GENERAL OPTIONS === */}
         <SettingsHeadline text="General" />
+        {/* SORT TYPE */}
+        <InputGroup>
+          <label htmlFor="useOrdering">Sorting type</label>
+          <select
+            id="useOrdering"
+            name="useOrdering"
+            value={formData.useOrdering}
+            onChange={(e) => inputChangeHandler(e)}
+          >
+            <option value="createdAt">By creation date</option>
+            <option value="name">Alphabetical order</option>
+            <option value="orderId">Custom order</option>
+          </select>
+        </InputGroup>
+
+        {/* === APPS OPTIONS === */}
+        <SettingsHeadline text="Apps" />
+        {/* PIN APPS */}
+        <InputGroup>
+          <label htmlFor="pinAppsByDefault">
+            Pin new applications by default
+          </label>
+          <select
+            id="pinAppsByDefault"
+            name="pinAppsByDefault"
+            value={formData.pinAppsByDefault ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* APPS OPPENING */}
+        <InputGroup>
+          <label htmlFor="appsSameTab">Open applications in the same tab</label>
+          <select
+            id="appsSameTab"
+            name="appsSameTab"
+            value={formData.appsSameTab ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* === BOOKMARKS OPTIONS === */}
+        <SettingsHeadline text="Bookmarks" />
+        {/* PIN CATEGORIES */}
+        <InputGroup>
+          <label htmlFor="pinCategoriesByDefault">
+            Pin new categories by default
+          </label>
+          <select
+            id="pinCategoriesByDefault"
+            name="pinCategoriesByDefault"
+            value={formData.pinCategoriesByDefault ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* BOOKMARKS OPPENING */}
+        <InputGroup>
+          <label htmlFor="bookmarksSameTab">
+            Open bookmarks in the same tab
+          </label>
+          <select
+            id="bookmarksSameTab"
+            name="bookmarksSameTab"
+            value={formData.bookmarksSameTab ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* SEARCH SETTINGS */}
+        <SettingsHeadline text="Search" />
         <InputGroup>
           <label htmlFor="defaultSearchProvider">Default search provider</label>
           <select
@@ -104,32 +201,6 @@ export const SearchSettings = (): JSX.Element => {
           </select>
         </InputGroup>
 
-        <InputGroup>
-          <label htmlFor="hideSearch">Hide search bar</label>
-          <select
-            id="hideSearch"
-            name="hideSearch"
-            value={formData.hideSearch ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        <InputGroup>
-          <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
-          <select
-            id="disableAutofocus"
-            name="disableAutofocus"
-            value={formData.disableAutofocus ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
         <Button>Save changes</Button>
       </form>
 

client/src/components/Settings/Settings.tsx

@@ -16,7 +16,7 @@ import { WeatherSettings } from './WeatherSettings/WeatherSettings';
 import { UISettings } from './UISettings/UISettings';
 import { AppDetails } from './AppDetails/AppDetails';
 import { StyleSettings } from './StyleSettings/StyleSettings';
-import { SearchSettings } from './SearchSettings/SearchSettings';
+import { GeneralSettings } from './GeneralSettings/GeneralSettings';
 import { DockerSettings } from './DockerSettings/DockerSettings';
 import { ProtectedRoute } from '../Routing/ProtectedRoute';
 
@@ -59,8 +59,8 @@ export const Settings = (): JSX.Element => {
               component={WeatherSettings}
             />
             <ProtectedRoute
-              path="/settings/search"
+              path="/settings/general"
-              component={SearchSettings}
+              component={GeneralSettings}
             />
             <ProtectedRoute path="/settings/interface" component={UISettings} />
             <ProtectedRoute

client/src/components/Settings/UISettings/UISettings.tsx

@@ -7,28 +7,22 @@ import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
 
 // Typescript
-import { OtherSettingsForm } from '../../../interfaces';
+import { UISettingsForm } from '../../../interfaces';
 
 // UI
 import { InputGroup, Button, SettingsHeadline } from '../../UI';
 
 // Utils
-import { otherSettingsTemplate, inputHandler } from '../../../utility';
+import { uiSettingsTemplate, inputHandler } from '../../../utility';
 
 export const UISettings = (): JSX.Element => {
-  const {
+  const { loading, config } = useSelector((state: State) => state.config);
-    config: { loading, config },
-    bookmarks: { categories },
-  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
-    bindActionCreators(actionCreators, dispatch);
 
   // Initial state
-  const [formData, setFormData] = useState<OtherSettingsForm>(
+  const [formData, setFormData] = useState<UISettingsForm>(uiSettingsTemplate);
-    otherSettingsTemplate
-  );
 
   // Get config
   useEffect(() => {
@@ -46,16 +40,6 @@ export const UISettings = (): JSX.Element => {
 
     // Update local page title
     document.title = formData.customTitle;
-
-    // Sort entities with new settings
-    if (formData.useOrdering !== config.useOrdering) {
-      sortApps();
-      sortCategories();
-
-      for (let { id } of categories) {
-        sortBookmarks(id);
-      }
-    }
   };
 
   // Input handler
@@ -63,7 +47,7 @@ export const UISettings = (): JSX.Element => {
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
     options?: { isNumber?: boolean; isBool?: boolean }
   ) => {
-    inputHandler<OtherSettingsForm>({
+    inputHandler<UISettingsForm>({
       e,
       options,
       setStateHandler: setFormData,
@@ -88,6 +72,36 @@ export const UISettings = (): JSX.Element => {
         />
       </InputGroup>
 
+      {/* === SEARCH OPTIONS === */}
+      <SettingsHeadline text="Search" />
+      {/* HIDE SEARCHBAR */}
+      <InputGroup>
+        <label htmlFor="hideSearch">Hide search bar</label>
+        <select
+          id="hideSearch"
+          name="hideSearch"
+          value={formData.hideSearch ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* AUTOFOCUS SEARCHBAR */}
+      <InputGroup>
+        <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
+        <select
+          id="disableAutofocus"
+          name="disableAutofocus"
+          value={formData.disableAutofocus ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
       {/* === HEADER OPTIONS === */}
       <SettingsHeadline text="Header" />
       {/* HIDE HEADER */}
@@ -160,8 +174,8 @@ export const UISettings = (): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
         <span>
-          Greetings must be separated with semicolon. Only 4 messages can be
+          Greetings must be separated with semicolon. All 4 messages must be
-          used
+          filled, even if they are the same
         </span>
       </InputGroup>
 
@@ -193,85 +207,8 @@ export const UISettings = (): JSX.Element => {
         <span>Names must be separated with semicolon</span>
       </InputGroup>
 
-      {/* === BEAHVIOR OPTIONS === */}
+      {/* === SECTIONS OPTIONS === */}
-      <SettingsHeadline text="App Behavior" />
+      <SettingsHeadline text="Sections" />
-      {/* PIN APPS */}
-      <InputGroup>
-        <label htmlFor="pinAppsByDefault">
-          Pin new applications by default
-        </label>
-        <select
-          id="pinAppsByDefault"
-          name="pinAppsByDefault"
-          value={formData.pinAppsByDefault ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* PIN CATEGORIES */}
-      <InputGroup>
-        <label htmlFor="pinCategoriesByDefault">
-          Pin new categories by default
-        </label>
-        <select
-          id="pinCategoriesByDefault"
-          name="pinCategoriesByDefault"
-          value={formData.pinCategoriesByDefault ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* SORT TYPE */}
-      <InputGroup>
-        <label htmlFor="useOrdering">Sorting type</label>
-        <select
-          id="useOrdering"
-          name="useOrdering"
-          value={formData.useOrdering}
-          onChange={(e) => inputChangeHandler(e)}
-        >
-          <option value="createdAt">By creation date</option>
-          <option value="name">Alphabetical order</option>
-          <option value="orderId">Custom order</option>
-        </select>
-      </InputGroup>
-
-      {/* APPS OPPENING */}
-      <InputGroup>
-        <label htmlFor="appsSameTab">Open applications in the same tab</label>
-        <select
-          id="appsSameTab"
-          name="appsSameTab"
-          value={formData.appsSameTab ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* BOOKMARKS OPPENING */}
-      <InputGroup>
-        <label htmlFor="bookmarksSameTab">Open bookmarks in the same tab</label>
-        <select
-          id="bookmarksSameTab"
-          name="bookmarksSameTab"
-          value={formData.bookmarksSameTab ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* === MODULES OPTIONS === */}
-      <SettingsHeadline text="Modules" />
       {/* HIDE APPS */}
       <InputGroup>
         <label htmlFor="hideApps">Hide applications</label>

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -82,6 +82,19 @@ export const WeatherSettings = (): JSX.Element => {
     });
   };
 
+  // Get user location
+  const getLocation = () => {
+    window.navigator.geolocation.getCurrentPosition(
+      ({ coords: { latitude, longitude } }) => {
+        setFormData({
+          ...formData,
+          lat: latitude,
+          long: longitude,
+        });
+      }
+    );
+  };
+
   return (
     <form onSubmit={(e) => formSubmitHandler(e)}>
       <SettingsHeadline text="API" />
@@ -120,15 +133,8 @@ export const WeatherSettings = (): JSX.Element => {
           step="any"
           lang="en-150"
         />
-        <span>
+        <span onClick={getLocation}>
-          You can use
+          <a href="#">Click to get current location</a>
-          <a
-            href="https://www.latlong.net/convert-address-to-lat-long.html"
-            target="blank"
-          >
-            {' '}
-            latlong.net
-          </a>
         </span>
       </InputGroup>
 

client/src/components/Settings/settings.json

@@ -6,13 +6,8 @@
       "authRequired": false
     },
     {
-      "name": "Weather",
+      "name": "General",
-      "dest": "/settings/weather",
+      "dest": "/settings/general",
-      "authRequired": true
-    },
-    {
-      "name": "Search",
-      "dest": "/settings/search",
       "authRequired": true
     },
     {
@@ -20,6 +15,11 @@
       "dest": "/settings/interface",
       "authRequired": true
     },
+    {
+      "name": "Weather",
+      "dest": "/settings/weather",
+      "authRequired": true
+    },
     {
       "name": "Docker",
       "dest": "/settings/docker",

client/src/components/UI/Forms/InputGroup/InputGroup.module.css

@@ -23,7 +23,7 @@
 
 .InputGroup span {
   font-size: 12px;
-  color: var(--color-primary)
+  color: var(--color-primary);
 }
 
 .InputGroup span a {
@@ -37,4 +37,4 @@
 .InputGroup textarea {
   resize: none;
   height: 50vh;
-}
+}

client/src/components/UI/Text/Message/Message.module.css

@@ -6,3 +6,21 @@
   color: var(--color-accent);
   font-weight: 600;
 }
+
+.messageCenter {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.messageCenter a,
+.messageCenter span {
+  color: var(--color-accent);
+}
+
+.messageCenter a:hover {
+  cursor: pointer;
+}

client/src/components/UI/Text/Message/Message.tsx

@@ -4,8 +4,11 @@ import classes from './Message.module.css';
 
 interface Props {
   children: ReactNode;
+  isPrimary?: boolean;
 }
 
-export const Message = ({ children }: Props): JSX.Element => {
+export const Message = ({ children, isPrimary = true }: Props): JSX.Element => {
-  return <p className={classes.message}>{children}</p>;
+  const style = isPrimary ? classes.message : classes.messageCenter;
+
+  return <p className={style}>{children}</p>;
 };

client/src/interfaces/App.ts

@@ -5,6 +5,7 @@ export interface NewApp {
   url: string;
   icon: string;
   isPublic: boolean;
+  description: string;
 }
 
 export interface App extends Model, NewApp {

client/src/interfaces/Forms.ts

@@ -8,29 +8,29 @@ export interface WeatherForm {
   weatherData: WeatherData;
 }
 
-export interface SearchForm {
+export interface GeneralForm {
-  hideSearch: boolean;
   defaultSearchProvider: string;
   searchSameTab: boolean;
-  disableAutofocus: boolean;
-}
-
-export interface OtherSettingsForm {
-  customTitle: string;
   pinAppsByDefault: boolean;
   pinCategoriesByDefault: boolean;
-  hideHeader: boolean;
-  hideApps: boolean;
-  hideCategories: boolean;
   useOrdering: string;
   appsSameTab: boolean;
   bookmarksSameTab: boolean;
+}
+
+export interface UISettingsForm {
+  customTitle: string;
+  hideHeader: boolean;
+  hideApps: boolean;
+  hideCategories: boolean;
   useAmericanDate: boolean;
   greetingsSchema: string;
   daySchema: string;
   monthSchema: string;
   showTime: boolean;
   hideDate: boolean;
+  hideSearch: boolean;
+  disableAutofocus: boolean;
 }
 
 export interface DockerSettingsForm {

client/src/types/ConfigFormData.ts

@@ -1,14 +1,14 @@
 import {
   DockerSettingsForm,
-  OtherSettingsForm,
+  UISettingsForm,
-  SearchForm,
+  GeneralForm,
   ThemeSettingsForm,
   WeatherForm,
 } from '../interfaces';
 
 export type ConfigFormData =
   | WeatherForm
-  | SearchForm
+  | GeneralForm
   | DockerSettingsForm
-  | OtherSettingsForm
+  | UISettingsForm
   | ThemeSettingsForm;

client/src/utility/templateObjects/appTemplate.ts

@@ -5,6 +5,7 @@ export const newAppTemplate: NewApp = {
   url: '',
   icon: '',
   isPublic: true,
+  description: '',
 };
 
 export const appTemplate: App = {

client/src/utility/templateObjects/settingsTemplate.ts

@@ -1,21 +1,16 @@
 import {
   DockerSettingsForm,
-  OtherSettingsForm,
+  UISettingsForm,
-  SearchForm,
+  GeneralForm,
   ThemeSettingsForm,
   WeatherForm,
 } from '../../interfaces';
 
-export const otherSettingsTemplate: OtherSettingsForm = {
+export const uiSettingsTemplate: UISettingsForm = {
   customTitle: document.title,
-  pinAppsByDefault: true,
-  pinCategoriesByDefault: true,
   hideHeader: false,
   hideApps: false,
   hideCategories: false,
-  useOrdering: 'createdAt',
-  appsSameTab: false,
-  bookmarksSameTab: false,
   useAmericanDate: false,
   greetingsSchema: 'Good evening!;Good afternoon!;Good morning!;Good night!',
   daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday',
@@ -23,6 +18,8 @@ export const otherSettingsTemplate: OtherSettingsForm = {
     'January;February;March;April;May;June;July;August;September;October;November;December',
   showTime: false,
   hideDate: false,
+  hideSearch: false,
+  disableAutofocus: false,
 };
 
 export const weatherSettingsTemplate: WeatherForm = {
@@ -33,11 +30,14 @@ export const weatherSettingsTemplate: WeatherForm = {
   weatherData: 'cloud',
 };
 
-export const searchSettingsTemplate: SearchForm = {
+export const generalSettingsTemplate: GeneralForm = {
-  hideSearch: false,
   searchSameTab: false,
   defaultSearchProvider: 'l',
-  disableAutofocus: false,
+  pinAppsByDefault: true,
+  pinCategoriesByDefault: true,
+  useOrdering: 'createdAt',
+  appsSameTab: false,
+  bookmarksSameTab: false,
 };
 
 export const dockerSettingsTemplate: DockerSettingsForm = {

db/migrations/05_app-description.js

@@ -0,0 +1,19 @@
+const { DataTypes } = require('sequelize');
+const { STRING } = DataTypes;
+
+const up = async (query) => {
+  await query.addColumn('apps', 'description', {
+    type: STRING,
+    allowNull: false,
+    defaultValue: '',
+  });
+};
+
+const down = async (query) => {
+  await query.removeColumn('apps', 'description');
+};
+
+module.exports = {
+  up,
+  down,
+};

middleware/errorHandler.js

@@ -1,5 +1,4 @@
 const ErrorResponse = require('../utils/ErrorResponse');
-const colors = require('colors');
 const Logger = require('../utils/Logger');
 const logger = new Logger();
 

models/App.js

@@ -31,6 +31,11 @@ const App = sequelize.define(
       allowNull: true,
       defaultValue: 1,
     },
+    description: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: '',
+    },
   },
   {
     tableName: 'apps',

package.json

@@ -20,8 +20,8 @@
     "@kubernetes/client-node": "^0.15.1",
     "@types/express": "^4.17.13",
     "axios": "^0.24.0",
-    "colors": "^1.4.0",
     "concurrently": "^6.3.0",
+    "docker-secret": "^1.2.4",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
     "jsonwebtoken": "^8.5.1",

server.js

@@ -23,6 +23,7 @@ const logger = new Logger();
   await initApp();
   await connectDB();
   await associateModels();
+  await jobs();
 
   // Create server for Express API and WebSockets
   const server = http.createServer();

utils/init/index.js

@@ -1,7 +1,9 @@
 const initConfig = require('./initConfig');
 const initFiles = require('./initFiles');
+const initDockerSecrets = require('./initDockerSecrets');
 
 const initApp = async () => {
+  initDockerSecrets();
   await initFiles();
   await initConfig();
 };

utils/init/initDockerSecrets.js

@@ -0,0 +1,21 @@
+const { getSecrets } = require('docker-secret');
+const Logger = require('../Logger');
+const logger = new Logger();
+
+const initDockerSecrets = () => {
+  try {
+    const secrets = getSecrets();
+
+    for (const property in secrets) {
+      const upperProperty = property.toUpperCase();
+
+      process.env[upperProperty] = secrets[property];
+
+      logger.log(`${upperProperty} was overwritten with docker secret value`);
+    }
+  } catch (e) {
+    logger.log(`Failed to initialize docker secrets. Error: ${e}`, 'ERROR');
+  }
+};
+
+module.exports = initDockerSecrets;

utils/jobs.js

@@ -6,30 +6,34 @@ const Logger = require('./Logger');
 const loadConfig = require('./loadConfig');
 const logger = new Logger();
 
-// Update weather data every 15 minutes
+module.exports = async function () {
-const weatherJob = schedule.scheduleJob(
+  const { WEATHER_API_KEY } = await loadConfig();
-  'updateWeather',
-  '0 */15 * * * *',
-  async () => {
-    const { WEATHER_API_KEY: secret } = await loadConfig();
 
-    try {
+  if (WEATHER_API_KEY != '') {
-      const weatherData = await getExternalWeather();
+    // Update weather data every 15 minutes
+    const weatherJob = schedule.scheduleJob(
+      'updateWeather',
+      '0 */15 * * * *',
+      async () => {
+        try {
+          const weatherData = await getExternalWeather();
 
-      Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
+          Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
-    } catch (err) {
+        } catch (err) {
-      if (secret) {
+          if (WEATHER_API_KEY) {
-        logger.log(err.message, 'ERROR');
+            logger.log(err.message, 'ERROR');
+          }
+        }
       }
-    }
+    );
-  }
-);
 
-// Clear old weather data every 4 hours
+    // Clear old weather data every 4 hours
-const weatherCleanerJob = schedule.scheduleJob(
+    const weatherCleanerJob = schedule.scheduleJob(
-  'clearWeather',
+      'clearWeather',
-  '0 5 */4 * * *',
+      '0 5 */4 * * *',
-  async () => {
+      async () => {
-    clearWeatherData();
+        clearWeatherData();
+      }
+    );
   }
-);
+};