feat: New account menu and text input with icon & toggle (#665)

* feat: Add new icons

* Revert "feat: Add new icons"

This reverts commit 0acb403fe846dbb2e48fd22de35c3568c3cb4453.

* feat: Add new icons for account menu

* feat: Add new Icons

* feat: Add "currentPane" state to prefs view

* feat: Update account menu to new design

* feat: Add input component with icon & toggle

* fix: sync icon & function

* fix: Fix eye icon

* feat: Create re-usable checkbox

feat: Add "merge local" option

* feat: Allow using className on IconButton

* feat: Add disabled state on input

feat: Make toggle circle

* refactor: Move checkbox to components

* feat: Handle invalid email/password error

* feat: Implement new design for Create Account

* feat: Implement new account menu design

* feat: Add disabled option to IconButton

* feat: Set account menu pane from other component

* feat: Add 2fa account menu pane

feat: Add lock icon

* feat: Remove unnecessary 2FA menu pane

feat: Reset current menu pane on clickOutside

* feat: Change "Log in" to "Sign in"

* feat: Remove sync from footer

* feat: Change "Login" to "Sign in"

feat: Add spinner to "Syncing..."

refactor: Use then-catch-finally for sync

* feat: Use common enableCustomServer state

* feat: Animate account menu closing

* fix: Reset menu pane only after it's closed

* feat: Add keyDown handler to InputWithIcon

* feat: Handle Enter press in inputs

* Update app/assets/javascripts/components/InputWithIcon.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* Update app/assets/javascripts/components/InputWithIcon.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* refactor: Use server state from AccountMenuState

* Update app/assets/javascripts/components/AccountMenu/CreateAccount.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* Update app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

* feat: Use common AdvancedOptions

* feat: Add "eye-off" icon and toggle state

* feat: Allow undefined values

* refactor: Remove enableCustomServer state

* feat: Persist server option state

* feat: Add bottom-100 and cursor-auto util classes

refactor: Use bottom-100 and cursor-auto classes

* refactor: Invert ternary operator

* refactor: Remove unused imports

* refactor: Use toggled as prop instead of state

* refactor: Change "Log in/out" to "Sign in/out"

* refactor: Change "Login" to "Sign in"

* refactor: Remove hardcoded width/height

* refactor: Use success class

* feat: Remove hardcoded width & height from svg

* fix: Fix chevron-down icon

Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>
Co-authored-by: Antonella Sgarlatta <antonella@standardnotes.org>

app/assets/javascripts/preferences/panes/account/changePassword/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';
@@ -15,29 +15,31 @@ import { useBeforeUnload } from '@/hooks/useBeforeUnload';
 enum SubmitButtonTitles {
   Default = 'Continue',
   GeneratingKeys = 'Generating Keys...',
-  Finish = 'Finish'
+  Finish = 'Finish',
 }
 
 enum Steps {
   InitialStep,
-  FinishStep
+  FinishStep,
 }
 
 type Props = {
   onCloseDialog: () => void;
   application: WebApplication;
-}
+};
 
 export const ChangePassword: FunctionalComponent<Props> = ({
   onCloseDialog,
-  application
+  application,
 }) => {
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [newPasswordConfirmation, setNewPasswordConfirmation] = 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,16 +48,12 @@ export const ChangePassword: 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;
     }
 
     if (!newPassword || newPassword.length === 0) {
-      applicationAlertService.alert(
-        'Please enter a new password.'
-      );
+      applicationAlertService.alert('Please enter a new password.');
       return false;
     }
     if (newPassword !== newPasswordConfirmation) {
@@ -67,7 +65,7 @@ export const ChangePassword: FunctionalComponent<Props> = ({
 
     if (!application.getUser()?.email) {
       applicationAlertService.alert(
-        'We don\'t have your email stored. Please log out then log back in to fix this issue.'
+        "We don't have your email stored. Please sign out then sign back in to fix this issue."
       );
       return false;
     }
@@ -172,15 +170,15 @@ export const ChangePassword: 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}
           />