Add support for unlocking with Touch ID (#423)

* Enhance installation guide in README

* Add TouchID unlock for Ferdi Lock

* Remove commit 8861014 as it is not related to this feature

This reverts commit 88610144b942739772286ec3073b328e829a8b39.

* Rename TouchID to "Touch ID"

* Improve Touch ID prompt text

* Improve unlocking with Touch ID

* Fix lint

* Add separator after lock-related menu entry

Co-authored-by: Amine <amine@mouafik.fr>

1 files changed, 46 insertions, 2 deletions

diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index e7f3dc78b..6142e78c6 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -1,3 +1,4 @@
+import { remote } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
@@ -10,6 +11,10 @@ import Infobox from '../ui/Infobox';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
+const {
+  systemPreferences,
+} = remote;
+
 const messages = defineMessages({
   headline: {
     id: 'locked.headline',
@@ -19,6 +24,14 @@ const messages = defineMessages({
     id: 'locked.info',
     defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
   },
+  touchId: {
+    id: 'locked.touchId',
+    defaultMessage: '!!!Unlock with Touch ID',
+  },
+  touchIdPrompt: {
+    id: 'locked.touchIdPrompt',
+    defaultMessage: '!!!unlock via Touch ID',
+  },
   passwordLabel: {
     id: 'locked.password.label',
     defaultMessage: '!!!Password',
@@ -27,6 +40,10 @@ const messages = defineMessages({
     id: 'locked.submit.label',
     defaultMessage: '!!!Unlock',
   },
+  unlockWithPassword: {
+    id: 'locked.unlockWithPassword',
+    defaultMessage: '!!!Unlock with Password',
+  },
   invalidCredentials: {
     id: 'locked.invalidCredentials',
     defaultMessage: '!!!Password invalid',
@@ -36,7 +53,9 @@ const messages = defineMessages({
 export default @observer class Locked extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
+    unlock: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
+    useTouchIdToUnlock: PropTypes.bool.isRequired,
     error: globalErrorPropType.isRequired,
   };
 
@@ -64,14 +83,26 @@ export default @observer class Locked extends Component {
     });
   }
 
+  touchIdUnlock() {
+    const { intl } = this.context;
+
+    systemPreferences.promptTouchID(intl.formatMessage(messages.touchIdPrompt)).then(() => {
+      this.props.unlock();
+    });
+  }
+
   render() {
     const { form } = this;
     const { intl } = this.context;
     const {
       isSubmitting,
       error,
+      useTouchIdToUnlock,
     } = this.props;
 
+    const touchIdEnabled = useTouchIdToUnlock && systemPreferences.canPromptTouchID();
+    const submitButtonLabel = touchIdEnabled ? intl.formatMessage(messages.unlockWithPassword) : intl.formatMessage(messages.submitButtonLabel);
+
     return (
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
@@ -84,6 +115,19 @@ export default @observer class Locked extends Component {
           <Infobox type="warning">
             {intl.formatMessage(messages.info)}
           </Infobox>
+
+          {touchIdEnabled && (
+            <>
+              <Button
+                className="auth__button touchid__button"
+                label={intl.formatMessage(messages.touchId)}
+                onClick={() => this.touchIdUnlock()}
+                type="button"
+              />
+              <hr className="locked__or_line" />
+            </>
+          )}
+
           <Input
             field={form.$('password')}
             showPasswordToggle
@@ -96,7 +140,7 @@ export default @observer class Locked extends Component {
             <Button
               className="auth__button is-loading"
               buttonType="secondary"
-              label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+              label={`${submitButtonLabel} ...`}
               loaded={false}
               disabled
             />
@@ -104,7 +148,7 @@ export default @observer class Locked extends Component {
             <Button
               type="submit"
               className="auth__button"
-              label={intl.formatMessage(messages.submitButtonLabel)}
+              label={submitButtonLabel}
             />
           )}
         </form>