sessions: disable copying pairing phrases that are in use

Author: jamaljsr

app/src/components/base/icons.tsx

@@ -34,6 +34,7 @@ import { ReactComponent as UserPlusIcon } from 'assets/icons/user-plus.svg';
 interface IconProps {
   size?: 'x-small' | 'small' | 'medium' | 'large';
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 const Icon = styled.span<IconProps>`
@@ -52,6 +53,12 @@ const Icon = styled.span<IconProps>`
     }
   `}
 
+  ${props =>
+    props.disabled &&
+    `
+    color: ${props.theme.colors.lightBlue};
+  `}
+
   ${props =>
     props.size === 'x-small' &&
     `

app/src/components/connect/SessionRow.tsx

@@ -77,7 +77,7 @@ const RowHeader: React.FC = () => {
           {l('type')}
         </SortableHeader>
       </HeaderColumn>
-      <HeaderColumn right>
+      <HeaderColumn>
         <SortableHeader<Session>
           field="state"
           sort={settingsStore.sessionSort}
@@ -86,6 +86,15 @@ const RowHeader: React.FC = () => {
           {l('state')}
         </SortableHeader>
       </HeaderColumn>
+      <HeaderColumn>
+        <SortableHeader<Session>
+          field="expiry"
+          sort={settingsStore.sessionSort}
+          onSort={settingsStore.setSessionSort}
+        >
+          {l('expiry')}
+        </SortableHeader>
+      </HeaderColumn>
       <ActionColumn />
     </HeaderRow>
   );
@@ -114,16 +123,23 @@ const SessionRow: React.FC<Props> = ({ session, style }) => {
   return (
     <Row style={style}>
       <ActionColumn>
-        <Tip overlay={l('copy')}>
-          <Copy onClick={handleCopy} />
-        </Tip>
+        {session.isPaired ? (
+          <Tip overlay={l('paired')}>
+            <Copy disabled />
+          </Tip>
+        ) : (
+          <Tip overlay={l('copy')}>
+            <Copy onClick={handleCopy} />
+          </Tip>
+        )}
       </ActionColumn>
       <Column cols={3}>{session.label}</Column>
       <Column>{session.typeLabel}</Column>
-      <Column right>{session.stateLabel}</Column>
+      <Column>{session.pairedLabel}</Column>
+      <Column>{session.expiryLabel}</Column>
       <ActionColumn>
         <Tip overlay={l('revoke')}>
-          <CloseIcon onClick={handleRevoke} />
+          <CloseIcon size="large" onClick={handleRevoke} />
         </Tip>
       </ActionColumn>
     </Row>

app/src/i18n/locales/en-US.json

@@ -46,7 +46,9 @@
   "cmps.connect.SessionRowHeader.label": "Label",
   "cmps.connect.SessionRowHeader.type": "Type",
   "cmps.connect.SessionRowHeader.state": "State",
+  "cmps.connect.SessionRowHeader.expiry": "Expiry",
   "cmps.connect.SessionRow.copy": "Copy Pairing Phrase",
+  "cmps.connect.SessionRow.paired": "This Pairing Phrase has already been used by a client",
   "cmps.connect.SessionRow.revoke": "Revoke Session",
   "cmps.history.HistoryPage.backText": "Lightning Loop",
   "cmps.history.HistoryPage.pageTitle": "History",

app/src/store/models/session.ts

@@ -2,6 +2,7 @@ import { makeAutoObservable } from 'mobx';
 import * as LIT from 'types/generated/lit-sessions_pb';
 import { SortParams } from 'types/state';
 import formatDate from 'date-fns/format';
+import { MAX_DATE } from 'util/constants';
 import { hex } from 'util/strings';
 import { Store } from 'store/store';
 
@@ -65,7 +66,9 @@ export default class Session {
 
   /** The date this session will expire as formatted string */
   get expiryLabel() {
-    return formatDate(this.expiry, 'MMM d, h:mm a');
+    return this.expiry.getTime() === MAX_DATE.getTime()
+      ? 'Never'
+      : formatDate(this.expiry, 'MMM d, yyyy h:mm a');
   }
 
   /** True if the session is not revoked or expired */
@@ -76,6 +79,16 @@ export default class Session {
     );
   }
 
+  /** True if the session has had a client connect to it */
+  get isPaired() {
+    return this.remotePublicKey !== '';
+  }
+
+  /** The paired status as a string */
+  get pairedLabel() {
+    return this.isPaired ? 'In Use' : 'Created';
+  }
+
   /**
    * Updates this session model using data provided from the LIT GRPC api
    */

app/src/store/stores/sessionStore.ts

@@ -99,8 +99,6 @@ export default class SessionStore {
    * @param label the user defined label for this session
    * @param type the type of session being created (admin, read-only, etc)
    * @param expiry how long the session should be valid for
-   * @param mailboxServerAddr the address where the mailbox server is reachable
-   * @param devServer whether the mailbox server is a dev server that has no valid TLS cert
    */
   async addSession(
     label: string,