appview: made page for exempting other users

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,6 +37,7 @@ 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}>
@@ -134,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/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

@@ -9,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

@@ -30,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 },
   ],
@@ -186,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

@@ -79,6 +79,9 @@ const OnboardingStatefulSwitcher: React.FC = () => {
             setStep(`installSysExt_success`);
             break;
           case `installSysExt_success`:
+            setStep(`exemptUsers`);
+            break;
+          case `exemptUsers`:
             setStep(`locateMenuBarIcon`);
             break;
           case `locateMenuBarIcon`:
@@ -193,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 />} />