3 files changed, 181 insertions, 3 deletions

diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
new file mode 100644
index 000000000..045621d0a
--- /dev/null
+++ b/src/components/auth/Locked.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import { required } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Infobox from '../ui/Infobox';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+const messages = defineMessages({
+  headline: {
+    id: 'locked.headline',
+    defaultMessage: '!!!Locked',
+  },
+  info: {
+    id: 'locked.info',
+    defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
+  },
+  passwordLabel: {
+    id: 'locked.password.label',
+    defaultMessage: '!!!Password',
+  },
+  submitButtonLabel: {
+    id: 'locked.submit.label',
+    defaultMessage: '!!!Unlock',
+  },
+  invalidCredentials: {
+    id: 'locked.invalidCredentials',
+    defaultMessage: '!!!Password invalid',
+  },
+});
+
+export default @observer class Locked extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validators: [required],
+        type: 'password',
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => { },
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const {
+      isSubmitting,
+      error,
+    } = this.props;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img
+            src="./assets/images/logo.svg"
+            className="auth__logo"
+            alt=""
+          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <Infobox type="warning">
+            {intl.formatMessage(messages.info)}
+          </Infobox>
+          <Input
+            field={form.$('password')}
+            showPasswordToggle
+          />
+          {error.code === 'invalid-credentials' && (
+            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+          )}
+          {isSubmitting ? (
+            <Button
+              className="auth__button is-loading"
+              buttonType="secondary"
+              label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+              loaded={false}
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              className="auth__button"
+              label={intl.formatMessage(messages.submitButtonLabel)}
+            />
+          )}
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 729bd35af..d26eb852d 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, intlShape } from 'react-intl';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
@@ -44,9 +44,13 @@ const messages = defineMessages({
     id: 'sidebar.closeTodosDrawer',
     defaultMessage: '!!!Close Franz Todos',
   },
+  lockFerdi: {
+    id: 'sidebar.lockFerdi',
+    defaultMessage: '!!!Lock Ferdi',
+  },
 });
 
-export default @observer class Sidebar extends Component {
+export default @inject('stores', 'actions') @observer class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
@@ -87,6 +91,8 @@ export default @observer class Sidebar extends Component {
       isAppMuted,
       isWorkspaceDrawerOpen,
       toggleWorkspaceDrawer,
+      stores,
+      actions,
     } = this.props;
     const { intl } = this.context;
     const todosToggleMessage = (
@@ -107,6 +113,23 @@ export default @observer class Sidebar extends Component {
         />
         { isLoggedIn ? (
           <>
+            { stores.settings.all.app.lockingFeatureEnabled ? (
+              <button
+                type="button"
+                className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+                onClick={() => {
+                  actions.settings.update({
+                    type: 'app',
+                    data: {
+                      locked: true,
+                    },
+                  });
+                }}
+                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${ctrlKey}+Shift+L)`}
+              >
+                <i className="mdi mdi-lock" />
+              </button>
+            ) : null}
             {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
               <button
                 type="button"
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b4e6e08a1..0152857a6 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -30,6 +30,14 @@ const messages = defineMessages({
     id: 'settings.app.todoServerInfo',
     defaultMessage: '!!!This server will be used for the "Franz Todo" feature. The default server will only work for premium users. (default: https://app.franztodos.com)',
   },
+  lockedPassword: {
+    id: 'settings.app.lockedPassword',
+    defaultMessage: '!!!Ferdi Lock Password',
+  },
+  lockedPasswordInfo: {
+    id: 'settings.app.lockedPasswordInfo',
+    defaultMessage: '!!!Please make sure to set a password you\'ll remember.\nIf you loose this password, you will have to reinstall Ferdi.',
+  },
   headlineLanguage: {
     id: 'settings.app.headlineLanguage',
     defaultMessage: '!!!Language',
@@ -159,6 +167,7 @@ export default @observer class EditSettingsForm extends Component {
     }
 
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+    const lockingFeatureEnabled = window.ferdi.stores.settings.all.app.lockingFeatureEnabled;
 
     return (
       <div className="settings__main">
@@ -205,6 +214,7 @@ export default @observer class EditSettingsForm extends Component {
                   Please still consider
                   {' '}
                   <a href="https://www.meetfranz.com/pricing" target="_blank">paying for a Franz account</a>
+                  {' '}
                   or
                   {' '}
                   <a href="https://github.com/vantezzen/ferdi-server" target="_blank">using a self-hosted ferdi-server</a>
@@ -225,12 +235,42 @@ export default @observer class EditSettingsForm extends Component {
                   placeholder="Todo Server"
                   onChange={e => this.submit(e)}
                   field={form.$('todoServer')}
-                  autoFocus
                 />
                 <p>{ intl.formatMessage(messages.todoServerInfo) }</p>
               </>
             )}
 
+            <Toggle field={form.$('lockingFeatureEnabled')} />
+            {lockingFeatureEnabled && (
+              <>
+                <Input
+                  placeholder={intl.formatMessage(messages.lockedPassword)}
+                  onChange={e => this.submit(e)}
+                  field={form.$('lockedPassword')}
+                  type="password"
+                />
+                <p>
+                  { intl.formatMessage(messages.lockedPasswordInfo) }
+                </p>
+              </>
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                  Ferdi password lock allows you to keep your messages protected.
+                <br />
+                  Using Ferdi password lock, you will be prompted to enter your password everytime you
+                  start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut
+                {' '}
+                <code>CMD/CTRL+Shift+L</code>
+              </span>
+            </p>
+
+
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />