From d14071f3503f768c9c0e040dee549be6a6b40e5f Mon Sep 17 00:00:00 2001 From: vantezzen Date: Tue, 17 Sep 2019 12:14:48 +0200 Subject: Implement #41 --- src/app.js | 2 + src/components/auth/Locked.js | 115 ++++++ src/components/layout/Sidebar.js | 27 +- .../settings/settings/EditSettingsForm.js | 42 ++- src/config.js | 5 + src/containers/auth/LockedScreen.js | 72 ++++ src/containers/settings/EditSettingsScreen.js | 25 +- src/i18n/locales/defaultMessages.json | 400 ++++++++++++++------- src/i18n/locales/en-US.json | 11 + src/i18n/messages/src/components/auth/Locked.json | 67 ++++ .../messages/src/components/layout/Sidebar.json | 13 + .../settings/settings/EditSettingsForm.json | 90 +++-- .../containers/settings/EditSettingsScreen.json | 62 +++- src/i18n/messages/src/lib/Menu.json | 165 +++++---- src/lib/Menu.js | 19 + src/stores/SettingsStore.js | 28 ++ 16 files changed, 887 insertions(+), 256 deletions(-) create mode 100644 src/components/auth/Locked.js create mode 100644 src/containers/auth/LockedScreen.js create mode 100644 src/i18n/messages/src/components/auth/Locked.json (limited to 'src') diff --git a/src/app.js b/src/app.js index 797c178a3..e16c01456 100644 --- a/src/app.js +++ b/src/app.js @@ -32,6 +32,7 @@ import EditSettingsScreen from './containers/settings/EditSettingsScreen'; import InviteSettingsScreen from './containers/settings/InviteScreen'; import WelcomeScreen from './containers/auth/WelcomeScreen'; import LoginScreen from './containers/auth/LoginScreen'; +import LockedScreen from './containers/auth/LockedScreen'; import PasswordScreen from './containers/auth/PasswordScreen'; import SignupScreen from './containers/auth/SignupScreen'; import ImportScreen from './containers/auth/ImportScreen'; @@ -94,6 +95,7 @@ window.addEventListener('load', () => { + 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 ( +
+
this.submit(e)}> + +

{intl.formatMessage(messages.headline)}

+ + {intl.formatMessage(messages.info)} + + + {error.code === 'invalid-credentials' && ( +

{intl.formatMessage(messages.invalidCredentials)}

+ )} + {isSubmitting ? ( +
+ ); + } +} 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 ? ( + + ) : null} {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (