ui+connect: Custom permissions page

Author: itsrachelfish

app/src/AppRoutes.tsx

@@ -9,6 +9,9 @@ const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'
 const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
 const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
 const LazyConnectPage = React.lazy(() => import('components/connect/ConnectPage'));
+const LazyCustomSessionPage = React.lazy(
+  () => import('components/connect/CustomSessionPage'),
+);
 
 const AppRoutes: React.FC = () => {
   return (
@@ -63,6 +66,14 @@ const AppRoutes: React.FC = () => {
             </Layout>
           }
         />
+        <Route
+          path="connect/custom"
+          element={
+            <Layout>
+              <LazyCustomSessionPage />
+            </Layout>
+          }
+        />
       </Route>
     </Routes>
   );

app/src/components/common/FormDate.tsx

@@ -26,6 +26,11 @@ const Styled = {
     &::placeholder {
       color: ${props => props.theme.colors.gray};
     }
+
+    // Fix color of the date picker icon in chrome
+    ::-webkit-calendar-picker-indicator {
+      filter: invert(1);
+    }
   `,
   Extra: styled.div`
     position: absolute;

app/src/components/common/FormField.tsx

@@ -22,12 +22,13 @@ interface Props {
   info?: ReactNode;
   error?: ReactNode;
   tip?: string;
+  className?: string;
 }
 
-const FormField: React.FC<Props> = ({ label, info, error, tip, children }) => {
+const FormField: React.FC<Props> = ({ label, info, error, tip, children, className }) => {
   const { Wrapper, Info } = Styled;
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       {label && (
         <HeaderFour>
           {label}

app/src/components/connect/AddSession.tsx

@@ -1,9 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react-lite';
-import * as LIT from 'types/generated/lit-sessions_pb';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
-import { MAX_DATE } from 'util/constants';
 import { useStore } from 'store';
 import { Button, Column, HeaderFour, Row } from 'components/base';
 import FormField from 'components/common/FormField';
@@ -42,31 +40,11 @@ interface Props {
 
 const AddSession: React.FC<Props> = ({ primary }) => {
   const { l } = usePrefixedTranslation('cmps.connect.AddSession');
-  const { sessionStore } = useStore();
-
-  const [label, setLabel] = useState('');
-  const [permissions, setPermissions] = useState('admin');
-  const [editing, setEditing] = useState(false);
-
-  const toggleEditing = useCallback(() => setEditing(e => !e), []);
-  const handleSubmit = useCallback(async () => {
-    const sessionType =
-      permissions === 'admin'
-        ? LIT.SessionType.TYPE_MACAROON_ADMIN
-        : LIT.SessionType.TYPE_MACAROON_READONLY;
-
-    const session = await sessionStore.addSession(label, sessionType, MAX_DATE, true);
-
-    if (session) {
-      setLabel('');
-      setEditing(false);
-    }
-  }, [label, permissions]);
-
+  const { addSessionView } = useStore();
   const { Wrapper, FormHeader, FormInput, FormSelect } = Styled;
-  if (!editing) {
+  if (!addSessionView.editing) {
     return (
-      <PurpleButton tertiary={!primary} onClick={toggleEditing}>
+      <PurpleButton tertiary={!primary} onClick={addSessionView.toggleEditing}>
         {l('create')}
       </PurpleButton>
     );
@@ -85,24 +63,33 @@ const AddSession: React.FC<Props> = ({ primary }) => {
       <Row>
         <Column cols={6}>
           <FormField>
-            <FormInput value={label} onChange={setLabel} placeholder={l('labelHint')} />
+            <FormInput
+              value={addSessionView.label}
+              onChange={addSessionView.setLabel}
+              placeholder={l('labelHint')}
+            />
           </FormField>
         </Column>
         <Column>
           <FormField>
             <FormSelect
-              value={permissions}
-              onChange={setPermissions}
+              value={addSessionView.permissionType}
+              onChange={addSessionView.setPermissionType}
               options={[
-                { label: 'Admin', value: 'admin' },
-                { label: 'Read Only', value: 'read-only' },
+                { label: l('admin'), value: 'admin' },
+                { label: l('readonly'), value: 'read-only' },
+                { label: l('custom'), value: 'custom' },
               ]}
             />
           </FormField>
         </Column>
         <Column>
-          <PurpleButton onClick={handleSubmit}>{l('common.submit')}</PurpleButton>
-          <Button ghost borderless onClick={toggleEditing}>
+          <PurpleButton onClick={addSessionView.handleSubmit}>
+            {addSessionView.permissionType === 'custom'
+              ? l('common.next')
+              : l('common.submit')}
+          </PurpleButton>
+          <Button ghost borderless onClick={addSessionView.toggleEditing}>
             {l('common.cancel')}
           </Button>
         </Column>