groups/grid: Move security from groups to grid

pkg/grid/package.json

@@ -15,8 +15,10 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-dialog": "^0.0.20",
     "@radix-ui/react-dropdown-menu": "^0.0.23",
+    "@radix-ui/react-icons": "^1.1.0",
     "@radix-ui/react-polymorphic": "^0.0.13",
     "@radix-ui/react-portal": "^0.0.15",
     "@radix-ui/react-toggle": "^0.0.10",

pkg/grid/src/components/Checkbox.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+
+export const Checkbox: React.FC<RadixCheckbox.CheckboxProps> = ({
+  defaultChecked,
+  checked,
+  onCheckedChange,
+  disabled,
+  className,
+  children
+}) => {
+  const [on, setOn] = useState(defaultChecked);
+  const isControlled = !!onCheckedChange;
+  const proxyChecked = isControlled ? checked : on;
+  const proxyOnCheckedChange = isControlled ? onCheckedChange : setOn;
+
+  return (
+    <div className="flex content-center space-x-2">
+      <RadixCheckbox.Root
+        className={classNames('default-ring rounded-lg bg-white h-7 w-7', className)}
+        // style={{ width: 28, height: 28 }}
+        checked={proxyChecked}
+        onCheckedChange={proxyOnCheckedChange}
+        disabled={disabled}
+        id="checkbox"
+      >
+        <RadixCheckbox.Indicator className="flex justify-center">
+          <CheckIcon className="text-black" />
+        </RadixCheckbox.Indicator>
+      </RadixCheckbox.Root>
+      <label htmlFor="checkbox">{children}</label>
+    </div>
+  );
+};

pkg/grid/src/components/icons/Lock.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Lock = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="10"
+    height="12"
+    viewBox="-11 -8 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 5H9C9.55228 5 10 5.44772 10 6V11C10 11.5523 9.55229 12 9 12H1C0.447716 12 0 11.5523 0 11V6C0 5.44772 0.447715 5 1 5H2V3C2 1.34315 3.34315 0 5 0C6.65685 0 8 1.34315 8 3V5ZM7 5V3C7 1.89543 6.10457 1 5 1C3.89543 1 3 1.89543 3 3V5H7ZM3 6H9V11H1V6H2H3Z"
+      fill="black"
+      strokeMiterlimit="10"
+    />
+  </svg>
+);

pkg/grid/src/nav/SystemPreferences.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { NotificationPrefs } from './preferences/NotificationPrefs';
 import { SystemUpdatePrefs } from './preferences/SystemUpdatePrefs';
 import { InterfacePrefs } from './preferences/InterfacePrefs';
+import { SecurityPrefs } from './preferences/SecurityPrefs';
 import { useCharges } from '../state/docket';
 import { AppPrefs } from './preferences/AppPrefs';
 import { DocketImage } from '../components/DocketImage';
@@ -14,6 +15,7 @@ import { LeftArrow } from '../components/icons/LeftArrow';
 import { System } from '../components/icons/System';
 import { Interface } from '../components/icons/Interface';
 import { Notifications } from '../components/icons/Notifications';
+import { Lock } from '../components/icons/Lock';
 import { getAppName } from '../state/util';
 
 interface SystemPreferencesSectionProps {
@@ -77,11 +79,11 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
       FallbackComponent={ErrorAlert}
       onReset={() => history.push('/leap/system-preferences')}
     >
-      <div className="sm:flex h-full overflow-y-auto">
+      <div className="h-full overflow-y-auto sm:flex">
         <Route exact={isMobile} path={match.url}>
-          <aside className="flex-none self-start w-full sm:w-auto min-w-60 py-4 sm:py-8 font-semibold text-black sm:text-gray-600 border-r-2 border-gray-50">
+          <aside className="self-start flex-none w-full py-4 font-semibold text-black border-r-2 sm:w-auto min-w-60 sm:py-8 sm:text-gray-600 border-gray-50">
             <nav className="px-2 sm:px-6">
-              <h2 className="sm:hidden h3 mb-4 px-2">System Preferences</h2>
+              <h2 className="px-2 mb-4 sm:hidden h3">System Preferences</h2>
               <ul className="space-y-1">
                 <SystemPreferencesSection
                   url={subUrl('notifications')}
@@ -101,6 +103,10 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
                   <Interface className="w-8 h-8 mr-3 bg-gray-100 rounded-md" />
                   Interface Settings
                 </SystemPreferencesSection>
+                <SystemPreferencesSection url={subUrl('security')} active={matchSub('security')}>
+                  <Lock className="w-8 h-8 mr-3 bg-gray-100 rounded-md" />
+                  Security
+                </SystemPreferencesSection>
               </ul>
             </nav>
             <hr className="my-4 border-t-2 border-gray-50" />
@@ -126,6 +132,7 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
               <Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
               <Route path={`${match.url}/system-updates`} component={SystemUpdatePrefs} />
               <Route path={`${match.url}/interface`} component={InterfacePrefs} />
+              <Route path={`${match.url}/security`} component={SecurityPrefs} />
               <Route
                 path={[`${match.url}/notifications`, match.url]}
                 component={NotificationPrefs}
@@ -133,7 +140,7 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
             </Switch>
             <Link
               to={match.url}
-              className="inline-flex sm:hidden items-center sm:none mt-auto pt-4 h4 text-gray-400"
+              className="inline-flex items-center pt-4 mt-auto text-gray-400 sm:hidden sm:none h4"
             >
               <LeftArrow className="w-3 h-3 mr-2" /> Back
             </Link>

pkg/grid/src/nav/preferences/SecurityPrefs.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { Button } from '../../components/Button';
+import { Checkbox } from '../../components/Checkbox';
+
+export const SecurityPrefs = () => {
+  const [allSessions, setAllSessions] = useState(false);
+
+  return (
+    <>
+      <h2 className="h3 mb-7">Security</h2>
+      <div className="space-y-3">
+        <section className={classNames('inner-section')}>
+          <h3 className="flex items-center mb-2 h4">Logout</h3>
+          <div className="flex flex-col justify-center flex-1 space-y-6">
+            <Checkbox
+              defaultChecked={false}
+              checked={allSessions}
+              onCheckedChange={() => setAllSessions((prev) => !prev)}
+            >
+              Log out of all sessions.
+            </Checkbox>
+            <form method="post" action="/~/logout">
+              {allSessions && <input type="hidden" name="all" />}
+              <Button>Logout</Button>
+            </form>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+};

pkg/interface/src/views/apps/settings/components/lib/Security.tsx

@@ -1,54 +0,0 @@
-import {
-    Button,
-    Col,
-    StatelessCheckboxField, Text
-} from '@tlon/indigo-react';
-import React, { useState } from 'react';
-import { BackButton } from './BackButton';
-
-export default function SecuritySettings() {
-  const [allSessions, setAllSessions] = useState(false);
-  return (
-    <>
-    <BackButton />
-    <Col gapY={5} p={5} pt={4}>
-      <Col gapY={1} mt={0}>
-        <Text fontSize={2} fontWeight="medium">
-          Security Preferences
-        </Text>
-        <Text gray>
-          Manage sessions, login credentials and web access
-        </Text>
-      </Col>
-      <Col gapY={1}>
-        <Text color="black">
-          Log out of this session
-        </Text>
-        <Text mb={3} gray>
-          {allSessions
-            ? 'You will be logged out of all browsers that have currently logged into your Urbit.'
-            : 'You will be logged out of your Urbit on this browser.'}
-        </Text>
-        <StatelessCheckboxField
-          mb={3}
-          selected={allSessions}
-          onChange={() => setAllSessions(s => !s)}
-        >
-          <Text>Log out of all sessions</Text>
-        </StatelessCheckboxField>
-        <form method="post" action="/~/logout">
-          {allSessions && <input type="hidden" name="all" />}
-          <Button
-            primary
-            destructive
-            border={1}
-            style={{ cursor: 'pointer' }}
-          >
-            Logout
-          </Button>
-        </form>
-      </Col>
-    </Col>
-    </>
-  );
-}

pkg/interface/src/views/apps/settings/settings.tsx

@@ -11,7 +11,6 @@ import DisplayForm from './components/lib/DisplayForm';
 import { LeapSettings } from './components/lib/LeapSettings';
 import { NotificationPreferences } from './components/lib/NotificationPref';
 import S3Form from './components/lib/S3Form';
-import SecuritySettings from './components/lib/Security';
 import { DmSettings } from './components/lib/DmSettings';
 import ShortcutSettings from './components/lib/ShortcutSettings';
 
@@ -117,11 +116,6 @@ return;
             <SidebarItem icon='Messages' text='Direct Messages' hash='dm' />
             <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
             <SidebarItem icon='EastCarat' text='Shortcuts' hash='shortcuts' />
-            <SidebarItem
-              icon='Locked'
-              text='Devices + Security'
-              hash='security'
-            />
           </Col>
         </Col>
         <Col flexGrow={1} overflowY='auto'>
@@ -138,7 +132,6 @@ return;
             {hash === 's3' && <S3Form  />}
             {hash === 'leap' && <LeapSettings />}
             {hash === 'calm' && <CalmPrefs />}
-            {hash === 'security' && <SecuritySettings />}
             {hash === 'debug' && <DebugPane />}
           </SettingsItem>
         </Col>