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

@@ -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

@@ -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"]

.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.1
+VERSION=2.2.2
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

.gitignore

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

CHANGELOG.md

@@ -1,3 +1,19 @@
+### 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))

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

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.1.1
+REACT_APP_VERSION=2.2.2

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>
-        <span>{displayUrl}</span>
+        <h5>{app.name}</h5>
+        <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.tsx

@@ -94,7 +94,7 @@ export const AppTable = (props: Props): JSX.Element => {
         ) : (
           <p>
             Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/interface">settings</Link>
+            <Link to="/settings/general">settings</Link>
           </p>
         )}
       </Message>

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

@@ -102,7 +102,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
         ) : (
           <p>
             Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/interface">settings</Link>
+            <Link to="/settings/general">settings</Link>
           </p>
         )}
       </Message>

client/src/components/Home/Home.tsx

@@ -64,8 +64,10 @@ export const Home = (): JSX.Element => {
     if (localSearch) {
       // Search through apps
       setAppSearchResult([
-        ...apps.filter(({ name }) =>
-          new RegExp(escapeRegex(localSearch), 'i').test(name)
+        ...apps.filter(({ name, description }) =>
+          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>
-        <SettingsHeadline text="App version" />
-        <p className={classes.text}>
-          <a
-            href="https://github.com/pawelmalak/flame"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Flame
-          </a>{' '}
-          version {process.env.REACT_APP_VERSION}
-        </p>
+          <div>
+            <SettingsHeadline text="App version" />
+            <p className={classes.text}>
+              <a
+                href="https://github.com/pawelmalak/flame"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Flame
+              </a>{' '}
+              version {process.env.REACT_APP_VERSION}
+            </p>
 
-        <p className={classes.text}>
-          See changelog{' '}
-          <a
-            href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
-            target="_blank"
-            rel="noreferrer"
-          >
-            here
-          </a>
-        </p>
+            <p className={classes.text}>
+              See changelog{' '}
+              <a
+                href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
+                target="_blank"
+                rel="noreferrer"
+              >
+                here
+              </a>
+            </p>
 
-        <Button click={() => checkVersion(true)}>Check for updates</Button>
-      </div>
+            <Button click={() => checkVersion(true)}>Check for updates</Button>
+          </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 => {
-  const { loading, customQueries, config } = useSelector(
-    (state: State) => state.config
-  );
+export const GeneralSettings = (): JSX.Element => {
+  const {
+    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"
-              component={SearchSettings}
+              path="/settings/general"
+              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 {
-    config: { loading, config },
-    bookmarks: { categories },
-  } = useSelector((state: State) => state);
+  const { loading, config } = useSelector((state: State) => state.config);
 
   const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
-    bindActionCreators(actionCreators, dispatch);
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
 
   // Initial state
-  const [formData, setFormData] = useState<OtherSettingsForm>(
-    otherSettingsTemplate
-  );
+  const [formData, setFormData] = useState<UISettingsForm>(uiSettingsTemplate);
 
   // 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
-          used
+          Greetings must be separated with semicolon. All 4 messages must be
+          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 === */}
-      <SettingsHeadline text="App Behavior" />
-      {/* 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" />
+      {/* === SECTIONS OPTIONS === */}
+      <SettingsHeadline text="Sections" />
       {/* 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>
-          You can use
-          <a
-            href="https://www.latlong.net/convert-address-to-lat-long.html"
-            target="blank"
-          >
-            {' '}
-            latlong.net
-          </a>
+        <span onClick={getLocation}>
+          <a href="#">Click to get current location</a>
         </span>
       </InputGroup>
 

client/src/components/Settings/settings.json

@@ -6,13 +6,8 @@
       "authRequired": false
     },
     {
-      "name": "Weather",
-      "dest": "/settings/weather",
-      "authRequired": true
-    },
-    {
-      "name": "Search",
-      "dest": "/settings/search",
+      "name": "General",
+      "dest": "/settings/general",
       "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/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 {
-  hideSearch: boolean;
+export interface GeneralForm {
   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,
-  SearchForm,
+  UISettingsForm,
+  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,
-  SearchForm,
+  UISettingsForm,
+  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 = {
-  hideSearch: false,
+export const generalSettingsTemplate: GeneralForm = {
   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,
+};

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-lock.json

@@ -13,7 +13,7 @@
         "@types/express": "^4.17.13",
         "axios": "^0.24.0",
         "concurrently": "^6.3.0",
-        "docker-secret": "^1.2.3",
+        "docker-secret": "^1.2.4",
         "dotenv": "^10.0.0",
         "express": "^4.17.1",
         "jsonwebtoken": "^8.5.1",
@@ -1191,9 +1191,9 @@
       "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
     },
     "node_modules/docker-secret": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.3.tgz",
-      "integrity": "sha512-JFUGiZEiNO0Hi9YzZAdCc5MwUpgQOjz0OeZkkcEv+lH6ZBkXNK97w2gcBQCsg5WRsT+Cj9eKFhuYyDxT8j56+A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.4.tgz",
+      "integrity": "sha512-aH3truzfxV8TikMa0wJES8h0v2FAwhuQZYk116ZVOHFZ1vnDTGutgCOvXmBPyLBG1Lo7yv93FdHVRTvhFFaC/g==",
       "engines": {
         "node": ">= 6"
       }
@@ -5335,9 +5335,9 @@
       }
     },
     "docker-secret": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.3.tgz",
-      "integrity": "sha512-JFUGiZEiNO0Hi9YzZAdCc5MwUpgQOjz0OeZkkcEv+lH6ZBkXNK97w2gcBQCsg5WRsT+Cj9eKFhuYyDxT8j56+A=="
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.4.tgz",
+      "integrity": "sha512-aH3truzfxV8TikMa0wJES8h0v2FAwhuQZYk116ZVOHFZ1vnDTGutgCOvXmBPyLBG1Lo7yv93FdHVRTvhFFaC/g=="
     },
     "dot-prop": {
       "version": "5.3.0",
@@ -7754,4 +7754,4 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     }
   }
-}
+}

package.json

@@ -21,7 +21,7 @@
     "@types/express": "^4.17.13",
     "axios": "^0.24.0",
     "concurrently": "^6.3.0",
-    "docker-secret": "^1.2.3",
+    "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/initDockerSecrets.js

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

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
-const weatherJob = schedule.scheduleJob(
-  'updateWeather',
-  '0 */15 * * * *',
-  async () => {
-    const { WEATHER_API_KEY: secret } = await loadConfig();
+module.exports = async function () {
+  const { WEATHER_API_KEY } = await loadConfig();
 
-    try {
-      const weatherData = await getExternalWeather();
+  if (WEATHER_API_KEY != '') {
+    // 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));
-    } catch (err) {
-      if (secret) {
-        logger.log(err.message, 'ERROR');
+          Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
+        } catch (err) {
+          if (WEATHER_API_KEY) {
+            logger.log(err.message, 'ERROR');
+          }
+        }
       }
-    }
-  }
-);
+    );
 
-// Clear old weather data every 4 hours
-const weatherCleanerJob = schedule.scheduleJob(
-  'clearWeather',
-  '0 5 */4 * * *',
-  async () => {
-    clearWeatherData();
+    // Clear old weather data every 4 hours
+    const weatherCleanerJob = schedule.scheduleJob(
+      'clearWeather',
+      '0 5 */4 * * *',
+      async () => {
+        clearWeatherData();
+      }
+    );
   }
-);
+};