new onboarding pages

appviews/src/Administrate/screens/ExemptUsersScreen.tsx

@@ -62,10 +62,11 @@ const ExemptUsersScreen: React.FC<Props> = ({ users, emit }) => {
         </div>
         <ul className="mt-4 space-y-2 flex-grow">
           {users.value.map((user) => (
-            <User
+            <ExemptUser
               key={user.id}
               name={user.name}
               isExempt={user.isExempt}
+              isAdmin={user.isAdmin}
               onToggle={() =>
                 emit({
                   case: `setUserExemption`,
@@ -93,31 +94,41 @@ const ExemptUsersScreen: React.FC<Props> = ({ users, emit }) => {
   );
 };
 
-interface UserProps {
+interface ExemptUserProps {
   name: string;
   isExempt: boolean;
   onToggle(): unknown;
+  isAdmin?: boolean;
 }
 
-const User: React.FC<UserProps> = ({ name, isExempt, onToggle }) => (
+export const ExemptUser: React.FC<ExemptUserProps> = ({
+  name,
+  isExempt,
+  isAdmin,
+  onToggle,
+}) => (
   <div
     onClick={onToggle}
-    className={cx(
-      `flex items-center justify-start rounded-xl p-2 pl-4`,
-      isExempt && `bg-red-50 dark:bg-red-500/10`,
-    )}
+    className={cx(`flex items-center justify-start rounded-xl p-2 pl-4`)}
   >
     <button
       className={cx(
         `w-5 h-5 rounded-full border-slate-300 dark:border-slate-700 border mr-4 flex justify-center items-center hover:scale-105 transition-[transform,border-color,border,background-color] duration-100`,
-        isExempt && `bg-red-500 !border-red-500 dark:border-red-500`,
+        isExempt && `bg-violet-500 !border-violet-500 dark:border-violet-500`,
       )}
     >
       <i className="fa-solid fa-check text-white dark:text-slate-900 text-xs" />
     </button>
-    <div className="flex items-center space-x-2 grow">
-      <h3 className="font-bold dark:text-white grow">{name}</h3>
-      <span className="text-red-500 dark:text-red-400 pr-2">
+    <div className="flex justify-between items-center space-x-2 flex-grow">
+      <div className="flex items-center">
+        <h3 className="font-bold dark:text-white grow mr-2">{name}</h3>
+        {isAdmin && (
+          <span className="text-fuchsia-500 font-medium uppercase text-xs bg-fuchsia-100 rounded-full px-2 py-0">
+            admin
+          </span>
+        )}
+      </div>
+      <span className="text-violet-500 dark:text-violet-400 pr-2 ml-4">
         {isExempt ? `exempt from filtering - unrestricted internet access` : ``}
       </span>
     </div>

appviews/src/Onboarding/Onboarding.tsx

@@ -37,10 +37,15 @@ export const Onboarding: React.FC<Props> = ({
           os === `venturaOrLater` ? `System Settings` : `System Preferences`,
         emit,
         dispatch,
+        otherUsers: users.filter((user) => user.id !== currentUser?.id),
       }}
     >
       <StepSwitcher ready={receivedAppState}>
         <OnboardingPage step="welcome" component={<Step.Welcome />} />
+        <OnboardingPage
+          step="appNotInApplicationsDir"
+          component={<Step.AppNotInApplicationsDir />}
+        />
         <OnboardingPage
           step="confirmGertrudeAccount"
           component={<Step.ConfirmGertrudeAccount />}
@@ -130,6 +135,7 @@ export const Onboarding: React.FC<Props> = ({
           component={<Step.InstallSysExt step="installSysExt_success" />}
           confetti
         />
+        <OnboardingPage step="exemptUsers" component={<Step.ExemptUsers />} />
         <OnboardingPage step="locateMenuBarIcon" component={<Step.LocateMenuBarIcon />} />
         <OnboardingPage step="viewHealthCheck" component={<Step.ViewHealthCheck />} />
         <OnboardingPage step="howToUseGertrude" component={<Step.HowToUseGertrude />} />

appviews/src/Onboarding/OnboardingContext.ts

@@ -1,13 +1,21 @@
 import { createContext } from 'react';
-import type { AppEvent, OnboardingStep, OSGroup, ViewAction } from './onboarding-store';
+import type {
+  AppEvent,
+  MacOSUser,
+  OnboardingStep,
+  OSGroup,
+  ViewAction,
+} from './onboarding-store';
 
 const OnboardingContext = createContext<{
+  otherUsers: MacOSUser[];
   currentStep: OnboardingStep;
   os: OSGroup;
   systemSettingsName: string;
   emit(event: AppEvent): unknown;
   dispatch(event: ViewAction): unknown;
 }>({
+  otherUsers: [],
   currentStep: `welcome`,
   os: `venturaOrLater`,
   systemSettingsName: `System Settings`,

appviews/src/Onboarding/StepSwitcher.tsx

@@ -16,6 +16,7 @@ const StepSwitcher: React.FC<Props> = ({ children, ready }) => {
   const progressStep = (() => {
     switch (currentStep) {
       case `welcome`:
+      case `appNotInApplicationsDir`:
       case `confirmGertrudeAccount`:
       case `noGertrudeAccount`:
         return 1;

appviews/src/Onboarding/Steps/AppNotInApplicationsDir.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import ExpandableContent from '../ExpandableContent';
+import * as Onboarding from '../UtilityComponents';
+
+const AppNotInApplicationsDir: React.FC = () => (
+  <Onboarding.Centered direction="row" className="gap-12">
+    <div className="flex flex-col items-start">
+      <Onboarding.Heading className="max-w-sm">
+        Hmm, something&apos;s not quite right...
+      </Onboarding.Heading>
+      <Onboarding.Text className="mt-4 max-w-2xl">
+        Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore
+        culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim
+        cupidatat excepteur officia.
+      </Onboarding.Text>
+      <Onboarding.PrimaryButton className="mt-8">Quit Gertrude</Onboarding.PrimaryButton>
+    </div>
+    <ExpandableContent
+      asset={{ type: `image`, url: ``, render: true }}
+      width={300}
+      height={200}
+    />
+  </Onboarding.Centered>
+);
+
+export default AppNotInApplicationsDir;

appviews/src/Onboarding/Steps/ExemptUsers.tsx

@@ -0,0 +1,37 @@
+import { inflect } from '@shared/string';
+import React, { useContext } from 'react';
+import { ExemptUser } from '../../Administrate/screens/ExemptUsersScreen';
+import OnboardingContext from '../OnboardingContext';
+import * as Onboarding from '../UtilityComponents';
+
+const ExemptUsers: React.FC = () => {
+  const { otherUsers } = useContext(OnboardingContext);
+  return (
+    <Onboarding.Centered>
+      <Onboarding.Heading>Grant other users internet access</Onboarding.Heading>
+      <Onboarding.Text centered className="max-w-3xl mt-4">
+        For safety, Gertrude will block all internet access for other users unless you
+        explicitly exempt them from filtering. You have {otherUsers.length} other{` `}
+        {inflect(`user`, otherUsers.length)} on this computer; if you want them to have
+        access to the internet, click the corresponding checkbox below. Make sure your
+        child doesn&apos;t know the password for these unpretected users.
+      </Onboarding.Text>
+      <div className="min-w-[660px] border border-slate-200 bg-white rounded-2xl mt-8">
+        {otherUsers.map((user) => (
+          <ExemptUser
+            name={user.name}
+            isExempt={true}
+            onToggle={() => alert(`TODO`)}
+            isAdmin={user.isAdmin}
+          />
+        ))}
+      </div>
+      <Onboarding.PrimaryButton className="mt-8">
+        Continue
+        <i className="fa-solid fa-arrow-right ml-3" />
+      </Onboarding.PrimaryButton>
+    </Onboarding.Centered>
+  );
+};
+
+export default ExemptUsers;

appviews/src/Onboarding/Steps/index.ts

@@ -1,4 +1,5 @@
 export { default as Welcome } from './Welcome';
+export { default as AppNotInApplicationsDir } from './AppNotInApplicationsDir';
 export { default as ConfirmGertrudeAccount } from './ConfirmGertrudeAccount';
 export { default as GetConnectionCode } from './GetConnectionCode';
 export { default as NoGertrudeAccount } from './NoGertrudeAccount';
@@ -8,6 +9,7 @@ export { default as AllowScreenshots } from './AllowScreenshots';
 export { default as AllowNotifications } from './AllowNotifications';
 export { default as AllowKeylogging } from './AllowKeylogging';
 export { default as InstallSysExt } from './InstallSysExt';
+export { default as ExemptUsers } from './ExemptUsers';
 export { default as LocateMenuBarIcon } from './LocateMenuBarIcon';
 export { default as ViewHealthCheck } from './ViewHealthCheck';
 export { default as HowToUseGertrude } from './HowToUseGertrude';

appviews/src/Onboarding/onboarding-store.ts

@@ -10,6 +10,7 @@ export type RequestState<T = void, E = string> =
 // begin codegen
 export type OnboardingStep =
   | 'welcome'
+  | 'appNotInApplicationsDir'
   | 'confirmGertrudeAccount'
   | 'noGertrudeAccount'
   | 'macosUserAccountType'
@@ -29,6 +30,7 @@ export type OnboardingStep =
   | 'installSysExt_allow'
   | 'installSysExt_failed'
   | 'installSysExt_success'
+  | 'exemptUsers'
   | 'locateMenuBarIcon'
   | 'viewHealthCheck'
   | 'howToUseGertrude'

storybook/src/macos-app/Onboarding.stories.tsx

@@ -19,6 +19,7 @@ export const Welcome: Story = props({
   keyloggingPermissionGranted: false,
   currentUser: { id: 502, name: `Suzy`, isAdmin: false },
   users: [
+    { id: 503, name: `Little Jimmy`, isAdmin: false },
     { id: 501, name: `Bob McParent`, isAdmin: true },
     { id: 502, name: `Suzy`, isAdmin: false },
   ],
@@ -27,6 +28,11 @@ export const Welcome: Story = props({
   receivedAppState: true,
 });
 
+export const AppNotInApplicationsDir: Story = props({
+  ...Welcome.args,
+  step: `appNotInApplicationsDir`,
+});
+
 export const ConfirmGertrudeAcct: Story = props({
   ...Welcome.args,
   step: `confirmGertrudeAccount`,
@@ -181,6 +187,11 @@ export const InstallSysExtSuccess: Story = props({
   step: `installSysExt_success`,
 });
 
+export const ExemptUsers: Story = props({
+  ...Welcome.args,
+  step: `exemptUsers`,
+});
+
 export const LocateMenuBarIcon: Story = props({
   ...Welcome.args,
   step: `locateMenuBarIcon`,

storybook/src/macos-app/OnboardingStatefulSwitcher.tsx

@@ -18,6 +18,9 @@ const OnboardingStatefulSwitcher: React.FC = () => {
           case `welcome`:
             setTimeout(() => setStep(`confirmGertrudeAccount`), 1000); // this is handled in the component, but need to simulate it here
             break;
+          case `appNotInApplicationsDir`:
+            setStep(`confirmGertrudeAccount`);
+            break;
           case `confirmGertrudeAccount`:
             setStep(`noGertrudeAccount`);
             break;
@@ -76,6 +79,9 @@ const OnboardingStatefulSwitcher: React.FC = () => {
             setStep(`installSysExt_success`);
             break;
           case `installSysExt_success`:
+            setStep(`exemptUsers`);
+            break;
+          case `exemptUsers`:
             setStep(`locateMenuBarIcon`);
             break;
           case `locateMenuBarIcon`:
@@ -95,6 +101,10 @@ const OnboardingStatefulSwitcher: React.FC = () => {
     >
       <StepSwitcher ready>
         <OnboardingPage step="welcome" component={<Step.Welcome />} />
+        <OnboardingPage
+          step="appNotInApplicationsDir"
+          component={<Step.AppNotInApplicationsDir />}
+        />
         <OnboardingPage
           step="confirmGertrudeAccount"
           component={<Step.ConfirmGertrudeAccount />}
@@ -186,6 +196,7 @@ const OnboardingStatefulSwitcher: React.FC = () => {
           component={<Step.InstallSysExt step="installSysExt_success" />}
           confetti
         />
+        <OnboardingPage step="exemptUsers" component={<Step.ExemptUsers />} />
         <OnboardingPage step="locateMenuBarIcon" component={<Step.LocateMenuBarIcon />} />
         <OnboardingPage step="viewHealthCheck" component={<Step.ViewHealthCheck />} />
         <OnboardingPage step="howToUseGertrude" component={<Step.HowToUseGertrude />} />