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>
2021-10-08 21:48:31 +05:30
parent 7b6c99d188
commit f1122f292e
51 changed files with 1566 additions and 407 deletions
--- a/app/assets/javascripts/components/InputWithIcon.tsx
+++ b/app/assets/javascripts/components/InputWithIcon.tsx
@@ -0,0 +1,89 @@
+import { FunctionComponent, Ref } from 'preact';
+import { JSXInternal } from 'preact/src/jsx';
+import { forwardRef } from 'preact/compat';
+import { Icon, IconType } from './Icon';
+import { IconButton } from './IconButton';
+
+type ToggleProps = {
+  toggleOnIcon: IconType;
+  toggleOffIcon: IconType;
+  title: string;
+  toggled: boolean;
+  onClick: (toggled: boolean) => void;
+};
+
+type Props = {
+  icon: IconType;
+  inputType: 'text' | 'email' | 'password';
+  className?: string;
+  iconClassName?: string;
+  value: string | undefined;
+  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>;
+  onFocus?: JSXInternal.GenericEventHandler<HTMLInputElement>;
+  onKeyDown?: JSXInternal.KeyboardEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+  placeholder: string;
+  toggle?: ToggleProps;
+};
+
+const DISABLED_CLASSNAME = 'bg-grey-5 cursor-not-allowed';
+
+export const InputWithIcon: FunctionComponent<Props> = forwardRef(
+  (
+    {
+      icon,
+      inputType,
+      className,
+      iconClassName,
+      value,
+      onChange,
+      onFocus,
+      onKeyDown,
+      disabled,
+      toggle,
+      placeholder,
+    },
+    ref: Ref<HTMLInputElement>
+  ) => {
+    const handleToggle = () => {
+      if (toggle) toggle.onClick(!toggle?.toggled);
+    };
+
+    return (
+      <div
+        className={`flex items-stretch position-relative bg-default border-1 border-solid border-neutral rounded focus-within:ring-info overflow-hidden ${
+          disabled ? DISABLED_CLASSNAME : ''
+        } ${className}`}
+      >
+        <div className="flex px-2 py-1.5">
+          <Icon type={icon} className={`color-grey-1 ${iconClassName}`} />
+        </div>
+        <input
+          type={inputType}
+          onFocus={onFocus}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          value={value}
+          className={`pr-2 w-full border-0 focus:shadow-none ${
+            disabled ? DISABLED_CLASSNAME : ''
+          }`}
+          disabled={disabled}
+          placeholder={placeholder}
+          ref={ref}
+        />
+        {toggle ? (
+          <div className="flex items-center justify-center px-2">
+            <IconButton
+              className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
+              icon={toggle.toggled ? toggle.toggleOnIcon : toggle.toggleOffIcon}
+              iconClassName="sn-icon--small"
+              title={toggle.title}
+              onClick={handleToggle}
+              focusable={true}
+            />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+);