Master

src/App.js

@@ -1,25 +1,18 @@
-import logo from './logo.svg';
-import './App.css';
+import './App.css'
+import LoginForm from './components/LoginForm'
+import PublicHello from './components/PublicHello'
+import PrivateHello from './components/PrivateHello'
+import SAMLLoginForm from './components/SamlLoginForm'
+import LogoutPage from './components/LogoutPage'
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <div>
+    <LoginForm/>
+    <SAMLLoginForm/>
+    <LogoutPage/>
+    <PublicHello/>
+    <PrivateHello/>
+  </div>
 }
 
 export default App;

src/components/LoginForm.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+
+const LoginForm = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  // eslint-disable-next-line
+  const [token, setToken] = useState('');
+  const [loginSuccess, setLoginSuccess] = useState(false);
+
+  const handleUsernameChange = (event) => {
+    setUsername(event.target.value);
+  };
+
+  const handlePasswordChange = (event) => {
+    setPassword(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        username: username,
+        password: password
+      })
+    };
+
+    try {
+      const response = await fetch('http://localhost:8080/login/token', requestOptions);
+      const data = await response.json();
+      if (data.jwt) {
+        setToken(data.jwt);
+        sessionStorage.setItem('token', data.jwt);
+        console.log('JWT token:', data.jwt);
+        // Set login success state to true
+        setLoginSuccess(true);
+        // You might want to store this token in local storage or state management (Redux, Context API) for further use.
+      } else {
+        console.error('Authentication failed');
+      }
+    } catch (error) {
+      console.error('Error occurred:', error);
+    }
+
+    // Reset the form fields
+    setUsername('');
+    setPassword('');
+  };
+
+  return (
+    <div>
+      <h2>Login</h2>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="username">Username:</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={handleUsernameChange}
+          />
+        </div>
+        <div>
+          <label htmlFor="password">Password:</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={handlePasswordChange}
+          />
+        </div>
+        <button type="submit">Login</button>
+      </form>
+
+      {loginSuccess && <p>Login successful!</p>}
+    </div>
+  );
+};
+
+export default LoginForm;

src/components/LogoutPage.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+const LogoutPage = () => {
+  const [message, setMessage] = useState('');
+
+  const handleLogout = () => {
+    try {
+      // Simulate clearing session
+      sessionStorage.clear();
+
+      // Simulate a delay before redirecting after session clearance
+      setTimeout(() => {
+        setMessage('Logged out successfully.');
+        // Redirect to http://localhost:3000 after successful logout with a query parameter
+        window.location.href = 'http://localhost:3000?logout=true&session=cleared';
+      }, 200); // You can adjust the delay time as needed
+    } catch (error) {
+      setMessage('Error occurred during logout');
+      console.error(error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Logout Page</h1>
+      <button onClick={handleLogout}>Logout</button>
+      <p>{message}</p>
+    </div>
+  );
+};
+
+export default LogoutPage;

src/components/PrivateHello.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+
+const PrivateHello = () => {
+  const [response, setResponse] = useState('');
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const token = urlParams.get('token');
+
+  if (token) {
+    sessionStorage.setItem('token', token);
+  }
+
+  const fetchPrivateData = async () => {
+    const token = sessionStorage.getItem('token');
+    if (token) {
+      try {
+        const result = await fetch('http://localhost:8080/private/hello', {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`,
+          },
+          mode: 'cors', // Ensure CORS mode is explicitly set
+          credentials: 'include', // Include credentials (cookies)
+        });
+
+        if (result.ok) {
+          const data = await result.text();
+          setResponse(data);
+        } else {
+          console.error('Error fetching private data');
+        }
+      } catch (error) {
+        console.error('Error occurred:', error);
+      }
+    } else {
+      console.log('Token not found');
+    }
+  };
+
+  return (
+    <div>
+      <h2>Private Hello</h2>
+      <button onClick={fetchPrivateData}>Get Private Hello</button>
+      <p>{response}</p>
+    </div>
+  );
+};
+
+export default PrivateHello;

src/components/PublicHello.js

@@ -0,0 +1,30 @@
+// PublicHello.js
+import React, { useState } from 'react';
+
+const PublicHello = () => {
+  const [response, setResponse] = useState('');
+
+  const fetchPublicData = async () => {
+    try {
+      const result = await fetch('http://localhost:8080/public/hello');
+      if (result.ok) {
+        const data = await result.text();
+        setResponse(data);
+      } else {
+        console.error('Error fetching public data');
+      }
+    } catch (error) {
+      console.error('Error occurred:', error);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Public Hello</h2>
+      <button onClick={fetchPublicData}>Get Public Hello</button>
+      <p>{response}</p>
+    </div>
+  );
+};
+
+export default PublicHello;

src/components/SamlLoginForm.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const SAMLLoginForm = () => {
+  const handleSAMLLogin = async () => {
+    window.open('http://localhost:8080/saml2/authenticate/okta', '_blank');
+  };
+
+  return (
+    <div>
+      <h2>SAML Login</h2>
+      <button onClick={handleSAMLLogin}>Login with SAML</button>
+    </div>
+  );
+};
+
+export default SAMLLoginForm;

src/index.js

@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function