Added auth form. Added login and logout actions

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

@@ -131,7 +131,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
             onChange={(e) => inputChangeHandler(e)}
           />
           <span>
-            Use icon name from MDI.
+            Use icon name from MDI or pass a valid URL.
             <a href="https://materialdesignicons.com/" target="blank">
               {' '}
               Click here for reference

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

@@ -205,7 +205,7 @@ export const BookmarksForm = ({
             onChange={(e) => inputChangeHandler(e)}
           />
           <span>
-            Use icon name from MDI.
+            Use icon name from MDI or pass a valid URL.
             <a href="https://materialdesignicons.com/" target="blank">
               {' '}
               Click here for reference

client/src/components/Settings/AppDetails/AppDetails.module.css

@@ -1,8 +1,14 @@
-.AppVersion {
+.text {
   color: var(--color-primary);
   margin-bottom: 15px;
 }
 
-.AppVersion a {
+.text a,
+.text span {
   color: var(--color-accent);
-}
+}
+
+.separator {
+  margin: 30px 0;
+  border: 1px solid var(--color-primary);
+}

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

@@ -1,33 +1,100 @@
-import { Fragment } from 'react';
+import { FormEvent, Fragment, useState } from 'react';
 
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../store';
+import { State } from '../../../store/reducers';
+
+// UI
+import { Button, InputGroup, SettingsHeadline } from '../../UI';
+
+// CSS
 import classes from './AppDetails.module.css';
-import { Button } from '../../UI';
+
+// Utils
 import { checkVersion } from '../../../utility';
 
 export const AppDetails = (): JSX.Element => {
+  const { isAuthenticated } = useSelector((state: State) => state.auth);
+
+  const dispatch = useDispatch();
+  const { login, logout } = bindActionCreators(actionCreators, dispatch);
+
+  const [password, setPassword] = useState('');
+
+  const formHandler = (e: FormEvent) => {
+    e.preventDefault();
+    login(password);
+    setPassword('');
+  };
+
   return (
     <Fragment>
-      <p className={classes.AppVersion}>
-        <a
-          href="https://github.com/pawelmalak/flame"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Flame
-        </a>{' '}
-        version {process.env.REACT_APP_VERSION}
-      </p>
-      <p className={classes.AppVersion}>
-        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>
+      <SettingsHeadline text="Authentication" />
+      {!isAuthenticated ? (
+        <form onSubmit={formHandler}>
+          <InputGroup>
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              placeholder="••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <span>
+              See
+              <a
+                href="https://github.com/pawelmalak/flame/wiki/Authentication"
+                target="blank"
+              >
+                {` project wiki `}
+              </a>
+              to read more about authentication
+            </span>
+          </InputGroup>
+
+          <Button>Login</Button>
+        </form>
+      ) : (
+        <div>
+          <p className={classes.text}>
+            You are logged in. Your session will expire <span>@@@@</span>
+          </p>
+          <Button click={logout}>Logout</Button>
+        </div>
+      )}
+
+      <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>
+
+        <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>
     </Fragment>
   );
 };