Merge pull request #206 from pawelmalak/feature

Version 2.0.1

Author: pawelmalak

.env

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

CHANGELOG.md

@@ -1,3 +1,11 @@
+### v2.0.1 (2021-11-19)
+- Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
+- Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))
+- Added option to hide header greetings and date separately ([#200](https://github.com/pawelmalak/flame/issues/200))
+- Fixed bug with broken basic auth ([#202](https://github.com/pawelmalak/flame/issues/202))
+- Fixed bug with parsing visibility value for apps and bookmarks when custom icon was used ([#203](https://github.com/pawelmalak/flame/issues/203))
+- Fixed bug with custom icons not working with apps when "pin by default" was disabled
+
 ### v2.0.0 (2021-11-15)
 - Added authentication system:
   - Only logged in user can access settings ([#33](https://github.com/pawelmalak/flame/issues/33))

README.md

@@ -11,7 +11,7 @@ Flame is self-hosted startpage for your server. Its design is inspired (heavily)
 - 📌 Pin your favourite items to the homescreen for quick and easy access
 - 🔍 Integrated search bar with local filtering, 11 web search providers and ability to add your own
 - 🔑 Authentication system to protect your settings, apps and bookmarks
-- 🔨 Dozens of option to customize Flame interface to your needs, including support for custom CSS and 15 built-in color themes
+- 🔨 Dozens of options to customize Flame interface to your needs, including support for custom CSS and 15 built-in color themes
 - ☀️ Weather widget with current temperature, cloud coverage and animated weather status
 - 🐳 Docker integration to automatically pick and add apps based on their labels
 

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.0.0
+REACT_APP_VERSION=2.0.1

client/src/App.tsx

@@ -1,7 +1,13 @@
+import { useEffect } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import 'external-svg-loader';
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import { autoLogin, getConfig } from './store/action-creators';
 import { actionCreators, store } from './store';
-import 'external-svg-loader';
+import { State } from './store/reducers';
 
 // Utils
 import { checkVersion, decodeToken } from './utility';
@@ -12,9 +18,6 @@ import { Apps } from './components/Apps/Apps';
 import { Settings } from './components/Settings/Settings';
 import { Bookmarks } from './components/Bookmarks/Bookmarks';
 import { NotificationCenter } from './components/NotificationCenter/NotificationCenter';
-import { useDispatch } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { useEffect } from 'react';
 
 // Get config
 store.dispatch<any>(getConfig());
@@ -25,6 +28,8 @@ if (localStorage.token) {
 }
 
 export const App = (): JSX.Element => {
+  const { config, loading } = useSelector((state: State) => state.config);
+
   const dispath = useDispatch();
   const { fetchQueries, setTheme, logout, createNotification } =
     bindActionCreators(actionCreators, dispath);
@@ -46,7 +51,7 @@ export const App = (): JSX.Element => {
       }
     }, 1000);
 
-    // set theme
+    // set user theme if present
     if (localStorage.theme) {
       setTheme(localStorage.theme);
     }
@@ -60,6 +65,13 @@ export const App = (): JSX.Element => {
     return () => window.clearInterval(tokenIsValid);
   }, []);
 
+  // If there is no user theme, set the default one
+  useEffect(() => {
+    if (!loading && !localStorage.theme) {
+      setTheme(config.defaultTheme, false);
+    }
+  }, [loading]);
+
   return (
     <>
       <BrowserRouter>

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

@@ -61,7 +61,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
       }
       data.append('name', formData.name);
       data.append('url', formData.url);
-      data.append('isPublic', `${formData.isPublic}`);
+      data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
 
       return data;
     };

client/src/components/Bookmarks/Form/BookmarksForm.tsx

@@ -77,7 +77,7 @@ export const BookmarksForm = ({
       data.append('name', formData.name);
       data.append('url', formData.url);
       data.append('categoryId', `${formData.categoryId}`);
-      data.append('isPublic', `${formData.isPublic}`);
+      data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
 
       return data;
     };

client/src/components/Home/Header/Header.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+// Redux
+import { useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+
 // CSS
 import classes from './Header.module.css';
 
@@ -12,6 +16,10 @@ import { getDateTime } from './functions/getDateTime';
 import { greeter } from './functions/greeter';
 
 export const Header = (): JSX.Element => {
+  const { hideHeader, hideDate, showTime } = useSelector(
+    (state: State) => state.config.config
+  );
+
   const [dateTime, setDateTime] = useState<string>(getDateTime());
   const [greeting, setGreeting] = useState<string>(greeter());
 
@@ -28,14 +36,18 @@ export const Header = (): JSX.Element => {
 
   return (
     <header className={classes.Header}>
-      <p>{dateTime}</p>
+      {(!hideDate || showTime) && <p>{dateTime}</p>}
+
       <Link to="/settings" className={classes.SettingsLink}>
         Go to Settings
       </Link>
-      <span className={classes.HeaderMain}>
-        <h1>{greeting}</h1>
-        <WeatherWidget />
-      </span>
+
+      {!hideHeader && (
+        <span className={classes.HeaderMain}>
+          <h1>{greeting}</h1>
+          <WeatherWidget />
+        </span>
+      )}
     </header>
   );
 };

client/src/components/Home/Header/functions/getDateTime.ts

@@ -30,22 +30,42 @@ export const getDateTime = (): string => {
 
   const useAmericanDate = localStorage.useAmericanDate === 'true';
   const showTime = localStorage.showTime === 'true';
+  const hideDate = localStorage.hideDate === 'true';
 
+  // Date
+  let dateEl = '';
+
+  if (!hideDate) {
+    if (!useAmericanDate) {
+      dateEl = `${days[now.getDay()]}, ${now.getDate()} ${
+        months[now.getMonth()]
+      } ${now.getFullYear()}`;
+    } else {
+      dateEl = `${days[now.getDay()]}, ${
+        months[now.getMonth()]
+      } ${now.getDate()} ${now.getFullYear()}`;
+    }
+  }
+
+  // Time
   const p = parseTime;
+  let timeEl = '';
 
-  const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p(
-    now.getSeconds()
-  )}`;
+  if (showTime) {
+    const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p(
+      now.getSeconds()
+    )}`;
 
-  const timeEl = showTime ? ` - ${time}` : '';
+    timeEl = time;
+  }
+
+  // Separator
+  let separator = '';
 
-  if (!useAmericanDate) {
-    return `${days[now.getDay()]}, ${now.getDate()} ${
-      months[now.getMonth()]
-    } ${now.getFullYear()}${timeEl}`;
-  } else {
-    return `${days[now.getDay()]}, ${
-      months[now.getMonth()]
-    } ${now.getDate()} ${now.getFullYear()}${timeEl}`;
+  if (!hideDate && showTime) {
+    separator = ' - ';
   }
+
+  // Output
+  return `${dateEl}${separator}${timeEl}`;
 };

client/src/components/Home/Home.tsx

@@ -98,7 +98,7 @@ export const Home = (): JSX.Element => {
         <div></div>
       )}
 
-      {!config.hideHeader ? <Header /> : <div></div>}
+      <Header />
 
       {!config.hideApps ? (
         <Fragment>