Initial implementaiton with some debugging

src/hooks.ts

@@ -15,10 +15,13 @@ export function useChromeStorageState<T>(
         }
         return prev[curr];
       }, await chrome.storage.local.get(keys)) as unknown as T;
-
       value !== undefined &&
-        setState((prevState) =>
-          isEqual(prevState, value) ? prevState : value
+        setState((prevState) => {
+            console.log(prevState)
+            console.log(value)
+            console.log(isEqual(prevState, value))
+            return isEqual(prevState, value) ? prevState : value
+        }
         );
     }
 

src/iCloudClient.ts

@@ -16,12 +16,17 @@ export type ICloudClientSessionData = {
   webservices: {
     [k: string]: { url: string; status: string };
   };
-  headers: { [k: string]: string };
+  dsInfo: {
+    hsaChallengeRequired?: boolean,
+    hsaVersion?: number,
+  }
+  headers: { [k: string]: string },
+  hsaTrustedBrowser?: boolean
 };
 
 export class ICloudClientSession {
   constructor(
-    public data: ICloudClientSessionData = { headers: {}, webservices: {} },
+    public data: ICloudClientSessionData = { headers: {}, webservices: {}, dsInfo: {}},
     private readonly dataSaver: (data: ICloudClientSessionData) => void = (
       data
     ) => {}
@@ -32,7 +37,7 @@ export class ICloudClientSession {
   }
 
   async cleanUp(): Promise<void> {
-    this.data = { headers: {}, webservices: {} };
+    this.data = { headers: {}, webservices: {}, dsInfo: {} };
     await this.save();
   }
 }
@@ -128,10 +133,19 @@ class ICloudClient {
   public get authenticated(): boolean {
     return (
       !isEqual(this.session.data.webservices, {}) &&
-      !isEqual(this.session.data.headers, {})
+      !isEqual(this.session.data.headers, {}) && 
+      !isEqual(this.session.data.dsInfo, {})
     );
   }
 
+  public get requires2fa(): boolean {
+    return this.session.data.dsInfo.hsaVersion === 2 && (this.session.data.dsInfo.hsaChallengeRequired === true || !this.isTrustedSession)
+  }
+
+  public get isTrustedSession(): boolean {
+    return this.session.data.hsaTrustedBrowser === true
+  }
+
   webserviceUrl(serviceName: string): string {
     return this.session.data.webservices[serviceName].url;
   }
@@ -168,7 +182,9 @@ class ICloudClient {
       { headers: this.authHeaders() }
     );
 
-    this.session.data.webservices = response.data['webservices'];
+    this.session.data.webservices = response.data.webservices;
+    this.session.data.dsInfo.hsaChallengeRequired = response.data.dsInfo.hsaChallengeRequired;
+    this.session.data.dsInfo.hsaVersion = response.data.dsInfo.hsaVersion;
     await this.session.save();
   }
 
@@ -189,10 +205,13 @@ class ICloudClient {
   }
 
   async logOut(trust: boolean = false): Promise<void> {
-    await this.requester.post(`${this.baseUrls.setup}/logout`, {
-      trustBrowsers: trust,
-      allBrowsers: trust,
-    });
+    if (this.authenticated) {
+      await this.requester.post(`${this.baseUrls.setup}/logout`, {
+        trustBrowsers: trust,
+        allBrowsers: trust,
+      });
+    }
+
     await this.session.cleanUp();
   }
 }

src/pages/Popup/Popup.tsx

@@ -67,6 +67,8 @@ const LoadingButton = (
 type Callback = (transition: PopupTransition) => void;
 
 const SignInForm = (props: { callback: Callback; client: ICloudClient }) => {
+  console.log("SIGNIN RENDER")
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -77,24 +79,20 @@ const SignInForm = (props: { callback: Callback; client: ICloudClient }) => {
 
     await props.client.signIn(email, password);
     await props.client.accountLogin();
-
-    props.callback(PopupTransition.SuccessfulSignIn);
+    if (props.client.requires2fa) {
+      props.callback(PopupTransition.SuccessfulSignIn);
+    } else {
+      props.callback(PopupTransition.SuccessfulVerification)
+    }
   };
 
   return (
     <div>
-      <div>
-        <img
-          className="mx-auto h-24 w-auto"
-          src="https://www.freeiconspng.com/uploads/icloud-icon-4.png"
-          alt="Icons Download Png Icloud"
-        />
-        <h2 className="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900">
-          Sign in to iCloud
-        </h2>
-      </div>
+      <h2 className="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900">
+        Sign in to iCloud
+      </h2>
       <form
-        className="mt-8 space-y-6"
+        className="mt-8 space-y-6 text-base"
         action="#"
         method="POST"
         onSubmit={onFormSubmit}
@@ -136,7 +134,7 @@ const SignInForm = (props: { callback: Callback; client: ICloudClient }) => {
           </div>
         </div>
 
-        <div className="text-sm">
+        <div className="text-md">
           <a
             href="https://iforgot.apple.com/password/verify/appleid"
             className="font-medium text-sky-400 hover:text-sky-500"
@@ -146,14 +144,15 @@ const SignInForm = (props: { callback: Callback; client: ICloudClient }) => {
         </div>
 
         <div>
-          <LoadingButton isSubmitting>Sign In</LoadingButton>
+          <LoadingButton isSubmitting={isSubmitting}>Sign In</LoadingButton>
         </div>
       </form>
     </div>
   );
 };
 
 const TwoFaForm = (props: { callback: Callback; client: ICloudClient }) => {
+  console.log("2FA RENDER")
   const [code, setCode] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -169,7 +168,7 @@ const TwoFaForm = (props: { callback: Callback; client: ICloudClient }) => {
   };
 
   return (
-    <div>
+    <div className="text-base">
       <h2 className="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900">
         Enter the 2FA code
       </h2>
@@ -188,9 +187,12 @@ const TwoFaForm = (props: { callback: Callback; client: ICloudClient }) => {
           placeholder="."
         />
         <div>
-          <LoadingButton isSubmitting>Verify</LoadingButton>
+          <LoadingButton isSubmitting={isSubmitting}>Verify</LoadingButton>
         </div>
       </form>
+      <div className="text-center mt-3">
+        <SignOutButton {...props} />
+      </div>
     </div>
   );
 };
@@ -251,12 +253,13 @@ const SignOutButton = (props: { callback: Callback; client: ICloudClient }) => {
         props.callback(PopupTransition.SuccessfulSignOut);
       }}
     >
-      Sign Out
+     Sign Out
     </button>
   );
 };
 
 const HideMyEmail = (props: { callback: Callback; client: ICloudClient }) => {
+  console.log("HME RENDER")
   const [hmeEmail, setHmeEmail] = useState<string>();
   const [hmeError, setHmeError] = useState<string>();
 
@@ -284,19 +287,19 @@ const HideMyEmail = (props: { callback: Callback; client: ICloudClient }) => {
     fetchHmeList().catch(console.error);
   }, [props.client]);
 
-  useEffect(() => {
-    const fetchHmeEmail = async () => {
-      if (props.client.authenticated) {
-        setIsEmailRefreshSubmitting(true);
-        const pms = new PremiumMailSettings(props.client);
-        setHmeEmail(await pms.generateHme());
-      }
-    };
+  // useEffect(() => {
+  //   const fetchHmeEmail = async () => {
+  //     if (props.client.authenticated) {
+  //       setIsEmailRefreshSubmitting(true);
+  //       const pms = new PremiumMailSettings(props.client);
+  //       setHmeEmail(await pms.generateHme());
+  //     }
+  //   };
 
-    fetchHmeEmail()
-      .catch((e) => setHmeError(e.toString()))
-      .finally(() => setIsEmailRefreshSubmitting(false));
-  }, [props.client]);
+  //   fetchHmeEmail()
+  //     .catch((e) => setHmeError(e.toString()))
+  //     .finally(() => setIsEmailRefreshSubmitting(false));
+  // }, [props.client]);
 
   useEffect(() => {
     const getTabHost = async () => {
@@ -316,7 +319,7 @@ const HideMyEmail = (props: { callback: Callback; client: ICloudClient }) => {
     getTabHost().catch(console.error);
   }, []);
 
-  const onEmailRefreshSubmit = async () => {
+  const onEmailRefreshClick = async () => {
     setIsEmailRefreshSubmitting(true);
     setReservedHme(undefined);
     setHmeError(undefined);
@@ -366,7 +369,7 @@ const HideMyEmail = (props: { callback: Callback; client: ICloudClient }) => {
           <LoadingButton
             className="mr-1"
             isSubmitting={isEmailRefreshSubmitting}
-            onClick={onEmailRefreshSubmit}
+            onClick={onEmailRefreshClick}
           >
             <FontAwesomeIcon
               className="text-sky-400 hover:text-sky-500"
@@ -423,7 +426,7 @@ const HideMyEmail = (props: { callback: Callback; client: ICloudClient }) => {
           </a>
         </div>
         <div className="text-right">
-          <SignOutButton client={props.client} callback={props.callback} />
+          <SignOutButton {...props} />
         </div>
       </div>
     </div>
@@ -452,6 +455,7 @@ const STATE_MACHINE_TRANSITIONS: {
   },
   [PopupState.SignedIn]: {
     [PopupTransition.SuccessfulVerification]: PopupState.Verified,
+    [PopupTransition.SuccessfulSignOut]: PopupState.SignedOut,
   },
   [PopupState.Verified]: {
     [PopupTransition.SuccessfulSignOut]: PopupState.SignedOut,
@@ -473,15 +477,18 @@ const transitionToNextStateElement = (
 };
 
 const Popup = () => {
+  console.log("POPUP RENDER")
+
   const [state, setState] = useChromeStorageState(
     ['iCloudHmePopupState'],
     PopupState.SignedOut
   );
-
+  console.log(state)
   const [sessionData, setSessionData] =
     useChromeStorageState<ICloudClientSessionData>(['iCloudHmeClientSession'], {
       headers: {},
       webservices: {},
+      dsInfo: {}
     });
 
   const session = new ICloudClientSession(sessionData, setSessionData);

src/pages/Popup/index.css

@@ -4,5 +4,5 @@
 
 html,
 body {
-  width: 400px;
+  width: 420px;
 }