feat: improve 2fa styles based on feedback (#635)

* feat: improve 2fa styles based on feedback

* fix: preferences panes and dialogs electron compatibility

* fix: no horizontal line when opening two factor activation

* feat: improve two factor activation styles

* feat: further 2fa style improvements

* feat: padding 2fa widgets

* feat: add padding between QR code and content

* feat: refresh 2fa after passcode confirmation

* feat: don't autocomplete passwords for DecoratedInput

app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx

@@ -3,7 +3,7 @@ import {
   ModalDialog,
   ModalDialogButtons,
   ModalDialogDescription,
-  ModalDialogLabel
+  ModalDialogLabel,
 } from '@/components/shared/ModalDialog';
 import { Button } from '@/components/Button';
 import { FunctionalComponent } from 'preact';
@@ -16,28 +16,30 @@ import { isEmailValid } from '@/utils';
 enum SubmitButtonTitles {
   Default = 'Continue',
   GeneratingKeys = 'Generating Keys...',
-  Finish = 'Finish'
+  Finish = 'Finish',
 }
 
 enum Steps {
   InitialStep,
-  FinishStep
+  FinishStep,
 }
 
 type Props = {
   onCloseDialog: () => void;
   application: WebApplication;
-}
+};
 
 export const ChangeEmail: FunctionalComponent<Props> = ({
   onCloseDialog,
-  application
+  application,
 }) => {
   const [currentPassword, setCurrentPassword] = useState('');
   const [newEmail, setNewEmail] = useState('');
   const [isContinuing, setIsContinuing] = useState(false);
   const [lockContinue, setLockContinue] = useState(false);
-  const [submitButtonTitle, setSubmitButtonTitle] = useState(SubmitButtonTitles.Default);
+  const [submitButtonTitle, setSubmitButtonTitle] = useState(
+    SubmitButtonTitles.Default
+  );
   const [currentStep, setCurrentStep] = useState(Steps.InitialStep);
 
   useBeforeUnload();
@@ -46,9 +48,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
 
   const validateCurrentPassword = async () => {
     if (!currentPassword || currentPassword.length === 0) {
-      applicationAlertService.alert(
-        'Please enter your current password.'
-      );
+      applicationAlertService.alert('Please enter your current password.');
 
       return false;
     }
@@ -67,7 +67,9 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
 
   const validateNewEmail = async () => {
     if (!isEmailValid(newEmail)) {
-      applicationAlertService.alert('The email you entered has an invalid format. Please review your input and try again.');
+      applicationAlertService.alert(
+        'The email you entered has an invalid format. Please review your input and try again.'
+      );
 
       return false;
     }
@@ -85,10 +87,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
 
     setLockContinue(true);
 
-    const response = await application.changeEmail(
-      newEmail,
-      currentPassword,
-    );
+    const response = await application.changeEmail(newEmail, currentPassword);
 
     const success = !response.error;
 
@@ -121,7 +120,8 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
     setIsContinuing(true);
     setSubmitButtonTitle(SubmitButtonTitles.GeneratingKeys);
 
-    const valid = await validateCurrentPassword() && await validateNewEmail();
+    const valid =
+      (await validateCurrentPassword()) && (await validateNewEmail());
 
     if (!valid) {
       resetProgressState();
@@ -169,15 +169,15 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
         <ModalDialogButtons>
           {currentStep === Steps.InitialStep && (
             <Button
-              className='min-w-20'
-              type='normal'
-              label='Cancel'
+              className="min-w-20"
+              type="normal"
+              label="Cancel"
               onClick={handleDialogClose}
             />
           )}
           <Button
-            className='min-w-20'
-            type='primary'
+            className="min-w-20"
+            type="primary"
             label={submitButtonTitle}
             onClick={handleSubmit}
           />