added buttons to switch between samples [Issue #9] (#24)

* added buttons to switch between samples #9

* Adding sessionStorage

*  Hiding buttons once a user has logged in

Author: zmmille2

sample/src/App.js

@@ -29,51 +29,85 @@ import SampleAppButtonLaunch from './SampleAppButtonLaunch';
 import SampleAppRedirectOnLaunch from './SampleAppRedirectOnLaunch';
 
 class App extends Component {
-  
+
   constructor(props) {
     super(props);
-    
+
     this.state = {
-      userInfo: null
+      userInfo: null,
+      sampleType: null
     };
   }
 
+  componentWillMount = () => {
+    if (sessionStorage.getItem('sampleType')) {
+      this.setState({ sampleType: sessionStorage.getItem('sampleType') });
+    }
+  }
+
   userInfoCallback = (userInfo) => {
-    this.setState({userInfo});
+    this.setState({ userInfo });
+  }
+
+  handleClick = (sampleType) => {
+    this.setState({ sampleType });
+    sessionStorage.setItem('sampleType', sampleType);
   }
 
   render() {
+    let sampleBox;
+    let sampleButtons;
+
+    if (this.state.sampleType === "popup") {
+
+      sampleBox =
+        <div className="SampleBox">
+          <h2 className="SampleHeader">Button Login</h2>
+          <p>This example will launch a popup dialog to allow for authentication
+              with Azure Active Directory</p>
+          <SampleAppButtonLaunch userInfoCallback={this.userInfoCallback} />
+        </div>
+
+    } else if (this.state.sampleType === "redirect") {
+
+      sampleBox =
+        <div className="SampleBox">
+          <h2 className="SampleHeader">Automatic Redirect</h2>
+          <p>This example shows how you can use the AzureAD component to redirect
+            the login screen automatically on page load. Click the checkbox below
+            to enable the redirect and refresh your browser window.
+            </p>
+          <SampleAppRedirectOnLaunch userInfoCallback={this.userInfoCallback} userInfo={this.state.userInfo} />
+        </div>
+
+    }
+
+    if (!this.state.userInfo) {
+      sampleButtons =
+        <div>
+          <button onClick={() => this.handleClick("popup")} className="Button">Popup Sample</button>
+          {" "}
+          <button onClick={() => this.handleClick("redirect")} className="Button">Redirect Sample</button>
+        </div>
+    }
+
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Welcome to react-aad-msal-samples</h1>
+          <h1 className="App-title">Welcome to the react-aad-msal sample</h1>
         </header>
+        <br /> <br />
+        {sampleButtons}
         <div className="SampleContainer">
-          {/* TODO: Only one sample is supported right now, 
-                    Please uncomment to try the different methods. */}
-                    
-          <div className="SampleBox">
-            <h2 className="SampleHeader">Button Login</h2>
-            <p>This example will launch a popup dialog to allow for authentication
-              with Azure Active Directory</p>
-            <SampleAppButtonLaunch userInfoCallback={this.userInfoCallback} />
-          </div>
-          {/* <div className="SampleBox">
-            <h2 className="SampleHeader">Automatic Redirect</h2>
-            <p>This example shows how you can use the AzureAD component to redirect 
-              the login screen automatically on page load. Click the checkbox below 
-              to enable the redirect and refresh your browser window.
-            </p>
-            <SampleAppRedirectOnLaunch userInfoCallback={this.userInfoCallback} userInfo={this.state.userInfo}/>
-          </div> */}
+          {sampleBox}
           <div className="SampleBox">
             <h2 className="SampleHeader">Authenticated Values</h2>
             <p>When logged in, this box will show your tokens and user info</p>
-            {this.state.userInfo && <div style={{wordWrap: "break-word"}}>
-            <span style={{fontWeight: "bold"}}>User Information:</span> <br />
-            <span style={{fontWeight: "bold"}}>ID Token:</span> {this.state.userInfo.jwtIdToken} <br />
-            <span style={{fontWeight: "bold"}}>Access Token:</span> {this.state.userInfo.jwtAccessToken} <br />
-            <span style={{fontWeight: "bold"}}>Username:</span> {this.state.userInfo.user.name}</div>}
+            {this.state.userInfo && <div style={{ wordWrap: "break-word" }}>
+              <span style={{ fontWeight: "bold" }}>User Information:</span> <br />
+              <span style={{ fontWeight: "bold" }}>ID Token:</span> {this.state.userInfo.jwtIdToken} <br />
+              <span style={{ fontWeight: "bold" }}>Access Token:</span> {this.state.userInfo.jwtAccessToken} <br />
+              <span style={{ fontWeight: "bold" }}>Username:</span> {this.state.userInfo.user.name}</div>}
           </div>
         </div>
       </div>