ui+home+connect: do not auto-create sessions

jamaljsr · jamaljsr · commit f9c686e0513f · 2022-08-23T15:10:52.000-04:00
Sessions are no longer automatically created since the pairing phrase
must be used within 10 minutes of creation. With these changes, the
session is only created when the user clicks on the connect buttons.
diff --git a/app/src/components/common/AlertContainer.tsx b/app/src/components/common/AlertContainer.tsx
@@ -48,6 +48,10 @@ const Styled = {
       color: ${props => props.theme.colors.offWhite};
       background-color: ${props => props.theme.colors.pink};
     }
+    .Toastify__toast--warning {
+      color: ${props => props.theme.colors.offWhite};
+      background-color: ${props => props.theme.colors.gold};
+    }
   `,
 };
 
diff --git a/app/src/components/common/Modal.tsx b/app/src/components/common/Modal.tsx
@@ -16,11 +16,11 @@ const GlobalStyles = (theme: Theme) => `
     color: ${theme.colors.offWhite};
     background-color: ${theme.colors.blue};
     border-width: 0px;
-    padding: 40px;
+    padding: 32px 40px;
   }
   div.rc-dialog-title {
-    font-size: ${theme.sizes.xxl};
-    line-height: 42px;
+    font-size: 32px;
+    line-height: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
diff --git a/app/src/components/connect/ConnectPage.tsx b/app/src/components/connect/ConnectPage.tsx
@@ -1,13 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
-import nodeConnectSvg from 'assets/images/lightning-node-connect.svg';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { BoltOutlined, Copy, DisplayLarge, QRCode } from 'components/base';
+import { DisplayLarge } from 'components/base';
 import AddSession from './AddSession';
-import PurpleButton from './PurpleButton';
-import QRCodeModal from './QRCodeModal';
 import SessionList from './SessionList';
 
 const Styled = {
@@ -17,65 +14,21 @@ const Styled = {
   Description: styled.div`
     margin-bottom: 32px;
   `,
-  Actions: styled.div`
-    > a,
-    > button {
-      margin-right: 16px;
-    }
-  `,
-  Divider: styled.div`
-    max-width: 640px;
-    border: 1px solid #384770;
-    margin: 32px 0;
-  `,
 };
 
 const ConnectPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.connect.ConnectPage');
-  const [showQR, setShowQR] = useState(false);
   const { sessionStore } = useStore();
 
-  const toggleQRModal = useCallback(() => setShowQR(v => !v), []);
+  useEffect(() => {
+    sessionStore.fetchSessions();
+  }, []);
 
-  const { Wrapper, Description, Actions, Divider } = Styled;
-  return !sessionStore.hasMultiple ? (
-    <Wrapper>
-      <img src={nodeConnectSvg} alt={l('pageTitle')} />
-      <DisplayLarge space={16}>{l('pageTitle')}</DisplayLarge>
-      <Description>
-        {l('description1')}
-        <br />
-        {l('description2')}
-      </Description>
-      <Actions>
-        <a href={sessionStore.firstSessionTerminalUrl} target="_blank" rel="noreferrer">
-          <PurpleButton>
-            <BoltOutlined />
-            {l('connectTerminalBtn')}
-          </PurpleButton>
-        </a>
-        <PurpleButton secondary onClick={sessionStore.copyFirstPhrase}>
-          <Copy />
-          {l('copyPhraseBtn')}
-        </PurpleButton>
-        <PurpleButton secondary onClick={toggleQRModal}>
-          <QRCode />
-          {l('generateQrBtn')}
-        </PurpleButton>
-        <QRCodeModal
-          url={sessionStore.firstSessionTerminalUrl}
-          visible={showQR}
-          onClose={toggleQRModal}
-        />
-      </Actions>
-      <Divider />
-      <Description>{l('addlDesc')}</Description>
-      <AddSession />
-    </Wrapper>
-  ) : (
+  const { Wrapper, Description } = Styled;
+  return (
     <Wrapper>
       <DisplayLarge space={16}>{l('pageTitle')}</DisplayLarge>
-      <Description>{l('description1')}</Description>
+      <Description>{l('description')}</Description>
       <AddSession primary />
       <SessionList />
     </Wrapper>
diff --git a/app/src/components/home/HomePage.tsx b/app/src/components/home/HomePage.tsx
@@ -37,6 +37,9 @@ const Styled = {
       margin-right: 16px;
     }
   `,
+  Column: styled(Column)`
+    max-width: 480px;
+  `,
   Image: styled.img`
     width: 100%;
     margin-bottom: 24px;
@@ -45,28 +48,30 @@ const Styled = {
 
 const HomePage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.home.HomePage');
-  const [showQR, setShowQR] = useState(false);
+  const [qrUrl, setQrUrl] = useState('');
   const [showVideo, setShowVideo] = useState(false);
   const { sessionStore } = useStore();
 
-  const toggleQRModal = useCallback(() => setShowQR(v => !v), []);
+  const openQRModal = useCallback(
+    async () => setQrUrl(await sessionStore.getNewSessionUrl()),
+    [],
+  );
+  const closeQRModal = useCallback(() => setQrUrl(''), []);
   const toggleVideoModal = useCallback(() => setShowVideo(v => !v), []);
 
-  const { Wrapper, PurpleButton, YoutubeButton, Image } = Styled;
+  const { Wrapper, PurpleButton, YoutubeButton, Column, Image } = Styled;
   return (
     <Wrapper>
       <Display semiBold space={16}>
         {l('pageTitle')}
       </Display>
       <Paragraph space={32}>{l('connectDesc')}</Paragraph>
       <Paragraph space={40}>
-        <a href={sessionStore.firstSessionTerminalUrl} target="_blank" rel="noreferrer">
-          <PurpleButton>
-            <BoltOutlined />
-            {l('connectTerminalBtn')}
-          </PurpleButton>
-        </a>
-        <PurpleButton secondary onClick={toggleQRModal}>
+        <PurpleButton onClick={sessionStore.connectToTerminalWeb}>
+          <BoltOutlined />
+          {l('connectTerminalBtn')}
+        </PurpleButton>
+        <PurpleButton secondary onClick={openQRModal}>
           <QRCode />
           {l('connectQrBtn')}
         </PurpleButton>
@@ -98,11 +103,7 @@ const HomePage: React.FC = () => {
           <Paragraph muted>{l('dashDesc')}</Paragraph>
         </Column>
       </Row>
-      <QRCodeModal
-        url={sessionStore.firstSessionTerminalUrl}
-        visible={showQR}
-        onClose={toggleQRModal}
-      />
+      <QRCodeModal url={qrUrl} visible={!!qrUrl} onClose={closeQRModal} />
       <YoutubeModal
         videoId="5kH1ByxjkTM"
         visible={showVideo}
diff --git a/app/src/i18n/locales/en-US.json b/app/src/i18n/locales/en-US.json
@@ -38,13 +38,7 @@
   "cmps.connect.AddSession.expiration": "Expiration",
   "cmps.connect.AddSession.expirationSuffix": "",
   "cmps.connect.ConnectPage.pageTitle": "Lightning Node Connect",
-  "cmps.connect.ConnectPage.description1": "Lightning Node Connect enables you to connect to this node from the web.",
-  "cmps.connect.ConnectPage.description2": "Copy the default pairing phrase below to paste it into your app to make your first connection.",
-  "cmps.connect.ConnectPage.info": "You will need a unique session for each app you wish to connect.",
-  "cmps.connect.ConnectPage.connectTerminalBtn": "Connect to Terminal",
-  "cmps.connect.ConnectPage.copyPhraseBtn": "Copy Pairing Phrase",
-  "cmps.connect.ConnectPage.generateQrBtn": "Connect with QR",
-  "cmps.connect.ConnectPage.addlDesc": "If you’ve utilized your default pairing phrase, and want to create additional sessions.",
+  "cmps.connect.ConnectPage.description": "Lightning Node Connect enables you to connect to this node from the web.",
   "cmps.connect.SessionRowHeader.label": "Label",
   "cmps.connect.SessionRowHeader.type": "Type",
   "cmps.connect.SessionRowHeader.state": "State",
@@ -57,7 +51,7 @@
   "cmps.connect.QRCodeModal.title": "LNC QR",
   "cmps.connect.QRCodeModal.desc": "Scan to connect to Terminal from your mobile phone.",
   "cmps.home.HomePage.pageTitle": "Home",
-  "cmps.home.HomePage.connectDesc": "Connect your node to Terminal on the web via the link below. For mobile, generate a QR code to connect.",
+  "cmps.home.HomePage.connectDesc": "Securely and privately connect your node to Terminal on the web via the link below. For mobile, generate a QR code to connect.",
   "cmps.home.HomePage.connectTerminalBtn": "Connect to Terminal",
   "cmps.home.HomePage.connectQrBtn": "Connect with QR",
   "cmps.home.HomePage.learnDesc": "The connection to your node occurs through the Lightning Node Connect protocol.",
diff --git a/app/src/store/stores/sessionStore.ts b/app/src/store/stores/sessionStore.ts
@@ -44,16 +44,13 @@ export default class SessionStore {
     return this.sortedSessions.filter(s => !s.isPaired);
   }
 
-  /** indicates if there are more than one sessions active */
-  get hasMultiple() {
-    return this.sortedSessions.length > 1;
-  }
-
-  /** The URl to pair with Terminal Web for the first session */
-  get firstSessionTerminalUrl() {
-    return this.unpairedSessions.length > 0
-      ? this.unpairedSessions[0].terminalConnectUrl
-      : '';
+  /** The label to use for a new generated session */
+  get nextSessionLabel() {
+    const count = values(this.sessions).filter(s =>
+      s.label.startsWith('Generated Session'),
+    ).length;
+    const countText = count === 0 ? '' : ` (${count})`;
+    return `Generated Session${countText}`;
   }
 
   /**
@@ -88,19 +85,6 @@ export default class SessionStore {
 
         this._store.log.info('updated sessionStore.sessions', toJS(this.sessions));
       });
-
-      // Ensures that there is at least one session created
-      if (this.unpairedSessions.length === 0) {
-        const count = values(this.sessions).filter(s =>
-          s.label.startsWith('Default Session'),
-        ).length;
-        const countText = count === 0 ? '' : `(${count})`;
-        await this.addSession(
-          `Default Session ${countText}`,
-          LIT.SessionType.TYPE_MACAROON_ADMIN,
-          MAX_DATE,
-        );
-      }
     } catch (error: any) {
       this._store.appView.handleError(error, 'Unable to fetch sessions');
     }
@@ -138,15 +122,46 @@ export default class SessionStore {
       // fetch all sessions to update the store's state
       await this.fetchSessions();
 
-      if (session && copy) {
-        this.copyPhrase(session.label, session.pairingSecretMnemonic);
+      if (session) {
+        if (copy) this.copyPhrase(session.label, session.pairingSecretMnemonic);
+        const msg =
+          'Please connect immediately. The pairing phrase will expire in 10 minutes.';
+        this._store.appView.notify(msg, 'Session Created', 'warning');
         return this.sessions.get(hex(session.localPublicKey));
       }
     } catch (error: any) {
       this._store.appView.handleError(error, 'Unable to add session');
     }
   }
 
+  /**
+   * Creates a new session if necessary and returns the Terminal Web url
+   */
+  async getNewSessionUrl() {
+    let session = this.unpairedSessions.length > 0 ? this.unpairedSessions[0] : undefined;
+    if (!session) {
+      session = await this.addSession(
+        this.nextSessionLabel,
+        LIT.SessionType.TYPE_MACAROON_ADMIN,
+        MAX_DATE,
+      );
+    }
+    return session ? session.terminalConnectUrl : '';
+  }
+
+  /**
+   * Opens the Terminal Web connect page in a new tab
+   */
+  async connectToTerminalWeb() {
+    // open the window first, then set the url when the async function returns. This is done
+    // in this order because popup blockers will prevent the page from opening if the open()
+    // function is not in the immediate callstack of a user initiated action, such as a
+    // button click. If open() was called after the `await`, it would be blocked
+    const tab = window.open();
+    const url = await this.getNewSessionUrl();
+    if (tab) tab.location.replace(url);
+  }
+
   /**
    * Revokes a session
    * @param session the Terminal Connect session object
