sso login confirm for upload cross signing keys

src/app/organisms/settings/AuthRequest.jsx

@@ -22,6 +22,46 @@ const getAuthId = (password) => ({
   },
 });
 
+
+function SsoAuthRequest({ onComplete, makeRequest, session }) {
+    const [status, setStatus] = useState(false);
+    const mountStore = useStore();
+    let clicked = false
+    const handleSso = async (e) => {
+      clicked = true
+      console.log(e, session)
+      const baseUrl = `${initMatrix.matrixClient.baseUrl}/_matrix/client/v3/auth/m.login.sso/fallback/web`;
+      window.open(`${baseUrl}?session=${session}`, "_blank");
+    }
+
+    const handleConfirm = async (e) => {
+      mountStore.setItem(true);
+      setStatus({ ongoing: true });
+      await makeRequest({session});
+      if (!mountStore.getItem()) return;
+      onComplete(true);
+    }
+
+    return (
+      <div className="auth-request">
+        <div className="sso-dialogue">
+          <Text variant="s1" weight="medium">Use Single Sign On to continue</Text>
+          <Text>To continue, use Single Sign On to prove your identity.</Text>
+          <div className="buttons-container">
+            <Button variant="primary" onClick={handleSso}>Single Sign-On</Button>
+            <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
+          </div>
+        </div>
+      </div>
+    );
+}
+SsoAuthRequest.propTypes = {
+  onComplete: PropTypes.func.isRequired,
+  makeRequest: PropTypes.func.isRequired,
+  session: PropTypes.string.isRequired,
+};
+
+
 function AuthRequest({ onComplete, makeRequest }) {
   const [status, setStatus] = useState(false);
   const mountStore = useStore();
@@ -88,29 +128,54 @@ export const authRequest = async (title, makeRequest) => {
     lastUsedPassword = undefined;
     if (e.httpStatus !== 401 || e.data?.flows === undefined) return false;
 
-    const { flows } = e.data;
+    const { flows, session } = e.data;
-    const canUsePassword = flows.find((f) => f.stages.includes('m.login.password'));
+    const canUsePassword = flows.find((f) => f.stages.includes('m.login.password')) || false;
-    if (!canUsePassword) return false;
 
-    return new Promise((resolve) => {
+    let promise
-      let isCompleted = false;
+    if (canUsePassword) {
-      openReusableDialog(
+      promise = new Promise((resolve) => {
-        <Text variant="s1" weight="medium">{title}</Text>,
+        let isCompleted = false;
-        (requestClose) => (
+        openReusableDialog(
-          <AuthRequest
+          <Text variant="s1" weight="medium">{title}</Text>,
-            onComplete={(done) => {
+          (requestClose) => (
-              isCompleted = true;
+            <AuthRequest
-              resolve(done);
+              onComplete={(done) => {
-              requestClose();
+                isCompleted = true;
-            }}
+                resolve(done);
-            makeRequest={makeRequest}
+                requestClose();
-          />
+              }}
-        ),
+              makeRequest={makeRequest}
-        () => {
+            />
-          if (!isCompleted) resolve(false);
+          ),
-        },
+          () => {
-      );
+            if (!isCompleted) resolve(false);
-    });
+          },
+        );
+      });
+    } else {
+      promise = new Promise((resolve) => {
+        let isCompleted = false;
+        openReusableDialog(
+          <Text variant="s1" weight="medium">{title}</Text>,
+          (requestClose) => (
+            <SsoAuthRequest
+              session = {session}
+              onComplete={(done) => {
+                isCompleted = true;
+                resolve(done);
+                requestClose();
+              }}
+              makeRequest={makeRequest}
+            />
+          ),
+          () => {
+            if (!isCompleted) resolve(false);
+          },
+        );
+      });
+    }
+
+    return promise
   }
 };