microsoft · zhiyuanliang-ms · Feb 6, 2025 · Feb 6, 2025 · Feb 6, 2025 · Feb 6, 2025
diff --git a/.gitignore b/.gitignore
@@ -413,3 +413,5 @@ examples/**/**/package-lock.json
 
 # playwright test result
 test-results
+
+**/public
diff --git a/examples/express-app/server.mjs b/examples/express-app/server.mjs
@@ -15,6 +15,9 @@ const requestAccessor = new AsyncLocalStorage();
 const exampleTargetingContextAccessor = {
     getTargetingContext: () => {
         const req = requestAccessor.getStore();
+        if (req === undefined) {
+            return undefined;
+        }
         // read user and groups from request query data
         const { userId, groups } = req.query;
         // return an ITargetingContext with the appropriate user info

diff --git a/examples/quote-of-the-day/.env.temlate b/examples/quote-of-the-day/.env.temlate
@@ -0,0 +1,5 @@
+# You can define environment variables in .env file and load them with 'dotenv' package.
+# This is a template of related environment variables in examples.
+# To use this file directly, please rename it to .env
+APPCONFIG_CONNECTION_STRING=<app-configuration-connection-string>
+APPLICATIONINSIGHTS_CONNECTION_STRING=<application-insights-connection-string>
diff --git a/examples/quote-of-the-day/.gitignore b/examples/quote-of-the-day/.gitignore
@@ -0,0 +1 @@
+public
diff --git a/examples/quote-of-the-day/client/index.html b/examples/quote-of-the-day/client/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quote of the Day</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/examples/quote-of-the-day/client/package.json b/examples/quote-of-the-day/client/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "quoteoftheday",
+  "type": "module",
+  "scripts": {
+    "build": "vite build --emptyOutDir"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
+    "react-icons": "5.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/examples/quote-of-the-day/client/src/App.css b/examples/quote-of-the-day/client/src/App.css
@@ -0,0 +1,198 @@
+body {
+  margin: 0;
+  font-family: 'Georgia', serif;
+}
+
+.quote-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f4f4f4;
+}
+
+.navbar {
+  background-color: white;
+  border-bottom: 1px solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  align-items: center;
+  font-family: 'Arial', sans-serif;
+  font-size: 16px;
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  margin-left: 40px;
+}
+
+.logo {
+  font-size: 1.25em;
+  text-decoration: none;
+  color: black;
+  margin-right: 20px;
+}
+
+.navbar-left nav a {
+  margin-right: 20px;
+  text-decoration: none;
+  color: black;
+  font-weight: 500;
+  font-family: 'Arial', sans-serif;
+}
+
+.navbar-right a {
+  margin-left: 20px;
+  text-decoration: none;
+  color: black;
+  font-weight: 500;
+  font-family: 'Arial', sans-serif;
+}
+
+.quote-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.quote-card {
+  background-color: white;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  max-width: 700px;
+  position: relative;
+  text-align: left;
+}
+
+.quote-card h2 {
+  font-weight: normal;
+}
+
+.quote-card blockquote {
+  font-size: 2em;
+  font-family: 'Georgia', serif;
+  font-style: italic;
+  color: #4EC2F7;
+  margin: 0 0 20px 0;
+  line-height: 1.4;
+  text-align: left;
+}
+
+.quote-card footer {
+  font-size: 0.55em;
+  color: black;
+  font-family: 'Arial', sans-serif;
+  font-style: normal;
+  text-align: left;
+  font-weight: bold;
+}
+
+.vote-container {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  gap: 0em;
+}
+
+.heart-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+  font-size: 24px;
+}
+
+.heart-button:hover {
+  background-color: #F0F0F0;
+}
+
+.heart-button:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+footer {
+  background-color: white;
+  padding-top: 10px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+}
+
+footer a {
+  color: #4EC2F7;
+  text-decoration: none;
+}
+
+.register-login-card {
+  width: 300px;
+  margin: 50px auto;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  text-align: center;
+}
+
+h2 {
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.input-container {
+  margin-bottom: 15px;
+  text-align: left;
+  width: 100%; /* Ensure the container takes the full width */
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #555;
+}
+
+input {
+  width: calc(100%); /* Add padding for both left and right */
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  box-sizing: border-box; /* Ensure padding doesn't affect the width */
+}
+
+input:focus {
+  outline: none;
+  border-color: #007bff;
+}
+
+.register-login-button {
+  width: 100%;
+  padding: 10px;
+  background-color: #007bff;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.register-login-button:hover {
+  background-color: #0056b3;
+}
+
+.error-message {
+  color: red;
+}
+
+.logout-btn {
+  margin-left: 20px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+}
diff --git a/examples/quote-of-the-day/client/src/App.jsx b/examples/quote-of-the-day/client/src/App.jsx
@@ -0,0 +1,31 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { ContextProvider } from "./pages/AppContext";
+import Layout from "./Layout";
+import Home from "./pages/Home";
+import Privacy from "./pages/Privacy";
+import Register from "./pages/Register";
+import Login from "./pages/Login";
+
+
+function App() {
+  return (
+    <ContextProvider>
+      <Router>
+      <Layout>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/privacy" element={<Privacy />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+          </Routes>
+        </Layout>
+      </Router>
+    </ContextProvider>
+  );
+}
+
+export default App;
diff --git a/examples/quote-of-the-day/client/src/Layout.jsx b/examples/quote-of-the-day/client/src/Layout.jsx
@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from "react";
+import { useContext } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { AppContext } from "./pages/AppContext";
+
+const Layout = ({ children }) => {
+  const { currentUser, logoutUser } = useContext(AppContext);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logoutUser();
+    navigate("/");
+  };
+
+  return (
+    <div className="quote-page">
+      <header className="navbar">
+        <div className="navbar-left">
+          <Link to="/" className="logo">QuoteOfTheDay</Link>
+          <nav>
+            <Link to="/">Home</Link>
+            <Link to="/privacy">Privacy</Link>
+          </nav>
+        </div>
+        <div className="navbar-right">
+          {currentUser ? 
+            (
+              <>
+                <span>Hello, {currentUser}!</span>
+                <button onClick={handleLogout} className="logout-btn">Logout</button>
+              </>
+            ) : 
+            (
+              <>
+                <Link to="/register">Register</Link>
+                <Link to="/login">Login</Link>
+              </>
+            )
+          }
+        </div>
+      </header>
+
+      <main className="quote-container">
+        {children}
+      </main>
+
+      <footer>
+        <p>&copy; 2024 - QuoteOfTheDay - <Link to="/privacy">Privacy</Link></p>
+      </footer>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/examples/quote-of-the-day/client/src/index.jsx b/examples/quote-of-the-day/client/src/index.jsx
@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./App.css";
+
+window.addEventListener("beforeunload", (event) => {
+  // clear the localStorage when the user leaves the page
+  localStorage.clear()
+});
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/quote-of-the-day/client/src/pages/AppContext.jsx b/examples/quote-of-the-day/client/src/pages/AppContext.jsx
@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from "react";
+import { createContext, useState } from "react";
+
+export const AppContext = createContext();
+
+export const ContextProvider = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState(undefined);
+
+
+  const loginUser = (user) => {
+    setCurrentUser(user);
+  };
+
+  const logoutUser = () => {
+    setCurrentUser(undefined);
+  };
+
+  return (
+    <AppContext.Provider value={{ currentUser, loginUser, logoutUser }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -413,3 +413,5 @@ examples///package-lock.json

		# playwright test result
		test-results

		**/public