feat-preferences: data backup export and import (#646)

* feat: data backups initial implementation

* feat: improve data backups design in preferences

* feat: split import backup in multiple segments

* feat(preferences): move import backup spinner next to import button

* fix(data-backups): padding between radio btn and buttons

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

@@ -2,7 +2,7 @@ import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
-import { Encryption, PasscodeLock, Protections } from './security-segments';
+import { Encryption, PasscodeLock, Protections, DataBackups } from './security-segments';
 import { TwoFactorAuthWrapper } from './two-factor-auth';
 import { MfaProps } from './two-factor-auth/MfaProps';
 
@@ -20,5 +20,6 @@ export const Security: FunctionComponent<SecurityProps> = (props) => (
       userProvider={props.userProvider}
     />
     <PasscodeLock appState={props.appState} application={props.application} />
+    <DataBackups application={props.application} appState={props.appState} />
   </PreferencesPane>
 );