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/OtherSessionsSignOut.tsx
+++ b/app/assets/javascripts/components/OtherSessionsSignOut.tsx
@@ -0,0 +1,80 @@
+import { useRef, useState } from 'preact/hooks';
+import {
+  AlertDialog,
+  AlertDialogDescription,
+  AlertDialogLabel,
+} from '@reach/alert-dialog';
+import { WebApplication } from '@/ui_models/application';
+import { AppState } from '@/ui_models/app_state';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+};
+
+export const OtherSessionsSignOutContainer = observer((props: Props) => {
+  if (!props.appState.accountMenu.otherSessionsSignOut) {
+    return null;
+  }
+  return <ConfirmOtherSessionsSignOut {...props} />;
+});
+
+const ConfirmOtherSessionsSignOut = observer(
+  ({ application, appState }: Props) => {
+    const cancelRef = useRef<HTMLButtonElement>();
+    function closeDialog() {
+      appState.accountMenu.setOtherSessionsSignOut(false);
+    }
+
+    return (
+      <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef}>
+        <div className="sk-modal-content">
+          <div className="sn-component">
+            <div className="sk-panel">
+              <div className="sk-panel-content">
+                <div className="sk-panel-section">
+                  <AlertDialogLabel className="sk-h3 sk-panel-section-title capitalize">
+                    End all other sessions?
+                  </AlertDialogLabel>
+                  <AlertDialogDescription className="sk-panel-row">
+                    <p className="color-foreground">
+                      This action will sign out all other devices signed into
+                      your account, and remove your data from those devices when
+                      they next regain connection to the internet. You may sign
+                      back in on those devices at any time.
+                    </p>
+                  </AlertDialogDescription>
+                  <div className="flex my-1 mt-4">
+                    <button
+                      className="sn-button small neutral"
+                      ref={cancelRef}
+                      onClick={closeDialog}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      className="sn-button small danger ml-2"
+                      onClick={() => {
+                        application.revokeAllOtherSessions();
+                        closeDialog();
+                        application.alertService.alert(
+                          'You have successfully revoked your sessions from other devices.',
+                          undefined,
+                          'Finish'
+                        );
+                      }}
+                    >
+                      End Sessions
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AlertDialog>
+    );
+  }
+);