Added message for oauth upgrade

Author: kshitijrajsharma

ui/app/app.js

@@ -25,6 +25,7 @@ import Home from "./components/Home";
 import NavBar from "./components/NavBar";
 import Stats from "./components/Stats";
 import Banner from "./components/Banner";
+import Message from "./components/Message.js";
 import { requireAuth } from "./components/utils";
 
 import "@blueprintjs/core/dist/blueprint.css";
@@ -49,6 +50,7 @@ export default ({ history }) => {
         <div style={{ height: "100%" }}>
           <Auth />
           <NavBar />
+          <Message/>
           <Banner />
           <Switch>
             <Route path="/authorized" component={Authorized} />

ui/app/components/Message.js

@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+
+class Message extends Component {
+  constructor(props) {
+    super(props);
+    // Use "messageClosed" as the key to check if the message was previously closed
+    const messageClosed = localStorage.getItem("messageClosed") === "true";
+    this.state = {
+      isVisible: !messageClosed,
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ isVisible: false });
+    // When closing, set "messageClosed" in localStorage to "true"
+    localStorage.setItem("messageClosed", "true");
+  };
+
+  render() {
+    if (!this.state.isVisible) {
+      return null;
+    }
+    return (
+        <div className="banner" style={{ backgroundColor: "#ffcc00", color: "black", textAlign: "center", padding: "10px", position: "relative" }}>
+          <p>We have recently upgraded from OAuth 1.0 to 2.0. Please Logout and Login again before use!</p>
+          <button onClick={this.handleClose} style={{ position: "absolute", top: "5px", right: "10px", cursor: "pointer" }}>
+            ×
+          </button>
+        </div>
+      );
+  }
+}
+
+export default Message;