feat: passcode lock in preferences (#644)

* feat: implement existing passcode lock in prefs

* chore: cleanup commented code and unused imports

* feat: improve design for passcode lock

* fix: propert folder naming

* feat: passcode lock form buttons margin

app/assets/javascripts/components/Button.tsx

@@ -1,3 +1,7 @@
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
+
 import { FunctionComponent } from 'preact';
 
 const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
@@ -14,7 +18,7 @@ export const Button: FunctionComponent<{
   className?: string;
   type: ButtonType;
   label: string;
-  onClick: () => void;
+  onClick: (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
 }> = ({ type, label, className = '', onClick, disabled = false }) => {
   const buttonClass = buttonClasses[type];
@@ -24,7 +28,7 @@ export const Button: FunctionComponent<{
     <button
       className={`${buttonClass} ${cursorClass} ${className}`}
       onClick={(e) => {
-        onClick();
+        onClick(e);
         e.preventDefault();
       }}
       disabled={disabled}

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -36,6 +36,7 @@ const PaneSelector: FunctionComponent<
           mfaProvider={props.mfaProvider}
           userProvider={props.userProvider}
           appState={props.appState}
+          application={props.application}
         />
       );
     case 'listed':

app/assets/javascripts/preferences/panes/Security.tsx

@@ -1,12 +1,14 @@
+import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
-import { Encryption } from './Encryption';
+import { Encryption, PasscodeLock } from './security-segments';
 import { TwoFactorAuthWrapper } from './two-factor-auth';
 import { MfaProps } from './two-factor-auth/MfaProps';
 
 interface SecurityProps extends MfaProps {
   appState: AppState;
+  application: WebApplication;
 }
 
 export const Security: FunctionComponent<SecurityProps> = (props) => (
@@ -16,5 +18,6 @@ export const Security: FunctionComponent<SecurityProps> = (props) => (
       mfaProvider={props.mfaProvider}
       userProvider={props.userProvider}
     />
+    <PasscodeLock appState={props.appState} application={props.application} />
   </PreferencesPane>
 );

app/assets/javascripts/preferences/panes/account/LogOutView.tsx

@@ -71,7 +71,7 @@ const ClearSessionDataView: FunctionComponent<{
     <>
       <PreferencesGroup>
         <PreferencesSegment>
-          <Title>Clear Session Data</Title>
+          <Title>Clear session data</Title>
           <div className="min-h-2" />
           <Text>This will delete all local items and preferences.</Text>
           <div className="min-h-3" />

app/assets/javascripts/preferences/panes/security-segments/Encryption.tsx

@@ -4,7 +4,7 @@ import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED }
 import { AppState } from "@/ui_models/app_state";
 import { observer } from "mobx-react-lite";
 import { FunctionComponent } from "preact";
-import { PreferencesGroup, PreferencesSegment, Text, Title } from "../components";
+import { PreferencesGroup, PreferencesSegment, Text, Title } from "../../components";
 
 const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}`;
 

app/assets/javascripts/preferences/panes/security-segments/PasscodeLock.tsx

@@ -0,0 +1,274 @@
+import {
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
+  STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED,
+  STRING_NON_MATCHING_PASSCODES,
+  StringUtils,
+  Strings
+} from '@/strings';
+import { WebApplication } from '@/ui_models/application';
+import { preventRefreshing } from '@/utils';
+import { JSXInternal } from 'preact/src/jsx';
+import TargetedEvent = JSXInternal.TargetedEvent;
+import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
+import { alertDialog } from '@Services/alertService';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { ApplicationEvent } from '@standardnotes/snjs';
+import { observer } from 'mobx-react-lite';
+import { AppState } from '@/ui_models/app_state';
+import { PreferencesSegment, Title, Text, PreferencesGroup } from '@/preferences/components';
+import { Button } from '@/components/Button';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+};
+
+export const PasscodeLock = observer(({
+  application,
+  appState,
+}: Props) => {
+  const keyStorageInfo = StringUtils.keyStorageInfo(application);
+  const passcodeAutoLockOptions = application.getAutolockService().getAutoLockIntervalOptions();
+
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
+
+  const passcodeInputRef = useRef<HTMLInputElement>();
+
+  const [passcode, setPasscode] = useState<string | undefined>(undefined);
+  const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
+  const [selectedAutoLockInterval, setSelectedAutoLockInterval] = useState<unknown>(null);
+  const [isPasscodeFocused, setIsPasscodeFocused] = useState(false);
+  const [showPasscodeForm, setShowPasscodeForm] = useState(false);
+  const [canAddPasscode, setCanAddPasscode] = useState(!application.isEphemeralSession());
+  const [hasPasscode, setHasPasscode] = useState(application.hasPasscode());
+
+  const handleAddPassCode = () => {
+    setShowPasscodeForm(true);
+    setIsPasscodeFocused(true);
+  };
+
+  const changePasscodePressed = () => {
+    handleAddPassCode();
+  };
+
+  const reloadAutoLockInterval = useCallback(async () => {
+    const interval = await application.getAutolockService().getAutoLockInterval();
+    setSelectedAutoLockInterval(interval);
+  }, [application]);
+
+  const refreshEncryptionStatus = useCallback(() => {
+    const hasUser = application.hasAccount();
+    const hasPasscode = application.hasPasscode();
+
+    setHasPasscode(hasPasscode);
+
+    const encryptionEnabled = hasUser || hasPasscode;
+
+    const encryptionStatusString = hasUser
+      ? STRING_E2E_ENABLED
+      : hasPasscode
+        ? STRING_LOCAL_ENC_ENABLED
+        : STRING_ENC_NOT_ENABLED;
+
+    setEncryptionStatusString(encryptionStatusString);
+    setIsEncryptionEnabled(encryptionEnabled);
+    setIsBackupEncrypted(encryptionEnabled);
+  }, [application, setEncryptionStatusString, setIsBackupEncrypted, setIsEncryptionEnabled]);
+
+  const selectAutoLockInterval = async (interval: number) => {
+    if (!(await application.authorizeAutolockIntervalChange())) {
+      return;
+    }
+    await application.getAutolockService().setAutoLockInterval(interval);
+    reloadAutoLockInterval();
+  };
+
+  const removePasscodePressed = async () => {
+    await preventRefreshing(
+      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL,
+      async () => {
+        if (await application.removePasscode()) {
+          await application
+            .getAutolockService()
+            .deleteAutolockPreference();
+          await reloadAutoLockInterval();
+          refreshEncryptionStatus();
+        }
+      }
+    );
+  };
+
+  const handlePasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasscode(value);
+  };
+
+  const handleConfirmPasscodeChange = (event: TargetedEvent<HTMLInputElement>) => {
+    const { value } = event.target as HTMLInputElement;
+    setPasscodeConfirmation(value);
+  };
+
+  const submitPasscodeForm = async (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (!passcode || passcode.length === 0) {
+      await alertDialog({
+        text: Strings.enterPasscode,
+      });
+    }
+
+    if (passcode !== passcodeConfirmation) {
+      await alertDialog({
+        text: STRING_NON_MATCHING_PASSCODES
+      });
+      setIsPasscodeFocused(true);
+      return;
+    }
+
+    await preventRefreshing(
+      STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
+      async () => {
+        const successful = application.hasPasscode()
+          ? await application.changePasscode(passcode as string)
+          : await application.addPasscode(passcode as string);
+
+        if (!successful) {
+          setIsPasscodeFocused(true);
+        }
+      }
+    );
+
+    setPasscode(undefined);
+    setPasscodeConfirmation(undefined);
+    setShowPasscodeForm(false);
+
+    refreshEncryptionStatus();
+  };
+
+  useEffect(() => {
+    refreshEncryptionStatus();
+  }, [refreshEncryptionStatus]);
+
+  // `reloadAutoLockInterval` gets interval asynchronously, therefore we call `useEffect` to set initial
+  // value of `selectedAutoLockInterval`
+  useEffect(() => {
+    reloadAutoLockInterval();
+  }, [reloadAutoLockInterval]);
+
+  useEffect(() => {
+    if (isPasscodeFocused) {
+      passcodeInputRef.current.focus();
+      setIsPasscodeFocused(false);
+    }
+  }, [isPasscodeFocused]);
+
+  // Add the required event observers
+  useEffect(() => {
+    const removeKeyStatusChangedObserver = application.addEventObserver(
+      async () => {
+        setCanAddPasscode(!application.isEphemeralSession());
+        setHasPasscode(application.hasPasscode());
+        setShowPasscodeForm(false);
+      },
+      ApplicationEvent.KeyStatusChanged
+    );
+
+    return () => {
+      removeKeyStatusChangedObserver();
+    };
+  }, [application]);
+
+  return (
+    <>
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Passcode Lock</Title>
+
+          {!hasPasscode && canAddPasscode && (
+            <>
+
+              <Text className="mb-3">
+                Add a passcode to lock the application and
+                encrypt on-device key storage.
+              </Text>
+
+              {keyStorageInfo && (
+                <Text className="mb-3">{keyStorageInfo}</Text>
+              )}
+
+              {!showPasscodeForm && (
+                <Button label="Add Passcode" onClick={handleAddPassCode} type="primary" />
+              )}
+
+            </>
+          )}
+
+          {!hasPasscode && !canAddPasscode && (
+            <Text>
+              Adding a passcode is not supported in temporary sessions. Please sign
+              out, then sign back in with the "Stay signed in" option checked.
+            </Text>
+          )}
+
+          {showPasscodeForm && (
+            <form className="sk-panel-form" onSubmit={submitPasscodeForm}>
+              <div className="sk-panel-row" />
+              <input
+                className="sk-input contrast"
+                type="password"
+                ref={passcodeInputRef}
+                value={passcode}
+                onChange={handlePasscodeChange}
+                placeholder="Passcode"
+              />
+              <input
+                className="sk-input contrast"
+                type="password"
+                value={passcodeConfirmation}
+                onChange={handleConfirmPasscodeChange}
+                placeholder="Confirm Passcode"
+              />
+              <div className="min-h-2" />
+              <Button type="primary" onClick={submitPasscodeForm} label="Set Passcode" className="mr-3" />
+              <Button type="normal" onClick={() => setShowPasscodeForm(false)} label="Cancel" />
+            </form>
+          )}
+
+          {hasPasscode && !showPasscodeForm && (
+            <>
+              <Text>Passcode lock is enabled.</Text>
+              <div className="flex flex-row mt-3">
+                <Button type="normal" label="Change Passcode" onClick={changePasscodePressed} className="mr-3" />
+                <Button type="danger" label="Remove Passcode" onClick={removePasscodePressed} />
+              </div>
+            </>)}
+
+        </PreferencesSegment>
+      </PreferencesGroup>
+
+      {hasPasscode && (
+        <>
+          <div className="min-h-3" />
+          <PreferencesGroup>
+            <PreferencesSegment>
+              <Title>Autolock</Title>
+              <Text className="mb-3">The autolock timer begins when the window or tab loses focus.</Text>
+              <div className="flex flex-row items-center">
+                {passcodeAutoLockOptions.map(option => {
+                  return (
+                    <a
+                      className={`sk-a info mr-3 ${option.value === selectedAutoLockInterval ? 'boxed' : ''}`}
+                      onClick={() => selectAutoLockInterval(option.value)}>
+                      {option.label}
+                    </a>
+                  );
+                })}
+              </div>
+
+            </PreferencesSegment>
+          </PreferencesGroup>
+        </>
+      )}
+    </>
+  );
+});

app/assets/javascripts/preferences/panes/security-segments/index.ts

@@ -0,0 +1,2 @@
+export * from './Encryption';
+export * from './PasscodeLock';

app/assets/stylesheets/_sn.scss

@@ -214,6 +214,10 @@
   min-height: 0.75rem;
 }
 
+.min-h-4 {
+  min-height: 1rem;
+}
+
 .min-h-6 {
   min-height: 1.5rem;
 }