MSAL 2.0 checkpoint

src/HostedExplorer.tsx

@@ -1,5 +1,5 @@
 import { Configuration, PublicClientApplication } from "@azure/msal-browser";
-import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate } from "@azure/msal-react";
+import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
 import { useBoolean } from "@uifabric/react-hooks";
 import {
   DefaultButton,
@@ -15,30 +15,51 @@ import * as React from "react";
 import { render } from "react-dom";
 import FeedbackIcon from "../images/Feedback.svg";
 import ConnectIcon from "../images/HostedConnectwhite.svg";
+import ChevronRight from "../images/chevron-right.svg";
 import "../less/hostedexplorer.less";
+import { AccountSwitchComponent } from "./Explorer/Controls/AccountSwitch/AccountSwitchComponent";
 import { CommandButtonComponent } from "./Explorer/Controls/CommandButton/CommandButtonComponent";
 import { DefaultDirectoryDropdownComponent } from "./Explorer/Controls/Directory/DefaultDirectoryDropdownComponent";
 import { DirectoryListComponent } from "./Explorer/Controls/Directory/DirectoryListComponent";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
-import { useGraphProfile } from "./hooks/useGraphProfile";
+import { useGraphPhoto } from "./hooks/useGraphPhoto";
+import { ConnectScreen } from "./Platform/Hosted/ConnectScreen";
 import "./Shared/appInsights";
+import { useAADAccount } from "./hooks/useAADAccount";
 
 initializeIcons();
 
 // MSAL configuration
 const configuration: Configuration = {
   auth: {
-    clientId: "e8ae3d28-de2a-4dc8-8fa3-2d2998b1c38f",
+    clientId: "203f1145-856a-4232-83d4-a43568fba23d",
     redirectUri: "https://localhost:1234/hostedExplorer.html",
-    authority: "https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47"
+    authority: "https://login.windows-ppe.net/common"
+  },
+  cache: {
+    cacheLocation: "sessionStorage",
+    storeAuthStateInCookie: false
   }
 };
 
+// const configuration: Configuration = {
+//   auth: {
+//     clientId: "b4d07291-7936-4c8e-b413-f58b6d1c67e8",
+//     redirectUri: "https://localhost:1234/hostedExplorer.html",
+//     authority: "https://login.microsoftonline.com/907765e9-1846-4d84-ad7f-a2f5030ef5ba"
+//   },
+//   cache: {
+//     cacheLocation: "sessionStorage"
+//   }
+// };
+
 const application = new PublicClientApplication(configuration);
 
 const App: React.FunctionComponent = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
-  const { graphData, photo } = useGraphProfile();
+  const { instance } = useMsal();
+  const account = useAADAccount();
+  const photo = useGraphPhoto();
 
   const menuProps = {
     className: "mecontrolContextualMenu",
@@ -123,23 +144,18 @@ const App: React.FunctionComponent = () => {
           <div className="cosmosDBTitle">
             <span
               className="title"
-              data-bind="click: openAzurePortal, event: { keypress: onOpenAzurePortalKeyPress }"
+              onClick={() => window.open("https://portal.azure.com", "_blank")}
               tabIndex={0}
               title="Go to Azure Portal"
             >
               Microsoft Azure
             </span>
             <span className="accontSplitter" /> <span className="serviceTitle">Cosmos DB</span>
-            <img
-              className="chevronRight"
-              src="/chevron-right.svg"
-              alt="account separator"
-              data-bind="visible: isAccountActive"
-            />
-            <span
-              className="accountSwitchComponentContainer"
-              data-bind="react: accountSwitchComponentAdapter, visible: isAccountActive"
-            />
+            <img className="chevronRight" src={ChevronRight} alt="account separator" />
+            <span className="accountSwitchComponentContainer">
+              {/* <AccountSwitchComponent /> */}
+              <span className="accountNameHeader">REPLACE ME - Connection string mode</span>;
+            </span>
           </div>
           <div className="feedbackConnectSettingIcons">
             <AuthenticatedTemplate>
@@ -177,8 +193,8 @@ const App: React.FunctionComponent = () => {
                 <DefaultButton {...buttonProps}>
                   <Persona
                     imageUrl={photo}
-                    text={graphData?.displayName}
-                    secondaryText={graphData?.displayName}
+                    text={account?.name}
+                    secondaryText={account?.username}
                     showSecondaryText={true}
                     showInitialsUntilImageLoads={true}
                     initialsColor={PersonaInitialsColor.teal}
@@ -193,7 +209,10 @@ const App: React.FunctionComponent = () => {
                 className="mecontrolSigninButton"
                 text="Sign In"
                 onClick={() => {
-                  instance.loginPopup();
+                  instance.loginPopup({
+                    scopes: ["https://graph.microsoft-ppe.com/" + "/.default"],
+                    redirectUri: "https://localhost:1234/hostedExplorer.html"
+                  });
                 }}
                 styles={{
                   rootHovered: { backgroundColor: "#393939", color: "#fff" },
@@ -205,30 +224,30 @@ const App: React.FunctionComponent = () => {
           </div>
         </div>
       </header>
-      {/* <iframe
-        id="explorerMenu"
-        name="explorer"
-        className="iframe"
-        title="explorer"
-        src="explorer.html?v=1.0.1&platform=Hosted"
-        data-bind="visible: navigationSelection() === 'explorer'"
-      ></iframe> */}
+      <AuthenticatedTemplate>
+        <p>LOGGED IN!</p>
+        {/* <iframe
+          id="explorerMenu"
+          name="explorer"
+          className="iframe"
+          title="explorer"
+          src="explorer.html?v=1.0.1&platform=Portal"
+        ></iframe> */}
+      </AuthenticatedTemplate>
+      <UnauthenticatedTemplate>
+        <ConnectScreen />
+      </UnauthenticatedTemplate>
+      <ConnectScreen />
       <div data-bind="react: firewallWarningComponentAdapter" />
       <div data-bind="react: dialogComponentAdapter" />
-      <Panel
-        headerText="Select Directory"
-        isOpen={!isOpen}
-        onDismiss={dismissPanel}
-        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
-        closeButtonAriaLabel="Close"
-      >
-        <div className="directoryDropdownContainer">
+      <Panel headerText="Select Directory" isOpen={isOpen} onDismiss={dismissPanel} closeButtonAriaLabel="Close">
+        {/* <div className="directoryDropdownContainer">
           <DefaultDirectoryDropdownComponent />
         </div>
         <div className="directoryDivider" />
         <div className="directoryListContainer">
           <DirectoryListComponent />
-        </div>
+        </div> */}
       </Panel>
     </div>
   );