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/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>
 );