Cherry-pick "Update account creation flow (#2695)" (#2728)

Co-authored-by: Kat Hagan <[email protected]>
Co-authored-by: Dennis Snell <[email protected]>
Co-authored-by: Jonathan Belcher <[email protected]>

RELEASE-NOTES.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [v2.7.1]
+
+### Enhancements
+
+- Updated new account signup flow [#2695](https://github.com/Automattic/simplenote-electron/pull/2695)
+
 ## [v2.7.0]
 
 ### Enhancements

desktop/app.js

@@ -32,7 +32,11 @@ module.exports = function main() {
     setTimeout(updater.ping.bind(updater), config.updater.delay);
     app.on('open-url', function (event, url) {
       event.preventDefault();
-      mainWindow.webContents.send('wpLogin', url);
+      if (url.startsWith('simplenote://auth')) {
+        mainWindow.webContents.send('wpLogin', url);
+      } else if (url.startsWith('simplenote://login')) {
+        mainWindow.webContents.send('tokenLogin', url);
+      }
     });
   });
 
@@ -211,7 +215,11 @@ module.exports = function main() {
     // Protocol handler for platforms other than macOS
     // argv: An array of the second instance’s (command line / deep linked) arguments
     // The last index of argv is the full deeplink url (simplenote://SOME_URL)
-    mainWindow.webContents.send('wpLogin', argv[argv.length - 1]);
+    if (argv[argv.length - 1].startsWith('simplenote://auth')) {
+      mainWindow.webContents.send('wpLogin', argv[argv.length - 1]);
+    } else if (argv[argv.length - 1].startsWith('simplenote://login')) {
+      mainWindow.webContents.send('tokenLogin', argv[argv.length - 1]);
+    }
   });
 
   if (!gotTheLock) {

desktop/preload.js

@@ -10,6 +10,7 @@ const validChannels = [
   'noteImportChannel',
   'reallyCloseWindow',
   'setAutoHideMenuBar',
+  'tokenLogin',
   'wpLogin',
 ];
 

lib/alternate-login-prompt/index.tsx

@@ -0,0 +1,103 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+import Modal from 'react-modal';
+import { connect } from 'react-redux';
+
+import CrossIcon from '../icons/cross';
+import WarningIcon from '../icons/warning';
+
+import actions from '../state/actions';
+
+import * as selectors from '../state/selectors';
+import * as S from '../state';
+
+type StateProps = {
+  alternateLoginEmail: string | null;
+  email: string | null;
+  theme: 'light' | 'dark';
+};
+
+type DispatchProps = {
+  logout: () => any;
+  dismiss: () => any;
+};
+
+type Props = StateProps & DispatchProps;
+
+const AlternateLoginPrompt: FunctionComponent<Props> = ({
+  alternateLoginEmail,
+  dismiss,
+  email,
+  logout,
+  theme,
+}) => {
+  const displayClose = (
+    <div className="alternate-login__dismiss">
+      <button
+        className="icon-button"
+        aria-label="Close dialog"
+        onClick={dismiss}
+      >
+        <CrossIcon />
+      </button>
+    </div>
+  );
+
+  const displayAlternateLoginPrompt = (
+    <>
+      {displayClose}
+      <span className="theme-color-fg-dim">
+        <WarningIcon />
+      </span>
+      <h2>Logout?</h2>
+      <p>You are already logged in as:</p>
+      <p className="alternate-login__email">
+        <strong>{email}</strong>
+      </p>
+      <p>You tried logging in with:</p>
+      <p className="alternate-login__email">
+        <strong>{alternateLoginEmail}</strong>
+      </p>
+      <p>Would you like to log out?</p>
+
+      <div className="alternate-login__button-row button-borderless">
+        <a target="_blank" rel="noreferrer" onClick={dismiss}>
+          <button className="button button-borderless">Cancel</button>
+        </a>
+        <a target="_blank" rel="noreferrer" onClick={logout}>
+          <button className="button button-primary">Logout</button>
+        </a>
+      </div>
+    </>
+  );
+
+  return (
+    <Modal
+      key="alternate-login"
+      className="alternate-login__modal theme-color-fg theme-color-bg"
+      isOpen
+      onRequestClose={dismiss}
+      contentLabel="Log out?"
+      overlayClassName="alternate-login__overlay"
+      portalClassName={classNames('alternate-login__portal', 'theme-' + theme)}
+    >
+      {displayAlternateLoginPrompt}
+    </Modal>
+  );
+};
+
+const mapDispatchToProps: S.MapDispatch<DispatchProps> = {
+  dismiss: () => actions.ui.showAlternateLoginPrompt(false),
+  logout: actions.ui.logout,
+};
+
+const mapStateToProps: S.MapState<StateProps> = (state) => ({
+  alternateLoginEmail: state.ui.alternateLoginEmail,
+  email: state.settings.accountName,
+  theme: selectors.getTheme(state),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AlternateLoginPrompt);

lib/alternate-login-prompt/style.scss

@@ -0,0 +1,81 @@
+.alternate-login__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba($studio-gray-20, 0.75);
+}
+
+.alternate-login__dismiss {
+  display: flex;
+  height: 60px;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 0 16px;
+  width: 100%;
+
+  svg {
+    height: 16px;
+    width: 16px;
+    margin: auto 0;
+  }
+}
+
+.alternate-login__email {
+  word-break: break-all;
+}
+
+.alternate-login__modal {
+  align-items: center;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 20%;
+  max-width: 420px;
+  padding: 0 24px 16px;
+  font-size: 16px;
+
+  p {
+    margin: 0 26px;
+    margin-block-start: 0;
+  }
+
+  p:not(:last-of-type) {
+    padding-bottom: 20px;
+  }
+
+  .alternate-login__button-row {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    width: 100%;
+
+    a {
+      padding-right: 12px;
+    }
+    .button-borderless {
+      color: $studio-simplenote-blue-50;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.theme-dark {
+  .alternate-login__overlay {
+    background: rgba($studio-gray-100, 0.75);
+  }
+  .alternate-login__button-row .button-borderless {
+    color: $studio-simplenote-blue-30;
+  }
+}

lib/app.tsx

@@ -7,6 +7,7 @@ import AppLayout from './app-layout';
 import DevBadge from './components/dev-badge';
 import DialogRenderer from './dialog-renderer';
 import EmailVerification from './email-verification';
+import AlternateLoginPrompt from './alternate-login-prompt';
 import { isElectron, isMac } from './utils/platform';
 import classNames from 'classnames';
 import {
@@ -34,6 +35,7 @@ type StateProps = {
   isSmallScreen: boolean;
   lineLength: T.LineLength;
   isSearchActive: boolean;
+  showAlternateLoginPrompt: boolean;
   showEmailVerification: boolean;
   showNavigation: boolean;
   showNoteInfo: boolean;
@@ -162,6 +164,7 @@ class AppComponent extends Component<Props> {
     const {
       isDevConfig,
       lineLength,
+      showAlternateLoginPrompt,
       showEmailVerification,
       showNavigation,
       showNoteInfo,
@@ -183,6 +186,7 @@ class AppComponent extends Component<Props> {
     return (
       <div className={appClasses}>
         {showEmailVerification && <EmailVerification />}
+        {showAlternateLoginPrompt && <AlternateLoginPrompt />}
         {isDevConfig && <DevBadge />}
         <div className={mainClasses}>
           {showNavigation && <NavigationBar />}
@@ -201,6 +205,7 @@ const mapStateToProps: S.MapState<StateProps> = (state) => ({
   isSearchActive: !!state.ui.searchQuery.length,
   isSmallScreen: selectors.isSmallScreen(state),
   lineLength: state.settings.lineLength,
+  showAlternateLoginPrompt: state.ui.showAlternateLoginPrompt,
   showEmailVerification: selectors.shouldShowEmailVerification(state),
   showNavigation: state.ui.showNavigation,
   showNoteInfo: state.ui.showNoteInfo,